diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts index e3b13288974..32e664eabec 100644 --- a/packages/calcite-components/src/components/link/link.e2e.ts +++ b/packages/calcite-components/src/components/link/link.e2e.ts @@ -1,5 +1,7 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests"; +import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; +import { html } from "../../../support/formatting"; describe("calcite-link", () => { describe("renders", () => { @@ -320,4 +322,45 @@ describe("calcite-link", () => { ); }); }); + + describe("theme", () => { + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-link-text-color": { + shadowSelector: "span", + targetProp: "color", + }, + + "--calcite-link-background-color": { + shadowSelector: "span", + targetProp: "backgroundColor", + }, + + "--calcite-link-icon-color": { + shadowSelector: "calcite-icon", + targetProp: "--calcite-icon-color", + }, + }; + themed(html` Themed link. `, tokens); + }); + describe("external link", () => { + const tokens: ComponentTestTokens = { + "--calcite-link-text-color": { + shadowSelector: "a", + targetProp: "color", + }, + + "--calcite-link-background-color": { + shadowSelector: "a", + targetProp: "backgroundColor", + }, + }; + themed( + html` A link to Google with an icon`, + tokens, + ); + }); + }); });