From 7ba1628ecef4b2c8a5283962f5d6b8f4c297766a Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Thu, 26 May 2022 11:41:31 +0100 Subject: [PATCH] add composition tests for providable --- test/providable.ts | 60 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 50 insertions(+), 10 deletions(-) diff --git a/test/providable.ts b/test/providable.ts index c2b90df9..86b6be38 100644 --- a/test/providable.ts +++ b/test/providable.ts @@ -1,9 +1,13 @@ import {expect, fixture, html} from '@open-wc/testing' import {fake} from 'sinon' import {provide, consume, providable, ContextEvent} from '../src/providable.js' +import {target, targetable} from '../src/targetable.js' +import {attr, attrable} from '../src/attrable.js' describe('Providable', () => { const sym = Symbol('bing') + @attrable + @targetable @providable class ProvidableProviderTest extends HTMLElement { @provide foo = 'hello' @@ -13,6 +17,8 @@ describe('Providable', () => { } @provide [sym] = {provided: true} @provide qux = 8 + @provide @attr testAttribute = '' + @provide @target target!: HTMLElement } window.customElements.define('providable-provider-test', ProvidableProviderTest) @@ -40,6 +46,8 @@ describe('Providable', () => { @consume set qux(value: number) { this.count += 1 } + @consume target!: HTMLElement + @consume testAttribute = '' connectedCallback() { this.textContent = `${this.foo} ${this.bar}` } @@ -74,7 +82,7 @@ describe('Providable', () => { }) it('emits the `context-request` event when connected, for each field', async () => { - expect(events).to.have.callCount(5) + expect(events).to.have.callCount(7) const fooEvent = events.getCall(0).args[0] expect(fooEvent).to.be.instanceof(ContextEvent) expect(fooEvent).to.have.nested.property('context.name', 'foo') @@ -106,13 +114,27 @@ describe('Providable', () => { const quxEvent = events.getCall(4).args[0] expect(quxEvent).to.be.instanceof(ContextEvent) expect(quxEvent).to.have.nested.property('context.name', 'qux') - expect(quxEvent).to.have.nested.property('context.initialValue').eql(0) + expect(quxEvent).to.have.nested.property('context.initialValue', 0) expect(quxEvent).to.have.property('multiple', true) expect(quxEvent).to.have.property('bubbles', true) + + const targetEvent = events.getCall(5).args[0] + expect(targetEvent).to.be.instanceof(ContextEvent) + expect(targetEvent).to.have.nested.property('context.name', 'target') + expect(targetEvent).to.have.nested.property('context.initialValue', undefined) + expect(targetEvent).to.have.property('multiple', true) + expect(targetEvent).to.have.property('bubbles', true) + + const attrEvent = events.getCall(6).args[0] + expect(attrEvent).to.be.instanceof(ContextEvent) + expect(attrEvent).to.have.nested.property('context.name', 'testAttribute') + expect(attrEvent).to.have.nested.property('context.initialValue', '') + expect(attrEvent).to.have.property('multiple', true) + expect(attrEvent).to.have.property('bubbles', true) }) it('changes value based on callback new value', async () => { - expect(events).to.have.callCount(5) + expect(events).to.have.callCount(7) const fooCallback = events.getCall(0).args[0].callback fooCallback('hello') expect(instance).to.have.property('foo', 'hello') @@ -123,7 +145,7 @@ describe('Providable', () => { it('disposes of past callbacks when given new ones', async () => { const dispose1 = fake() const dispose2 = fake() - expect(events).to.have.callCount(5) + expect(events).to.have.callCount(7) const fooCallback = events.getCall(0).args[0].callback fooCallback('hello', dispose1) expect(dispose1).to.have.callCount(0) @@ -144,10 +166,11 @@ describe('Providable', () => { let provider: ProvidableProviderTest beforeEach(async () => { provider = await fixture( - html`
-
` + html` +
+ +
+ ` ) }) @@ -193,7 +216,7 @@ describe('Providable', () => { let provider: ProvidableProviderTest let consumer: ProvidableConsumerTest beforeEach(async () => { - provider = await fixture(html` + provider = await fixture(html`
@@ -203,6 +226,7 @@ describe('Providable', () => {
+ `) consumer = provider.querySelector('providable-consumer-test')! }) @@ -212,7 +236,9 @@ describe('Providable', () => { expect(consumer).to.have.property('bar', 'world') expect(consumer).to.have.property('baz', 3) expect(consumer).to.have.property(sym).eql({provided: true}) - expect(consumer).to.have.property('qux').eql(8) + expect(consumer).to.have.property('qux', 8) + expect(consumer).to.have.property('target', provider.querySelector('small')!) + expect(consumer).to.have.property('testAttribute', 'x') }) it('updates values provided if they change', () => { @@ -222,6 +248,20 @@ describe('Providable', () => { expect(consumer).to.have.property('foo', 'greetings') }) + it('updates @provide @attr values if they change', async () => { + provider.setAttribute('test-attribute', 'y') + await Promise.resolve() + expect(consumer).to.have.property('testAttribute', 'y') + }) + + it('updates @provide @target values if they change', async () => { + const big = document.createElement('big') + big.setAttribute('data-target', 'providable-provider-test.target') + provider.prepend(big) + await Promise.resolve() + expect(consumer).to.have.property('target', big) + }) + it('calls consumer set callbacks when the value is updated', () => { expect(consumer).to.have.property('qux', 8) expect(consumer).to.have.property('count', 1)