Skip to content

Commit

Permalink
fix tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@alextaing
alextaing committed Sep 20, 2023
1 parent 2ab53db commit d28b21f
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 53 deletions.
2 changes: 1 addition & 1 deletion packages/studio-ui/src/components/AddPageButton/AddPageContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export interface AddPageActions {
setIsStatic: (isStatic: boolean) => void;
setStreamScope: (streamScope: StreamScope) => void;
setPageName: (pageName: string) => void;
setGetPathVal: (getPathVal: GetPathVal) => void;
setGetPathVal: (getPathVal?: GetPathVal) => void;
resetState: () => void;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/studio-ui/src/components/AddPageButton/AddPageContextProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function AddPageContextProvider(props: PropsWithChildren) {
setState((state) => {
return { ...state, pageName };
}),
setGetPathVal: (getPathVal: GetPathVal) =>
setGetPathVal: (getPathVal?: GetPathVal) =>
setState((state) => {
return { ...state, getPathVal };
}),
Expand Down
17 changes: 12 additions & 5 deletions packages/studio-ui/src/components/AddPageButton/BasicPageDataCollector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,11 @@ export default function BasicPageDataCollector({
handleConfirm,
}: FlowStepModalProps) {
const [errorMessage, setErrorMessage] = useState<string>("");
const isPagesJSRepo = useStudioStore(
(store) => store.studioConfig.isPagesJSRepo
const [isPagesJSRepo, pages] = useStudioStore(
(store) => [
store.studioConfig.isPagesJSRepo,
store.pages.pages
]
);
const { state, actions } = useContext(AddPageContext);
const isEntityPage = isPagesJSRepo && !state.isStatic;
Expand Down Expand Up @@ -53,16 +56,20 @@ export default function BasicPageDataCollector({
setErrorMessage(validationResult.errorMessages.join("\r\n"));
return false;
}
if (!getPathValue) {
setErrorMessage('Required "getPathValue" does not exist.');
if (isPagesJSRepo && !getPathValue) {
setErrorMessage("A getPath value is required.");
return false;
}
if (pages[data.pageName]) {
setErrorMessage(`Page name "${data.pageName}" is already used.`);
return false;
}
actions.setPageName(data.pageName);
actions.setGetPathVal(getPathValue);
await handleConfirm();
return true;
},
[actions, handleConfirm, isEntityPage, pageDataValidator]
[actions, handleConfirm, isEntityPage, isPagesJSRepo, pageDataValidator, pages]
);

const transformOnChangeValue = useCallback(
Expand Down
130 changes: 84 additions & 46 deletions packages/studio-ui/tests/components/AddPageFlow/AddPageButton.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
import AddPageButton from "../../../src/components/AddPageButton/AddPageButton";
import useStudioStore from "../../../src/store/useStudioStore";
import mockStore from "../../__utils__/mockStore";
import { PageState, PropValueKind, ResponseType } from "@yext/studio-plugin";
import { ComponentStateKind, LayoutState, PageState, PropValueKind, ResponseType } from "@yext/studio-plugin";
import * as sendMessageModule from "../../../src/messaging/sendMessage";

const basicPageState: PageState = {
Expand All @@ -12,17 +12,34 @@ const basicPageState: PageState = {
filepath: expect.stringContaining("test.tsx"),
};

const mockLayout: LayoutState = {
componentTree: [{
kind: ComponentStateKind.Standard,
componentName: "mockComponentName",
props: {},
uuid: "mockUUID",
metadataUUID: "mockMetadataUUID",
}],
cssImports: [],
filepath: "mockLayoutFilepath"
}

beforeEach(() => {
mockStore({
pages: {
pages: {
universal: {
componentTree: [],
cssImports: [],
filepath: "mock-filepath",
filepath: "mockFilepath",
},
},
},
layouts: {
layoutNameToLayoutState: {
mockLayout: mockLayout
}
}
});
});

Expand All @@ -33,17 +50,30 @@ async function specifyName() {
await userEvent.type(nameTextbox, "test");
}

it("closes the modal when a page name is added in a non-PagesJS repo", async () => {
const addPageSpy = jest.spyOn(useStudioStore.getState().pages, "addPage");
async function selectLayoutAndSave(layoutName: string) {
await userEvent.selectOptions(
screen.getByRole("combobox"),
screen.getByRole('option', {name: layoutName})
);
const saveButton = screen.getByRole("button", { name: "Save" });
await userEvent.click(saveButton);
}

it("closes the modal after completing page name and layout modals in a non-PagesJS repo", async () => {
render(<AddPageButton />);
const addPageButton = screen.getByRole("button");
await userEvent.click(addPageButton);
const saveButton = screen.getByRole("button", { name: "Save" });
expect(saveButton).toBeDisabled();
const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
expect(basicPageDataNextButton).toBeDisabled();
await specifyName();
await userEvent.click(saveButton);
expect(addPageSpy).toBeCalledWith("test", basicPageState);
await userEvent.click(basicPageDataNextButton);
await selectLayoutAndSave("mockLayout");
await waitFor(() => expect(screen.queryByText("Save")).toBeNull());
expect(useStudioStore.getState().pages.pages["test"]).toEqual({
...basicPageState,
componentTree: mockLayout.componentTree,
cssImports: mockLayout.cssImports
});
});

describe("PagesJS repo", () => {
Expand All @@ -61,7 +91,7 @@ describe("PagesJS repo", () => {
await userEvent.type(urlTextbox, url);
}

it("closes modal when page type, name, and url are specified for static page", async () => {
it("closes modal after page type, name, and lauout for static page", async () => {
jest.spyOn(sendMessageModule, "default").mockImplementation(() => {
return new Promise((resolve) =>
resolve({
Expand All @@ -80,16 +110,16 @@ describe("PagesJS repo", () => {

const defaultRadioButton = screen.getByRole("radio", { checked: true });
expect(defaultRadioButton).toHaveAttribute("name", "Static");
const nextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(nextButton);
const pageTypeNextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(pageTypeNextButton);

const saveButton = screen.getByRole("button", { name: "Save" });
expect(saveButton).toBeDisabled();
const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
expect(basicPageDataNextButton).toBeDisabled();
await specifyName();
expect(saveButton).toBeDisabled();
expect(basicPageDataNextButton).toBeDisabled();
await specifyUrl("testing");
await userEvent.click(saveButton);

await userEvent.click(basicPageDataNextButton);
await selectLayoutAndSave("mockLayout");
expect(useStudioStore.getState().pages.pages["test"]).toEqual({
...basicPageState,
pagesJS: {
Expand All @@ -99,6 +129,8 @@ describe("PagesJS repo", () => {
},
entityFiles: ["mockLocalData.json"],
},
componentTree: mockLayout.componentTree,
cssImports: mockLayout.cssImports
});

await waitFor(() => expect(screen.queryByText("Save")).toBeNull());
Expand All @@ -120,7 +152,7 @@ describe("PagesJS repo", () => {
await userEvent.click(nextButton);
}

it("closes modal once page type, stream scope, name, and url are specified", async () => {
it("closes modal once page type, stream scope, name, url, and layout are specified", async () => {
render(<AddPageButton />);
jest.spyOn(sendMessageModule, "default").mockImplementation(() => {
return new Promise((resolve) =>
Expand All @@ -139,19 +171,21 @@ describe("PagesJS repo", () => {

await selectEntityPageType();

const nextButton = screen.getByRole("button", { name: "Next" });
const streamScopeNextButton = screen.getByRole("button", { name: "Next" });
const entityTypesTextbox = screen.getByRole("textbox", {
name: "Entity Type IDs",
});
await userEvent.type(entityTypesTextbox, "location, restaurant");
await userEvent.click(nextButton);
await userEvent.click(streamScopeNextButton);

const saveButton = screen.getByRole("button", { name: "Save" });
expect(saveButton).toBeDisabled();
const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
expect(basicPageDataNextButton).toBeDisabled();
await specifyName();
expect(saveButton).toBeEnabled();
expect(basicPageDataNextButton).toBeEnabled();
await specifyUrl("-[[[[id]]");
await userEvent.click(saveButton);
await userEvent.click(basicPageDataNextButton);

await selectLayoutAndSave("mockLayout");

expect(useStudioStore.getState().pages.pages["test"]).toEqual({
...basicPageState,
Expand All @@ -163,6 +197,8 @@ describe("PagesJS repo", () => {
streamScope: { entityTypes: ["location", "restaurant"] },
entityFiles: ["mockLocalData.json"],
},
componentTree: mockLayout.componentTree,
cssImports: mockLayout.cssImports
});
await waitFor(() => expect(screen.queryByText("Save")).toBeNull());

Expand All @@ -174,21 +210,8 @@ describe("PagesJS repo", () => {
});
});

it("does not require changes to stream scope or url slug", async () => {
it("does not require changes to stream scope, url slug, or layout", async () => {
render(<AddPageButton />);

const addPageButton = screen.getByRole("button");
await userEvent.click(addPageButton);

await selectEntityPageType();

const nextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(nextButton);

const saveButton = screen.getByRole("button", { name: "Save" });
expect(saveButton).toBeDisabled();
await specifyName();

jest.spyOn(sendMessageModule, "default").mockImplementation(() => {
return new Promise((resolve) =>
resolve({
Expand All @@ -200,6 +223,21 @@ describe("PagesJS repo", () => {
})
);
});

const addPageButton = screen.getByRole("button");
await userEvent.click(addPageButton);

await selectEntityPageType();

const streamScopeNextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(streamScopeNextButton);

const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
expect(basicPageDataNextButton).toBeDisabled();
await specifyName();
await userEvent.click(basicPageDataNextButton);

const saveButton = screen.getByRole("button", { name: "Save" });
await userEvent.click(saveButton);

expect(useStudioStore.getState().pages.pages["test"]).toEqual({
Expand All @@ -213,7 +251,7 @@ describe("PagesJS repo", () => {
entityFiles: ["mockLocalData.json"],
},
});
await waitFor(() => expect(screen.queryByText("Save")).toBeNull());
await waitFor(() => expect(screen.queryByText("Next")).toBeNull());

expect(useStudioStore.getState().pages.activeEntityFile).toEqual(
"mockLocalData.json"
Expand All @@ -228,18 +266,18 @@ describe("PagesJS repo", () => {
const addPageButton = screen.getByRole("button");
await userEvent.click(addPageButton);
await selectEntityPageType();
const nextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(nextButton);
await userEvent.click(nextButton);
const pageTypeNextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(pageTypeNextButton);
await userEvent.click(pageTypeNextButton);
await specifyName();
await specifyUrl("=<>[[[[field]]");
const saveButton = screen.getByRole("button", { name: "Save" });
await userEvent.click(saveButton);
const basicPageDataNextButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(basicPageDataNextButton);

expect(
screen.getByText("URL slug contains invalid characters: <>")
).toBeDefined();
expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
expect(basicPageDataNextButton).toBeDisabled();
});
});
});
Expand All @@ -251,7 +289,7 @@ describe("errors", () => {
await userEvent.click(addPageButton);
const textbox = screen.getByRole("textbox");
await userEvent.type(textbox, "universal");
const saveButton = screen.getByRole("button", { name: "Save" });
const saveButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(saveButton);
expect(
screen.getByText('Page name "universal" is already used.')
Expand All @@ -264,7 +302,7 @@ describe("errors", () => {
await userEvent.click(addPageButton);
const textbox = screen.getByRole("textbox");
await userEvent.type(textbox, "***");
const saveButton = screen.getByRole("button", { name: "Save" });
const saveButton = screen.getByRole("button", { name: "Next" });
await userEvent.click(saveButton);
expect(
screen.getByText("Page name cannot contain the characters: *")
Expand Down

0 comments on commit d28b21f

Please sign in to comment.