@duetds/components 7.0.13 → 7.1.1

package/lib/collection/components/duet-button/duet-button.e2e.js

@@ -0,0 +1,210 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-button", () => {
+  it("should render a button", async () => {
+    const page = await createPage(`<duet-button></duet-button>`);
+    const component = await page.find("duet-button");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders aria-label", async () => {
+    const page = await createPage(`<duet-button accessible-label="test">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-label")).toEqual("test");
+  });
+  it("should provide a property that renders aria-controls", async () => {
+    const page = await createPage(`<duet-button accessible-controls="test">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should provide a property that renders aria-expanded", async () => {
+    const page = await createPage(`<duet-button accessible-expanded="true">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-expanded")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-pressed", async () => {
+    const page = await createPage(`<duet-button accessible-pressed="true">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("aria-pressed")).not.toBeNull();
+  });
+  it("should provide a property that renders button in different style variations", async () => {
+    const page = await createPage(`<duet-button variation="secondary">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).toHaveClass("secondary");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-button theme="turva">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that expands the button to fill 100% width", async () => {
+    const page = await createPage(`<duet-button expand="true">Button</duet-button>`);
+    const element = await page.find("duet-button");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that makes the button fixed width even on mobile", async () => {
+    const page = await createPage(`<duet-button fixed>Button</duet-button>`);
+    const element = await page.find("duet-button");
+    expect(element).toHaveClass("duet-fixed");
+  });
+  it("should provide a property that makes the button disabled", async () => {
+    const page = await createPage(`<duet-button disabled>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the button", async () => {
+    const page = await createPage(`<duet-button identifier="test">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that converts the button to a submit", async () => {
+    const page = await createPage(`<duet-button submit>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("type")).toEqual("submit");
+  });
+  it("should provide a property that adds renders a target attribute", async () => {
+    const page = await createPage(`<duet-button url="#" external>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("target")).toEqual("_blank");
+    expect(element.getAttribute("rel")).toEqual("noopener");
+  });
+  it("should provide a property that adds renders anchor href", async () => {
+    const page = await createPage(`<duet-button url="#">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element.getAttribute("href")).toEqual("#");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-button margin="none">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that removes the padding of the component", async () => {
+    const page = await createPage(`<duet-button padding="none"></duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).toHaveClass("duet-p-0");
+  });
+  it("should not add anchor-specific attributes to button", async () => {
+    const page = await createPage(`<duet-button>Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).not.toHaveAttribute("target");
+    expect(element).not.toHaveAttribute("href");
+  });
+  it("should not add button-specific attributes to link", async () => {
+    const page = await createPage(`<duet-button url="#">Button</duet-button>`);
+    const element = await page.find("duet-button >>> .duet-button");
+    expect(element).not.toHaveAttribute("type");
+    expect(element).not.toHaveAttribute("disabled");
+    expect(element).not.toHaveAttribute("name");
+    expect(element).not.toHaveAttribute("value");
+    expect(element).not.toHaveAttribute("aria-pressed");
+  });
+  it("should not add aria-* attributes unless explicitly set", async () => {
+    const page = await createPage(`<duet-button>Button</duet-button>`);
+    const component = await page.find("duet-button");
+    const button = await page.find("duet-button >>> .duet-button");
+    expect(button).not.toHaveAttribute("aria-expanded");
+    expect(button).not.toHaveAttribute("aria-pressed");
+    component.setAttribute("accessible-expanded", "true");
+    component.setAttribute("accessible-pressed", "true");
+    await page.waitForChanges();
+    expect(button).toEqualAttribute("aria-expanded", "true");
+    expect(button).toEqualAttribute("aria-pressed", "true");
+  });
+  it("supports opening links in a new window", async () => {
+    const page = await createPage(`
+      <link rel='stylesheet' href='http://localhost:3334/fonts/lib/localtapiola.css' />
+      <duet-button language="en" url="#" external>Link button</duet-button>
+    `);
+    const hiddenMessage = await page.find("duet-button >>> a duet-visually-hidden");
+    expect(hiddenMessage).not.toBe(null);
+    expect(hiddenMessage.innerText).toContain(", Avautuu uuteen ikkunaan");
+  });
+  describe("form interactions", () => {
+    async function implicitSubmission(fixture) {
+      const input = await fixture.form.find("input");
+      await input.focus();
+      await fixture.page.keyboard.press("Enter");
+    }
+    async function explicitSubmission(fixture) {
+      await fixture.button.click();
+    }
+    async function createFixture(props) {
+      const attrs = Object.entries(props)
+        .map(([attr, value]) => `${attr}="${value}"`)
+        .join(" ");
+      const page = await createPage(`
+        <form>
+          <label>
+            Name: <input name="name" type="text" />
+          </label>
+          <label>
+            Age: <input name="age" type="number" />
+          </label>
+          <duet-button ${attrs}>Submit</duet-button>
+        </form>
+      `);
+      const form = await page.find("form");
+      const button = await page.find("duet-button");
+      const spy = await form.spyOnEvent("submit");
+      return { page, form, spy, button };
+    }
+    describe.each([
+      ["implicit", implicitSubmission],
+      ["explicit", explicitSubmission],
+    ])(`%s form submission`, (_type, doSubmit) => {
+      it("should submit form", async () => {
+        const fixture = await createFixture({ submit: true });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(1);
+      });
+      it("should only submit form if `submit` attr is `true`", async () => {
+        const fixture = await createFixture({ submit: false });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(0);
+      });
+      it("should not submit form when `disabled`", async () => {
+        const fixture = await createFixture({ submit: true, disabled: true });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(0);
+        fixture.button.removeAttribute("disabled");
+        await fixture.page.waitForChanges();
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(1);
+      });
+      it("should not not submit if rendered as a link", async () => {
+        const fixture = await createFixture({ submit: true, url: "test.html" });
+        await doSubmit(fixture);
+        expect(fixture.spy).toHaveReceivedEventTimes(0);
+      });
+    });
+    it("supports supplying name and value", async () => {
+      const page = await createPage(`
+        <form method="GET">
+          <duet-input name="name" label="name" value="nick"></duet-input>
+          <duet-button submit name="button" value="1">Submit 1</duet-button>
+          <duet-button id="click-me" submit name="button" value="2">Submit 2</duet-button>
+        </form>
+      `);
+      // funnel submitted form data through window object for later assertion
+      await page.$eval("form", (form) => {
+        form.addEventListener("submit", (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target);
+          formData.append(e.submitter.name, e.submitter.value);
+          // @ts-ignore
+          window.testData = Object.fromEntries(formData);
+        });
+      });
+      const button = await page.find("duet-button#click-me");
+      await button.click();
+      await page.waitForChanges();
+      const data = await page.evaluate(() => window["testData"]);
+      expect(data).toEqual({
+        name: "nick",
+        button: "2",
+      });
+    });
+  });
+});

