🧪 test(none): improve e2e readability

sources/@repo/constants/index.js

@@ -10,7 +10,7 @@ export const root = (
   .split(`sources/`)
   .shift()
 
-export const path = (...path) => join(root, ...path)
+export const path = (...path) => path.length ? join(root, ...path) : root
 
 export const ROOT_MANIFEST_PATH = path(`package.json`)
 export const STORAGE_PATH = path(`storage`)

tests/e2e/__snapshots__/babel.test.ts.snap

@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`html output of examples/babel > should rebuild on change > rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box 1`] = `"rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box"`;
+exports[`html output of examples/babel > should have expected default state > rgb(88, 19, 213) none repeat scroll 0% 0% / auto padding-box border-box 1`] = `"rgb(88, 19, 213) none repeat scroll 0% 0% / auto padding-box border-box"`;
 
-exports[`html output of examples/babel > should rebuild on change > rgb(88, 19, 213) none repeat scroll 0% 0% / auto padding-box border-box 1`] = `"rgb(88, 19, 213) none repeat scroll 0% 0% / auto padding-box border-box"`;
+exports[`html output of examples/babel > should have expected default state 1`] = `undefined`;
+
+exports[`html output of examples/babel > should update css modules > rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box 1`] = `"rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box"`;

tests/e2e/__snapshots__/basic.test.ts.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html output of examples/basic > should have expected default state 1`] = `
+"import './styles.css'
+
+document.querySelector('#root')?.classList.add('init')
+
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
+"
+`;

tests/e2e/__snapshots__/react.test.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html output of examples/react > should have expected default state 1`] = `
+"import logo from './logo.svg'
+
+export const App = () => {
+  return (
+    <div className="App">
+      <div className="header">
+        <img src={logo} className="logo" alt="logo" />
+        Edit <code>src/components/App.js</code> and save to reload
+      </div>
+    </div>
+  )
+}
+"
+`;

tests/e2e/__snapshots__/swc.test.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html output of examples/swc > should have expected default state 1`] = `
+"import './styles.css'
+
+document.querySelector('#root')?.classList.add('init')
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(console.error)
+}
+"
+`;

tests/e2e/babel.test.ts

@@ -1,89 +1,84 @@
-import fs from 'fs-jetpack'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { ElementHandle } from 'playwright'
+import {afterAll, beforeAll, describe, expect, it} from 'vitest'
 
-import * as fixture from './helpers'
+import {close, page, path, read, setup, update} from './runner/index.js'
 
 describe(`html output of examples/babel`, () => {
-  it(`should rebuild on change`, async () => {
-    try {
-      const {page} = await fixture.setupTest(`babel`)
+  let title: string | undefined
+  let original: string | undefined
+  let root: ElementHandle<any> | null
 
-      const title = await page.title()
-      expect(title).toBe(`@examples/babel`)
-
-      const root = await page.$(`#root`)
-      expect(root).toBeTruthy()
+  beforeAll(async () => {
+    await setup(`babel`)
+    original = await read(path(`src`, `index.js`))
+    title = await page.title()
+    root = await page.$(`#root`)
+  })
 
-      expect(
-        await root?.evaluate(el =>
-          window.getComputedStyle(el).getPropertyValue(`background`),
-        ),
-      ).toMatchSnapshot(
-        `rgb(88, 19, 213) none repeat scroll 0% 0% / auto padding-box border-box`,
-      )
+  afterAll(close)
 
-      await updateCss()
-      await page.waitForTimeout(12000)
+  it(`should have expected default state`, async () => {
+    expect(original).toMatchSnapshot()
+    expect(title).toBe(`@examples/babel`)
 
-      expect(
-        await root?.evaluate(el =>
-          window.getComputedStyle(el).getPropertyValue(`background`),
-        ),
-      ).toMatchSnapshot(
-        `rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box`,
-      )
+    expect(
+      await root?.evaluate(el =>
+        window.getComputedStyle(el).getPropertyValue(`background`),
+      ),
+    ).toMatchSnapshot(
+      `rgb(88, 19, 213) none repeat scroll 0% 0% / auto padding-box border-box`,
+    )
 
-      await updateJs()
-      await page.waitForTimeout(12000)
+    expect(await page.$(`.updated`)).toBeFalsy()
+  })
 
-      expect(await page.$(`.updated`)).toBeTruthy()
-    } catch (error) {
-      await fixture.close()
-      throw error
-    }
+  it(`should update js modules`, async () => {
+    await update(
+      path(`src`, `app.js`),
+      `\
+  import '@src/app.css'
 
-    await fixture.close()
-  })
-})
+  document.querySelector('.init')?.classList.add('updated')
 
-const updateCss = async () =>
-  await fs.writeAsync(
-    fixture.toPath(`babel`, `src`, `app.css`),
-    `\
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
+  if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error)
+  `,
+    )
 
-#root{
-  align-items: center;
-  background: rgb(0,0,0);
-  color: white;
-  display: flex;
-  font-family: sans-serif;
-  height: 100vh;
-  justify-content: center;
-  letter-spacing: 0.2em;
-  text-align: center;
-  text-transform: uppercase;
-  width: 100vw;
-}
-`,
-  )
+    expect(await page.$(`.updated`)).toBeTruthy()
+  })
 
-const updateJs = async () =>
-  await fs.writeAsync(
-    fixture.toPath(`babel`, `src`, `app.js`),
-    `\
-import '@src/app.css'
+  it(`should update css modules`, async () => {
+    await update(
+      path(`src`, `app.css`),
+      `\
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+  }
 
