Fix for localised messages in tests

packages/components/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { expect, within, userEvent } from "@storybook/test"
-
+import { expect, within, userEvent, waitFor } from "@storybook/test"
 import { GenericTile } from "./GenericTile"
 
 const meta: Meta<typeof GenericTile> = {
@@ -19,14 +18,22 @@ export default meta
 type Story = StoryObj<typeof GenericTile>
 
 export const Flip: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
 
-    await userEvent.click(
-      canvas.getByRole("button", { name: "View more information: Title" })
-    )
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+      })
+    })
 
-    await expect(canvas.getByText("Side B")).toBeInTheDocument()
+    await step("Can focus to tile", async () => {
+      await waitFor(() => {
+        expect(canvas.getByText("Side B")).toBeInTheDocument()
+      })
+    })
   },
 }
 
@@ -37,14 +44,26 @@ export const InfoButtonLabelDefault: Story = {
     information: "Side B",
     footer: <>Example Footer</>,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
 
-    const buttonWithInfoLabel = canvas.getByRole("button", {
-      name: "View more information: Title",
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "View more information: Title",
+        })
+        buttonWithInfoLabel.focus()
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
     })
-    buttonWithInfoLabel.focus()
-    await expect(buttonWithInfoLabel).toHaveFocus()
   },
 }
 
@@ -56,13 +75,25 @@ export const InfoButtonLabel: Story = {
     information: "Side B",
     footer: <>Example Footer</>,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
 
-    const buttonWithInfoLabel = canvas.getByRole("button", {
-      name: "Test Label",
+    await step("initial render complete", async () => {
+      await waitFor(() => {
+        canvas.getByRole("button", {
+          name: "Test Label",
+        })
+      })
+    })
+
+    await step("Can focus to button", async () => {
+      await waitFor(() => {
+        const buttonWithInfoLabel = canvas.getByRole("button", {
+          name: "Test Label",
+        })
+        buttonWithInfoLabel.focus()
+        expect(buttonWithInfoLabel).toHaveFocus()
+      })
     })
-    buttonWithInfoLabel.focus()
-    await expect(buttonWithInfoLabel).toHaveFocus()
   },
 }