test(aspect-ratio): add unit tests

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",

tests/AspectRatio.test.svelte

@@ -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>

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>

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}`);
+      },
+    );
+  });
+});