Merge pull request #201 from github/typescript-tests

Convert tests to TypeScript

Author: koddsson

package-lock.json

@@ -28,7 +28,7 @@
     "clean": "tsc --build --clean",
     "lint": "eslint . --ignore-path .gitignore",
     "pretest": "npm run build && npm run lint",
-    "test": "web-test-runner test/*.js --node-resolve",
+    "test": "web-test-runner test/* --node-resolve",
     "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
   },
   "prettier": "@github/prettier-config",
@@ -38,6 +38,7 @@
     "@open-wc/testing": "^3.1.2",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
+    "@web/dev-server-esbuild": "^0.3.0",
     "@web/test-runner": "^0.13.27",
     "eslint": "^8.12.0",
     "eslint-plugin-github": "^4.3.6",

package.json

@@ -155,13 +155,15 @@ describe('initializeAttrs', () => {
 })
 
 describe('attr', () => {
-  class AttrTestElement extends HTMLElement {}
-  attr(AttrTestElement.prototype, 'foo')
-  attr(AttrTestElement.prototype, 'bar')
+  class AttrTestElement extends HTMLElement {
+    @attr foo
+    @attr bar
+  }
   window.customElements.define('attr-test-element', AttrTestElement)
 
-  class ExtendedAttrTestElement extends AttrTestElement {}
-  attr(ExtendedAttrTestElement.prototype, 'baz')
+  class ExtendedAttrTestElement extends AttrTestElement {
+    @attr baz
+  }
   window.customElements.define('extended-attr-test-element', ExtendedAttrTestElement)
 
   it('populates the "default" list for initializeAttrs', () => {
@@ -214,25 +216,28 @@ describe('defineObservedAttributes', () => {
   })
 
   it('will reflect values from attr calls', () => {
-    class TestElement extends HTMLElement {}
+    class TestElement extends HTMLElement {
+      @attr foo
+    }
     defineObservedAttributes(TestElement)
-    attr(TestElement.prototype, 'foo')
     expect(TestElement.observedAttributes).to.eql(['data-foo'])
   })
 
   it('will reflect values even if set after definition', () => {
-    class TestElement extends HTMLElement {}
+    class TestElement extends HTMLElement {
+      @attr foo
+    }
     defineObservedAttributes(TestElement)
-    attr(TestElement.prototype, 'foo')
     TestElement.observedAttributes = ['a', 'b', 'c']
     expect(TestElement.observedAttributes).to.eql(['data-foo', 'a', 'b', 'c'])
   })
 
   it('will reflect values from extended elements', () => {
-    class TestElement extends HTMLElement {}
+    class TestElement extends HTMLElement {
+      @attr foo
+    }
     class ExtendedTestElement extends TestElement {}
     defineObservedAttributes(ExtendedTestElement)
-    attr(TestElement.prototype, 'foo')
     expect(ExtendedTestElement.observedAttributes).to.eql(['data-foo'])
   })
 })

test/attr.js test/attr.tstest/attr.js renamed to test/attr.ts

@@ -16,36 +16,39 @@ describe('controller', () => {
   })
 
   it('calls register', async () => {
+    @controller
     class ControllerRegisterElement extends HTMLElement {}
-    controller(ControllerRegisterElement)
     const instance = document.createElement('controller-register')
     root.appendChild(instance)
     expect(instance).to.be.instanceof(ControllerRegisterElement)
   })
 
   it('adds data-catalyst to elements', async () => {
-    controller(class ControllerDataAttrElement extends HTMLElement {})
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ControllerDataAttrElement extends HTMLElement {}
+
     const instance = document.createElement('controller-data-attr')
     root.appendChild(instance)
     expect(instance.hasAttribute('data-catalyst')).to.equal(true)
     expect(instance.getAttribute('data-catalyst')).to.equal('')
   })
 
   it('binds controllers before custom connectedCallback behaviour', async () => {
-    controller(
-      class ControllerBindOrderElement extends HTMLElement {
-        foo() {
-          return 'foo'
-        }
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ControllerBindOrderElement extends HTMLElement {
+      foo() {
+        return 'foo'
       }
-    )
-    controller(
-      class ControllerBindOrderSubElement extends HTMLElement {
-        connectedCallback() {
-          this.dispatchEvent(new CustomEvent('loaded'))
-        }
+    }
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ControllerBindOrderSubElement extends HTMLElement {
+      connectedCallback() {
+        this.dispatchEvent(new CustomEvent('loaded'))
       }
-    )
+    }
 
     const instance = document.createElement('controller-bind-order')
     replace(instance, 'foo', fake(instance.foo))
@@ -59,20 +62,20 @@ describe('controller', () => {
   })
 
   it('binds shadowRoots after connectedCallback behaviour', async () => {
-    controller(
-      class ControllerBindShadowElement extends HTMLElement {
-        connectedCallback() {
-          this.attachShadow({mode: 'open'})
-          const button = document.createElement('button')
-          button.setAttribute('data-action', 'click:controller-bind-shadow#foo')
-          this.shadowRoot.appendChild(button)
-        }
-
-        foo() {
-          return 'foo'
-        }
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ControllerBindShadowElement extends HTMLElement {
+      connectedCallback() {
+        this.attachShadow({mode: 'open'})
+        const button = document.createElement('button')
+        button.setAttribute('data-action', 'click:controller-bind-shadow#foo')
+        this.shadowRoot.appendChild(button)
+      }
+
+      foo() {
+        return 'foo'
       }
-    )
+    }
     const instance = document.createElement('controller-bind-shadow')
     replace(instance, 'foo', fake(instance.foo))
     root.appendChild(instance)
@@ -83,13 +86,13 @@ describe('controller', () => {
   })
 
   it('binds auto shadowRoots', async () => {
-    controller(
-      class ControllerBindAutoShadowElement extends HTMLElement {
-        foo() {
-          return 'foo'
-        }
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ControllerBindAutoShadowElement extends HTMLElement {
+      foo() {
+        return 'foo'
       }
-    )
+    }
     const instance = document.createElement('controller-bind-auto-shadow')
     const template = document.createElement('template')
     template.setAttribute('data-shadowroot', 'open')
@@ -108,30 +111,32 @@ describe('controller', () => {
   })
 
   it('upgrades child decendants when connected', () => {
-    controller(class ChildElementElement extends HTMLElement {})
-    controller(
-      class ParentElementElement extends HTMLElement {
-        connectedCallback() {
-          const child = this.querySelector('child-element')
-          expect(child.matches(':defined')).to.equal(true)
-        }
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ChildElementElement extends HTMLElement {}
+    @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    class ParentElementElement extends HTMLElement {
+      connectedCallback() {
+        const child = this.querySelector('child-element')
+        expect(child.matches(':defined')).to.equal(true)
       }
-    )
+    }
 
     // eslint-disable-next-line github/unescaped-html-literal
     root.innerHTML = '<parent-element><child-element></child-element></parent-element>'
   })
 
   describe('attrs', () => {
     let attrValues = []
+    @controller
     class AttributeTestElement extends HTMLElement {
       foo = 'baz'
       attributeChangedCallback() {
         attrValues.push(this.getAttribute('data-foo'))
         attrValues.push(this.foo)
       }
     }
-    controller(AttributeTestElement)
     attr(AttributeTestElement.prototype, 'foo')
 
     beforeEach(() => {

test/auto-shadow-root.js test/auto-shadow-root.tstest/auto-shadow-root.js renamed to test/auto-shadow-root.ts

@@ -0,0 +1,6 @@
+import {esbuildPlugin} from '@web/dev-server-esbuild'
+
+export default {
+  files: ['test/*'],
+  plugins: [esbuildPlugin({ts: true})]
+}