1. Tasks
When the modal form is created and showed up in the web app, the next step in the plan is writing some unit tests to make sure that the form works appropriately. If there is no modification needed, I will be able to submit a PR for the maintainer to review.
2. Modification Process
Because the project has currently used Jest for testing, I also made use of this framework to write unit tests.
I wrote two describe
blocks for the Stories
component and the Modal Form
, then in each describe
block, there are more detailed test cases.
1) describe
block for stories
:
- should renders form without crashing
- should show the
Modal Form
whenCreate your story
button is clicked
it("should show form modal when Create your story btn is clicked", () => {
render(<Stories initShow={true} />);
const modalForm = screen.getByRole(/modalForm/i);
expect(modalForm).toBeInTheDocument();
});
2) describe
block for form
:
- input fields and selected fields should be rendered correctly
it("should render text fields correctly", () => {
render(<Stories initShow={true} />);
userEvent.type(screen.getByRole("title"), "My story");
expect(screen.getByRole("title")).toHaveValue("My story");
...
});
it("should render selected fields correctly", () => {
render(<Stories initShow={true} />);
userEvent.selectOptions(screen.getByRole("country"), ["Afghanistan"]);
expect(
screen.getByRole("option", { name: "Afghanistan" }).selected
).toBeTruthy();
...
});
-
Clear
andClose
buttons perform appropriately
it("clicks in clear button should clear all fields", () => {
render(<Stories initShow={true} />);
userEvent.type(screen.getByRole("title"), "My story");
userEvent.type(screen.getByRole("desc"), "This is the body of desc");
expect(screen.getByRole(/clearBtn/i)).toBeTruthy();
fireEvent.click(screen.getByRole(/clearBtn/i));
expect(screen.getByRole("title")).toHaveValue("");
expect(screen.getByRole("desc")).toHaveValue("");
});
it("clicks in close button should close the modal form", () => {
render(<Stories initShow={true} />);
expect(screen.getByRole(/closeBtn/i)).toBeTruthy();
fireEvent.click(screen.getByRole(/closeBtn/i));
});
- should be display(show, hidden) appropriately
- etc...
3. Submit PR
When all the test cases passed successfully, I tested the modal form once more time to make sure that the provided data inserted successfully to the database.
Before submitting a PR, I also double check the task list provided by the maintainer to see whether there is any task which was accidentally missed.
The maintainer reviewed the PR very quick, he required some minor changes before merging my PR.
4. Overall
In this contribution, I communicated with the maintainer a lot to seek for help. As I mentioned in the previous post, he is very helpful and enthusiastic. I really appreciate that and definitely give a star for his repo.
Thank you for reading the post!
Happy coding!
Top comments (0)