Scaffold UI testing

package.json

@@ -15,7 +15,11 @@
     "@devvit/public-api": "0.10.17-next-2024-02-26-9e49b4eeb.0",
     "@devvit/runtime-lite": "0.10.17-next-2024-02-26-9e49b4eeb.0",
     "@devvit/ui-renderer": "0.10.17-next-2024-02-26-9e49b4eeb.0",
+    "@esm-bundle/chai": "4.3.4-fix.0",
+    "@types/mocha": "10.0.6",
     "@typescript/vfs": "1.5.0",
+    "@web/dev-server-esbuild": "1.0.2",
+    "@web/test-runner": "0.18.0",
     "codemirror": "6.0.1",
     "esbuild": "0.20.1",
     "lit": "3.1.2",
@@ -93,8 +97,9 @@
     "test:format": "npm run formatter -- --check",
     "test:size": "filesize",
     "test:types:ui": "lit-analyzer --maxWarnings=0 --rules.no-invalid-css=off --rules.no-missing-element-type-definition --rules.no-unknown-event --rules.no-unknown-attribute=false --strict",
+    "test:ui": "wtr",
     "test:unit": "vitest run",
-    "test": "npm run test:format && npm run test:unit && npm run build && npm run test:types:ui && npm run test:size",
+    "test": "npm run test:format && npm run test:unit && npm run build && npm run test:size && npm run test:types:ui && npm run test:ui",
     "version": "npm test"
   },
   "type": "module",

readme.md

@@ -63,6 +63,8 @@ See [supplemental development notes](docs/development.md).
   automatically before publishing runs through this command.
 - `run test:unit`: run the unit tests. Pass `--update` to update all test
   snapshots.
+- `run test:ui`: run the user interface integration tests. Pass `--manual` to
+  inspect browser.
 - `run format`: apply lint fixes automatically where available.
 - `run build`: compile source inputs to artifacts under `dist/`.
 

src/bundler/compiler.ts

@@ -1,5 +1,5 @@
 import * as tsvfs from '@typescript/vfs'
-import ts from 'typescript'
+import * as ts from 'typescript'
 import tsd from './tsd.json' assert {type: 'json'}
 
 export const appEntrypointFilename = '/src/main.tsx'

src/elements/play-console.test.ts

@@ -0,0 +1,7 @@
+import {assert} from '@esm-bundle/chai'
+import {PlayConsole} from './play-console.js'
+
+test('tag is defined', () => {
+  const el = document.createElement('play-console')
+  assert.instanceOf(el, PlayConsole)
+})

src/elements/play-console.ts

@@ -8,8 +8,7 @@ import {
   type TemplateResult
 } from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import type {Diagnostic} from 'typescript'
-import ts from 'typescript'
+import * as ts from 'typescript'
 import type {Diagnostics} from '../types/diagnostics.js'
 import {Bubble} from '../utils/bubble.js'
 
