mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

test(link): add unit tests

Browse source
This commit is contained in:
Eric Liu 2025-03-16 12:16:55 -07:00
commit f23e7282b5
3 changed files with 208 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

87
tests/Link/Link.test.svelte Normal file
View file

@ -0,0 +1,87 @@
<svelte:options accessors />
<script lang="ts">
import { Link } from "carbon-components-svelte";
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
</script>
<!-- Default link -->
<div data-testid="default-link">
<Link
href="https://www.carbondesignsystem.com/"
on:click={(e) => {
e.preventDefault();
console.log("click");
}}
on:mouseover={() => {
console.log("mouseover");
}}
on:mouseenter={() => {
console.log("mouseenter");
}}
on:mouseleave={() => {
console.log("mouseleave");
}}
>
Carbon Design System
</Link>
</div>
<!-- Link with target _blank -->
<div data-testid="link-blank">
<Link href="https://www.carbondesignsystem.com/" target="_blank">
Carbon Design System
</Link>
</div>
<!-- Inline link -->
<div data-testid="link-inline">
<Link inline href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
</div>
<!-- Link with icon -->
<div data-testid="link-with-icon">
<Link href="https://www.carbondesignsystem.com/" icon={Carbon}>
Carbon Design System
</Link>
</div>
<!-- Link with icon slot -->
<div data-testid="link-with-icon-slot">
<Link href="https://www.carbondesignsystem.com/">
Carbon Design System
<svelte:fragment slot="icon">
<Carbon />
</svelte:fragment>
</Link>
</div>
<!-- Large link -->
<div data-testid="link-large">
<Link size="lg" href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
</div>
<!-- Small link -->
<div data-testid="link-small">
<Link size="sm" href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
</div>
<!-- Disabled link -->
<div data-testid="link-disabled">
<Link disabled href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
</div>
<!-- Visited link -->
<div data-testid="link-visited">
<Link visited href="https://www.carbondesignsystem.com/">
Carbon Design System
</Link>
</div>