e2e test for import and minor accessibility tweaks in support

Author: microbit-matt-hillsdon

src/components/ActionNameCard.tsx

@@ -162,6 +162,9 @@ const ActionNameCard = ({
               ? { bgColor: "transparent", size: "lg" }
               : { bgColor: "gray.25", size: "sm" })}
             _placeholder={{ opacity: 0.8, color: "gray.900" }}
+            aria-label={intl.formatMessage({
+              id: "action-name-placeholder",
+            })}
             placeholder={intl.formatMessage({
               id: "action-name-placeholder",
             })}

src/e2e/app/data-samples.ts

@@ -63,6 +63,17 @@ export class DataSamplesPage {
     await expect(this.heading).toBeVisible({ timeout: 10000 });
   }
 
+  async expectActions(expectedActions: string[]) {
+    const actionInputs = this.page.getByRole("textbox", {
+      name: "Name of action",
+    });
+    await expect(actionInputs).toHaveCount(expectedActions.length);
+    let i = 0;
+    for (const input of await actionInputs.all()) {
+      await expect(input).toHaveValue(expectedActions[i++]);
+    }
+  }
+
   async trainModel() {
     await this.page.getByRole("button", { name: "Train model" }).click();
     return new TrainModelDialog(this.page);

src/e2e/app/import-page.ts

@@ -0,0 +1,38 @@
+import { Locator, type Page, expect } from "@playwright/test";
+
+export class ImportPage {
+  private readonly url: string;
+  private nameInputField: Locator;
+  private startSessionBtn: Locator;
+
+  constructor(public readonly page: Page) {
+    this.url = `http://localhost:5173${
+      process.env.CI ? process.env.BASE_URL : "/"
+    }`;
+
+    // Why not by role?
+    this.startSessionBtn = page.getByRole("button", { name: "Start session" });
+    this.nameInputField = page.getByRole("textbox", { name: "Name" });
+  }
+
+  async gotoSimpleAIExerciseTimer() {
+    const query =
+      "id=simple-ai-exercise-timer&project=Project%3A%20Simple%20AI%20exercise%20timer&name=Simple%20AI%20exercise%20timer&editors=makecode";
+    const response = await this.page.goto(`${this.url}import?${query}`);
+    return response;
+  }
+
+  expectName(expected: string) {
+    return expect(this.nameInputField).toHaveValue(expected);
+  }
+
+  startSession() {
+    return this.startSessionBtn.click();
+  }
+
+  async expectOnPage() {
+    await expect(this.page.getByText("New session setup")).toBeVisible();
+    await expect(this.nameInputField).toBeVisible();
+    await expect(this.startSessionBtn).toBeVisible();
+  }
+}

src/e2e/fixtures.ts

@@ -9,13 +9,15 @@ import { DataSamplesPage } from "./app/data-samples";
 import { TestModelPage } from "./app/test-model-page";
 import { NewPage } from "./app/new-page";
 import { OpenSharedProjectPage } from "./app/open-shared-project-page";
+import { ImportPage } from "./app/import-page";
 
 type MyFixtures = {
   homePage: HomePage;
   newPage: NewPage;
   dataSamplesPage: DataSamplesPage;
   testModelPage: TestModelPage;
   openSharedProjectPage: OpenSharedProjectPage;
+  importPage: ImportPage;
 };
 
 export const test = base.extend<MyFixtures>({
@@ -36,4 +38,7 @@ export const test = base.extend<MyFixtures>({
   openSharedProjectPage: async ({ page }, use) => {
     await use(new OpenSharedProjectPage(page));
   },
+  importPage: async ({ page }, use) => {
+    await use(new ImportPage(page));
+  },
 });

src/e2e/import-project.spec.ts

@@ -0,0 +1,23 @@
+/**
+ * (c) 2024, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { test } from "./fixtures";
+
+test.describe("import project (microbit.org case)", () => {
+  test.beforeEach(async ({ homePage }) => {
+    await homePage.setupContext();
+  });
+
+  test("confirm and import", async ({ importPage, dataSamplesPage }) => {
+    await importPage.gotoSimpleAIExerciseTimer();
+    await importPage.expectOnPage();
+    await importPage.expectName("Simple AI exercise timer");
+    await importPage.startSession();
+
+    await dataSamplesPage.expectOnPage();
+    await dataSamplesPage.expectActions(["exercising", "not exercising"]);
+    // TODO: check actions
+  });
+});

src/pages/ImportPage.tsx

@@ -141,11 +141,12 @@ const ImportPage = () => {
             </Text>
           )}
           <Stack py={2} spacing={5}>
-            <Heading size="md" as="h2">
+            <Heading size="md" as="h2" id="name-label">
               <FormattedMessage id="name-text" />
             </Heading>
             <Input
-              aria-labelledby={nameLabel}
+              type="text"
+              aria-labelledby="name-label"
               minW="25ch"
               value={name}
               name={nameLabel}