OSD600 - The Final Release

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 when Create 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 and Close 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!