8000 Utils for unit tests · ulyssear/css-in-js-in-html@76e581c · GitHub
[go: up one dir, main page]
Skip to content

Commit 76e581c

Browse files
ulyssearulyssear
committed
Utils for unit tests
1 parent 4fd5e17 commit 76e581c

File tree

3 files changed

+94
-73
lines changed
  • utils.js

    • 3 files changed

    +94
    -73
    lines changed

    ‎tests/index.test.js

    Lines changed: 10 additions & 73 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,80 +1,17 @@
    1-
    const path = require('path');
    1+
    const utils = require('./utils');
    2+
    const {COLORS, onBeforeAll, assert} = utils;
    23

    3-
    async function getComputedStyle(element, pseudoElement = null) {
    4-
    return page.evaluate((element, pseudoElement) => {
    5-
    const style = window.getComputedStyle(element, pseudoElement);
    6-
    return JSON.parse(JSON.stringify(style));
    7-
    }, element, pseudoElement);
    8-
    }
    4+
    describe('Classes', () => {
    5+
    beforeAll(onBeforeAll);
    96

    10-
    async function getClasses(element) {
    11-
    return page.evaluate((element) => element.className, element);
    12-
    }
    13-
    14-
    async function sleep(ms) {
    15-
    return new Promise(resolve => setTimeout(resolve, ms));
    16-
    }
    17-
    18-
    const COLORS = {
    19-
    red: 'rgb(255, 0, 0)',
    20-
    green: 'rgb(0, 128, 0)',
    21-
    blue: 'rgb(0, 0, 255)',
    22-
    };
    23-
    24-
    const EXAMPLES = {
    25-
    first: '.example',
    26-
    second: '.example:nth-of-type(2)'
    27-
    }
    28-
    29-
    describe('CSS-in-JS-in-HTML process', () => {
    30-
    31-
    beforeAll(async () => {
    32-
    const url = 'file://' + path.join(__dirname, 'index.html');
    33-
    34-
    await page.goto(url);
    35-
    await page.addScriptTag({ path: path.join(__dirname, '..', 'build', 'index.min.js') });
    36-
    37-
    await page.addScriptTag({
    38-
    content: `CSS_IN_JS_IN_HTML.init(document, null);`
    39-
    });
    40-
    });
    41-
    42-
    describe('Classes only', () => {
    43-
    it('class "background-[red]" should be "background" as "red"', async () => {
    44-
    const element = await page.evaluate( async () => {
    45-
    const element = document.querySelector('#example');
    46-
    element.className = 'background-[red]';
    47-
    await Promise.resolve(setTimeout(() => {}, 1000));
    48-
    return JSON.parse(JSON.stringify(getComputedStyle(element)));
    49-
    });
    50-
    expect(element.backgroundColor).toBe(COLORS.red);
    51-
    });
    52-
    53-
    it('class "background-[green] color-[blue]" should be "background" as "green" and "color" as "blue"', async () => {
    54-
    const element = await page.evaluate( async () => {
    55-
    const element = document.querySelector('#example');
    56-
    element.className = 'background-[green] color-[blue]';
    57-
    await Promise.resolve(setTimeout(() => {}, 1000));
    58-
    return JSON.parse(JSON.stringify(getComputedStyle(element)));
    59-
    });
    60-
    expect(element.backgroundColor).toBe(COLORS.green);
    61-
    expect(element.color).toBe(COLORS.blue);
    62-
    });
    7+
    it('Simple class', async () => {
    8+
    await assert('#example', 'background-[red]', {backgroundColor: COLORS.red});
    639
    });
    6410

    65-
    describe('Selectors + Classes', () => {
    66-
    it('class "[ul]:display-[flex]" should be "display" as "flex" for every "ul" element in child tree', async () => {
    67-
    const is_every_ul_flex = await page.evaluate( async () => {
    68-
    const element = document.querySelector('#example-second');
    69-
    element.className = '[ul]:display-[flex]';
    70-
    await Promise.resolve(setTimeout(() => {}, 1000));
    71-
    const every_ul = element.querySelectorAll('ul');
    72-
    const check_every_ul = Array.from(every_ul).every((ul) => {
    73-
    return ul.style.display === 'flex';
    74-
    });
    75-
    return check_every_ul;
    76-
    });
    77-
    expect(is_every_ul_flex).toBe(true);
    11+
    it('Multiple classes', async () => {
    12+
    await assert('#example', 'background-[red] color-[white]', {
    13+
    backgroundColor: COLORS.red,
    14+
    color: COLORS.white
    7815
    });
    7916
    });
    8017
    });

    ‎tests/selectors.test.js

    Lines changed: 14 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,14 @@
    1+
    const utils = require('./utils');
    2+
    const {COLORS, onBeforeAll, assert} = utils;
    3+
    4+
    describe('Selectors', () => {
    5+
    beforeAll(onBeforeAll);
    6+
    7+
    it('Simple selector with simple class', async () => {
    8+
    assert('#example', '[ul]:background-[red]', {});
    9+
    const children = await page.$$('#example ul');
    10+
    for (const child of children) {
    11+
    assert(child, null, {backgroundColor: COLORS.red});
    12+
    }
    13+
    });
    14+
    });

    ‎tests/utils.js

    Lines changed: 70 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,70 @@
    1+
    const path = require('path')
    2+
    3+
    // async function getComputedStyle(element, pseudoElement = null) {
    4+
    // return page.evaluate((element, pseudoElement) => {
    5+
    // const style = window.getComputedStyle(element, pseudoElement);
    6+
    // return JSON.parse(JSON.stringify(style));
    7+
    // }, element, pseudoElement);
    8+
    // }
    9+
    10+
    const COLORS = {
    11+
    red: 'rgb(255, 0, 0)',
    12+
    green: 'rgb(0, 128, 0)',
    13+
    blue: 'rgb(0, 0, 255)',
    14+
    white: 'rgb(255, 255, 255)',
    15+
    black: 'rgb(0, 0, 0)'
    16+
    };
    17+
    18+
    async function onBeforeAll () {
    19+
    const url = 'file://' + path.join(__dirname, 'index.html');
    20+
    21+
    await page.goto(url);
    22+
    await page.addScriptTag({ path: path.join(__dirname, '..', 'build', 'index.min.js') });
    23+
    24+
    await page.addScriptTag({
    25+
    content: `CSS_IN_JS_IN_HTML.init(document, null);`
    26+
    });
    27+
    }
    28+
    29+
    async function assert(element, classes, styles = {}) {
    30+
    if ('string' !== typeof element) {
    31+
    return assert_element(element, classes, styles);
    32+
    }
    33+
    34+
    const selector = element;
    35+
    36+
    const computedStyle = await page.evaluate( async (selector, classes) => {
    37+
    const element = document.querySelector(selector);
    38+
    element.className = classes;
    39+
    await Promise.resolve(setTimeout(() => {}, 1000));
    40+
    const computedStyle = await getComputedStyle(element);
    41+
    return JSON.parse(JSON.stringify(computedStyle));
    42+
    }, selector, classes);
    43+
    44+
    for (const style in styles) {
    45+
    expect(computedStyle[style]).toBe(styles[style]);
    46+
    }
    47+
    }
    48+
    49+
    async function assert_element(element, styles, classes = null) {
    50+
    const computedStyle = await page.evaluate( async (element, classes) => {
    51+
    if (classes) {
    52+
    element.className = classes;
    53+
    await Promise.resolve(setTimeout(() => {}, 1000));
    54+
    }
    55+
    const computedStyle = await getComputedStyle(element);
    56+
    return JSON.parse(JSON.stringify(computedStyle));
    57+
    }, element, classes);
    58+
    59+
    for (const style in styles) {
    60+
    expect(computedStyle[style]).toBe(styles[style]);
    61+
    }
    62+
    }
    63+
    64+
    65+
    module.exports = {
    66+
    COLORS,
    67+
    // getComputedStyle,
    68+
    onBeforeAll,
    69+
    assert
    70+
    };

    0 commit comments

    Comments
     (0)
    0