@@ -135,7 +134,7 @@ export class PlayConsole extends LitElement {
     `
   }
 
-  tsErrRow(err: Diagnostic): TemplateResult<1> {
+  tsErrRow(err: ts.Diagnostic): TemplateResult<1> {
     const type = {0: 'Warning', 1: 'Error', 2: 'Suggestion', 3: 'Message'}[
       err.category
     ]

src/elements/play-editor-tip.ts

@@ -7,7 +7,7 @@ import {
   type TemplateResult
 } from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import ts, {displayPartsToString} from 'typescript'
+import * as ts from 'typescript'
 import type {Diagnostics} from '../types/diagnostics.js'
 
 declare global {
@@ -37,7 +37,7 @@ export class PlayEditorTip extends LitElement {
 
   protected override render(): TemplateResult | typeof nothing {
     if (!this.info) return nothing
-    const text = displayPartsToString(this.info.displayParts)
+    const text = ts.displayPartsToString(this.info.displayParts)
     const docs = []
     for (const doc of this.info.documentation ?? [])
       docs.push(html`<p>${doc.text}</p>`)

src/elements/play-editor/editor-state.ts

@@ -35,7 +35,7 @@ import {
 } from '@codemirror/view'
 import type {VirtualTypeScriptEnvironment} from '@typescript/vfs'
 import {EditorView} from 'codemirror'
-import ts from 'typescript'
+import * as ts from 'typescript'
 import {appEntrypointFilename} from '../../bundler/compiler.js'
 import {PlayEditorTip} from '../play-editor-tip.js'
 import {editorThemeExtension} from './editor-theme.js'

src/elements/play-editor/play-editor.test.ts

@@ -0,0 +1,7 @@
+import {assert} from '@esm-bundle/chai'
+import {PlayEditor} from './play-editor.js'
+
+test('tag is defined', () => {
+  const el = document.createElement('play-editor')
+  assert.instanceOf(el, PlayEditor)
+})

src/elements/test/tsconfig.json

@@ -0,0 +1,16 @@
+// TypeScript config for test code under src/elements/**/*.test.ts and
+// src/elements/test/**/*.
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    // tsc is only used for type-checking.
+    "noEmit": true,
+
+    "rootDir": "..",
+
+    "types": ["mocha"]
+  },
+  "include": ["**/*", "../**/*.test.ts"],
+  "exclude": [],
+  "references": [{"path": "../.."}]
+}

src/test/tsconfig.json

@@ -1,14 +1,16 @@
-// TypeScript config for test code under src/**/*.test.ts and src/test/**/*.
+// TypeScript config for test code under src/**/*.test.ts and src/test/**/*
+// except elements.
 {
   "extends": "../../tools/base-tsconfig.json",
   "compilerOptions": {
-    "lib": ["DOM", "ES2022"],
+    "lib": ["DOM", "ES2023"],
 
     // tsc is only used for type-checking.
     "noEmit": true,
 
     "rootDir": ".."
   },
   "include": ["**/*", "../**/*.test.ts"],
+  "exclude": ["../elements/**/*.test.ts"],
   "references": [{"path": ".."}]
 }

src/tsconfig.json

@@ -1,3 +1,4 @@
+// TypeScript config for all production code.
 {
   "extends": "../tools/base-tsconfig.json",
   "compilerOptions": {

tools/base-tsconfig.json

@@ -8,6 +8,7 @@
 
     // Maximize type checking.
     "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
     "exactOptionalPropertyTypes": true,
     "forceConsistentCasingInFileNames": true,
     "noImplicitOverride": true,
@@ -17,15 +18,17 @@
     "resolveJsonModule": true,
     "strict": true,
 
+    // Projects add types needed.
+    "types": [],
+
     // Improve compatibility with compilers that aren't type system aware.
     "isolatedModules": true,
 
     // Allow JSON type-checking and imports.
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
 
-    // to-do: this shouldn't be needed. It's set in the Devvit polyrepo's base
-    // config though which suggests an upstream issue.
+    // Assume libraries are correct.
     "skipLibCheck": true,
 
     "sourceMap": true,

tools/tsconfig.json

@@ -9,7 +9,9 @@
 
     "lib": ["ES2022"],
 
-    "rootDir": ".."
+    "rootDir": "..",
+
+    "types": ["node"]
   },
   "include": ["**/*", "../package.json", "../src/manifest.json"]
 }

tsconfig.json

@@ -3,6 +3,7 @@
   "files": [],
   "references": [
     {"path": "src"},
+    {"path": "src/elements/test"},
     {"path": "src/examples"},
     {"path": "src/test"},
     {"path": "tools"}

vitest.config.ts

@@ -1,2 +1,7 @@
 import {defineConfig} from 'vitest/config'
-export default defineConfig({test: {reporters: 'dot'}})
+export default defineConfig({
+  test: {
+    exclude: ['node_modules', 'src/elements/**/*.test.ts'],
+    reporters: 'dot'
+  }
+})

web-test-runner.config.js

@@ -0,0 +1,15 @@
+import {esbuildPlugin} from '@web/dev-server-esbuild'
+
+export default {
+  files: ['src/elements/**/*.test.ts'],
+  nodeResolve: true,
+  plugins: [
+    esbuildPlugin({ts: true, tsconfig: 'src/elements/test/tsconfig.json'})
+  ],
+  testFramework: {
+    // https://mochajs.org/api/mocha
+    config: {
+      ui: 'tdd' // // Use "test" instead of "it".
+    }
+  }
+}