From 907a4ed9183d420e6c162e8e6968f8fd68503412 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 29 Dec 2024 13:05:33 -0800
Subject: [PATCH] test(aspect-ratio): add unit tests

---
 tests/App.test.svelte                     |  6 ++++++
 tests/AspectRatio.test.svelte             |  7 -------
 tests/AspectRatio/AspectRatio.test.svelte | 13 +++++++++++++
 tests/AspectRatio/AspectRatio.test.ts     | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 7 deletions(-)
 delete mode 100644 tests/AspectRatio.test.svelte
 create mode 100644 tests/AspectRatio/AspectRatio.test.svelte
 create mode 100644 tests/AspectRatio/AspectRatio.test.ts

diff --git a/tests/App.test.svelte b/tests/App.test.svelte
index 71142b09..4a7e47c7 100644
--- a/tests/App.test.svelte
+++ b/tests/App.test.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { TreeView as TreeViewNav } from "carbon-components-svelte";
+  import AspectRatio from "./AspectRatio/AspectRatio.test.svelte";
   import Accordion from "./Accordion/Accordion.test.svelte";
   import AccordionProgrammatic from "./Accordion/Accordion.programmatic.test.svelte";
   import AccordionDisabled from "./Accordion/Accordion.disabled.test.svelte";
@@ -10,6 +11,11 @@
   import { onMount } from "svelte";
 
   const routes = [
+    {
+      path: "/aspect-ratio",
+      name: "AspectRatio",
+      component: AspectRatio,
+    },
     {
       path: "/accordion",
       name: "Accordion",
diff --git a/tests/AspectRatio.test.svelte b/tests/AspectRatio.test.svelte
deleted file mode 100644
index f3620d20..00000000
--- a/tests/AspectRatio.test.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts">
-  import { AspectRatio, Tile } from "carbon-components-svelte";
-</script>
-
-<AspectRatio ratio="16x9">
-  <Tile style="height: 100%">Content</Tile>
-</AspectRatio>
diff --git a/tests/AspectRatio/AspectRatio.test.svelte b/tests/AspectRatio/AspectRatio.test.svelte
new file mode 100644
index 00000000..bb147588
--- /dev/null
+++ b/tests/AspectRatio/AspectRatio.test.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { AspectRatio } from "carbon-components-svelte";
+</script>
+
+<AspectRatio>2x1</AspectRatio>
+<AspectRatio ratio="2x3">2x3</AspectRatio>
+<AspectRatio ratio="16x9">16x9</AspectRatio>
+<AspectRatio ratio="4x3">4x3</AspectRatio>
+<AspectRatio ratio="1x1">1x1</AspectRatio>
+<AspectRatio ratio="3x4">3x4</AspectRatio>
+<AspectRatio ratio="3x2">3x2</AspectRatio>
+<AspectRatio ratio="9x16">9x16</AspectRatio>
+<AspectRatio ratio="1x2">1x2</AspectRatio>
diff --git a/tests/AspectRatio/AspectRatio.test.ts b/tests/AspectRatio/AspectRatio.test.ts
new file mode 100644
index 00000000..7362d90b
--- /dev/null
+++ b/tests/AspectRatio/AspectRatio.test.ts
@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/svelte";
+import AspectRatio from "./AspectRatio.test.svelte";
+
+describe("AspectRatio", () => {
+  it("renders correctly", () => {
+    render(AspectRatio);
+
+    ["2x1", "2x3", "16x9", "4x3", "1x1", "3x4", "3x2", "9x16", "1x2"].forEach(
+      (ratio) => {
+        const boundingElement = screen.getByText(ratio).parentElement;
+        expect(boundingElement).toHaveClass(`bx--aspect-ratio--${ratio}`);
+      },
+    );
+  });
+});