Initial QUnit integration

sukima · Sep 16, 2023 · 1103909 · 1103909
1 parent d769d86
commit 1103909
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 2 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -7,13 +7,16 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "clean": "rm -rf dist"
   },
   "dependencies": {
     "lit": "^2.1.3"
   },
   "devDependencies": {
     "@types/node": "^17.0.17",
+    "@types/qunit": "^2.19.6",
+    "qunit": "^2.19.4",
     "typescript": "^5.2.2",
     "vite": "^2.8.1"
   }

diff --git a/tests/helpers/index.ts b/tests/helpers/index.ts
@@ -0,0 +1,40 @@
+import * as QUnit from 'qunit';
+
+interface TestContext {
+  fixture: HTMLElement | null;
+  container: HTMLElement | null;
+  pauseTest(): Promise<void>;
+}
+
+declare global {
+  interface Window { resumeTest?(): void; }
+}
+
+export function getContainer() {
+  let container = document.querySelector('#testing-container');
+  if (container) return container;
+  throw new ReferenceError('Missing #testing-container div');
+}
+
+export function pauseTest(): Promise<void> {
+  QUnit.assert.timeout(-1);
+  console.info('Testing paused. Use `resumeTest()` to continue.');
+  return new Promise(resolve => {
+    window.resumeTest = () => {
+      resolve();
+      window.resumeTest = undefined;
+    };
+  });
+}
+
+export function setupTest(hooks: QUnit['hooks']) {
+  hooks.beforeEach(function (this: TestContext) {
+    this.fixture = document.getElementById('qunit-fixture');
+    this.container = document.getElementById('testing-container');
+    this.pauseTest = pauseTest;
+  });
+}
+
+export function render(innerHTML: string) {
+  getContainer().innerHTML = innerHTML;
+}
diff --git a/tests/index.html b/tests/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lit App Lit Element Simple Starter Kit</title>
+    <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
+    <link rel="stylesheet" href="./test-container.css">
+    <script type="module">
+        import './test-helper';
+        import './integration/lit-app-test';
+    </script>
+</head>
+<body>
+<div id="testing-container"></div>
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+</body>
+</html>
diff --git a/tests/integration/lit-app-test.ts b/tests/integration/lit-app-test.ts
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest, render } from '../helpers';
+
+module('Integration | Component | lit-app', function (hooks) {
+  setupTest(hooks);
+
+  test('it works', function (assert) {
+    render(`<lit-app id="foobar"></lit-app>`);
+    assert.ok(document.querySelector('#foobar'));
+  });
+});
diff --git a/tests/test-container.css b/tests/test-container.css
@@ -0,0 +1,75 @@
+/* Override QUnit's default styles that place #qunit-fixture outside the viewport */
+#qunit-fixture {
+  position: relative;
+  left: auto;
+  top: auto;
+  width: auto;
+  height: auto;
+}
+
+#testing-container {
+  position: fixed;
+
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
+    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
+  background-position: 0 0, 10px 10px;
+  background-size: 20px 20px;
+
+  bottom: 0;
+  right: 0;
+  width: 640px;
+  height: 384px;
+  overflow: auto;
+  z-index: 98;
+  border: 1px solid #ccc;
+  margin: 0 auto;
+
+  /* Prevent leaking position fixed elements outside the testing container */
+  transform: translateZ(0);
+}
+
+#testing-container.testing-container-full-screen {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  z-index: 98;
+  border: none;
+  right: 0;
+}
+
+#testing-container.testing-container-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#testing-container > :first-child {
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: top left;
+}
+
+.testing-container-full-screen > :first-child {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: scale(1);
+}
+
+#qunit-tests > li:last-child {
+  margin-bottom: 384px;
+}
+
+@supports (display: flex) or (display: -webkit-box) {
+  @media (min-height: 500px) {
+    #qunit-tests {
+      overflow: auto;
+    }
+
+    #testing-container {
+      right: 30px;
+    }
+  }
+}
diff --git a/tests/test-helper.ts b/tests/test-helper.ts
@@ -0,0 +1,9 @@
+import * as QUnit from 'qunit';
+import { getContainer } from './helpers';
+
+QUnit.config.urlConfig.push({ id: 'nocontainer', label: 'Hide container' });
+QUnit.config.urlConfig.push({ id: 'devmode', label: 'Development mode' });
+
+let container = getContainer();
+container.classList.toggle('testing-container-full-screen', Boolean(QUnit.urlParams.devmode));
+container.classList.toggle('testing-container-hidden', Boolean(QUnit.urlParams.nocontainer));
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,3 +1,25 @@
+import { resolve } from 'path';
 import { defineConfig } from "vite";
 
-export default defineConfig({});
+const productionConfig = {};
+
+const developmentConfig = {
+  build: {
+    rollupOptions: {
+      external: ['qunit'],
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        tests: resolve(__dirname, 'tests/index.html'),
+      },
+      output: {
+        globals: {
+          qunit: 'QUnit',
+        },
+      },
+    },
+  },
+};
+
+export default defineConfig(({ mode }) => {
+  return mode === 'production' ? productionConfig : developmentConfig;
+});