package/lib/collection/components/duet-button/duet-button.js

@@ -5,6 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
   constructor() {
@@ -74,6 +75,9 @@ export class DuetButton {
       console.warn("[DUET]: Button used as an external link will override any icon that is set");
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.proxyButton = document.createElement("button");
     this.proxyButton.style.display = "none";
@@ -412,7 +416,8 @@ export class DuetButton {
           "references": {
             "DuetButtonVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+              "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
             }
           }
         },
@@ -459,7 +464,8 @@ export class DuetButton {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -482,7 +488,8 @@ export class DuetButton {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -505,7 +512,8 @@ export class DuetButton {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -528,7 +536,8 @@ export class DuetButton {
           "references": {
             "DuetButtonTextCentering": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+              "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
             }
           }
         },
@@ -551,7 +560,8 @@ export class DuetButton {
           "references": {
             "DuetButtonWrapping": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+              "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
             }
           }
         },
@@ -715,7 +725,8 @@ export class DuetButton {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -744,7 +755,8 @@ export class DuetButton {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -755,7 +767,7 @@ export class DuetButton {
               "name": "default",
               "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
             }],
-          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelExternal when needed"
         },
         "attribute": "accessible-label-external-default",
         "reflect": false,
@@ -791,7 +803,8 @@ export class DuetButton {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -814,7 +827,8 @@ export class DuetButton {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -855,7 +869,8 @@ export class DuetButton {
           "references": {
             "DuetButtonIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+              "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
             }
           }
         },
@@ -878,7 +893,8 @@ export class DuetButton {
           "references": {
             "DuetButtonSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
+              "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
             }
           }
         },
@@ -973,10 +989,12 @@ export class DuetButton {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-callout/duet-callout.e2e.js

@@ -0,0 +1,21 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-callout", () => {
+  it("should render a callout", async () => {
+    const page = await createPage(`<duet-callout></duet-callout>`);
+    const component = await page.find("duet-callout");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-callout theme="turva"></duet-callout>`);
+    const element = await page.find("duet-callout >>> .duet-callout");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-callout margin="none"></duet-callout>`);
+    const element = await page.find("duet-callout >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+});

package/lib/collection/components/duet-callout/duet-callout.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot default - Slot for text.
  * @slot author - Slot for author information.
@@ -20,6 +21,9 @@ export class DuetCallout {
     inheritGlobalTheme(this);
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -58,7 +62,8 @@ export class DuetCallout {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -81,7 +86,8 @@ export class DuetCallout {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },

package/lib/collection/components/duet-caption/duet-caption.e2e.js

@@ -0,0 +1,26 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-caption", () => {
+  it("should render a caption", async () => {
+    const page = await createPage(`<duet-caption></duet-caption>`);
+    const component = await page.find("duet-caption");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-caption theme="turva"></duet-caption>`);
+    const element = await page.find("duet-caption");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-caption margin="none"></duet-caption>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the size of caption", async () => {
+    const page = await createPage(`<duet-caption size="small"></duet-caption>`);
+    const element = await page.find("duet-caption");
+    expect(element).toHaveClass("duet-caption-small");
+  });
+});

package/lib/collection/components/duet-caption/duet-caption.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetCaption {
   constructor() {
     this.theme = "";
@@ -16,6 +17,9 @@ export class DuetCaption {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -52,7 +56,8 @@ export class DuetCaption {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -75,7 +80,8 @@ export class DuetCaption {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -116,7 +122,8 @@ export class DuetCaption {
           "references": {
             "DuetCaptionSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-caption/duet-caption.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-caption/duet-caption.tsx",
+              "id": "src/components/duet-caption/duet-caption.tsx::DuetCaptionSize"
             }
           }
         },
@@ -132,4 +139,5 @@ export class DuetCaption {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-card/duet-card.e2e.js

@@ -0,0 +1,91 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-card", () => {
+  it("should render a card", async () => {
+    const page = await createPage(`<duet-card></duet-card>`);
+    const component = await page.find("duet-card");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-card margin="none">card</duet-card>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that removes the padding of the component", async () => {
+    const page = await createPage(`<duet-card padding="none"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card");
+    expect(element).toHaveClass("none");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-card theme="turva"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that renders heading", async () => {
+    const page = await createPage(`<duet-card heading="test"></duet-card>`);
+    const element = await page.find("duet-card >>> h2");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that renders the card as link", async () => {
+    const page = await createPage(`<duet-card url="#test"></duet-card>`);
+    const element = await page.find("duet-card >>> a");
+    expect(element.getAttribute("href")).toEqual("#test");
+  });
+  it("should provide a property that changes the padding of the card", async () => {
+    const page = await createPage(`<duet-card padding="large"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card");
+    expect(element).toHaveClass("large");
+  });
+  it("should provide a property that sets icon for the heading", async () => {
+    const page = await createPage(`<duet-card heading="test" icon="form-location"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card-icon");
+    expect(element).not.toBeNull();
+  });
+  it("should not add an icon for the heading if the prop isn’t used", async () => {
+    const page = await createPage(`<duet-card heading="test" padding="large"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card-icon");
+    expect(element).toBeNull();
+  });
+  it("should provide a property that sets the level for the heading", async () => {
+    const page = await createPage(`<duet-card heading="test" heading-level="h1"></duet-card>`);
+    const element = await page.find("duet-card >>> h1");
+    expect(element).not.toBeNull();
+  });
+  it("should render a h2 heading if no level is provided", async () => {
+    const page = await createPage(`<duet-card heading="test"></duet-card>`);
+    const element = await page.find("duet-card >>> h2");
+    expect(element).not.toBeNull();
+  });
+  it("should render a block wrapper if div heading is provided", async () => {
+    const page = await createPage(`<duet-card heading="test" heading-level="div"></duet-card>`);
+    const element = await page.find("duet-card >>> div.duet-card-heading");
+    expect(element.tagName).toEqual("DIV");
+  });
+  it("should provide a property that makes the card collapsible", async () => {
+    const page = await createPage(`<duet-card collapsible heading="test"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card-heading button");
+    expect(element.getAttribute("aria-expanded")).toBe("true");
+    await element.click();
+    expect(element.getAttribute("aria-expanded")).toBe("false");
+  });
+  it("should allow the card to be initially collapsed", async () => {
+    const page = await createPage(`<duet-card collapsible heading="test" open="false"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card-heading button");
+    expect(element.getAttribute("aria-expanded")).toBe("false");
+    await element.click();
+    expect(element.getAttribute("aria-expanded")).toBe("true");
+  });
+  it("should provide a property that adds an image", async () => {
+    const IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+    const page = await createPage(`<duet-card image=${IMAGE}></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card-image");
+    expect(element).not.toBeNull();
+  });
+  it("should not add image markup when image property isn’t used", async () => {
+    const page = await createPage(`<duet-card heading="test"></duet-card>`);
+    const element = await page.find("duet-card >>> .duet-card-image");
+    expect(element).toBeNull();
+  });
+});