test(block-section): add a11y tests (#580)

* Issue #552: Add block section a11y tests. * Issue #552: Enhance common test helpers to take page setup options. * Issue #552: Bump peerDependencies. BREAKING CHANGE: @esri/calcite-components@1.0.0-beta.14 introduced breaking changes (see https://github.com/Esri/calcite-components/blob/c365346de6866fc46e468985dd19d6beb4624483/CHANGELOG.md#v100-beta14---nov-18th-2019 for more info). * Issue #552: Update test utility to use vendor modules.
Esri · Dec 19, 2019 · 173aa21 · 173aa21
1 parent 4237810
commit 173aa21
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "updtr": "3.1.0"
   },
   "peerDependencies": {
-    "@esri/calcite-components": "1.0.0-beta.10"
+    "@esri/calcite-components": "1.0.0-beta.16"
   },
   "license": "Apache-2.0"
 }
diff --git a/src/components/calcite-block-section/calcite-block-section.e2e.ts b/src/components/calcite-block-section/calcite-block-section.e2e.ts
@@ -1,5 +1,5 @@
 import { CSS, TEXT } from "./resources";
-import { hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, hidden, reflects, renders } from "../../tests/commonTests";
 import { setUpPage } from "../../tests/utils";
 import { E2EPage } from "@stencil/core/testing";
 
