From df4989a4924dbe8bff5ccca5d84fb002da1df736 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 11 Oct 2023 14:14:34 -0400 Subject: [PATCH 1/2] test(empty-state): add a11y; visual tests --- .../empty-state/empty-state.a11y.test.ts | 17 +++++++++++++++++ .../empty-state/empty-state.visual.test.ts | 17 +++++++++++++++++ .../Chromium/baseline/s-empty-state-dark.png | 3 +++ .../s-empty-state-highcontrast-dark.png | 3 +++ .../s-empty-state-highcontrast-light.png | 3 +++ .../Chromium/baseline/s-empty-state-light.png | 3 +++ 6 files changed, 46 insertions(+) create mode 100644 lib/components/empty-state/empty-state.a11y.test.ts create mode 100644 lib/components/empty-state/empty-state.visual.test.ts create mode 100644 screenshots/Chromium/baseline/s-empty-state-dark.png create mode 100644 screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.png create mode 100644 screenshots/Chromium/baseline/s-empty-state-highcontrast-light.png create mode 100644 screenshots/Chromium/baseline/s-empty-state-light.png diff --git a/lib/components/empty-state/empty-state.a11y.test.ts b/lib/components/empty-state/empty-state.a11y.test.ts new file mode 100644 index 0000000000..a56597864e --- /dev/null +++ b/lib/components/empty-state/empty-state.a11y.test.ts @@ -0,0 +1,17 @@ +import { html } from "@open-wc/testing"; +import { SpotEmptyXL } from "@stackoverflow/stacks-icons"; +import { runComponentTests } from "../../test/test-utils"; +import "../../index"; + +describe("empty-state", () => { + runComponentTests({ + type: "a11y", + baseClass: "s-empty-state", + children: { + default: `${SpotEmptyXL}

Hello! This is a wonderful empty state component.

`, + }, + template: ({ component, testid }) => html` +
${component}
+ `, + }); +}); diff --git a/lib/components/empty-state/empty-state.visual.test.ts b/lib/components/empty-state/empty-state.visual.test.ts new file mode 100644 index 0000000000..5421285459 --- /dev/null +++ b/lib/components/empty-state/empty-state.visual.test.ts @@ -0,0 +1,17 @@ +import { html } from "@open-wc/testing"; +import { SpotEmptyXL } from "@stackoverflow/stacks-icons"; +import { runComponentTests } from "../../test/test-utils"; +import "../../index"; + +describe("empty-state", () => { + runComponentTests({ + type: "visual", + baseClass: "s-empty-state", + children: { + default: `${SpotEmptyXL}

Hello! This is a wonderful empty state component.

`, + }, + template: ({ component, testid }) => html` +
${component}
+ `, + }); +}); diff --git a/screenshots/Chromium/baseline/s-empty-state-dark.png b/screenshots/Chromium/baseline/s-empty-state-dark.png new file mode 100644 index 0000000000..0726dc4bae --- /dev/null +++ b/screenshots/Chromium/baseline/s-empty-state-dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:29175eca934d55812cb392c2fd6edaed16efab578788529e7c661b68b6ac71d4 +size 10831 diff --git a/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.png b/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.png new file mode 100644 index 0000000000..9e9c1ed518 --- /dev/null +++ b/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3cff1ed7025834ee9b4b24955ba1dc9900cbfcb7a555365fc35ecad21947b4dc +size 10615 diff --git a/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.png b/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.png new file mode 100644 index 0000000000..4e3ba89145 --- /dev/null +++ b/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9eea05816051ca26fa2850b5ea47aa2df6a6eda781df141f9ebf94d2766ffd96 +size 10558 diff --git a/screenshots/Chromium/baseline/s-empty-state-light.png b/screenshots/Chromium/baseline/s-empty-state-light.png new file mode 100644 index 0000000000..0d4185c5f4 --- /dev/null +++ b/screenshots/Chromium/baseline/s-empty-state-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:84e6b9d0763fcffdce9ce459cb4e254e825d0009cae50303b839e736217342d0 +size 10562 From 0c8822c75bac544f43ee479d64193b88ab130509 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 17 Oct 2023 13:59:37 -0400 Subject: [PATCH 2/2] Generate missing baseline visual regression images --- screenshots/Firefox/baseline/s-empty-state-dark.png | 3 +++ .../Firefox/baseline/s-empty-state-highcontrast-dark.png | 3 +++ .../Firefox/baseline/s-empty-state-highcontrast-light.png | 3 +++ screenshots/Firefox/baseline/s-empty-state-light.png | 3 +++ screenshots/Webkit/baseline/s-empty-state-dark.png | 3 +++ .../Webkit/baseline/s-empty-state-highcontrast-dark.png | 3 +++ .../Webkit/baseline/s-empty-state-highcontrast-light.png | 3 +++ screenshots/Webkit/baseline/s-empty-state-light.png | 3 +++ 8 files changed, 24 insertions(+) create mode 100644 screenshots/Firefox/baseline/s-empty-state-dark.png create mode 100644 screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.png create mode 100644 screenshots/Firefox/baseline/s-empty-state-highcontrast-light.png create mode 100644 screenshots/Firefox/baseline/s-empty-state-light.png create mode 100644 screenshots/Webkit/baseline/s-empty-state-dark.png create mode 100644 screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.png create mode 100644 screenshots/Webkit/baseline/s-empty-state-highcontrast-light.png create mode 100644 screenshots/Webkit/baseline/s-empty-state-light.png diff --git a/screenshots/Firefox/baseline/s-empty-state-dark.png b/screenshots/Firefox/baseline/s-empty-state-dark.png new file mode 100644 index 0000000000..b462d1e419 --- /dev/null +++ b/screenshots/Firefox/baseline/s-empty-state-dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0babf37f642d8c149fc134e58199a69d784cd540311a19c59e6254f3547d3358 +size 12720 diff --git a/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.png b/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.png new file mode 100644 index 0000000000..540fee1bd3 --- /dev/null +++ b/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:07c4384486bd74cba9f6242c5d0586489024d86e04de5440c2268f4bb2c66665 +size 12511 diff --git a/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.png b/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.png new file mode 100644 index 0000000000..d903b09657 --- /dev/null +++ b/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a3aabeee38f89bb0504b0348b8adc955f4be9a20e4d62afa01136d9de7b456cc +size 12378 diff --git a/screenshots/Firefox/baseline/s-empty-state-light.png b/screenshots/Firefox/baseline/s-empty-state-light.png new file mode 100644 index 0000000000..401952a9bf --- /dev/null +++ b/screenshots/Firefox/baseline/s-empty-state-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4ed14ae4340834cbc4d6464d87710006b5386eba27098d8989f437a3312b4977 +size 12350 diff --git a/screenshots/Webkit/baseline/s-empty-state-dark.png b/screenshots/Webkit/baseline/s-empty-state-dark.png new file mode 100644 index 0000000000..795de93a01 --- /dev/null +++ b/screenshots/Webkit/baseline/s-empty-state-dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:215a31a34f7e0cb434a9b6f497993beda077b9420b95f17ab3d07517b1ad61d1 +size 9937 diff --git a/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.png b/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.png new file mode 100644 index 0000000000..4ef959a789 --- /dev/null +++ b/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f87d44aebcd38943b4d624f9ae431ab35374acdba4cd2802c3b69ef998964f0a +size 9647 diff --git a/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.png b/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.png new file mode 100644 index 0000000000..ca72f70ab9 --- /dev/null +++ b/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f2bfe7a0036f38b52176666ba109eb15bca9ae75a0ee716b9fa2e13874e2f05e +size 9253 diff --git a/screenshots/Webkit/baseline/s-empty-state-light.png b/screenshots/Webkit/baseline/s-empty-state-light.png new file mode 100644 index 0000000000..83f00d30af --- /dev/null +++ b/screenshots/Webkit/baseline/s-empty-state-light.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5eb50ffd2945ad9669ec3308600081034a7fd23cac11673a5964e169025918cd +size 9195