Merge pull request #621 from microbit-foundation/import-e2e

Accessibility tree fix, e2e for import

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/components/EditCodeDialog.tsx

@@ -3,24 +3,16 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import {
-  Box,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalOverlay,
-} from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { MakeCodeFrameDriver } from "@microbit/makecode-embed/react";
-import { forwardRef, memo, useEffect, useRef } from "react";
+import { forwardRef, memo, useEffect } from "react";
 import { useStore } from "../store";
 import Editor from "./Editor";
 
 interface EditCodeDialogProps {}
 
 const EditCodeDialog = forwardRef<MakeCodeFrameDriver, EditCodeDialogProps>(
   function EditCodeDialog(_, ref) {
-    const containerRef = useRef<HTMLDivElement>(null);
     const isOpen = useStore((s) => s.isEditorOpen);
     const tourStart = useStore((s) => s.tourStart);
     useEffect(() => {
@@ -29,39 +21,17 @@ const EditCodeDialog = forwardRef<MakeCodeFrameDriver, EditCodeDialogProps>(
       }
     }, [isOpen, tourStart]);
     return (
-      <>
-        <Box
-          ref={containerRef}
-          transform={isOpen ? undefined : "translate(-150vw, -150vh)"}
-          visibility={isOpen ? "visible" : "hidden"}
-        />
-        <Modal
-          size="full"
-          isOpen={true}
-          onClose={() => {}}
-          closeOnEsc={false}
-          blockScrollOnMount={false}
-          portalProps={{
-            containerRef: containerRef,
-          }}
-        >
-          <ModalOverlay>
-            <ModalContent>
-              <ModalBody
-                p={0}
-                display="flex"
-                alignItems="stretch"
-                flexDir="column"
-                justifyContent="stretch"
-              >
-                <Flex flexGrow="1" flexDir="column" w="100%" bgColor="white">
-                  <Editor ref={ref} style={{ flexGrow: 1 }} />
-                </Flex>
-              </ModalBody>
-            </ModalContent>
-          </ModalOverlay>
-        </Modal>
-      </>
+      <Flex
+        w="100%"
+        h="100%"
+        bgColor="white"
+        left={isOpen ? undefined : "-150vw"}
+        top={isOpen ? undefined : "-150vh"}
+        visibility={isOpen ? "visible" : "hidden"}
+        position={isOpen ? undefined : "absolute"}
+      >
+        <Editor ref={ref} style={{ flexGrow: 1 }} />
+      </Flex>
     );
   }
 );

src/deployment/index.ts

@@ -13,14 +13,15 @@ export type DeploymentConfigFactory = (
 // This is configured via a vite alias, defaulting to ./default
 import { default as df } from "theme-package";
 import { BoxProps } from "@chakra-ui/react";
+import { flags } from "../flags";
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const deploymentFactory: DeploymentConfigFactory = df;
 export const deployment = (() => {
   const deployment = deploymentFactory(import.meta.env);
-  if (import.meta.env.DEV) {
+  if (import.meta.env.DEV || flags.e2e) {
     return {
       ...deployment,
-      // Sidestep CORS issues in development. See vite.config.ts.
+      // Sidestep CORS issues in development/e2e. See vite.config.ts.
       activitiesBaseUrl: "/microbit-org-proxy/classroom/activities/",
     };
   }

src/e2e/app/data-samples.ts

@@ -63,6 +63,19 @@ 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, {
+      timeout: 10_000,
+    });
+    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,42 @@
+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 : "/"
+    }`;
+
+    this.startSessionBtn = page.getByRole("button", { name: "Start session" });
+    this.nameInputField = page.getByRole("textbox", { name: "Name" });
+  }
+
+  async gotoSimpleAIExerciseTimer() {
+    // The import process relies on the e2e flag in this query string
+    // for the proxy to be used.
+    const query =
+      "flag=e2e&id=simple-ai-exercise-timer&project=Project%3A%20Simple%20AI%20exercise%20timer&name=Simple%20AI%20exercise%20timer&editors=makecode";
+    return this.page.goto(`${this.url}import?${query}`);
+  }
+
+  expectName(expected: string) {
+    return expect(this.nameInputField).toHaveValue(expected);
+  }
+
+  async startSession() {
+    // Might still be loading.
+    await expect(this.startSessionBtn).toBeEnabled({
+      timeout: 5_000,
+    });
+    await 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,22 @@
+/**
+ * (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"]);
+  });
+});

src/flags.ts

@@ -20,6 +20,10 @@ export type Flag =
    * Flag to enable redux/zustand dev tools.
    */
   | "devtools"
+  /**
+   * Flag to enable e2e support.
+   */
+  | "e2e"
   /**
    * Flag to add a beta warning. Enabled for review and staging site stages.
    */
@@ -52,6 +56,7 @@ const allFlags: FlagMetadata[] = [
   { name: "exampleOptInA", defaultOnStages: ["review", "staging"] },
   { name: "exampleOptInB", defaultOnStages: [] },
   { name: "devtools", defaultOnStages: ["local"] },
+  { name: "e2e", defaultOnStages: [] },
   {
     name: "preReleaseNotice",
     defaultOnStages: ["staging"],

src/pages/ImportPage.tsx

@@ -38,7 +38,9 @@ const ImportPage = () => {
   const [params] = useSearchParams();
   setEditorVersionOverride(params.get("editorVersion") || undefined);
   const defaultProjectName = useDefaultProjectName();
-  const [name, setName] = useState<string>(defaultProjectName);
+  const [name, setName] = useState<string>(
+    params.get("name") ?? defaultProjectName
+  );
   const isValidSetup = validateProjectName(name);
   const [fetchingProject, setFetchingProject] = useState<boolean>(true);
   const [project, setProject] = useState<MakeCodeProject>();
@@ -63,7 +65,6 @@ const ImportPage = () => {
           intl
         );
         setProject(project);
-        setName(resourceName ?? defaultProjectName);
       } catch (e) {
         // Log the fetch error, but fallback to new blank session by default.
         logging.error(e);
@@ -141,11 +142,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}