Skip to content

fix: only allow submitting form if changes have been made #14602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 13, 2024
+60 −2
Merged

fix: only allow submitting form if changes have been made #14602

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
13ca57d
fix: only allow submitting form if dirty
DanielleMaywood Sep 6, 2024
0f4657d
test: add test for submit button behaviour
DanielleMaywood Sep 9, 2024
c947bc6
fix: apply 'make fmt'
DanielleMaywood Sep 9, 2024
230de7f
chore: rename 'Submit' to 'Submit and restart'
DanielleMaywood Sep 13, 2024
bdc659d
test: fix tests
DanielleMaywood Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test: add test for submit button behaviour
  • Loading branch information
@DanielleMaywood
DanielleMaywood committed Sep 10, 2024
commit 0f4657dc3aafffc3fe384f172346069f128204f5
53 changes: 53 additions & 0 deletions .../src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,56 @@ test("Submit the workspace settings page successfully", async () => {
});
});
});

test("Submit button is only enabled when changes are made", async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think for now, having a test for this in Jest is ok, but in the future, you can try to use storybook and interaction tests :)

// Mock the API calls that loads data
jest
.spyOn(API, "getWorkspaceByOwnerAndName")
.mockResolvedValueOnce(MockWorkspace);
jest.spyOn(API, "getTemplateVersionRichParameters").mockResolvedValueOnce([
MockTemplateVersionParameter1,
MockTemplateVersionParameter2,
// Immutable parameters
MockTemplateVersionParameter4,
]);
jest.spyOn(API, "getWorkspaceBuildParameters").mockResolvedValueOnce([
MockWorkspaceBuildParameter1,
MockWorkspaceBuildParameter2,
// Immutable value
MockWorkspaceBuildParameter4,
]);
// Setup event and rendering
const user = userEvent.setup();
renderWithWorkspaceSettingsLayout(<WorkspaceParametersPage />, {
route: "/@test-user/test-workspace/settings",
path: "/:username/:workspace/settings",
// Need this because after submit the user is redirected
extraRoutes: [{ path: "/:username/:workspace", element: <div /> }],
});
await waitForLoaderToBeRemoved();

const submitButton: HTMLButtonElement = screen.getByRole("button", { name: "Submit" });

const form = screen.getByTestId("form");
const parameter1 = within(form).getByLabelText(
MockWorkspaceBuildParameter1.name,
{ exact: false },
);

// There are no changes, the button should be disabled.
expect(submitButton.disabled).toBeTruthy();

// Make changes to the form
await user.clear(parameter1);
await user.type(parameter1, "new-value");

// There are now changes, the button should be enabled.
expect(submitButton.disabled).toBeFalsy();

// Change form value back to default
await user.clear(parameter1);
await user.type(parameter1, MockWorkspaceBuildParameter1.value);

// There are now no changes, the button should be disabled.
expect(submitButton.disabled).toBeTruthy();
});