Unit tests for classes & selectors

Author: ulyssear

jest-puppeteer.config.js

@@ -1,6 +1,6 @@
 module.exports = {
     "launch": {
-        "headless": "false"
+        "headless": "true"
     },
     "browserContext": "default"
 }

package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "concurrently": "^7.6.0",
     "jest": "^29.3.1",
-    "jest-puppeteer": "^6.2.0"
+    "jest-puppeteer": "^6.2.0",
+    "puppeteer": "^19.5.0"
   }
 }

tests/classes.test.js

@@ -0,0 +1,23 @@
+const utils = require('./utils');
+const {COLORS, onBeforeAll, onBeforeEach, assert} = utils;
+
+module.exports = describe('Classes', () => {
+    beforeAll(async () => {
+        await onBeforeAll();
+    });
+
+    beforeEach(async () => {
+        // await onBeforeEach();
+    });
+    
+    it('Simple class', async () => {
+        await assert('#example', 'background-[red]', {backgroundColor: COLORS.red});
+    });
+
+    it('Multiple classes', async () => {
+        await assert('#example', '{background-[red] color-[white]}', {
+            backgroundColor: COLORS.red,
+            color: COLORS.white
+        });
+    });
+});

tests/index.test.js

@@ -1,14 +1,85 @@
 const utils = require('./utils');
-const {COLORS, onBeforeAll, assert} = utils;
+const {COLORS, onBeforeAll, onBeforeEach, assert} = utils;
 
-describe('Selectors', () => {
-    beforeAll(onBeforeAll);
+module.exports = describe('Selectors', () => {
+    beforeAll(async () => {
+        await onBeforeAll();
+    });
+
+    beforeEach(async () => {
+        await onBeforeEach();
+    });
 
     it('Simple selector with simple class', async () => {
-        assert('#example', '[ul]:background-[red]', {});
-        const children = await page.$$('#example ul');
+        await assert('#example-second', '[ul]:background-[red]', {});
+        const children = await page.$$('#example-second ul');
+        for (const child of children) {
+            await assert(child, null, {backgroundColor: COLORS.red});
+        }
+    });
+
+    it('Simple selector with multiple classes', async () => {
+        await assert('#example-second', '[ul]:background-[red] color-[white]', {});
+        const children = await page.$$('#example-second ul');
+        for (const child of children) {
+            await assert(child, null, {
+                backgroundColor: COLORS.red,
+                color: COLORS.white
+            });
+        }
+    });
+
+    it('Selector ">" with simple class', async () => {
+        await assert('#example-second', '[> ul]:display-[flex]', {});
+        const children = await page.$$('#example-second > ul');
+        for (const child of children) {
+            await assert(child, null, {display: 'flex'});
+        }
+    });
+
+    it('Selector ">" with multiple classes', async () => {
+        await assert('#example-second', '[> ul]:{display-[flex] flex-direction-[row]}', {});
+        const children = await page.$$('#example-second > ul');
+        for (const child of children) {
+            await assert(child, null, {
+                display: 'flex',
+                flexDirection: 'row'
+            });
+        }
+    });
+
+    it('Selector "+" with simple class', async () => {
+        await assert('#example', '[+ div]:justify-content-[space-between]', {});
+        const element = await page.$('#example + div');
+        await assert(element, null, {justifyContent: 'space-between'});
+    });
+
+    it('Selector "+" with multiple classes', async () => {
+        await assert('#example', '[+ div]:{justify-content-[space-between] align-items-[center]}', {});
+        const element = await page.$('#example + div');
+        await assert(element, null, {
+            justifyContent: 'space-between',
+            alignItems: 'center'
+        });
+    });
+
+    it('Selector "~" with simple class', async () => {
+        await assert('#example', '[~ div]:align-items-[center]', {});
+        const children = await page.$$('#example ~ div');
+        for (const child of children) {
+            await assert(child, null, {alignItems: 'center'});
+        }
+    });
+
+    it('Selector "~" with multiple classes', async () => {
+        await assert('#example', '[~ div]:{align-items-[center] flex-direction-[row]}', {});
+        const children = await page.$$('#example ~ div');
         for (const child of children) {
-            assert(child, null, {backgroundColor: COLORS.red});
+            await assert(child, null, {
+                alignItems: 'center',
+                flexDirection: 'row'
+            });
         }
     });
+    
 });

tests/selectors.test.js

@@ -16,6 +16,8 @@ const COLORS = {
 };
 
 async function onBeforeAll () {
+    jest.setTimeout(100000)
+    
     const url = 'file://' + path.join(__dirname, 'index.html');
 
     await page.goto(url);
@@ -26,6 +28,10 @@ async function onBeforeAll () {
     });
 }
 
+async function onBeforeEach() {
+    await page.reload();
+}
+
 async function assert(element, classes, styles = {}) {
     if ('string' !== typeof element) {
         return assert_element(element, classes, styles);
@@ -42,7 +48,7 @@ async function assert(element, classes, styles = {}) {
     }, selector, classes);
 
     for (const style in styles) {
-        expect(computedStyle[style]).toBe(styles[style]);
+        await expect(computedStyle[style]).toBe(styles[style]);
     }
 }
 
@@ -57,7 +63,7 @@ async function assert_element(element, styles, classes = null) {
     }, element, classes);
 
     for (const style in styles) {
-        expect(computedStyle[style]).toBe(styles[style]);
+        await expect(computedStyle[style]).toBe(styles[style]);
     }
 }
 
@@ -66,5 +72,6 @@ module.exports = {
     COLORS,
     // getComputedStyle,
     onBeforeAll,
+    onBeforeEach,
     assert
 };