Pull in attr test from use-delegates

Author: koddsson

test/attr.ts

@@ -1,13 +1,26 @@
 import {expect, fixture, html} from '@open-wc/testing'
-import {controller} from '../src/controller.js'
-import {attr} from '../src/attr.js'
+import {attr, Attrable} from '../src/attr.js'
+import {use} from '../src/use.js'
 
-describe('Attr', () => {
-  @controller
+describe('Attrable', () => {
+  @use(Attrable)
   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
+    }
   }
+  window.customElements.define('initialize-attr-test', InitializeAttrTest)
 
   let instance
   beforeEach(async () => {
@@ -18,134 +31,223 @@ describe('Attr', () => {
     document.createElement('initialize-attr-test')
   })
 
-  it('marks attrs as observedAttributes', () => {
-    expect(InitializeAttrTest.observedAttributes).to.eql(['data-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('creates a getter/setter pair for each given attr name', () => {
-    expect(instance.foo).to.equal('hello')
-    expect(instance).to.have.ownPropertyDescriptor('foo')
+  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('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('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('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('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('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('resets to the default value when the attribute is removed', async () => {
+    instance.setAttribute('data-foo', 'goodbye')
+    expect(instance).to.have.property('foo', 'goodbye')
+    instance.removeAttribute('data-foo')
+    await Promise.resolve()
+    expect(instance).to.have.property('foo', 'hello')
   })
 
-  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')
+  })
+
+  it('calls underlying get/set', async () => {
+    instance.getCount = 0
+    instance.setCount = 0
+    instance.baz
+    expect(instance).to.have.property('getCount', 1)
+    expect(instance).to.have.property('setCount', 0)
+    instance.baz = 2
+    expect(instance).to.have.property('getCount', 1)
+    expect(instance).to.have.property('setCount', 1)
+  })
+
+  it('does not overly eagerly call get/set on attribute change', async () => {
+    instance.getCount = 0
+    instance.setCount = 0
+    instance.setAttribute('data-baz', 'one')
+    instance.setAttribute('data-baz', 'one')
+    instance.setAttribute('data-baz', 'one')
+    instance.setAttribute('data-baz', 'one')
+    await Promise.resolve()
+    expect(instance).to.have.property('getCount', 0)
+    expect(instance).to.have.property('setCount', 4)
   })
 
   describe('types', () => {
     it('infers number types from property and casts as number always', async () => {
-      @controller
+      @use(Attrable)
       class NumberAttrTest extends HTMLElement {
         @attr foo = 1
       }
-      expect(NumberAttrTest).to.have.property('observedAttributes').include('data-foo')
+      window.customElements.define('number-attr-test', NumberAttrTest)
       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')
+
+      expect(instance).to.have.property('foo', 1)
+      expect(instance).to.have.attribute('data-foo', '1')
       instance.setAttribute('data-foo', '7')
-      expect(instance.foo).to.equal(7)
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', 7)
       instance.setAttribute('data-foo', '-3.14')
-      expect(instance.foo).to.equal(-3.14)
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', -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)
+      await Promise.resolve()
+      expect(instance).to.have.property('foo').satisfy(Number.isNaN)
       instance.foo = 3.14
       expect(instance.getAttribute('data-foo')).to.equal('3.14')
+      instance.removeAttribute('data-foo')
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', 1)
     })
 
     it('infers boolean types from property and uses has/toggleAttribute', async () => {
-      @controller
+      @use(Attrable)
       class BooleanAttrTest extends HTMLElement {
         @attr foo = false
       }
-      expect(BooleanAttrTest).to.have.property('observedAttributes').include('data-foo')
+      window.customElements.define('boolean-attr-test', BooleanAttrTest)
+
       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 () => {
-      @controller
+      const regexp = /^a regexp$/
+      @use(Attrable)
       class RegExpAttrTest extends HTMLElement {
-        @attr foo = /^a regexp$/
+        @attr foo = regexp
       }
-      expect(RegExpAttrTest).to.have.property('observedAttributes').include('data-foo')
+      window.customElements.define('reg-exp-attr-test', RegExpAttrTest)
       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$/')
+
+      expect(instance).to.have.property('foo', '/^a regexp$/')
+      expect(instance).to.have.attribute('data-foo', '/^a regexp$/')
+      instance.setAttribute('data-foo', '/^another$/')
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', '/^another$/')
+      instance.removeAttribute('data-foo')
+      await Promise.resolve()
+      expect(instance).to.have.property('foo', regexp)
+    })
+
+    it('defers to custom set logic if present', async () => {
+      const regexp = /^a regexp$/
+      @use(Attrable)
+      class RegExpCastAttrTest extends HTMLElement {
+        #reg = regexp
+        @attr
+        get foo() {
+          return this.#reg
+        }
+        set foo(value) {
+          this.#reg = value instanceof RegExp ? value : new RegExp(String(value).replace(/^\/|\/$/g, ''))
+        }
+      }
+      window.customElements.define('reg-exp-cast-attr-test', RegExpCastAttrTest)
+      instance = await fixture(html`<reg-exp-cast-attr-test />`)
+
+      expect(instance).to.have.property('foo', regexp)
+      expect(instance).to.have.attribute('data-foo', '/^a regexp$/')
+      instance.setAttribute('data-foo', '/^another$/')
+      await Promise.resolve()
+      expect(instance).to.have.property('foo').a('regexp').property('source', '^another$')
+    })
+
+    it('avoids infinite loops', async () => {
+      @use(Attrable)
+      class LoopAttrTest extends HTMLElement {
+        count = 0
+        @attr
+        get foo() {
+          return ++this.count
+        }
+        set foo(value) {
+          this.count += 1
+        }
+      }
+      window.customElements.define('loop-attr-test', LoopAttrTest)
+      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
+    @use(Attrable)
     class NamingAttrTest extends HTMLElement {
       @attr fooBarBazBing = 'a'
       @attr URLBar = 'b'
       @attr ClipX = 'c'
     }
+    window.customElements.define('naming-attr-test', NamingAttrTest)
 
     beforeEach(async () => {
       instance = await fixture(html`<naming-attr-test />`)
     })
 
     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')