test(link): add token theming tests (#9407)

**Related Issue:** #7180

## Summary
Add token theming tests for `link`.

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` <calcite-link icon-start="smile" icon-end="smile"> Themed link. </calcite-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` <calcite-link href="http://google.com" rel="noopener noreferrer" target="_blank" icon-start="launch"
+          >A link to Google with an icon</calcite-link
+        >`,
+        tokens,
+      );
+    });
+  });
 });