fix(side-drawer): declare missing dependencies (#1112)

* fix(side-drawer): declare missing dependencies * banner test fix * test fix * fix test Co-authored-by: Rina <rina.oksman@vonage.com>
Vonage · Oct 31, 2021 · 8ff898a · 8ff898a
1 parent 4f34e7b
commit 8ff898a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/components/banner/test/banner.a11y.test.js b/components/banner/test/banner.a11y.test.js
@@ -1,30 +1,50 @@
+import '../vwc-banner.js';
 import 'chai-a11y-axe';
-import { html } from 'lit-html';
-import { fixture, aTimeout } from '@open-wc/testing-helpers';
+import 'chai-dom';
+import { aTimeout } from '@open-wc/testing-helpers';
+import {
+	isolatedElementsCreation,
+	textToDomToParent
+} from '../../../test/test-helpers.js';
+const COMPONENT_NAME = 'vwc-banner';
 
 describe('banner a11y', function () {
 	const TRANSITION_TIME = 200;
+	const addElement = isolatedElementsCreation();
+
 	it('should adhere to accessibility guidelines', async function () {
-		const bannerEl = await fixture(html`<vwc-banner message="Hello" open></vwc-banner>`);
-		await expect(bannerEl).shadowDom.to.be.accessible();
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} message="Hello" open></${COMPONENT_NAME}>`)
+		);
+		await actualElement.updateComplete;
+		await expect(actualElement).shadowDom.to.be.accessible();
 	});
 	it('should be with default role and aria-live values', async function () {
-		const bannerEl = await fixture(html`<vwc-banner message="Hello" open></vwc-banner>`);
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('role', 'status');
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('aria-live', 'polite');
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} message="Hello" open></${COMPONENT_NAME}>`)
+		);
+		await actualElement.updateComplete;
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('role', 'status');
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('aria-live', 'polite');
 	});
 	it('should be with reflected role and aria-live values', async function () {
-		const bannerEl = await fixture(html`<vwc-banner message="Hello" open role="alert" aria-live="assertive" dismissible></vwc-banner>`);
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('role', 'alert');
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('aria-live', 'assertive');
-		bannerEl.shadowRoot.querySelector('vwc-icon-button')?.click();
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} message="Hello" open role="alert" aria-live="assertive" dismissible></${COMPONENT_NAME}>`)
+		);
+		await actualElement.updateComplete;
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('role', 'alert');
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('aria-live', 'assertive');
+		actualElement.shadowRoot?.querySelector('vwc-icon-button')?.click();
 		await aTimeout(TRANSITION_TIME * 1.1);
-		bannerEl.setAttribute('open', 'true');
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.equal(null);
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.equal(null);
+		actualElement.setAttribute('open', 'true');
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.equal(null);
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.equal(null);
 	});
 	it('should be without role and aria-live values when closed', async function () {
-		const bannerEl = await fixture(html`<vwc-banner message="Hello"></vwc-banner>`);
-		expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.equal(null);
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} message="Hello"></${COMPONENT_NAME}>`)
+		);
+		await actualElement.updateComplete;
+		expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.equal(null);
 	});
 });
diff --git a/components/side-drawer/package.json b/components/side-drawer/package.json
@@ -29,6 +29,8 @@
 		"@vonage/vvd-foundation": "2.22.0",
 		"lit-element": "^2.4.0",
 		"lit-html": "^1.3.0",
+		"blocking-elements": "^0.1.0",
+    "wicg-inert": "^3.0.0",
 		"tslib": "^2.3.0"
 	},
 	"devDependencies": {