Add UI tests for most elements

src/elements/play-button.test.ts

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

src/elements/play-dropdown-menu.test.ts

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

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

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

src/elements/play-export-dialog.test.ts

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

src/elements/play-list-item.test.ts

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

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

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

src/elements/play-new-pen-button.test.ts

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

src/elements/play-pen-footer.test.ts

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

src/elements/play-pen-header.test.ts

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

src/elements/play-pen/play-pen.ts

@@ -18,12 +18,12 @@ import {
   setSource
 } from '../../bundler/compiler.js'
 import {link} from '../../bundler/linker.js'
-import clock from '../../examples/clock.example.js'
-import defaultExample from '../../examples/default.example.js'
-import helloBlocks from '../../examples/hello-blocks.example.js'
-import polls from '../../examples/polls.example.js'
-import progressBar from '../../examples/progress-bar.example.js'
-import svg from '../../examples/svg.example.js'
+import clock from '../../examples/clock.example.tsx'
+import defaultExample from '../../examples/default.example.tsx'
+import helloBlocks from '../../examples/hello-blocks.example.tsx'
+import polls from '../../examples/polls.example.tsx'
+import progressBar from '../../examples/progress-bar.example.tsx'
+import svg from '../../examples/svg.example.tsx'
 import type {ColorScheme} from '../../types/color-scheme.js'
 import type {Diagnostics} from '../../types/diagnostics.js'
 import {PenSave, loadPen, penToHash, savePen} from '../../types/pen-save.js'

src/elements/play-preview-controls.test.ts

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

src/elements/play-preview.test.ts

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

src/elements/play-preview.ts

@@ -1,4 +1,6 @@
-import penWorker from '@devvit/previews/dist/pen.worker.min.js'
+// @ts-expect-error
+import * as penWorker from '@devvit/previews/dist/pen.worker.min.js'
+
 import type {LinkedBundle, Metadata} from '@devvit/protos'
 import {
   LitElement,
@@ -15,7 +17,9 @@ import {Bubble} from '../utils/bubble.js'
 
 import '@devvit/previews/dist/devvit-preview.js'
 
-const localRuntimeCode: Blob = new Blob([penWorker], {type: 'text/javascript'})
+const localRuntimeCode: Blob = new Blob([penWorker.default], {
+  type: 'text/javascript'
+})
 
 declare global {
   interface HTMLElementEventMap {

src/elements/play-resizable-text-input.test.ts

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

src/elements/play-toast.test.ts

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

src/types/loaders.d.ts

@@ -5,7 +5,7 @@ declare module '*.css' {
   export = text
 }
 
-declare module '*.example.js' {
+declare module '*.example.tsx' {
   const text: string
   export = text
 }
@@ -16,6 +16,6 @@ declare module '*.svg' {
 }
 
 declare module '*.worker.min.js' {
-  const text: string
-  export = text
+  // This import must be wildcarded for @web/dev-server-esbuild.
+  export = {default: string}
 }