test(card): add a11y, visual tests (#1347)

* test(card): add a11y, visual tests

* we don't need those box-shadow tests

* tweak template padding

* update test screenshots

Author: dancormier

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

@@ -0,0 +1,13 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("card", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-card",
+        variants: ["muted"],
+        children: {
+            default: `<p>This is a description of the card’s content.</p>`,
+        },
+    });
+});

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

@@ -0,0 +1,54 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const cardTemplate = ({ component, testid }: any) => html`<div
+    class="d-inline-flex ai-center jc-center hs2 ws3 p8"
+    data-testid="${testid}"
+>
+    ${component}
+</div>`;
+
+const baseChild = `
+    <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
+    <p class="fs-body1 fc-medium">
+        This is a description of the card’s content.
+    </p>
+    <div class="d-flex gx4">
+        <button class="flex--item s-btn s-btn__primary s-btn__sm">
+            Call to action
+        </button>
+        <button class="flex--item s-btn s-btn__sm">Cancel</button>
+    </div>
+`;
+
+describe("card", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-card",
+        variants: ["muted"],
+        children: {
+            default: baseChild,
+        },
+        template: cardTemplate,
+    });
+
+    // Stacked
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-card",
+        variants: ["stacked"], // dummy variant for testid differentiation
+        children: {
+            default: `<div class="s-card ps-relative b4 l4">${baseChild}</div>`,
+        },
+        attributes: {
+            class: "p0",
+        },
+        template: cardTemplate,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+});