tests: added test to ensure images scrollable left and right on card

src/assets/main.css

@@ -77,7 +77,6 @@ article>:first-child:is(footer) {
 /* make a simple slider with flex */
 .images {
   width: 100%;
-  overflow-y: scroll;
   display: flex;
   max-height: 400px;
 

src/components/CardElement.vue

@@ -40,7 +40,7 @@ defineProps({
     :to="to ? to : undefined"
   >
     <article>
-      <div class="images" v-if="images" tabindex="0">
+      <div class="images overflow-auto" v-if="images" tabindex="0">
         <img
           v-for="image in images"
           :src="image.src"

src/stories/CardElement.stories.ts

@@ -71,8 +71,33 @@ export const ImagesOnly: Story = {
         src: "https://via.placeholder.com/150",
         alt: "Placeholder Image",
       },
+      {
+        src: "http://placekitten.com/200/300",
+        alt: "Placeholder Image",
+      },
     ],
   },
+
+  play: async ({ canvasElement }: any) => {
+    const canvas = canvasElement;
+    // Get the card, which is an `article` tag
+    const article = canvas.querySelector("article");
+    const imagesSelector = canvas.querySelector(".images");
+
+    // Wait for each image to load
+    await new Promise((resolve) => {
+      canvas.querySelectorAll("img").forEach((img: HTMLImageElement) => {
+        img.onload = resolve;
+      });
+    });
+
+    // Ensure that it is possible to scroll left and right in the article
+    expect(getComputedStyle(imagesSelector).overflowX).not.toBe("hidden");
+    expect(imagesSelector.scrollWidth).toBeGreaterThan(article.clientWidth);
+
+    // Ensure it is not possible to scroll up and down in the article
+    expect(imagesSelector.scrollHeight).toBe(article.clientHeight);
+  },
 };
 
 export const BodyOnly: Story = {