@stackoverflow/stacks - npm Package Compare versions

Comparing version 2.0.9 to 2.1.0-rc.0

lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -1,7 +0,6 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("activity-indicator", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-activity-indicator",
@@ -8,0 +7,0 @@ variants: ["danger", "success", "warning"],

lib/components/activity-indicator/activity-indicator.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("activity-indicator", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-activity-indicator",
@@ -9,0 +8,0 @@ variants: ["danger", "success", "warning"],

lib/components/anchor/anchor.a11y.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -11,4 +11,3 @@
 describe("anchors", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-anchors",
@@ -34,3 +33,2 @@ modifiers: {
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -37,0 +35,0 @@ },

lib/components/anchor/anchor.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -18,4 +18,3 @@
 describe("anchors", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-anchors",
@@ -41,3 +40,2 @@ modifiers: {
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -44,0 +42,0 @@ },

lib/components/avatar/avatar.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -25,4 +25,3 @@
 describe("avatar", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-avatar",
@@ -29,0 +28,0 @@ variants: ["24", "32", "48", "64", "96", "128"],

lib/components/avatar/avatar.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -29,4 +29,3 @@
 describe("avatar", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-avatar",
@@ -33,0 +32,0 @@ variants: ["24", "32", "48", "64", "96", "128"],

lib/components/award-bling/award-bling.a11y.test.ts

@@ -1,7 +0,6 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("award-bling", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-award-bling",
@@ -13,3 +12,2 @@ variants: ["gold", "silver", "bronze"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -16,0 +14,0 @@ },

lib/components/award-bling/award-bling.visual.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
@@ -6,4 +6,3 @@ import "../../index";
 describe("anchors", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-award-bling",
@@ -15,3 +14,2 @@ variants: ["gold", "silver", "bronze"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -18,0 +16,0 @@ },

lib/components/badge/badge.a11y.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 // import { Icons } from "@stackoverflow/stacks-icons";
@@ -18,4 +18,3 @@ import "../../index";
     variants.blings.map((bling) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: "s-badge",
@@ -33,4 +32,3 @@ variants: [bling],
     // Number counts
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
@@ -42,3 +40,2 @@ variants: variants.numbers,
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -50,4 +47,3 @@ },
     // Icon badges
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
@@ -63,3 +59,2 @@ variants: [...variants.states.filled, ...variants.states.other],
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -71,4 +66,3 @@ },
     // Filled badges
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
@@ -84,3 +78,2 @@ variants: variants.states.filled,
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -93,4 +86,3 @@ includeNullVariant: false,
     // User badges
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
@@ -108,4 +100,3 @@ variants: variants.users,
     // Sizes
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-badge",
@@ -112,0 +103,0 @@ modifiers: {

lib/components/badge/badge.visual.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 // import { Icons } from "@stackoverflow/stacks-icons";
@@ -28,4 +28,3 @@ import "../../index";
     // Base badge
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
@@ -41,4 +40,3 @@ children: {
     variants.blings.map((bling) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: "s-badge",
@@ -52,3 +50,2 @@ variants: [bling],
             options: {
-                ...defaultOptions,
                 includeNullVariant: false,
@@ -63,4 +60,3 @@ includeNullModifier: false,
     // Number counts
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
@@ -72,3 +68,2 @@ variants: variants.numbers,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -82,4 +77,3 @@ includeNullModifier: false,
     // Icon badges
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
@@ -95,3 +89,2 @@ variants: [...variants.states.filled, ...variants.states.other],
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -104,4 +97,3 @@ },
     // Filled badges
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
@@ -114,3 +106,2 @@ variants: variants.states.filled,
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -124,4 +115,3 @@ includeNullVariant: false,
     // User badges
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
@@ -136,3 +126,2 @@ variants: variants.users,
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -145,4 +134,3 @@ },
     // Sizes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-badge",
@@ -156,3 +144,2 @@ modifiers: {
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -159,0 +146,0 @@ },

lib/components/banner/banner.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -22,4 +22,3 @@
 describe("banner", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-banner",
@@ -26,0 +25,0 @@ variants: ["info", "success", "warning", "danger"],

lib/components/banner/banner.visual.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -22,4 +22,3 @@
 describe("banner", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-banner",
@@ -26,0 +25,0 @@ variants: ["info", "success", "warning", "danger"],

lib/components/block-link/block-link.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -16,4 +16,3 @@
     // Base block link
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-block-link",
@@ -30,4 +29,3 @@ modifiers: {
     // Base + danger
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-block-link",
@@ -41,3 +39,2 @@ modifiers: {
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -49,4 +46,3 @@ },
     // All left and rignt variants
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-block-link",
@@ -61,3 +57,2 @@ variants: ["left is-selected", "right is-selected"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -64,0 +59,0 @@ },

lib/components/block-link/block-link.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -16,4 +16,3 @@
     // Base block link
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-block-link",
@@ -30,4 +29,3 @@ modifiers: {
     // Base + danger
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-block-link",
@@ -41,3 +39,2 @@ modifiers: {
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -49,4 +46,3 @@ },
     // All left and rignt variants
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-block-link",
@@ -61,3 +57,2 @@ variants: ["left is-selected", "right is-selected"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -64,0 +59,0 @@ },

lib/components/breadcrumbs/breadcrumbs.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { html } from "@open-wc/testing";
@@ -6,4 +6,3 @@ import "../../index";
 describe("breadcrumbs", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-breadcrumbs",
@@ -10,0 +9,0 @@ children: {

lib/components/breadcrumbs/breadcrumbs.visual.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
@@ -6,4 +6,3 @@ import "../../index";
 describe("breadcrumbs", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-breadcrumbs",
@@ -10,0 +9,0 @@ children: {

lib/components/button/button.a11y.test.ts

@@ -1,7 +0,6 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("button", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-btn",
@@ -8,0 +7,0 @@ variants: ["danger", "muted"],

lib/components/button/button.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -19,4 +19,3 @@
     // TODO test disabled states, interaction pseudo-classes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-btn",
@@ -23,0 +22,0 @@ variants: ["danger", "muted"],

lib/components/card/card.a11y.test.ts

@@ -1,7 +0,6 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("card", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-card",
@@ -8,0 +7,0 @@ variants: ["muted"],

lib/components/card/card.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -28,4 +28,3 @@
 describe("card", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-card",
@@ -40,4 +39,3 @@ variants: ["muted"],
     // Stacked
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-card",
@@ -53,3 +51,2 @@ variants: ["stacked"], // dummy variant for testid differentiation
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -56,0 +53,0 @@ },

lib/components/check-control/check-control.a11y.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -8,4 +8,3 @@
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: "s-check-control",
@@ -30,3 +29,2 @@ modifiers: {
                 options: {
-                    ...defaultOptions,
                     testidSuffix: `${state}-${type}`,
@@ -33,0 +31,0 @@ },

lib/components/check-control/check-control.visual.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -8,4 +8,3 @@
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: "s-check-control",
@@ -33,3 +32,2 @@ modifiers: {
                 options: {
-                    ...defaultOptions,
                     testidSuffix: `${state}-${type}`,
@@ -36,0 +34,0 @@ },

lib/components/check-group/check-group.a11y.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -17,4 +17,3 @@
         ];
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             tag: "fieldset",
@@ -47,3 +46,2 @@ baseClass: "s-check-group",
             options: {
-                ...defaultOptions,
                 testidSuffix: type,
@@ -50,0 +48,0 @@ },

lib/components/check-group/check-group.visual.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -19,4 +19,3 @@
             ];
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 tag: "fieldset",
@@ -52,3 +51,2 @@ baseClass: "s-check-group",
                 options: {
-                    ...defaultOptions,
                     includeNullVariant: !isHorizontal,
@@ -55,0 +53,0 @@ testidSuffix: type,

lib/components/checkbox_radio/checkbox_radio.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -16,4 +16,3 @@
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 tag: "input",
@@ -34,3 +33,2 @@ baseClass: `s-${type}`,
                 options: {
-                    ...defaultOptions,
                     testidSuffix: state,
@@ -37,0 +35,0 @@ },

lib/components/checkbox_radio/checkbox_radio.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -18,4 +18,3 @@
         ["checked", "unchecked"].forEach((state) => {
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 tag: "input",
@@ -30,3 +29,2 @@ baseClass: `s-${type}`,
                 options: {
-                    ...defaultOptions,
                     testidSuffix: state,
@@ -33,0 +31,0 @@ },

lib/components/code-block/code-block.a11y.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import highlightedFixtures from "./code-block.fixtures";
@@ -7,4 +7,3 @@ import "../../index";
     Object.keys(highlightedFixtures).forEach((language) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             tag: "pre",
@@ -16,3 +15,2 @@ baseClass: `s-code-block language-${language}`,
             options: {
-                ...defaultOptions,
                 includeNullModifier: false,
@@ -19,0 +17,0 @@ },

lib/components/code-block/code-block.visual.test.ts

@@ -1,2 +0,2 @@
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import highlightedFixtures from "./code-block.fixtures";
@@ -7,4 +7,3 @@ import "../../index";
     Object.keys(highlightedFixtures).forEach((language) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             tag: "pre",
@@ -16,3 +15,2 @@ baseClass: `s-code-block language-${language}`,
             options: {
-                ...defaultOptions,
                 includeNullModifier: false,
@@ -19,0 +17,0 @@ },

lib/components/description/description.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -8,4 +8,3 @@
     describe("description", () => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             tag: "p",
@@ -17,3 +16,2 @@ baseClass: "s-description",
             options: {
-                ...defaultOptions,
                 testidSuffix: isDisabled ? "is-disabled" : "",
@@ -20,0 +18,0 @@ },

lib/components/description/description.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -8,4 +8,3 @@
     describe("description", () => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             tag: "p",
@@ -17,3 +16,2 @@ baseClass: "s-description",
             options: {
-                ...defaultOptions,
                 testidSuffix: isDisabled ? "is-disabled" : "",
@@ -20,0 +18,0 @@ },

lib/components/empty-state/empty-state.a11y.test.ts

 import { html } from "@open-wc/testing";
 import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("empty-state", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-empty-state",
@@ -10,0 +9,0 @@ children: {

lib/components/empty-state/empty-state.visual.test.ts

 import { html } from "@open-wc/testing";
 import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("empty-state", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-empty-state",
@@ -10,0 +9,0 @@ children: {

lib/components/expandable/expandable.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("expandable", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-expandable",
@@ -9,0 +8,0 @@ modifiers: {

lib/components/expandable/expandable.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("expandable", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-expandable",
@@ -9,0 +8,0 @@ modifiers: {

lib/components/input_textarea/input_textarea.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -37,4 +37,3 @@
         // Base styles w/ value, modifiers
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: `s-${type}`,
@@ -63,4 +62,3 @@ modifiers: {
 
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: `s-${type} ${attrString}`,
@@ -93,4 +91,3 @@ tag: type,
         states.forEach((state) => {
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: `s-${type} state-${state}`,
@@ -97,0 +94,0 @@ tag: type,

lib/components/input_textarea/input_textarea.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -34,4 +34,3 @@
         // Base styles w/ value, modifiers
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: `s-${type}`,
@@ -69,4 +68,3 @@ modifiers: {
             }
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: `s-${type} ${attrString}`,
@@ -82,4 +80,3 @@ tag: type,
         states.forEach((state) => {
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: `s-${type} state-${state}`,
@@ -86,0 +83,0 @@ tag: type,

lib/components/input-fill/input-fill.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -11,4 +11,3 @@
 describe("input-fill", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-input-fill`,
@@ -15,0 +14,0 @@ modifiers: {

lib/components/input-fill/input-fill.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -11,4 +11,3 @@
 describe("input-fill", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: `s-input-fill`,
@@ -15,0 +14,0 @@ modifiers: {

lib/components/input-message/input-message.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -31,4 +31,3 @@
     states.forEach((state) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: `s-input-message ${
@@ -35,0 +34,0 @@ state.class ? `state-${state.class}` : ""

lib/components/input-message/input-message.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -32,4 +32,3 @@
     states.forEach((state) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: `s-input-message ${
@@ -36,0 +35,0 @@ state.class ? `state-${state.class}` : ""

lib/components/label/label.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -31,4 +31,3 @@
 describe("label", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-label`,
@@ -35,0 +34,0 @@ modifiers: {

lib/components/label/label.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -40,4 +40,3 @@
 
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: `s-label`,
@@ -44,0 +43,0 @@ modifiers: {

lib/components/link-preview/link-preview.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -36,4 +36,3 @@
 describe("link preview", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-link-preview",
@@ -40,0 +39,0 @@ children: {

lib/components/link-preview/link-preview.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -36,5 +36,5 @@
 };
+
 describe("link preview", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-link-preview",
@@ -41,0 +41,0 @@ children: {

lib/components/link/link.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -6,4 +6,3 @@
     // TODO check for visited styling
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-link",
@@ -10,0 +9,0 @@ modifiers: {

lib/components/link/link.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -7,4 +7,3 @@
     // TODO check for visited styling
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-link",
@@ -11,0 +10,0 @@ modifiers: {

lib/components/menu/menu.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("menu", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-menu`,
@@ -9,0 +8,0 @@ children: {

lib/components/menu/menu.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("menu", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: `s-menu`,
@@ -9,0 +8,0 @@ children: {

lib/components/modal/modal.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
@@ -7,4 +7,3 @@ import "../../index";
 describe("modal", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: `s-modal`,
@@ -11,0 +10,0 @@ variants: ["danger"],

lib/components/modal/modal.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
@@ -7,4 +7,3 @@ import "../../index";
 describe("modal", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: `s-modal`,
@@ -11,0 +10,0 @@ variants: ["danger"],

lib/components/navigation/navigation.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { WCAGNonTextContrast } from "../../test/assertions";
@@ -58,4 +58,3 @@ import "../../index";
 describe("navigation", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-navigation",
@@ -62,0 +61,0 @@ variants: ["vertical", "muted"],

lib/components/navigation/navigation.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -57,4 +57,3 @@
 describe("navigation", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-navigation",
@@ -80,4 +79,3 @@ variants: ["muted"],
 
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-navigation",
@@ -99,3 +97,2 @@ variants: ["vertical"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -102,0 +99,0 @@ },

lib/components/notice/notice.a11y.test.ts

@@ -1,7 +0,6 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("notice", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-notice",
@@ -8,0 +7,0 @@ variants: ["info", "success", "warning", "danger"],

lib/components/notice/notice.visual.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
@@ -6,4 +6,3 @@ import "../../index";
 describe("notice", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-notice",
@@ -10,0 +9,0 @@ variants: ["info", "success", "warning", "danger"],

lib/components/page-title/page-title.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("page title", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-page-title",
@@ -9,0 +8,0 @@ children: {

lib/components/page-title/page-title.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -50,4 +50,3 @@
 describe("page title", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-page-title",
@@ -54,0 +53,0 @@ children: {

lib/components/pagination/pagination.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { WCAGNonTextContrast } from "../../test/assertions";
@@ -6,4 +6,3 @@ import "../../index";
 describe("pagination", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-pagination",
@@ -10,0 +9,0 @@ children: {

lib/components/pagination/pagination.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
 describe("pagination", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-pagination",
@@ -9,0 +8,0 @@ children: {

lib/components/progress-bar/progress-bar.a11y.test.ts

@@ -6,3 +6,3 @@ import { html } from "@open-wc/testing";
 } from "@stackoverflow/stacks-icons/icons";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -101,4 +101,3 @@
     // Base
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
@@ -113,4 +112,3 @@ variants: ["brand", "info"],
     // Badge
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
@@ -126,3 +124,2 @@ variants: ["badge"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -134,4 +131,3 @@ includeNullModifier: false,
     // Circular
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
@@ -150,3 +146,2 @@ variants: ["circular"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -158,4 +153,3 @@ includeNullModifier: false,
     // Privilege
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
@@ -168,3 +162,2 @@ variants: ["privilege"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -175,4 +168,3 @@ },
     // Segmented
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
@@ -185,3 +177,2 @@ variants: ["segmented"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -192,4 +183,3 @@ },
     // Stepped
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-progress",
@@ -206,3 +196,2 @@ variants: ["stepped"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -209,0 +198,0 @@ },

lib/components/progress-bar/progress-bar.visual.test.ts

@@ -6,3 +6,3 @@ import { html } from "@open-wc/testing";
 } from "@stackoverflow/stacks-icons/icons";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -101,4 +101,3 @@
     // Base
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
@@ -113,4 +112,3 @@ variants: ["brand", "info"],
     // Badge
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
@@ -126,3 +124,2 @@ variants: ["badge"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -134,4 +131,3 @@ includeNullModifier: false,
     // Circular
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
@@ -150,3 +146,2 @@ variants: ["circular"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -158,4 +153,3 @@ includeNullModifier: false,
     // Privilege
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
@@ -168,3 +162,2 @@ variants: ["privilege"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -175,4 +168,3 @@ },
     // Segmented
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
@@ -185,3 +177,2 @@ variants: ["segmented"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -192,4 +183,3 @@ },
     // Stepped
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-progress",
@@ -206,3 +196,2 @@ variants: ["stepped"],
         options: {
-            ...defaultOptions,
             includeNullVariant: false,
@@ -209,0 +198,0 @@ },

lib/components/spinner/spinner.a11y.test.ts

@@ -1,7 +0,6 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("spinner", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-spinner",
@@ -8,0 +7,0 @@ modifiers: {

lib/components/spinner/spinner.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -11,4 +11,3 @@
     // default, sizes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-spinner",
@@ -24,4 +23,3 @@ modifiers: {
     // applied font color
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-spinner",
@@ -37,4 +35,3 @@ modifiers: {
     // .is-loading
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "is-loading",
@@ -41,0 +38,0 @@ children: {

lib/components/table/table.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -79,3 +79,3 @@
             <tr>
-                <td scope="row"><span class="v-visible-sr">Empty</span></td>
+                <td><span class="v-visible-sr">Empty</span></td>
                 <th scope="row" class="ta-left">Totals</th>
@@ -92,4 +92,3 @@ <td><span class="v-visible-sr">Empty</span></td>
     // default, sizes
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-table",
@@ -96,0 +95,0 @@ variants: ["stripes"],

lib/components/table/table.visual.test.ts

 import { html } from "@open-wc/testing";
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -92,4 +92,3 @@
     // default, sizes
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-table",
@@ -96,0 +95,0 @@ variants: ["stripes"],

lib/components/tag/tag.a11y.test.ts

 import { IconClearSm } from "@stackoverflow/stacks-icons";
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -12,4 +12,3 @@
 describe("tag", () => {
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-tag",
@@ -16,0 +15,0 @@ variants: ["ignored", "watched", "moderator", "muted", "required"],

lib/components/tag/tag.visual.test.ts

 import { html } from "@open-wc/testing";
 import { IconClearSm } from "@stackoverflow/stacks-icons";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -18,4 +18,3 @@
 describe("tag", () => {
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-tag",
@@ -31,4 +30,3 @@ variants: ["ignored", "watched", "moderator", "muted", "required"],
     // Size modifiers
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-tag",
@@ -44,3 +42,2 @@ modifiers: {
         options: {
-            ...defaultOptions,
             includeNullModifier: false,
@@ -47,0 +44,0 @@ },

lib/components/toast/toast.a11y.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import { html } from "@open-wc/testing";
@@ -7,4 +7,3 @@ import "../../index";
     // This is a test of notice component wrapped in a toast component
-    runComponentTests({
-        type: "a11y",
+    runA11yTests({
         baseClass: "s-notice", // s-toast is a wrapper around s-notice
@@ -11,0 +10,0 @@ variants: ["info", "success", "warning", "danger"],

lib/components/toast/toast.visual.test.ts

@@ -1,2 +0,2 @@
-import { runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
@@ -7,4 +7,3 @@ import "../../index";
     // This is a test of notice component wrapped in a toast component
-    runComponentTests({
-        type: "visual",
+    runVisualTests({
         baseClass: "s-notice", // s-toast is a wrapper around s-notice
@@ -11,0 +10,0 @@ variants: ["info", "success", "warning", "danger"],

lib/components/toggle-switch/toggle-switch.a11y.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
@@ -14,4 +14,3 @@
 
-            runComponentTests({
-                type: "a11y",
+            runA11yTests({
                 baseClass: "s-toggle-switch",
@@ -40,4 +39,3 @@ modifiers: {
     [true, false].forEach((offChecked) => {
-        runComponentTests({
-            type: "a11y",
+        runA11yTests({
             baseClass: "s-toggle-switch",
@@ -63,3 +61,2 @@ variants: ["multiple"],
             options: {
-                ...defaultOptions,
                 includeNullVariant: false,
@@ -66,0 +63,0 @@ },

lib/components/toggle-switch/toggle-switch.visual.test.ts

 import { html } from "@open-wc/testing";
-import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
@@ -14,4 +14,3 @@
 
-            runComponentTests({
-                type: "visual",
+            runVisualTests({
                 baseClass: "s-toggle-switch",
@@ -26,3 +25,2 @@ tag: "input",
                 options: {
-                    ...defaultOptions,
                     includeNullModifier: false,
@@ -43,4 +41,3 @@ testidSuffix,
     [true, false].forEach((offChecked) => {
-        runComponentTests({
-            type: "visual",
+        runVisualTests({
             baseClass: "s-toggle-switch",
@@ -65,3 +62,2 @@ variants: ["multiple"],
             options: {
-                ...defaultOptions,
                 includeNullModifier: false,
@@ -68,0 +64,0 @@ includeNullVariant: false,

lib/test/assertions.ts

 import { expect } from "@open-wc/testing";
 import Color from "colorjs.io";
-import type { AdditionalAssertion } from "./test-utils";
 
+type AdditionalAssertion = {
+    description: string;
+    assertion: (node: HTMLElement) => Promise<void> | void;
+};
+
 // TODO: evaluate if we can do this check against all the components
 // automatically instead of having to add the assertion manually
-export const WCAGNonTextContrast: AdditionalAssertion = {
+const WCAGNonTextContrast: AdditionalAssertion = {
     description:
@@ -21,3 +25,3 @@ "should pass WCAG22 1.4.11 non-text-contrast success criterion (https://www.w3.org/TR/WCAG22/#non-text-contrast)",
 
-        // we are specificng WCAG21 because of colorjs.io API
+        // we are specifing WCAG21 because of colorjs.io API
         // WCAG21 and WCAG22 algoirthms are the same
@@ -31,1 +35,4 @@ const WCAGcontrast = bgSelectedNodeColor.contrast(
 };
+
+export type { AdditionalAssertion };
+export { WCAGNonTextContrast };

lib/test/test-utils.ts

@@ -1,60 +0,5 @@
-import { html, fixture, expect, unsafeStatic } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import { visualDiff } from "@web/test-runner-visual-regression";
-import type { TemplateResult } from "lit-html";
-import axe from "axe-core";
-import registerAPCACheck from "apca-check";
+import { html, unsafeStatic } from "@open-wc/testing";
 
-const customConformanceThresholdFn = (fontSize: string): number | null => {
-    return parseFloat(fontSize) >= 32 ? 45 : 60;
-};
-
-registerAPCACheck("custom", customConformanceThresholdFn);
-
-const colorThemes = ["dark", "light"];
-const baseThemes = ["", "highcontrast"];
-export const defaultOptions = {
-    testColorThemes: true,
-    testHighContrast: true,
-    includeNullVariant: true,
-    includeNullModifier: true,
-};
-
-type Themes = ["light" | "dark" | "highcontrast" | ""];
-type TestTypes = "visual" | "a11y";
-export type AdditionalAssertion = {
-    description: string;
-    assertion: (node: HTMLElement) => Promise<void> | void;
-};
-
-type TestOptions = {
+type TestVariationArgs = {
     /**
-     * Enable tests for all color themes
-     * default: true
-     */
-    testColorThemes: boolean;
-    /**
-     * Enable tests for high contrast
-     * default: true
-     */
-    testHighContrast: boolean;
-    /**
-     * Provide a custom testid suffix
-     * default: undefined
-     */
-    testidSuffix?: string;
-    /**
-     * Include tests for the component without any variants applied
-     * default: true
-     */
-    includeNullVariant: boolean;
-    /**
-     * Include tests for the component without any modifiers applied
-     * default: true
-     */
-    includeNullModifier: boolean;
-};
-
-interface ComponentTestVariationArgs {
-    /**
      * Base class of the component
@@ -65,44 +10,2 @@ * (e.g. "s-component")
     /**
-     * Variants of the component
-     * (e.g. ["primary", "secondary"])
-     */
-    variants?: string[];
-    /**
-     * Modifiers of the component
-     * (e.g. { primary: ["filled", "outlined"], secondary: ["xs", "sm", "md"] })
-     */
-    modifiers?: ComponentTestModifiers;
-    /**
-     * Options for the test
-     */
-    options?: TestOptions;
-}
-
-type ComponentTestArgs = {
-    /**
-     * The element to test
-     * use the `html` template tag to render the element
-     */
-    element: TemplateResult;
-    /**
-     * testid of the test
-     * (e.g. "s-component-primary-important")
-     */
-    testid: string;
-    /**
-     * Theme to apply to the test element
-     */
-    theme?: Themes;
-    /**
-     * Type of test to run
-     */
-    type: TestTypes;
-    /**
-     * Additional assertions to run against the test element
-     */
-    additionalAssertions: AdditionalAssertion[];
-};
-
-interface ComponentTestsArgs extends ComponentTestVariationArgs {
-    /**
      * Additional html attributes applied to the test element
@@ -141,12 +44,18 @@ * (e.g. { role: "button",  id: "id" } -> <element role="button" id="id">  )
     /**
-     * Type of test to run
+     * Variants of the component
+     * (e.g. ["primary", "secondary"])
      */
-    type: TestTypes;
+    variants?: string[];
     /**
-     * Additional assertions to run against the test element
+     * Modifiers of the component
+     * (e.g. { primary: ["filled", "outlined"], secondary: ["xs", "sm", "md"] })
      */
-    additionalAssertions?: AdditionalAssertion[];
-}
+    modifiers?: Modifiers;
+    /**
+     * Options for the test
+     */
+    options?: Partial<TestOptions>;
+};
 
-type ComponentTestModifiers = {
+type Modifiers = {
     /**
@@ -173,8 +82,42 @@ * Primary grouping of modifiers to test
 
-type ComponentTestProps = {
-    classes: string;
-    testid: string;
-    theme?: Themes;
+type TestOptions = {
+    /**
+     * Enable tests for all color themes
+     * default: true
+     */
+    testColorThemes: boolean;
+    /**
+     * Enable tests for high contrast
+     * default: true
+     */
+    testHighContrast: boolean;
+    /**
+     * Provide a custom testid suffix
+     * default: undefined
+     */
+    testidSuffix?: string;
+    /**
+     * Include tests for the component without any variants applied
+     * default: true
+     */
+    includeNullVariant: boolean;
+    /**
+     * Include tests for the component without any modifiers applied
+     * default: true
+     */
+    includeNullModifier: boolean;
 };
 
+export const DEFAULT_OPTIONS = {
+    testColorThemes: true,
+    testHighContrast: true,
+    includeNullVariant: true,
+    includeNullModifier: true,
+};
+
+// TODO: refactor using MODES as opposed to THEMES
+const COLOR_THEMES = ["dark", "light"];
+const BASE_THEMES = ["", "highcontrast"];
+type Themes = ["light" | "dark" | "highcontrast" | ""];
+
 const attrObjToString = (attrs: Record<string, string>): string => {
@@ -187,2 +130,18 @@ const attrString = Object.keys(attrs).map((key) => {
 
+const matchTestidByPattern = ({
+    testid,
+    pattern,
+}: {
+    testid: string;
+    pattern: string | RegExp;
+}): boolean => {
+    if (pattern instanceof RegExp) {
+        return pattern.test(testid);
+    } else {
+        return pattern === testid;
+    }
+};
+
+const buildTestid = (arr: string[]) => arr.filter(Boolean).join("-");
+
 const buildClasses = ({
@@ -221,30 +180,40 @@ baseClass,
     return html`
-        <${unsafe.tag}
-            ${unsafe.attributes}
-            data-testid="${testid}"
-        >${unsafe.children}</${unsafe.tag}>
-    `;
+            <${unsafe.tag}
+                ${unsafe.attributes}
+                data-testid="${testid}"
+            >${unsafe.children}</${unsafe.tag}>
+        `;
 };
 
-const buildTestid = (arr: string[]) => arr.filter(Boolean).join("-");
+type PrimitiveVariation = {
+    classes: string;
+    testid: string;
+    theme: Themes;
+};
 
-const getComponentTestVariations = ({
+type PrimitiveVariationArgs = Pick<
+    TestVariationArgs,
+    "baseClass" | "variants" | "modifiers" | "options"
+>;
+
+const generatePrimitiveVariations = ({
     baseClass,
     variants = [],
     modifiers,
-    options = defaultOptions,
-}: ComponentTestVariationArgs): ComponentTestProps[] => {
-    const testVariations: ComponentTestProps[] = [];
+    options = {},
+}: PrimitiveVariationArgs): PrimitiveVariation[] => {
+    const primitiveVariations: PrimitiveVariation[] = [];
+    const opts = { ...DEFAULT_OPTIONS, ...options };
     // Test default, high contrast themes
-    [...(options.testHighContrast ? baseThemes : [""])].forEach((baseTheme) => {
+    [...(opts.testHighContrast ? BASE_THEMES : [""])].forEach((baseTheme) => {
         // Test light, dark theme
-        [...(options.testColorThemes ? colorThemes : [""])].forEach(
+        [...(opts.testColorThemes ? COLOR_THEMES : [""])].forEach(
             (colorTheme) => {
                 const theme = [baseTheme, colorTheme].filter(Boolean) as Themes;
                 const testidBase = buildTestid([baseClass, ...theme]);
-                const allVariants = options.includeNullVariant
+                const allVariants = opts.includeNullVariant
                     ? ["", ...variants]
                     : variants;
                 const primaryModifiers = modifiers?.primary
-                    ? options.includeNullModifier
+                    ? opts.includeNullModifier
                         ? ["", ...(<[]>modifiers.primary)]
@@ -264,3 +233,3 @@ : modifiers.primary
                             allVariants.forEach((variant) => {
-                                testVariations.push({
+                                primitiveVariations.push({
                                     classes: buildClasses({
@@ -295,3 +264,3 @@ baseClass,
                 modifiers?.standalone?.forEach((standaloneModifier) => {
-                    testVariations.push({
+                    primitiveVariations.push({
                         testid: buildTestid([testidBase, standaloneModifier]),
@@ -310,77 +279,17 @@ classes: buildClasses({
     // Sorting for readability
-    return testVariations.sort((a, b) => a.testid.localeCompare(b.testid));
+    return primitiveVariations.sort((a, b) => a.testid.localeCompare(b.testid));
 };
 
-/**
- * Constructs and runs an individual test for a component
- */
-const runComponentTest = ({
-    element,
-    testid,
-    theme,
-    type,
-    additionalAssertions,
-}: ComponentTestArgs) => {
-    const getDescription = (type: TestTypes) => {
-        switch (type) {
-            case "a11y":
-                return "should be accessible";
-            case "visual":
-                return "should not introduce visual regressions";
-            default:
-                return "";
-        }
-    };
-
-    it(`${type}: ${testid} ${getDescription(type)}`, async () => {
-        await fixture(element);
-        const el = screen.getByTestId(testid);
-
-        document.body.className = "";
-
-        if (theme?.length) {
-            const prefixedThemes = theme.map((t) => `theme-${t}`);
-            document.body.classList.add(...prefixedThemes);
-        }
-
-        if (type === "a11y") {
-            const highcontrast = theme?.includes("highcontrast");
-            axe.configure({
-                rules: [
-                    // for non-high contrast, we disable WCAG 2.1 AA (4.5:1)
-                    // and use a Stacks-specific APCA custom level instead
-                    { id: "color-contrast", enabled: false },
-                    {
-                        id: "color-contrast-apca-custom",
-                        enabled: !highcontrast,
-                    },
-                    // for high contrast, we check against WCAG 2.1 AAA (7:1)
-                    { id: "color-contrast-enhanced", enabled: highcontrast },
-                ],
-            });
-            await expect(el).to.be.accessible();
-        }
-
-        if (type === "visual") {
-            await visualDiff(el, testid);
-        }
-    });
-
-    additionalAssertions.forEach((assertion) => {
-        it(`${type}: ${testid} ${assertion.description}`, async () => {
-            await fixture(element);
-            const el = screen.getByTestId(testid);
-            await assertion.assertion(el);
-        });
-    });
+type TestVariation = {
+    testid: string;
+    element: ReturnType<typeof html>;
+    skipped: boolean;
+    theme: Themes;
 };
 
-/**
- * Constructs and runs tests for a component with a each provided combination
- */
-const runComponentTests = ({
+const generateTestVariations = ({
     baseClass,
     variants = [],
     modifiers,
-    options = defaultOptions,
+    options = DEFAULT_OPTIONS,
     attributes,
@@ -392,6 +301,4 @@ children,
     template,
-    type,
-    additionalAssertions = [],
-}: ComponentTestsArgs) => {
-    getComponentTestVariations({
+}: TestVariationArgs): TestVariation[] => {
+    return generatePrimitiveVariations({
         baseClass,
@@ -401,3 +308,3 @@ variants,
         options,
-    }).forEach(({ testid, classes, theme }) => {
+    }).flatMap(({ testid, classes, theme }) => {
         const allChildren: {
@@ -408,33 +315,27 @@ [key: string]: string;
 
-        Object.keys(allChildren).forEach((key) => {
-            let testidModified = (
-                key !== "default" ? `${testid}-${key}` : testid
-            ).replace(" ", "-");
-            testidModified = testidSuffix
-                ? `${testidModified}-${testidSuffix}`
-                : testidModified;
+        return Object.keys(allChildren)
+            .map((key) => {
+                let testidModified = (
+                    key !== "default" ? `${testid}-${key}` : testid
+                ).replace(" ", "-");
+                testidModified = testidSuffix
+                    ? `${testidModified}-${testidSuffix}`
+                    : testidModified;
 
-            const children = allChildren[key];
+                const children = allChildren[key];
 
-            const shouldSkipTest = excludeOrSkipTest({
-                patterns: skippedTestids,
-                skip: true,
-                testid: testidModified,
-                type,
-            });
-
-            const shouldExcludeTest = excludeOrSkipTest({
-                patterns: excludedTestids,
-                testid: testidModified,
-                type,
-            });
-
-            if (shouldSkipTest || shouldExcludeTest) {
-                return;
-            }
-
-            const element = template
-                ? html`${template({
-                      testid: testidModified,
-                      component: buildTestElement({
+                const element = template
+                    ? html`${template({
+                          testid: testidModified,
+                          component: buildTestElement({
+                              attributes: {
+                                  ...attributes,
+                                  class: `${classes} ${attributes?.class || ""}`,
+                              },
+                              children,
+                              testid: `${testidModified}-nested`,
+                              tag,
+                          }),
+                      })}`
+                    : buildTestElement({
                           attributes: {
@@ -445,76 +346,27 @@ ...attributes,
                           children,
-                          testid: `${testidModified}-nested`,
+                          testid: testidModified,
                           tag,
-                      }),
-                  })}`
-                : buildTestElement({
-                      attributes: {
-                          ...attributes,
-                          class: `${classes} ${attributes?.class || ""}`,
-                      },
-                      children,
-                      testid: testidModified,
-                      tag,
-                  });
+                      });
 
-            runComponentTest({
-                element,
-                testid: testidModified,
-                theme,
-                type,
-                additionalAssertions,
-            });
-        });
-    });
-};
+                const skipped = skippedTestids.some((pattern) =>
+                    matchTestidByPattern({ testid: testidModified, pattern })
+                );
 
-const matchTestidByPattern = ({
-    testid,
-    pattern,
-}: {
-    testid: string;
-    pattern: string | RegExp;
-}): boolean => {
-    if (pattern instanceof RegExp) {
-        return pattern.test(testid);
-    } else {
-        return pattern === testid;
-    }
-};
-
-const excludeOrSkipTest = ({
-    patterns,
-    skip = false,
-    testid,
-    type,
-}: {
-    patterns: (string | RegExp)[];
-    skip?: boolean;
-    testid: string;
-    type: TestTypes;
-}): boolean => {
-    const matchesTest = patterns.some((pattern) => {
-        return matchTestidByPattern({ testid, pattern });
+                return {
+                    element,
+                    testid: testidModified,
+                    theme,
+                    skipped,
+                };
+            })
+            .filter(
+                ({ testid }) =>
+                    !excludedTestids.some((pattern) =>
+                        matchTestidByPattern({ testid, pattern })
+                    )
+            );
     });
-
-    if (matchesTest && skip) {
-        it.skip(`${type}: ${testid} (skipped)`, () => {
-            return;
-        });
-    }
-
-    return matchesTest;
 };
 
-export { runComponentTest, runComponentTests };
-
-/**
- * Convert a const array of strings into a union type of the array's values.
- *
- * @example
- * ```
- * const arrayOfStrings = ['Stacky', 'Ben', 'Dan', 'Giamir'] as const;
- * type StringLiterals = AsLiterals<typeof arrayOfStrings>; // 'Stacky' | 'Ben' | 'Dan' | 'Giamir'
- * ```
- */
-export type AsLiterals<T extends Readonly<string[]>> = T[number];
+export type { TestVariationArgs, TestVariation };
+export { generateTestVariations };

LICENSE.MD

 The MIT License (MIT)
 
-Copyright 2017-2020 Stack Exchange Inc.
+Copyright 2017-2024 Stack Exchange Inc.
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

@@ -8,3 +8,3 @@ {
     },
-    "version": "2.0.9",
+    "version": "2.1.0-rc.0",
     "files": [
@@ -31,3 +31,2 @@ "dist",
         "test:visual": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual",
-        "test:visual:update": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual --update-visual-baseline",
         "test:less": "vitest run .less.test.ts",
@@ -60,4 +59,4 @@ "test:less:update": "npm run test:less -- -u",
         "@types/mocha": "^10.0.6",
-        "@typescript-eslint/eslint-plugin": "^6.19.0",
-        "@typescript-eslint/parser": "^6.19.0",
+        "@typescript-eslint/eslint-plugin": "^6.20.0",
+        "@typescript-eslint/parser": "^6.21.0",
         "@web/dev-server-esbuild": "^1.0.1",
@@ -71,3 +70,3 @@ "@web/dev-server-rollup": "^0.6.1",
         "concurrently": "^8.2.2",
-        "css-loader": "^6.9.1",
+        "css-loader": "^6.10.0",
         "cssbeautify": "^0.3.1",
@@ -82,3 +81,3 @@ "cssnano": "^6.0.3",
         "jquery": "^3.7.1",
-        "less-loader": "^12.1.0",
+        "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
@@ -97,4 +96,4 @@ "markdown-it": "^14.0.0",
         "typescript": "^5.3.3",
-        "vitest": "^1.2.1",
-        "webpack": "^5.89.0",
+        "vitest": "^1.2.2",
+        "webpack": "^5.90.1",
         "webpack-cli": "^5.1.4",
@@ -101,0 +100,0 @@ "webpack-merge": "^5.10.0"

README.md

@@ -101,4 +101,5 @@ # Stacks
 - `pwsh` ([Installation docs](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.3))
+- Run `git config diff.lfs.textconv cat` to make sure image diff works as expected ([More info](https://github.com/microsoft/vscode/issues/86611#issuecomment-875894108))
 
-This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests.
 Visual regression tests end with this suffix `*.visual.test.ts`.
@@ -110,10 +111,7 @@
 ```
+After the first run, if there are failing snapshots, they end up overriding the baseline ones in the filesystem (e.g. `/screenshots/<browser>/baseline/<name>.png`). 
+We do this for easier comparison of the dif directly in vscode and to make sure only the failing snapshots get regenerated (see [this GH discussion](https://github.com/modernweb-dev/web/discussions/427#discussioncomment-3543771) that inspired the approach).
 
-Update the visual baseline via:
-```sh
-npm run test:visual:update
-```
+We also recommend to install [this vscode extension](https://marketplace.visualstudio.com/items?itemName=RayWiis.png-image-diff) for getting better diffs.
 
-Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
-
 ### Less Tests
@@ -179,7 +177,7 @@
 ## License
-Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
+Code and documentation copyright 2017-2024 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
 
 [gh-action-url]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml
-[gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml/badge.svg?branch=develop
+[gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/workflow.yml/badge.svg?branch=develop
 [npm-url]: https://npmjs.org/package/@stackoverflow/stacks
 [npm-badge]: https://img.shields.io/npm/v/@stackoverflow/stacks.svg

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2970404

increased by0.21%

Number of package files

211

increased by0.96%

Lines of code

43276

increased by0.01%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of lines in readme file

181

decreased by-1.09%

No dependency changes