From cb5e5cfbdb29628c0d830e0b48925700a6a6f68f Mon Sep 17 00:00:00 2001 From: 1aron Date: Wed, 8 Nov 2023 13:00:44 +0800 Subject: [PATCH] Update tests --- packages/css/tests/variables.test.ts | 150 +++++++++++---------------- 1 file changed, 59 insertions(+), 91 deletions(-) diff --git a/packages/css/tests/variables.test.ts b/packages/css/tests/variables.test.ts index c79a6281b..0f2c2a610 100644 --- a/packages/css/tests/variables.test.ts +++ b/packages/css/tests/variables.test.ts @@ -1,10 +1,4 @@ -/** - * @jest-environment node - */ - -import puppeteer, { Browser, ElementHandle, Page } from 'puppeteer-core' -import path from 'path' -import type { MasterCSS } from '../src' +import { initRuntime } from '../src' const variables = { first: { @@ -12,11 +6,11 @@ const variables = { '@dark': '#222222', '@light': '#333333' }, - second:{ + second: { '@dark': '#444444', '@light': '#555555' }, - third:{ + third: { '': '#666666', '@light': '#777777' }, @@ -34,99 +28,73 @@ const variables = { } } -let browser: Browser -let page: Page - -beforeAll(async () => { - browser = await puppeteer.launch({ headless: 'new', channel: 'chrome' }) - page = await browser.newPage() +beforeAll(() => { + initRuntime({ variables }) +}) - await page.evaluate(({ variables }) => window['masterCSSConfig'] = { variables }, { variables }) - await page.addScriptTag({ path: require.resolve(path.join(__dirname, '../dist/index.browser.bundle.js')) }) - await page.waitForNetworkIdle() -}, 60000) - -it('make sure not to extend variables deeply', async () => { - const first = await page.evaluate(() => window.masterCSS.config.variables?.first) - expect(first).toEqual(variables.first) -}, 60000) +it('make sure not to extend variables deeply', () => { + expect(window.masterCSS.config.variables?.first).toEqual(variables.first) +}) it('expects the variable output', async () => { - const cssText = await page.evaluate(async () => { - const p = document.createElement('p') - p.id = 'mp' - p.classList.add('bg:first') - document.body.append(p) - // eslint-disable-next-line @typescript-eslint/no-empty-function - await new Promise(resolve => setTimeout(resolve, 0)) - return window.masterCSS.text - }) - expect(cssText).toContain(':root{--first:17 17 17}.dark{--first:34 34 34}.light{--first:51 51 51}.bg\\:first{background-color:rgb(var(--first))}') -}, 60000) - -let p: ElementHandle + const p = document.createElement('p') + p.id = 'mp' + p.classList.add('bg:first') + document.body.append(p) + await new Promise(resolve => setTimeout(resolve)) + expect(window.masterCSS.text).toContain(':root{--first:17 17 17}.dark{--first:34 34 34}.light{--first:51 51 51}.bg\\:first{background-color:rgb(var(--first))}') +}) it('expects the variable output', async () => { - p = await page.$('#mp') as any - let cssText = await page.evaluate(async (p) => { - p?.classList.add( - 'bg:second', - 'b:third', - '{outline:fourth;accent:fifth}', - 'fg:second', - 'accent:sixth' - ) - // eslint-disable-next-line @typescript-eslint/no-empty-function - await new Promise(resolve => setTimeout(resolve, 0)) - return window.masterCSS.text - }, p) - // expect(cssText).toContain(':root{--first:17 17 17;--third:102 102 102;--fourth:136 136 136}.dark{--first:34 34 34;--second:68 68 68;--fourth:153 153 153;--fifth:2 34 34;--sixth:102 102 102}.light{--first:51 51 51;--second:85 85 85;--third:119 119 119;--fourth:0 0 0;--fifth:3 51 51}') - expect(cssText).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/) - expect(cssText).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/) - expect(cssText).toContain('.bg\\:second{background-color:rgb(var(--second))}') - expect(cssText).toMatch(/\:root\{[^}]*--third:102 102 102[^}]*\}/) - expect(cssText).toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/) - expect(cssText).toContain('.b\\:third{border-color:rgb(var(--third))}') - expect(cssText).toMatch(/\:root\{[^}]*--fourth:136 136 136[^}]*\}/) - expect(cssText).toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/) - expect(cssText).toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/) - expect(cssText).toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/) - expect(cssText).toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/) - expect(cssText).toContain('.\\{outline\\:fourth\\;accent\\:fifth\\}{outline-color:rgb(var(--fourth));accent-color:rgb(var(--fifth))}') - expect(cssText).toContain('.fg\\:second{color:rgb(var(--second))}') - expect(cssText).toMatch(/\.dark\{[^}]*--sixth:102 102 102[^}]*\}/) + const p = document.getElementById('mp') + p?.classList.add( + 'bg:second', + 'b:third', + '{outline:fourth;accent:fifth}', + 'fg:second', + 'accent:sixth' + ) + // eslint-disable-next-line @typescript-eslint/no-empty-function + await new Promise(resolve => setTimeout(resolve, 0)) + // expect(window.masterCSS.text).toContain(':root{--first:17 17 17;--third:102 102 102;--fourth:136 136 136}.dark{--first:34 34 34;--second:68 68 68;--fourth:153 153 153;--fifth:2 34 34;--sixth:102 102 102}.light{--first:51 51 51;--second:85 85 85;--third:119 119 119;--fourth:0 0 0;--fifth:3 51 51}') + expect(window.masterCSS.text).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/) + expect(window.masterCSS.text).toContain('.bg\\:second{background-color:rgb(var(--second))}') + expect(window.masterCSS.text).toMatch(/\:root\{[^}]*--third:102 102 102[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/) + expect(window.masterCSS.text).toContain('.b\\:third{border-color:rgb(var(--third))}') + expect(window.masterCSS.text).toMatch(/\:root\{[^}]*--fourth:136 136 136[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/) + expect(window.masterCSS.text).toContain('.\\{outline\\:fourth\\;accent\\:fifth\\}{outline-color:rgb(var(--fourth));accent-color:rgb(var(--fifth))}') + expect(window.masterCSS.text).toContain('.fg\\:second{color:rgb(var(--second))}') + expect(window.masterCSS.text).toMatch(/\.dark\{[^}]*--sixth:102 102 102[^}]*\}/) const removeClass = async (className: string) => { - cssText = await page.evaluate(async (p, className) => { - p.classList.remove(className) - await new Promise(resolve => setTimeout(resolve, 0)) - return window.masterCSS.text - }, p, className) + p?.classList.remove(className) + await new Promise(resolve => setTimeout(resolve, 0)) } await removeClass('bg:second') - expect(cssText).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/) - expect(cssText).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/) + expect(window.masterCSS.text).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/) await removeClass('b:third') - expect(cssText).not.toMatch(/\:root\{[^}]*--third:102 102 102[^}]*\}/) - expect(cssText).not.toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\:root\{[^}]*--third:102 102 102[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/) await removeClass('{outline:fourth;accent:fifth}') - expect(cssText).not.toMatch(/\:root\{[^}]*--fourth:136 136 136[^}]*\}/) - expect(cssText).not.toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/) - expect(cssText).not.toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/) - expect(cssText).not.toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/) - expect(cssText).not.toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\:root\{[^}]*--fourth:136 136 136[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/) await removeClass('fg:second') - expect(cssText).not.toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/) - expect(cssText).not.toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/) await removeClass('bg:first') - expect(cssText).not.toMatch(/\:root\{[^}]*--first:17 17 17[^}]*\}/) - expect(cssText).not.toMatch(/\.dark\{[^}]*--first:34 34 34[^}]*\}/) - expect(cssText).not.toMatch(/\.light\{[^}]*--first:51 51 51[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\:root\{[^}]*--first:17 17 17[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.dark\{[^}]*--first:34 34 34[^}]*\}/) + expect(window.masterCSS.text).not.toMatch(/\.light\{[^}]*--first:51 51 51[^}]*\}/) await removeClass('accent:sixth') - expect(cssText).toBe('') -}, 60000) - -afterAll(async () => { - await page.close() - await browser.close() -}, 60000) \ No newline at end of file + expect(window.masterCSS.text).toBe('') +}) \ No newline at end of file