nidhi comments!

yext · Sep 21, 2023 · 5f5bec1 · 5f5bec1
1 parent e6a3e47
commit 5f5bec1
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 20 deletions.
diff --git a/packages/studio-ui/src/components/AddPageButton/AddPageButton.tsx b/packages/studio-ui/src/components/AddPageButton/AddPageButton.tsx
@@ -42,7 +42,7 @@ function AddPageButtonInternal() {
           break;
         case FlowStep.SelectLayout:
           await createPage(
-            state.pageName || "",
+            state.pageName,
             state.getPathVal,
             state.streamScope,
             layout

diff --git a/packages/studio-ui/src/components/AddPageButton/AddPageContext.ts b/packages/studio-ui/src/components/AddPageButton/AddPageContext.ts
@@ -4,7 +4,7 @@ import { createContext } from "react";
 export interface AddPageData {
   isStatic: boolean;
   streamScope?: StreamScope;
-  pageName?: string;
+  pageName: string;
   getPathVal?: GetPathVal;
 }
 

diff --git a/packages/studio-ui/src/components/AddPageButton/AddPageContextProvider.tsx b/packages/studio-ui/src/components/AddPageButton/AddPageContextProvider.tsx
@@ -7,6 +7,7 @@ import { GetPathVal, StreamScope } from "@yext/studio-plugin";
 
 const initialPageData: AddPageData = {
   isStatic: true,
+  pageName: ""
 };
 
 export default function AddPageContextProvider(props: PropsWithChildren) {

diff --git a/packages/studio-ui/src/components/AddPageButton/LayoutSelector.tsx b/packages/studio-ui/src/components/AddPageButton/LayoutSelector.tsx
@@ -45,18 +45,24 @@ export default function LayoutSelector({
 
   const selectClasses = twMerge(selectCssClasses, "w-full mb-6");
   const body = (
-    <label>
-      <select className={selectClasses} onChange={handleChange}>
-        <option key="" value="">
-          No layout selected
+    <select 
+    className={selectClasses} 
+    onChange={handleChange} 
+    aria-label="Layout picker"
+    >
+      <option key="" value="">
+        No layout selected
+      </option>
+      {Object.keys(layouts).map((layoutName) => (
+        <option 
+          key={layoutName} 
+          value={layoutName}
+          aria-label={`${layoutName} layout`}
+        >
+          {layoutName}
         </option>
-        {Object.keys(layouts).map((layoutName) => (
-          <option key={layoutName} value={layoutName}>
-            {layoutName}
-          </option>
-        ))}
-      </select>
-    </label>
+      ))}
+    </select>
   );
 
   return (

diff --git a/packages/studio-ui/tests/components/AddPageFlow/AddPageButton.test.tsx b/packages/studio-ui/tests/components/AddPageFlow/AddPageButton.test.tsx
@@ -61,7 +61,7 @@ async function specifyName() {
 async function selectLayoutAndSave(layoutName: string) {
   await userEvent.selectOptions(
     screen.getByRole("combobox"),
-    screen.getByRole("option", { name: layoutName })
+    screen.getByRole("option", { name: `${layoutName} layout` })
   );
   const saveButton = screen.getByRole("button", { name: "Save" });
   await userEvent.click(saveButton);
@@ -99,7 +99,7 @@ describe("PagesJS repo", () => {
     await userEvent.type(urlTextbox, url);
   }
 
-  it("closes modal after page type, name, and lauout for static page", async () => {
+  it("closes modal after page type, name, and layout for static page", async () => {
     jest.spyOn(sendMessageModule, "default").mockImplementation(() => {
       return new Promise((resolve) =>
         resolve({
@@ -269,7 +269,7 @@ describe("PagesJS repo", () => {
           entityFiles: ["mockLocalData.json"],
         },
       });
-      await waitFor(() => expect(screen.queryByText("Next")).toBeNull());
+      await waitFor(() => expect(screen.queryByText("Save")).toBeNull());
 
       expect(useStudioStore.getState().pages.activeEntityFile).toEqual(
         "mockLocalData.json"
@@ -309,8 +309,8 @@ describe("errors", () => {
     await userEvent.click(addPageButton);
     const textbox = screen.getByRole("textbox");
     await userEvent.type(textbox, "universal");
-    const saveButton = screen.getByRole("button", { name: "Next" });
-    await userEvent.click(saveButton);
+    const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
+    await userEvent.click(basicPageDataNextButton);
     expect(
       screen.getByText('Page name "universal" is already used.')
     ).toBeDefined();
@@ -322,8 +322,8 @@ describe("errors", () => {
     await userEvent.click(addPageButton);
     const textbox = screen.getByRole("textbox");
     await userEvent.type(textbox, "***");
-    const saveButton = screen.getByRole("button", { name: "Next" });
-    await userEvent.click(saveButton);
+    const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
+    await userEvent.click(basicPageDataNextButton);
     expect(
       screen.getByText("Page name cannot contain the characters: *")
     ).toBeDefined();