test: removes text directionality e2e commonTests, screenshot test fu…

…nctionality (#2195) * test(e2e): removed experimental screenshot flag, pngs * test(tabs, tile, tile-select, tile-select-group): new dir approach, remove screenshot tests * test: remove computed dir check entirely, rely on ESlint rule (#2108)
Esri · May 21, 2021 · d18dc51 · d18dc51
1 parent 89d0017
commit d18dc51
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 305 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "util:prep-next-from-existing-build": "ts-node ./support/prepareVersionUpdate.ts --next --standard-version-options=\"--skip.changelog\"",
     "util:publish-next": "npm publish --tag next",
     "util:push-tags": "git push --follow-tags",
-    "util:run-tests": "npm run util:copy-icons && stencil test --no-docs --spec --e2e --screenshot"
+    "util:run-tests": "npm run util:copy-icons && stencil test --no-docs --spec --e2e"
   },
   "repository": {
     "type": "git",

diff --git a/screenshot/.gitignore b/screenshot/.gitignore
@@ -1,3 +1,3 @@
-# images
+images
 builds
 compare.html
diff --git a/screenshot/images/7b07b85e7a8a6f11277c5a9dc672e9ef.png b/screenshot/images/7b07b85e7a8a6f11277c5a9dc672e9ef.png
diff --git a/screenshot/images/8415e8f047f1f3219cf3b6b457baa06e.png b/screenshot/images/8415e8f047f1f3219cf3b6b457baa06e.png
diff --git a/screenshot/images/90594e075e746a81abcbaf78d77ed889.png b/screenshot/images/90594e075e746a81abcbaf78d77ed889.png
diff --git a/screenshot/images/a00d1e52f8af2eedcd19cd026a2c6844.png b/screenshot/images/a00d1e52f8af2eedcd19cd026a2c6844.png
diff --git a/screenshot/images/a6e8ded6d9e9915ddd708f86740cd48e.png b/screenshot/images/a6e8ded6d9e9915ddd708f86740cd48e.png
diff --git a/screenshot/images/b6bab2718f9492709dcd03a1b3030f50.png b/screenshot/images/b6bab2718f9492709dcd03a1b3030f50.png
diff --git a/screenshot/images/ccc4e36251cc94f5793d2387213f7d6e.png b/screenshot/images/ccc4e36251cc94f5793d2387213f7d6e.png
diff --git a/screenshot/images/da72aeb3598f57baa39f0f0629d55e49.png b/screenshot/images/da72aeb3598f57baa39f0f0629d55e49.png
diff --git a/screenshot/images/f7d838ff3576e4afc65645be9bda9252.png b/screenshot/images/f7d838ff3576e4afc65645be9bda9252.png
diff --git a/src/components/calcite-tabs/calcite-tabs.e2e.ts b/src/components/calcite-tabs/calcite-tabs.e2e.ts
@@ -1,7 +1,23 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, HYDRATED_ATTR } from "../../tests/commonTests";
+import { accessible, renders } from "../../tests/commonTests";
 
 describe("calcite-tabs", () => {
+  const tabsSnippet = `<calcite-tabs>
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+
+    <calcite-tab active>Tab 1 Content</calcite-tab>
+    <calcite-tab>Tab 2 Content</calcite-tab>
+    <calcite-tab>Tab 3 Content</calcite-tab>
+    <calcite-tab>Tab 4 Content</calcite-tab>
+  </calcite-tabs>`;
+
+  it("renders", async () => renders(tabsSnippet));
+
   it("is accessible", async () =>
     accessible(
       `<calcite-tabs>
@@ -19,60 +35,6 @@ describe("calcite-tabs", () => {
       </calcite-tabs>`
     ));
 
-  it("renders with a light theme", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent(`
-      <calcite-tabs>
-        <calcite-tab-nav slot="tab-nav">
-          <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
-          <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-          <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-          <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-        </calcite-tab-nav>
-
-        <calcite-tab active>Tab 1 Content</calcite-tab>
-        <calcite-tab>Tab 2 Content</calcite-tab>
-        <calcite-tab>Tab 3 Content</calcite-tab>
-        <calcite-tab>Tab 4 Content</calcite-tab>
-      </calcite-tabs>
-    `);
-    const element = await page.find("calcite-tabs");
-    expect(element).toHaveAttribute(HYDRATED_ATTR);
-
-    const results = await page.compareScreenshot();
-
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
-  });
-
-  it("renders with a dark theme", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent(`
-      <div style="background: black">
-        <calcite-tabs theme="dark">
-          <calcite-tab-nav slot="tab-nav">
-            <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>
-
-          <calcite-tab active>Tab 1 Content</calcite-tab>
-          <calcite-tab>Tab 2 Content</calcite-tab>
-          <calcite-tab>Tab 3 Content</calcite-tab>
-          <calcite-tab>Tab 4 Content</calcite-tab>
-        </calcite-tabs>
-      </div>
-    `);
-    const element = await page.find("calcite-tabs");
-    expect(element).toHaveAttribute(HYDRATED_ATTR);
-
-    const results = await page.compareScreenshot();
-
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
-  });
-
   it("sets up basic aria attributes", async () => {
     const page = await newE2EPage();
 
@@ -150,10 +112,6 @@ describe("calcite-tabs", () => {
       expect(title).toEqualAttribute("aria-controls", tab.id);
       expect(tab).toEqualAttribute("aria-labelledby", title.id);
     }
-
-    const results = await page.compareScreenshot();
-
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
   });
 
   it("disallows selection of a disabled tab", async () => {

diff --git a/src/components/calcite-tile-select-group/calcite-tile-select-group.e2e.ts b/src/components/calcite-tile-select-group/calcite-tile-select-group.e2e.ts
@@ -1,5 +1,4 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, reflects, renders, inheritsDirection, honorsOwnDir } from "../../tests/commonTests";
+import { accessible, defaults, reflects, renders } from "../../tests/commonTests";
 
 describe("calcite-tile-select-group", () => {
   it("renders", async () => renders("calcite-tile-select-group"));
@@ -10,65 +9,4 @@ describe("calcite-tile-select-group", () => {
     defaults("calcite-tile-select-group", [{ propertyName: "layout", defaultValue: "horizontal" }]));
 
   it("reflects", async () => reflects("calcite-tile-select-group", [{ propertyName: "layout", value: "horizontal" }]));
-
-  describe("text directionality", () => {
-    const groupContent = `<calcite-tile-select input-enabled input-alignment="end" icon="layers" name="end-checkbox-one" type="checkbox"
-      heading="Tile title lorem ipsum"
-      description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.">
-    </calcite-tile-select>
-    <calcite-tile-select input-enabled input-alignment="end" icon="layers" name="end-checkbox-two" type="checkbox"
-      heading="Tile title lorem ipsum"
-      description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.">
-    </calcite-tile-select>
-    <calcite-tile-select checked input-enabled input-alignment="end" icon="layers" name="end-checkbox-three"
-      type="checkbox" heading="Tile title lorem ipsum"
-      description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.">
-    </calcite-tile-select>`;
-    let html = "";
-
-    describe("initial render", () => {
-      beforeEach(() => {
-        html = `<calcite-tile-select-group>${groupContent}</calcite-tile-select-group>`;
-      });
-
-      it("should have default LTR direction, but no `dir` attribute", async () => {
-        const page = await newE2EPage({ html });
-        const el = await page.find("calcite-tile-select-group");
-        const elStyles = await el.getComputedStyle();
-        expect(elStyles["direction"]).toEqual("ltr");
-        expect(el.getAttribute("dir")).toBeNull();
-      });
-
-      it("matches a screenshot", async () => {
-        const page = await newE2EPage({ html });
-        // 1: screenshot diff for LTR
-        const results = await page.compareScreenshot();
-        expect(results).toMatchScreenshot();
-      });
-    });
-
-    describe("when inheriting direction from further up the DOM tree", () => {
-      it("should honor ancestor's `dir` attribute, and not have its own `dir` attribute", async () => {
-        await Promise.all([
-          await inheritsDirection("calcite-tile-select-group", "ltr"),
-          await inheritsDirection("calcite-tile-select-group", "rtl")
-        ]);
-      });
-    });
-
-    describe(`when dir="rtl"`, () => {
-      beforeEach(() => {
-        html = `<calcite-tile-select-group dir="rtl">${groupContent}</calcite-tile-select-group>`;
-      });
-
-      it("should render with text direction based on `dir` value", async () => honorsOwnDir(html, "rtl"));
-
-      it("matches a screenshot", async () => {
-        const page = await newE2EPage({ html });
-        // 2: screenshot diff for RTL
-        const results = await page.compareScreenshot();
-        expect(results).toMatchScreenshot();
-      });
-    });
-  });
 });
diff --git a/src/components/calcite-tile-select/calcite-tile-select.e2e.ts b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts
@@ -1,14 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import {
-  accessible,
-  defaults,
-  focusable,
-  hidden,
-  reflects,
-  renders,
-  inheritsDirection,
-  honorsOwnDir
-} from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
 import { html } from "../../tests/utils";
 
 describe("calcite-tile-select", () => {
@@ -128,76 +119,4 @@ describe("calcite-tile-select", () => {
     focusable(html`<calcite-tile-select type="radio"></calcite-tile-select>`, {
       focusTargetSelector: "input[type=radio]"
     }));
-
-  describe("text directionality", () => {
-    let html = "";
-
-    describe("initial render", () => {
-      beforeEach(() => {
-        html = `
-        <calcite-tile-select
-          checked
-          heading="Hello world!"
-          icon="layer"
-          input-enabled
-          input-alignment="end"
-          type="checkbox"
-          value="one"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-        ></calcite-tile-select>
-        `;
-      });
-
-      it("should have default LTR direction, but no `dir` attribute", async () => {
-        const page = await newE2EPage({ html });
-        const el = await page.find("calcite-tile-select");
-        const elStyles = await el.getComputedStyle();
-        expect(elStyles["direction"]).toEqual("ltr");
-        expect(el.getAttribute("dir")).toBeNull();
-      });
-
-      it("matches a screenshot", async () => {
-        const page = await newE2EPage({ html });
-        // 1: screenshot diff for LTR
-        const results = await page.compareScreenshot();
-        expect(results).toMatchScreenshot();
-      });
-    });
-
-    describe("when inheriting direction from further up the DOM tree", () => {
-      it("should honor ancestor's `dir` attribute, and not have its own `dir` attribute", async () => {
-        await Promise.all([
-          await inheritsDirection("calcite-tile-select", "ltr"),
-          await inheritsDirection("calcite-tile-select", "rtl")
-        ]);
-      });
-    });
-
-    describe(`when dir="rtl"`, () => {
-      beforeEach(() => {
-        html = `
-        <calcite-tile-select
-          checked
-          heading="Hello world!"
-          icon="layer"
-          input-enabled
-          input-alignment="end"
-          type="checkbox"
-          value="one"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          dir="rtl"
-        ></calcite-tile-select>
-        `;
-      });
-
-      it("should render with text direction based on `dir` value", async () => honorsOwnDir(html, "rtl"));
-
-      it("matches a screenshot", async () => {
-        const page = await newE2EPage({ html });
-        // 2: screenshot diff for RTL
-        const results = await page.compareScreenshot();
-        expect(results).toMatchScreenshot();
-      });
-    });
-  });
 });
diff --git a/src/components/calcite-tile/calcite-tile.e2e.ts b/src/components/calcite-tile/calcite-tile.e2e.ts
@@ -1,13 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import {
-  accessible,
-  defaults,
-  hidden,
-  reflects,
-  renders,
-  inheritsDirection,
-  honorsOwnDir
-} from "../../tests/commonTests";
+import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
 
 describe("calcite-tile", () => {
   it("renders", async () => renders("calcite-tile"));
@@ -98,68 +90,4 @@ describe("calcite-tile", () => {
     expect(heading).toEqualText("My Large Visual Calcite Tile");
     expect(description).toBeNull();
   });
-
-  describe("text directionality", () => {
-    let html = "";
-
-    describe("initial render", () => {
-      beforeEach(() => {
-        html = `
-          <calcite-tile
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-            heading="Hello world!"
-            href="#"
-            icon="layer"
-          ></calcite-tile>
-        `;
-      });
-
-      it("should have default LTR direction, but no `dir` attribute", async () => {
-        const page = await newE2EPage({ html });
-        const el = await page.find("calcite-tile");
-        const elStyles = await el.getComputedStyle();
-        expect(elStyles["direction"]).toEqual("ltr");
-        expect(el.getAttribute("dir")).toBeNull();
-      });
-
-      it("matches a screenshot", async () => {
-        const page = await newE2EPage({ html });
-        // 1: screenshot diff for LTR
-        const results = await page.compareScreenshot();
-        expect(results).toMatchScreenshot();
-      });
-    });
-
-    describe("when inheriting direction from further up the DOM tree", () => {
-      it("should honor ancestor's `dir` attribute, and not have its own `dir` attribute", async () => {
-        await Promise.all([
-          await inheritsDirection("calcite-tile", "ltr"),
-          await inheritsDirection("calcite-tile", "rtl")
-        ]);
-      });
-    });
-
-    describe(`when dir="rtl"`, () => {
-      beforeEach(() => {
-        html = `
-          <calcite-tile
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-            heading="Hello world!"
-            href="#"
-            icon="layer"
-            dir="rtl"
-          ></calcite-tile>
-        `;
-      });
-
-      it("should render with text direction based on `dir` value", async () => honorsOwnDir(html, "rtl"));
-
-      it("matches a screenshot", async () => {
-        const page = await newE2EPage({ html });
-        // 2: screenshot diff for RTL
-        const results = await page.compareScreenshot();
-        expect(results).toMatchScreenshot();
-      });
-    });
-  });
 });
diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts
@@ -3,7 +3,6 @@ import { JSX } from "../components";
 import { toHaveNoViolations } from "jest-axe";
 import axe from "axe-core";
 import { config } from "../../stencil.config";
-import { Direction } from "../utils/dom";
 
 expect.extend(toHaveNoViolations);
 
@@ -167,28 +166,3 @@ export async function focusable(componentTagOrHTML: TagOrHTML, options?: Focusab
 
   expect(await page.evaluate((selector) => document.activeElement.matches(selector), focusTargetSelector)).toBe(true);
 }
-
-export async function inheritsDirection(componentTag: CalciteComponentTag, direction: Direction): Promise<void> {
-  const page = await newE2EPage({
-    html: `
-    <html dir="${direction}">
-      <body>
-        <${componentTag}></${componentTag}>
-      </body>
-    </html>
-  `
-  });
-  const element = await page.find(componentTag);
-  const elStyles = await element.getComputedStyle();
-  expect(element.getAttribute("dir")).toBeNull();
-  expect(elStyles["direction"]).toBe(direction);
-}
-
-export async function honorsOwnDir(componentTagOrHTML: TagOrHTML, direction: Direction): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
-  const element = await page.find(getTag(componentTagOrHTML));
-  element.setAttribute("dir", direction);
-  await page.waitForChanges();
-  const elStyles = await element.getComputedStyle();
-  expect(elStyles["direction"]).toBe(direction);
-}