Refactor Playwright tests to use init function for script injection and update test structure

Author: 1aron

Diff for: packages/runtime/e2e/complex.test.ts

@@ -2,13 +2,13 @@ import { test, expect } from '@playwright/test'
 import { readFileSync } from 'fs'
 import { dirname, resolve } from 'path'
 import { fileURLToPath } from 'url'
+import init from './init'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
 test('complex', async ({ page }) => {
-    await page.addScriptTag({ path: resolve(__dirname, '../dist/global.min.js') })
-
+    await init(page)
     /**
      * <p class="block font:bold">
      * <p class="block font:bold italic">

Diff for: packages/runtime/e2e/global-extends.test.ts

@@ -1,9 +1,5 @@
 import { test, expect } from '@playwright/test'
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+import init from './init'
 
 test('extends', async ({ page }) => {
     await page.evaluate(() => {
@@ -20,7 +16,7 @@ test('extends', async ({ page }) => {
             }]
         }
     })
-    await page.addScriptTag({ path: resolve(__dirname, '../dist/global.min.js') })
+    await init(page)
     expect(await page.evaluate(() => globalThis.masterCSSConfigs)).toBeDefined()
     expect(await page.evaluate(() => globalThis.runtimeCSS.variables.primary)).toBeDefined()
     expect(await page.evaluate(() => globalThis.runtimeCSS.variables.secondary)).toBeDefined()

Diff for: packages/runtime/e2e/init.ts

@@ -2,18 +2,16 @@ import { Config } from '@master/css'
 import { Page } from '@playwright/test'
 import { dirname, resolve } from 'path'
 import { fileURLToPath } from 'url'
-// @ts-expect-error
-import { css_beautify } from 'js-beautify/js/lib/beautify-css.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-export default async function init(page: Page, text: string, config?: Config) {
+export default async function init(page: Page, text?: string, config?: Config) {
     await page.evaluate(({ config, text }) => {
         if (config) window.masterCSSConfig = config
         const style = document.createElement('style')
         style.id = 'master'
-        style.textContent = text
+        if (text) style.textContent = text
         document.head.appendChild(style)
     }, { config, text })
     await page.addScriptTag({ path: resolve(__dirname, '../dist/global.min.js') })

Diff for: packages/runtime/e2e/keyframes.test.ts

@@ -1,12 +1,8 @@
 import { test, expect } from '@playwright/test'
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+import init from './init'
 
 test('expects the animation output', async ({ page }) => {
-    await page.addScriptTag({ path: resolve(__dirname, '../dist/global.min.js') })
+    await init(page)
     await page.evaluate(() => {
         globalThis.runtimeCSS.refresh({})
         const p = document.createElement('p')

Diff for: packages/runtime/e2e/progressive.test.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+import init from '../init'
+
+test('progressive', async ({ page }) => {
+    await init(page)
+    await page.evaluate(() => {
+        globalThis.runtimeCSS.destroy()
+    })
+    expect(await page.evaluate(() => {
+        globalThis.runtimeCSS.destroy()
+        return document.getElementById('master')
+    })).toBeDefined()
+})

Diff for: packages/runtime/e2e/progressive/basic.test.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 // @ts-expect-error
 import { css_beautify } from 'js-beautify/js/lib/beautify-css.js'
-import init from './init'
+import init from '../init'
 
 test('prerender', async ({ page }) => {
     const text = css_beautify(`

Diff for: packages/runtime/e2e/default-mode-host.test.ts renamed to packages/runtime/e2e/progressive/default-mode-host.test.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 // @ts-expect-error
 import { css_beautify } from 'js-beautify/js/lib/beautify-css.js'
-import init from './init'
+import init from '../init'
 
 test('prerender', async ({ page }) => {
     const text = css_beautify(`

Diff for: packages/runtime/e2e/default-mode.test.ts renamed to packages/runtime/e2e/progressive/default-mode.test.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 // @ts-expect-error
 import { css_beautify } from 'js-beautify/js/lib/beautify-css.js'
-import init from './init'
+import init from '../init'
 
 test('prerender', async ({ page }) => {
     const text = css_beautify(`

Diff for: packages/runtime/e2e/media-mode.test.ts renamed to packages/runtime/e2e/progressive/media-mode.test.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { dirname, resolve } from 'path'
 import { fileURLToPath } from 'url'
+import init from './init'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
@@ -34,7 +35,7 @@ const variables = {
 }
 
 test.beforeEach(async ({ page }) => {
-    await page.addScriptTag({ path: resolve(__dirname, '../dist/global.min.js') })
+    await init(page)
     await page.evaluate((variables) => globalThis.runtimeCSS.refresh({ variables }), variables)
 })
 
@@ -143,12 +144,12 @@ const expectLayers = (
     layers: {
         theme?: string
         styles?: string
-        normal?: string
+        general?: string
         keyframe?: string
     }
 ) => {
     if (layers.theme) expect(cssText).toContain(`@layer theme{${layers.theme ?? ''}}`)
     if (layers.styles) expect(cssText).toContain(`@layer styles{${layers.styles ?? ''}}`)
-    if (layers.normal) expect(cssText).toContain(`@layer general{${layers.normal ?? ''}}`)
+    if (layers.general) expect(cssText).toContain(`@layer general{${layers.general ?? ''}}`)
     if (layers.keyframe) expect(cssText).toContain(`${layers.keyframe ?? ''}`)
 }