-document.querySelector('.init')?.classList.add('updated')
+  #root{
+    align-items: center;
+    background: rgb(0,0,0);
+    color: white;
+    display: flex;
+    font-family: sans-serif;
+    height: 100vh;
+    justify-content: center;
+    letter-spacing: 0.2em;
+    text-align: center;
+    text-transform: uppercase;
+    width: 100vw;
+  }
+  `,
+    )
 
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error)
-`,
-  )
+    expect(
+      await root?.evaluate(el =>
+        window.getComputedStyle(el).getPropertyValue(`background`),
+      ),
+    ).toMatchSnapshot(
+      `rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box`,
+    )
+  })
+})

tests/e2e/basic.test.ts

@@ -1,38 +1,34 @@
-import fs from 'fs-jetpack'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import {afterAll, beforeAll, describe, expect, it} from 'vitest'
 
-import * as fixture from './helpers'
+import {close, page, path, read, setup, update} from './runner/index.js'
 
 describe(`html output of examples/basic`, () => {
-  it(`should rebuild on change`, async () => {
-    try {
-      const {page} = await fixture.setupTest(`basic`)
+  let original: string | undefined
 
-      await update()
-      await page.waitForTimeout(12000)
+  beforeAll(async () => {
+    await setup(`basic`)
+    original = await read(`src`, `index.js`)
+  })
 
-      expect(await page.$(`.hot`)).toBeTruthy()
-    } catch (error) {
-      await fixture.close()
-      throw error
-    }
+  afterAll(close)
 
-    await fixture.close()
+  it(`should have expected default state`, async () => {
+    expect(original).toMatchSnapshot()
   })
-})
 
-const update = async () =>
-  await fs.writeAsync(
-    fixture.toPath(`basic`, `src`, `index.js`),
-    `\
-import './styles.css'
+  it(`should rebuild on change`, async () => {
+    await update(
+      path(`src`, `index.js`),
+      `\
+    import './styles.css'
 
-document.querySelector('#root').classList.add('hot')
+    document.querySelector('#root').classList.add('hot')
 
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error)
-`,
-  )
+    if (import.meta.webpackHot) {
+      import.meta.webpackHot.accept(console.error)
+    }`,
+    )
+
+    expect(await page.$(`.hot`)).toBeTruthy()
+  })
+})

tests/e2e/react.test.ts

@@ -1,71 +1,61 @@
-import {env} from 'node:process'
+import {afterAll, beforeAll, describe, expect, it} from 'vitest'
 
-import {ExecaReturnValue} from 'execa'
-import fs from 'fs-jetpack'
-import {Browser, chromium, Page} from 'playwright'
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-} from 'vitest'
-
-import * as fixture from './helpers'
+import {close, page, path, read, setup, update} from './runner/index.js'
 
 describe(`html output of examples/react`, () => {
-  let browser: Browser
-  let page: Page
-  let dev: Promise<ExecaReturnValue>
-  let port: number
+  let original: string | undefined
 
   beforeAll(async () => {
-    port = await fixture.install(`react`)
+    await setup(`react`).then(({page}) => page)
+    original = await read(`src`, `components`, `App.js`)
   })
 
-  beforeEach(async () => {
-    dev = fixture.run(`react`, port)
-
-    browser = await chromium.launch({
-      headless: !!env.CI,
-    })
-    if (!browser) throw new Error(`Browser could not be launched`)
+  afterAll(close)
 
-    page = await browser?.newPage()
-    if (!page) throw new Error(`Page could not be created`)
+  it(`should have expected default state`, async () => {
+    expect(original).toMatchSnapshot()
 
-    await page?.waitForTimeout(5000)
-  })
+    expect(
+      await page
+        .$(`.header img`)
+        .then(async handle => await handle?.getAttribute(`class`)),
+    ).toBe(`logo`)
 
-  afterEach(async () => {
-    await page?.close()
-    await browser?.close()
+    expect(
+      await page
+        .$(`.header .target`)
+        .then(async handle => await handle?.innerHTML()),
+    ).toBeUndefined()
   })
 
   it(`should rebuild on change`, async () => {
-    await page?.goto(fixture.url(port))
-
-    expect(await page.$(`#root`)).toBeTruthy()
-
-    await fs.writeAsync(
-      fixture.toPath(`react`, `src`, `components`, `App.js`),
+    await update(
+      path(`src`, `components`, `App.js`),
       `\
-import logo from './logo.svg'
-
-export const App = () => {
-  return (
-    <div className="App">
-      <div className="header">
-        <img src={logo} className="logo" alt="logo" />
-        <div className="target">Noice.</div>
-      </div>
-    </div>
-  )
-}`,
+      import logo from './logo.svg'
+
+      export const App = () => {
+        return (
+          <div className="App">
+            <div className="header">
+              <img src={logo} className="logo" alt="logo" />
+              <div className="target">Noice.</div>
+            </div>
+          </div>
+        )
+      }`,
     )
-    await page.waitForTimeout(12000)
 
-    expect(await page.$(`.target`)).toBeTruthy()
+    expect(
+      await page
+        .$(`.header img`)
+        .then(async handle => await handle?.getAttribute(`class`)),
+    ).toBe(`logo`)
+
+    expect(
+      await page
+        .$(`.header .target`)
+        .then(async handle => await handle?.innerHTML()),
+    ).toBe(`Noice.`)
   })
 })