Add unit tests

.github/workflows/ci.yml

@@ -42,8 +42,16 @@ jobs:
         run: pnpm playwright install chromium
         working-directory: tests
 
-      - name: Test
-        run: pnpm test
+      - name: Test unit
+        run: pnpm test:unit
+
+      - name: Test e2e dev
+        run: pnpm test:dev
+        working-directory: tests
+
+      - name: Test e2e build
+        run: pnpm test:build
+        working-directory: tests
 
       - name: Archive test results
         if: failure()

.gitignore

@@ -1,12 +1,15 @@
+# global
 node_modules
 dist
-tests/test-results
 
-# ignore for prettier
+# playground
 .output
 .docusaurus
 .next
 .nuxt
 .svelte-kit
 out
-build
+build
+
+# playwright
+tests/test-results

.prettierignore

@@ -0,0 +1,18 @@
+# global
+node_modules
+dist
+
+# playground
+.output
+.docusaurus
+.next
+.nuxt
+.svelte-kit
+out
+build
+
+# playwright
+tests/test-results
+
+# extend gitignore
+fixtures

package.json

@@ -3,15 +3,19 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "test": "pnpm --dir tests test",
-    "lint": "prettier \"**/*.{js,ts,jsx,css,md,vue,svelte,astro}\" --check --cache --ignore-path .gitignore",
-    "format": "prettier \"**/*.{js,ts,jsx,css,md,vue,svelte,astro}\" --write --cache --ignore-path .gitignore"
+    "test": "pnpm test:unit && pnpm test:e2e",
+    "test:unit": "pnpm --filter \"!@whyframe/tests\" run test",
+    "test:unit-update": "pnpm test:unit --update",
+    "test:e2e": "pnpm --dir tests test",
+    "lint": "prettier \"**/*.{js,ts,jsx,css,md,vue,svelte,astro}\" --check --cache",
+    "format": "prettier \"**/*.{js,ts,jsx,css,md,vue,svelte,astro}\" --write --cache"
   },
   "devDependencies": {
     "prettier": "^2.7.1",
     "prettier-plugin-astro": "^0.5.5",
     "prettier-plugin-svelte": "^2.7.1",
-    "svelte": "^3.50.1"
+    "svelte": "^3.50.1",
+    "uvu": "^0.5.6"
   },
   "packageManager": "[email protected]",
   "pnpm": {

packages/svelte/package.json

@@ -30,6 +30,9 @@
     "whyframe",
     "svelte"
   ],
+  "scripts": {
+    "test": "uvu tests"
+  },
   "peerDependencies": {
     "@whyframe/core": "workspace:^0.1.0",
     "vite": "^3.0.0"
@@ -42,6 +45,7 @@
   "devDependencies": {
     "@whyframe/core": "workspace:*",
     "svelte": "^3.50.1",
+    "uvu": "^0.5.6",
     "vite": "^3.1.4"
   }
 }

packages/svelte/tests/fixtures/simple/input.svelte

@@ -0,0 +1 @@
+<iframe data-why>test</iframe>

packages/svelte/tests/fixtures/simple/output.svelte

@@ -0,0 +1 @@
+<iframe src={"/__whyframe.html"} data-why-id={"/@id/__whyframe:entry-673ba768.js"} data-why></iframe>

packages/svelte/tests/shared.test.js

@@ -0,0 +1,40 @@
+import path from 'node:path'
+import * as assert from 'uvu/assert'
+import { whyframe } from '@whyframe/core'
+import { addAttrs, parseAttrToString, transform } from '../src/shared.js'
+import {
+  assertFixture,
+  getFixtures,
+  group,
+  groupAsync
+} from '../../../scripts/uvuUtils.js'
+import { fileURLToPath } from 'node:url'
+
+/** @type {() => import('@whyframe/core').Api} */
+const api = () => whyframe()[0].api
+
+await groupAsync('transform', async (test) => {
+  const fixturesDir = fileURLToPath(new URL('./fixtures/', import.meta.url))
+  const fixtures = getFixtures(fixturesDir, 'input.svelte')
+  for await (const { id, code } of fixtures) {
+    const shortDirName = path.basename(path.dirname(id))
+    test(`fixture: ${shortDirName}`, async () => {
+      const result = transform(code, id, api())
+      assert.ok(result)
+      const outputId = id.replace(/input\.svelte$/, 'output.svelte')
+      await assertFixture(result.code, outputId)
+    })
+  }
+})
+
+group('addAttrs', (test) => {
+  test('add attrs to element', () => {
+    // todo
+  })
+})
+
+group('parseAttrToString', (test) => {
+  test('parse attrs to string', () => {
+    // todo
+  })
+})

scripts/uvuUtils.js

@@ -0,0 +1,76 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { suite } from 'uvu'
+import * as assert from 'uvu/assert'
+
+export const isUpdate = process.argv.slice(2).includes('--update')
+
+/**
+ * Nicer test nesting API.
+ * https://github.com/lukeed/uvu/issues/43
+ * @param {string} name
+ * @param {(test: import('uvu').Test) => void} fn
+ */
+export function group(name, fn) {
+  const s = suite(name)
+  fn(s)
+  s.run()
+}
+
+/**
+ * Nicer test nesting API.
+ * https://github.com/lukeed/uvu/issues/43
+ * @param {string} name
+ * @param {(test: import('uvu').Test) => Promise<void>} fn
+ */
+export async function groupAsync(name, fn) {
+  const s = suite(name)
+  await fn(s)
+  s.run()
+}
+
+/**
+ * @param {string} actual
+ * @param {string} outputFile
+ * @param {assert.Message} [msg]
+ */
+export async function assertFixture(actual, outputFile, msg) {
+  if (isUpdate) {
+    await fs.writeFile(outputFile, actual)
+  } else {
+    let expects
+    try {
+      expects = await fs.readFile(outputFile, 'utf-8')
+    } catch (e) {
+      throw new Error(
+        `Unable to read fixture: ${outputFile}. Did you forget to run "pnpm test:unit-update"?`,
+        { cause: e }
+      )
+    }
+    assert.fixture(actual, expects, msg)
+  }
+}
+
+/**
+ * @param {string} fixturesDir
+ * @param {string} inputFileName
+ */
+export async function* getFixtures(fixturesDir, inputFileName) {
+  const dirents = await fs.readdir(fixturesDir, { withFileTypes: true })
+  for (const dirent of dirents) {
+    if (dirent.isDirectory()) {
+      try {
+        const inputFile = path.join(
+          fixturesDir,
+          `./${dirent.name}/${inputFileName}`
+        )
+        yield {
+          id: inputFile,
+          code: await fs.readFile(inputFile, 'utf-8')
+        }
+      } catch {
+        continue
+      }
+    }
+  }
+}