Merge pull request #232 from github/fix-up-types-in-tests

Fix up types in tests

Author: keithamus

.gitignore

@@ -4,3 +4,4 @@ _site
 lib/
 .jekyll-cache
 .lighthouseci
+coverage

package.json

@@ -23,10 +23,11 @@
     "lib"
   ],
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --build tsconfig.build.json",
     "build:docs": "cd docs && JEKYLL_ENV=production bundle exec jekyll build",
-    "clean": "tsc --build --clean",
+    "clean": "tsc --build --clean tsconfig.build.json",
     "lint": "eslint . --ignore-path .gitignore",
+    "postlint": "tsc",
     "prepack": "npm run build",
     "presize": "npm run build",
     "size": "size-limit",

src/mark.ts

@@ -1,9 +1,11 @@
 type PropertyType = 'field' | 'getter' | 'setter' | 'method'
-type PropertyDecorator = (proto: object, key: PropertyKey) => void
+interface PropertyDecorator {
+  (proto: object, key: PropertyKey, descriptor?: PropertyDescriptor): void
+  readonly static: unique symbol
+}
 type GetMarks = (instance: object) => Set<PropertyKey>
 export function createMark(validate: (key: PropertyKey, type: PropertyType) => void): [PropertyDecorator, GetMarks] {
   const marks = new WeakMap<object, Set<PropertyKey>>()
-  const sym = Symbol()
   function get(proto: object): Set<PropertyKey> {
     if (!marks.has(proto)) {
       const parent = Object.getPrototypeOf(proto)
@@ -22,13 +24,15 @@ export function createMark(validate: (key: PropertyKey, type: PropertyType) => v
     validate(key, type)
     get(proto).add(key)
   }
-  marker.static = sym
+  marker.static = Symbol()
 
   return [
-    marker,
+    marker as PropertyDecorator,
     (instance: object): Set<PropertyKey> => {
       const proto = Object.getPrototypeOf(instance)
-      for (const key of proto.constructor[sym] || []) marker(proto, key, Object.getOwnPropertyDescriptor(proto, key))
+      for (const key of proto.constructor[marker.static] || []) {
+        marker(proto, key, Object.getOwnPropertyDescriptor(proto, key))
+      }
       return new Set(get(proto))
     }
   ]

test/ability.ts

@@ -1,9 +1,10 @@
 import {expect, fixture, html} from '@open-wc/testing'
 import {restore, fake} from 'sinon'
+import type {CustomElement} from '../src/custom-element.js'
 import {createAbility, attachShadowCallback, attachInternalsCallback} from '../src/ability.js'
 
 describe('ability', () => {
-  let calls = []
+  let calls: string[] = []
   const fakeable = createAbility(
     Class =>
       class extends Class {
@@ -22,9 +23,9 @@ describe('ability', () => {
           calls.push('fakeable adoptedCallback')
           super.adoptedCallback?.()
         }
-        attributeChangedCallback(...args) {
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
           calls.push('fakeable attributeChangedCallback')
-          super.attributeChangedCallback?.(...args)
+          super.attributeChangedCallback?.(name, oldValue, newValue)
         }
       }
   )
@@ -46,9 +47,9 @@ describe('ability', () => {
           calls.push('otherfakeable adoptedCallback')
           super.adoptedCallback?.()
         }
-        attributeChangedCallback(...args) {
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
           calls.push('otherfakeable attributeChangedCallback')
-          super.attributeChangedCallback?.(...args)
+          super.attributeChangedCallback?.(name, oldValue, newValue)
         }
       }
   )
@@ -85,41 +86,41 @@ describe('ability', () => {
   it('can be called multiple times, but only applies once', async () => {
     const MultipleFakeable = fakeable(fakeable(fakeable(fakeable(fakeable(Element)))))
     customElements.define('multiple-fakeable', MultipleFakeable)
-    const instance = await fixture(html`<multiple-fakeable />`)
+    const instance: CustomElement = await fixture(html`<multiple-fakeable />`)
     expect(calls).to.eql(['fakeable connectedCallback'])
-    instance.connectedCallback()
+    instance.connectedCallback!()
     expect(calls).to.eql(['fakeable connectedCallback', 'fakeable connectedCallback'])
   })
 
   describe('subclass behaviour', () => {
     const CoreTest = otherfakeable(fakeable(Element))
     customElements.define('core-test', CoreTest)
 
-    let instance
+    let instance: CustomElement & typeof CoreTest
     beforeEach(async () => {
       instance = await fixture(html`<core-test />`)
     })
 
     it('applies keys from delegate onto subclass upon instantiation', () => {
       expect(instance).to.have.property('foo')
-      expect(instance.foo()).to.equal('foo!')
+      expect((instance as unknown as Record<string, () => void>).foo()).to.equal('foo!')
       expect(instance).to.have.property('bar')
-      expect(instance.bar()).to.equal('bar!')
+      expect((instance as unknown as Record<string, () => void>).bar()).to.equal('bar!')
     })
 
     for (const method of ['connectedCallback', 'disconnectedCallback', 'adoptedCallback', 'attributeChangedCallback']) {
       it(`delegates to other ${method}s before class ${method}`, () => {
         calls = []
-        instance[method]()
+        ;(instance as unknown as Record<string, () => void>)[method]()
         expect(calls).to.eql([`otherfakeable ${method}`, `fakeable ${method}`])
       })
     }
   })
 
   describe('ability extension behaviour', () => {
     describe('attachShadowCallback', () => {
-      let attachShadowFake
-      let shadow
+      let attachShadowFake: (shadow: ShadowRoot) => void
+      let shadow: ShadowRoot | null
       beforeEach(() => {
         shadow = null
         attachShadowFake = fake()
@@ -128,8 +129,8 @@ describe('ability', () => {
       const declarable = createAbility(
         Class =>
           class extends Class {
-            [attachShadowCallback](...args) {
-              super[attachShadowCallback](...args)
+            [attachShadowCallback](...args: [ShadowRoot]) {
+              super[attachShadowCallback]!(...args)
               return attachShadowFake.apply(this, args)
             }
           }
@@ -211,8 +212,8 @@ describe('ability', () => {
     })
 
     describe('attachInternalsCallback', () => {
-      let attachInternalsFake
-      let internals
+      let attachInternalsFake: (internals: ElementInternals) => void
+      let internals: ElementInternals | null
       beforeEach(() => {
         internals = null
         attachInternalsFake = fake()
@@ -221,8 +222,8 @@ describe('ability', () => {
       const internable = createAbility(
         Class =>
           class extends Class {
-            [attachInternalsCallback](...args) {
-              super[attachInternalsCallback](...args)
+            [attachInternalsCallback](...args: [ElementInternals]) {
+              super[attachInternalsCallback]!(...args)
               return attachInternalsFake.apply(this, args)
             }
           }
@@ -261,7 +262,7 @@ describe('ability', () => {
       })
 
       it('errors if userland calls attachInternals more than once', async () => {
-        const instance = await fixture(html`<manual-internals-ability></manual-internals-ability>`)
+        const instance = await fixture<CustomElement>(html`<manual-internals-ability></manual-internals-ability>`)
         internals = instance.attachInternals()
         expect(internals).to.exist.and.be.instanceof(ElementInternals)
         expect(attachInternalsFake).to.be.calledOnce.calledOn(instance).and.calledWithExactly(internals)

test/attr.ts

@@ -3,79 +3,79 @@ import {controller} from '../src/controller.js'
 import {attr} from '../src/attr.js'
 
 describe('Attr', () => {
-  @controller
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  class InitializeAttrTest extends HTMLElement {
-    @attr fooBar = 'hello'
-    fooBaz = 1
-
-    getCount = 0
-    setCount = 0
-    #bing = 'world'
-    get bingBaz() {
-      this.getCount += 1
-      return this.#bing
-    }
-    @attr set bingBaz(value: string) {
-      this.setCount += 1
-      this.#bing = value
+  {
+    @controller
+    class InitializeAttrTest extends HTMLElement {
+      @attr fooBar = 'hello'
+      fooBaz = 1
+
+      getCount = 0
+      setCount = 0
+      #bing = 'world'
+      get bingBaz() {
+        this.getCount += 1
+        return this.#bing
+      }
+      @attr set bingBaz(value: string) {
+        this.setCount += 1
+        this.#bing = value
+      }
     }
-  }
 
-  let instance
-  beforeEach(async () => {
-    instance = await fixture(html`<initialize-attr-test />`)
-  })
+    let instance: InitializeAttrTest
+    beforeEach(async () => {
+      instance = await fixture(html`<initialize-attr-test />`)
+    })
 
-  it('does not error during creation', () => {
-    document.createElement('initialize-attr-test')
-  })
+    it('does not error during creation', () => {
+      document.createElement('initialize-attr-test')
+    })
 
-  it('does not alter field values from their initial value', () => {
-    expect(instance).to.have.property('fooBar', 'hello')
-    expect(instance).to.have.property('fooBaz', 1)
-    expect(instance).to.have.property('bingBaz', 'world')
-  })
+    it('does not alter field values from their initial value', () => {
+      expect(instance).to.have.property('fooBar', 'hello')
+      expect(instance).to.have.property('fooBaz', 1)
+      expect(instance).to.have.property('bingBaz', 'world')
+    })
 
-  it('reflects the initial value as an attribute, if not present', () => {
-    expect(instance).to.have.attribute('data-foo-bar', 'hello')
-    expect(instance).to.not.have.attribute('data-foo-baz')
-    expect(instance).to.have.attribute('data-bing-baz', 'world')
-  })
+    it('reflects the initial value as an attribute, if not present', () => {
+      expect(instance).to.have.attribute('data-foo-bar', 'hello')
+      expect(instance).to.not.have.attribute('data-foo-baz')
+      expect(instance).to.have.attribute('data-bing-baz', 'world')
+    })
 
-  it('prioritises the value in the attribute over the property', async () => {
-    instance = await fixture(html`<initialize-attr-test data-foo-bar="goodbye" data-bing-baz="universe" />`)
-    expect(instance).to.have.property('fooBar', 'goodbye')
-    expect(instance).to.have.attribute('data-foo-bar', 'goodbye')
-    expect(instance).to.have.property('bingBaz', 'universe')
-    expect(instance).to.have.attribute('data-bing-baz', 'universe')
-  })
+    it('prioritises the value in the attribute over the property', async () => {
+      instance = await fixture(html`<initialize-attr-test data-foo-bar="goodbye" data-bing-baz="universe" />`)
+      expect(instance).to.have.property('fooBar', 'goodbye')
+      expect(instance).to.have.attribute('data-foo-bar', 'goodbye')
+      expect(instance).to.have.property('bingBaz', 'universe')
+      expect(instance).to.have.attribute('data-bing-baz', 'universe')
+    })
 
-  it('changes the property when the attribute changes', async () => {
-    instance.setAttribute('data-foo-bar', 'goodbye')
-    await Promise.resolve()
-    expect(instance).to.have.property('fooBar', 'goodbye')
-    instance.setAttribute('data-bing-baz', 'universe')
-    await Promise.resolve()
-    expect(instance).to.have.property('bingBaz', 'universe')
-  })
+    it('changes the property when the attribute changes', async () => {
+      instance.setAttribute('data-foo-bar', 'goodbye')
+      await Promise.resolve()
+      expect(instance).to.have.property('fooBar', 'goodbye')
+      instance.setAttribute('data-bing-baz', 'universe')
+      await Promise.resolve()
+      expect(instance).to.have.property('bingBaz', 'universe')
+    })
 
-  it('changes the attribute when the property changes', () => {
-    instance.fooBar = 'goodbye'
-    expect(instance).to.have.attribute('data-foo-bar', 'goodbye')
-    instance.bingBaz = 'universe'
-    expect(instance).to.have.attribute('data-bing-baz', 'universe')
-  })
+    it('changes the attribute when the property changes', () => {
+      instance.fooBar = 'goodbye'
+      expect(instance).to.have.attribute('data-foo-bar', 'goodbye')
+      instance.bingBaz = 'universe'
+      expect(instance).to.have.attribute('data-bing-baz', 'universe')
+    })
+  }
 
   describe('types', () => {
     it('infers boolean types from property and uses has/toggleAttribute', async () => {
       @controller
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       class BooleanAttrTest extends HTMLElement {
         @attr fooBar = false
       }
 
-      instance = await fixture(html`<boolean-attr-test />`)
+      const instance = await fixture<BooleanAttrTest>(html`<boolean-attr-test />`)
 
       expect(instance).to.have.property('fooBar', false)
       expect(instance).to.not.have.attribute('data-foo-bar')
@@ -104,7 +104,6 @@ describe('Attr', () => {
 
     it('avoids infinite loops', async () => {
       @controller
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       class LoopAttrTest extends HTMLElement {
         count = 0
         @attr
@@ -115,7 +114,8 @@ describe('Attr', () => {
           this.count += 1
         }
       }
-      instance = await fixture(html`<loop-attr-test />`)
+
+      const instance = await fixture<LoopAttrTest>(html`<loop-attr-test />`)
 
       expect(instance).to.have.property('fooBar')
       instance.fooBar = 1
@@ -127,13 +127,13 @@ describe('Attr', () => {
 
   describe('naming', () => {
     @controller
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     class NamingAttrTest extends HTMLElement {
       @attr fooBarBazBing = 'a'
       @attr URLBar = 'b'
       @attr ClipX = 'c'
     }
 
+    let instance: NamingAttrTest
     beforeEach(async () => {
       instance = await fixture(html`<naming-attr-test />`)
     })

test/auto-shadow-root.ts

@@ -3,9 +3,12 @@ import {replace, fake} from 'sinon'
 import {autoShadowRoot} from '../src/auto-shadow-root.js'
 
 describe('autoShadowRoot', () => {
-  window.customElements.define('shadowroot-test-element', class extends HTMLElement {})
+  class ShadowRootTestElement extends HTMLElement {
+    declare shadowRoot: ShadowRoot
+  }
+  window.customElements.define('shadowroot-test-element', ShadowRootTestElement)
 
-  let instance
+  let instance: ShadowRootTestElement
   beforeEach(async () => {
     instance = await fixture(html`<shadowroot-test-element />`)
   })
@@ -58,7 +61,7 @@ describe('autoShadowRoot', () => {
     instance = await fixture(html`<shadowroot-test-element>
       <template data-shadowroot="closed">Hello World</template>
     </shadowroot-test-element>`)
-    let shadowRoot = null
+    let shadowRoot: ShadowRoot | null = null
     replace(
       instance,
       'attachShadow',