Merge pull request #228 from github/update-attr-tests

Cherry-pick attr tests from `use-delegates`.

Author: keithamus

test/attr.ts

@@ -4,9 +4,22 @@ import {attr} from '../src/attr.js'
 
 describe('Attr', () => {
   @controller
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   class InitializeAttrTest extends HTMLElement {
     @attr foo = 'hello'
     bar = 1
+
+    getCount = 0
+    setCount = 0
+    #baz = 'world'
+    get baz() {
+      this.getCount += 1
+      return this.#baz
+    }
+    @attr set baz(value: string) {
+      this.setCount += 1
+      this.#baz = value
+    }
   }
 
   let instance
@@ -18,108 +31,101 @@ describe('Attr', () => {
     document.createElement('initialize-attr-test')
   })
 
-  it('marks attrs as observedAttributes', () => {
-    expect(InitializeAttrTest.observedAttributes).to.eql(['data-foo'])
-  })
-
-  it('creates a getter/setter pair for each given attr name', () => {
-    expect(instance.foo).to.equal('hello')
-    expect(instance).to.have.ownPropertyDescriptor('foo')
+  it('does not alter field values from their initial value', () => {
+    expect(instance).to.have.property('foo', 'hello')
+    expect(instance).to.have.property('bar', 1)
+    expect(instance).to.have.property('baz', 'world')
   })
 
-  it('sets the attribute to a previously defined value on the key', () => {
-    expect(instance.foo).to.equal('hello')
-    expect(instance.getAttributeNames()).to.include('data-foo')
-    expect(instance.getAttribute('data-foo')).to.equal('hello')
+  it('reflects the initial value as an attribute, if not present', () => {
+    expect(instance).to.have.attribute('data-foo', 'hello')
+    expect(instance).to.not.have.attribute('data-bar')
+    expect(instance).to.have.attribute('data-baz', 'world')
   })
 
-  it('reflects the `data-*` attribute name of the given key', () => {
-    expect(instance.foo).to.equal('hello')
-    instance.foo = 'bar'
-    expect(instance.getAttributeNames()).to.include('data-foo')
-    expect(instance.getAttribute('data-foo')).to.equal('bar')
-    instance.setAttribute('data-foo', 'baz')
-    expect(instance.foo).to.equal('baz')
+  it('prioritises the value in the attribute over the property', async () => {
+    instance = await fixture(html`<initialize-attr-test data-foo="goodbye" data-baz="universe" />`)
+    expect(instance).to.have.property('foo', 'goodbye')
+    expect(instance).to.have.attribute('data-foo', 'goodbye')
+    expect(instance).to.have.property('baz', 'universe')
+    expect(instance).to.have.attribute('data-baz', 'universe')
   })
 
-  it('sets the attribute to a previously defined value on the key', () => {
-    instance.foo = 'hello'
-    expect(instance.foo).to.equal('hello')
-    expect(instance.getAttributeNames()).to.include('data-foo')
-    expect(instance.getAttribute('data-foo')).to.equal('hello')
+  it('changes the property when the attribute changes', async () => {
+    instance.setAttribute('data-foo', 'goodbye')
+    await Promise.resolve()
+    expect(instance).to.have.property('foo', 'goodbye')
+    instance.setAttribute('data-baz', 'universe')
+    await Promise.resolve()
+    expect(instance).to.have.property('baz', 'universe')
   })
 
-  it('prioritises the value in the attribute over the property', async () => {
-    instance = await fixture(html`<initialize-attr-test data-foo="goodbye" />`)
-    expect(instance.foo).to.equal('goodbye')
-    expect(instance.getAttributeNames()).to.include('data-foo')
-    expect(instance.getAttribute('data-foo')).to.equal('goodbye')
+  it('changes the attribute when the property changes', () => {
+    instance.foo = 'goodbye'
+    expect(instance).to.have.attribute('data-foo', 'goodbye')
+    instance.baz = 'universe'
+    expect(instance).to.have.attribute('data-baz', 'universe')
   })
 
   describe('types', () => {
-    it('infers number types from property and casts as number always', async () => {
-      @controller
-      class NumberAttrTest extends HTMLElement {
-        @attr foo = 1
-      }
-      expect(NumberAttrTest).to.have.property('observedAttributes').include('data-foo')
-      instance = await fixture(html`<number-attr-test />`)
-      expect(instance.foo).to.equal(1)
-      expect(instance.getAttributeNames()).to.include('data-foo')
-      expect(instance.getAttribute('data-foo')).to.equal('1')
-      instance.setAttribute('data-foo', '7')
-      expect(instance.foo).to.equal(7)
-      instance.setAttribute('data-foo', '-3.14')
-      expect(instance.foo).to.equal(-3.14)
-      instance.setAttribute('data-foo', 'Not a Number')
-      expect(Number.isNaN(instance.foo)).to.equal(true)
-      instance.removeAttribute('data-foo')
-      expect(instance.foo).to.equal(0)
-      instance.foo = 3.14
-      expect(instance.getAttribute('data-foo')).to.equal('3.14')
-    })
-
     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 foo = false
       }
-      expect(BooleanAttrTest).to.have.property('observedAttributes').include('data-foo')
+
       instance = await fixture(html`<boolean-attr-test />`)
-      expect(instance.foo).to.equal(false)
-      expect(instance.getAttributeNames()).to.not.include('data-foo')
-      expect(instance.getAttribute('data-foo')).to.equal(null)
+
+      expect(instance).to.have.property('foo', false)
+      expect(instance).to.not.have.attribute('data-foo')
       instance.setAttribute('data-foo', '7')
-      expect(instance.foo).to.equal(true)
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', true)
       instance.setAttribute('data-foo', 'hello')
-      expect(instance.foo).to.equal(true)
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', true)
       instance.setAttribute('data-foo', 'false')
-      expect(instance.foo).to.equal(true)
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', true)
       instance.removeAttribute('data-foo')
-      expect(instance.foo).to.equal(false)
-      instance.foo = '1'
-      expect(instance.foo).to.equal(true)
-      expect(instance.getAttributeNames()).to.include('data-foo')
-      expect(instance.getAttribute('data-foo')).to.equal('')
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', false)
+      instance.foo = true
+      expect(instance).to.have.attribute('data-foo', '')
       instance.foo = false
-      expect(instance.getAttributeNames()).to.not.include('data-foo')
+      expect(instance).to.not.have.attribute('data-foo')
+      instance.removeAttribute('data-foo')
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', false)
     })
 
-    it('defaults to inferring string type for non-boolean non-number types', async () => {
+    it('avoids infinite loops', async () => {
       @controller
-      class RegExpAttrTest extends HTMLElement {
-        @attr foo = /^a regexp$/
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      class LoopAttrTest extends HTMLElement {
+        count = 0
+        @attr
+        get foo() {
+          return ++this.count
+        }
+        set foo(value) {
+          this.count += 1
+        }
       }
-      expect(RegExpAttrTest).to.have.property('observedAttributes').include('data-foo')
-      instance = await fixture(html`<reg-exp-attr-test />`)
-      expect(instance.foo).to.equal('/^a regexp$/')
-      expect(instance.getAttributeNames()).to.include('data-foo')
-      expect(instance.getAttribute('data-foo')).to.equal('/^a regexp$/')
+      instance = await fixture(html`<loop-attr-test />`)
+
+      expect(instance).to.have.property('foo')
+      instance.foo = 1
+      instance.setAttribute('data-foo', '2')
+      instance.foo = 3
+      instance.setAttribute('data-foo', '4')
     })
   })
 
   describe('naming', () => {
     @controller
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     class NamingAttrTest extends HTMLElement {
       @attr fooBarBazBing = 'a'
       @attr URLBar = 'b'
@@ -131,21 +137,18 @@ describe('Attr', () => {
     })
 
     it('converts camel cased property names to their HTML dasherized equivalents', async () => {
-      expect(NamingAttrTest).to.have.property('observedAttributes').include('data-foo-bar-baz-bing')
       expect(instance.fooBarBazBing).to.equal('a')
       instance.fooBarBazBing = 'bar'
       expect(instance.getAttributeNames()).to.include('data-foo-bar-baz-bing')
     })
 
     it('will intuitively dasherize acryonyms', async () => {
-      expect(NamingAttrTest).to.have.property('observedAttributes').include('data-url-bar')
       expect(instance.URLBar).to.equal('b')
       instance.URLBar = 'bar'
       expect(instance.getAttributeNames()).to.include('data-url-bar')
     })
 
     it('dasherizes cap suffixed names correctly', async () => {
-      expect(NamingAttrTest).to.have.property('observedAttributes').include('data-clip-x')
       expect(instance.ClipX).to.equal('c')
       instance.ClipX = 'bar'
       expect(instance.getAttributeNames()).to.include('data-clip-x')