@@ -17,6 +17,20 @@ describe("calcite-block-section", () => {
     ]));
 
   describe("toggle-display = 'switch'", () => {
+    describe("accessibility", () => {
+      it("when open", async () =>
+        accessible(
+          `<calcite-block-section text="text" toggle-display="switch" open><div>some content</div></calcite-block-section>`,
+          { withPeerDependencies: true }
+        ));
+
+      it("when closed", async () =>
+        accessible(
+          `<calcite-block-section text="text" toggle-display="switch"><div>some content</div></calcite-block-section>`,
+          { withPeerDependencies: true }
+        ));
+    });
+
     it("can display/hide content", async () => {
       const page = await setUpPage(
         `<calcite-block-section toggle-display="switch"><div>some content</div></calcite-block-section>`,
@@ -47,6 +61,14 @@ describe("calcite-block-section", () => {
   });
 
   describe("toggle-display = 'button' (default)", () => {
+    describe("accessibility", () => {
+      it("when open", async () =>
+        accessible(`<calcite-block-section text="text" open><div>some content</div></calcite-block-section>`));
+
+      it("when closed", async () =>
+        accessible(`<calcite-block-section text="text"><div>some content</div></calcite-block-section>`));
+    });
+
     it("can display/hide content", async () => {
       const page = await setUpPage("<calcite-block-section><div>some content</div></calcite-block-section>");
       await assertContentIsDisplayedAndHidden(page);

diff --git a/src/components/calcite-block-section/calcite-block-section.tsx b/src/components/calcite-block-section/calcite-block-section.tsx
@@ -4,6 +4,7 @@ import { caretDown16, caretLeft16, caretRight16 } from "@esri/calcite-ui-icons";
 import { getElementDir } from "../utils/dom";
 import { CSS, TEXT } from "./resources";
 import CalciteIcon from "../utils/CalciteIcon";
+import { guid } from "../utils/guid";
 import classnames from "classnames";
 import { CalciteBlockSectionToggleDisplay } from "../interfaces";
 
@@ -68,6 +69,8 @@ export class CalciteBlockSection {
   @Element()
   el: HTMLCalciteBlockSectionElement;
 
+  guid = `calcite-block-section-${guid()}`;
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -97,16 +100,26 @@ export class CalciteBlockSection {
   // --------------------------------------------------------------------------
 
   render() {
-    const { el, open, text, textCollapse, textExpand, toggleDisplay } = this;
+    const { el, guid: id, open, text, textCollapse, textExpand, toggleDisplay } = this;
     const dir = getElementDir(el);
     const arrowIcon = open ? caretDown16 : dir === "rtl" ? caretLeft16 : caretRight16;
     const toggleLabel = open ? textCollapse : textExpand;
+    const labelId = `${id}__label`;
 
     const headerNode =
       toggleDisplay === "switch" ? (
-        <label aria-label={toggleLabel} class={classnames(CSS.toggle, CSS.toggleSwitch)}>
+        <label
+          aria-label={toggleLabel}
+          class={classnames(CSS.toggle, CSS.toggleSwitch)}
+          id={labelId}
+        >
           {text}
-          <calcite-switch switched={open} onChange={this.toggleSection} scale="s" />
+          <calcite-switch
+            aria-labelledby={labelId}
+            switched={open}
+            onChange={this.toggleSection}
+            scale="s"
+          />
         </label>
       ) : (
         <calcite-action

diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts
@@ -1,8 +1,8 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { E2EPage } from "@stencil/core/dist/testing/puppeteer/puppeteer-declarations";
+import { E2EPage } from "@stencil/core/testing";
 import { JSX } from "../components/components";
 import { toHaveNoViolations } from "jest-axe";
 import axe from "axe-core";
+import { SetUpPageOptions, setUpPage } from "./utils";
 
 expect.extend(toHaveNoViolations);
 
@@ -25,15 +25,13 @@ function getTag(tagOrHTML: string): CalciteComponentTag {
   return tagOrHTML as CalciteComponentTag;
 }
 
-async function simplePageSetup(componentTagOrHTML: TagOrHTML): Promise<E2EPage> {
-  const page = await newE2EPage();
+async function simplePageSetup(componentTagOrHTML: TagOrHTML, options?: SetUpPageOptions): Promise<E2EPage> {
   const componentTag = getTag(componentTagOrHTML);
-  await page.setContent(isHTML(componentTagOrHTML) ? componentTagOrHTML : `<${componentTag}><${componentTag}/>`);
-  return page;
+  return setUpPage(isHTML(componentTagOrHTML) ? componentTagOrHTML : `<${componentTag}><${componentTag}/>`, options);
 }
 
-export async function accessible(componentTagOrHTML: TagOrHTML): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
+export async function accessible(componentTagOrHTML: TagOrHTML, options?: SetUpPageOptions): Promise<void> {
+  const page = await simplePageSetup(componentTagOrHTML, options);
   await page.addScriptTag({ path: require.resolve("axe-core") });
 
   expect(
@@ -45,8 +43,8 @@ export async function accessible(componentTagOrHTML: TagOrHTML): Promise<void> {
   ).toHaveNoViolations();
 }
 
-export async function renders(componentTagOrHTML: TagOrHTML): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
+export async function renders(componentTagOrHTML: TagOrHTML, options?: SetUpPageOptions): Promise<void> {
+  const page = await simplePageSetup(componentTagOrHTML, options);
   const element = await page.find(getTag(componentTagOrHTML));
 
   expect(element).toHaveClass("hydrated");
@@ -58,9 +56,10 @@ export async function reflects(
   propsToTest: {
     propertyName: string;
     value: any;
-  }[]
+  }[],
+  options?: SetUpPageOptions
 ): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
+  const page = await simplePageSetup(componentTagOrHTML, options);
   const componentTag = getTag(componentTagOrHTML);
   const element = await page.find(componentTag);
 
@@ -92,9 +91,10 @@ export async function defaults(
   propsToTest: {
     propertyName: string;
     defaultValue: any;
-  }[]
+  }[],
+  options?: SetUpPageOptions
 ): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
+  const page = await simplePageSetup(componentTagOrHTML, options);
   const element = await page.find(getTag(componentTagOrHTML));
 
   for (const propAndValue of propsToTest) {
@@ -104,8 +104,8 @@ export async function defaults(
   }
 }
 
-export async function hidden(componentTagOrHTML: TagOrHTML): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
+export async function hidden(componentTagOrHTML: TagOrHTML, options?: SetUpPageOptions): Promise<void> {
+  const page = await simplePageSetup(componentTagOrHTML, options);
   const element = await page.find(getTag(componentTagOrHTML));
 
   element.setAttribute("hidden", "");

diff --git a/src/tests/utils.ts b/src/tests/utils.ts
@@ -1,17 +1,16 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 
-export async function setUpPage(
-  content: string,
-  options?: {
-    withPeerDependencies: boolean;
-  }
-): Promise<E2EPage> {
+export interface SetUpPageOptions {
+  withPeerDependencies: boolean;
+}
+
+export async function setUpPage(content: string, options?: SetUpPageOptions): Promise<E2EPage> {
   const page = await newE2EPage();
   await page.setContent(content);
 
   if (options && options.withPeerDependencies) {
     await page.addScriptTag({
-      url: "https://unpkg.com/@esri/calcite-components@1.0.0-beta.10/dist/calcite/calcite.esm.js",
+      url: "vendor/@esri/calcite-components/calcite.esm.js",
       type: "module"
     });