implement e2es: test loading indicator

(exercise 04 - optional step solution)

Author: dario-piotrowicz

e2es/ui.spec.ts

@@ -17,3 +17,13 @@ test("card generation", async ({ page }) => {
     "Test Description"
   );
 });
+
+test("card loading indicator", async ({ page }) => {
+  await page.goto("http://localhost:8787/");
+  await expect(page.getByTestId("card-loading-indicator")).not.toBeVisible();
+  await page.getByTestId("card-title-input").fill("Test Title");
+  await page.getByTestId("card-description-input").fill("Test Description");
+  await page.getByTestId("card-generate-btn").click();
+  await expect(page.getByTestId("card-loading-indicator")).toBeVisible();
+  await expect(page.getByTestId("card-loading-indicator")).not.toBeVisible();
+});

load-context.ts

@@ -23,6 +23,7 @@ export const getLoadContext: GetLoadContext = ({ context }) => {
     const imageBlob = new Blob([imageArray]);
     ai = {
       async run(..._: unknown[]) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
         return imageBlob.stream();
       },
     } as Ai;