OSD600 - The Final Release
Tags: opensource
Published: 2021-12-09 10:26:10

## 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](https://jestjs.io/) 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](https://github.com/redxzeta/Awesome-Adoption/pull/240).

## 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](https://github.com/redxzeta/Awesome-Adoption).

Thank you for reading the post!
Happy coding!