Renu - Workshop Feedback

[BenSheridanEdwards]

No description provided.

[BenSheridanEdwards]

A real mixed bag here Renu. You're nailing our architecture and conventions but you really let yourself down because you rushed without checking your work. It's your biggest problem as a developer and it showcased itself again here.

• Lack of understanding of the asynchronous aspect of testing.
• You made careless errors in your test names and your last <Form /> test.
• Numerous tests are failing, worse of all it shows you didn't run your tests before submitting.

Run your tests, look at my feedback, feel how you let yourself down here, and finally absorb the lesson that rushing will only lead to mistakes and low-quality output.

I know you can be a great developer, but right now you need to let the pain of this be the wake-up call, to finally commit yourself to slowing down and becoming a professional.

Architecture: 10/10
Followed conventions: 9/10
Clean Implementation: 8/10
Percentage of passing tests: 66%

Tests: 8 failed, 16 passed, 24 total

[BenSheridanEdwards]

I'm surprised you aren't getting a type error when you try and pass this object into the Accordion component.

But I just checked and nothing comes up. I thought you had to do:

const defaultProps: AccordionProps =

[BenSheridanEdwards]

This works, but I would have personally gone findByText on this one. Usually, findByRole is the better option but you're more concerned the text/content is right, not the element itself.

Still, keep it as is. It's good work.

[BenSheridanEdwards]

Great test file, the only test case I would add would be to test the content is hidden after a second click.

[BenSheridanEdwards]

This test is failing with:

TestingLibraryElementError: Unable to find an accessible element with the role "menu"

Don't you want combobox?

  it("selects the first option by default", () => {
    renderComponent();
    expect(screen.getByRole("combobox")).toHaveValue("Option 1");
  });

This passes

[BenSheridanEdwards]

Same issue as above.

Since this is a native select, you needed to use userEvent.selectOptions to change the dropdown.

  it("allows a user to select an option", async () => {
    renderComponent();

    expect(screen.getByRole("combobox")).toHaveValue("Option 1");

    await userEvent.selectOptions(screen.getByRole("combobox"), "Option 2");

    expect(screen.getByRole("combobox")).toHaveValue("Option 2");
  });

[BenSheridanEdwards]

This test was a real shame, as it was clearly rushed. Really look at your test Renu. Take the time to read and absorb the consequences of going too fast. Read every line before looking below.

When you rush, you make mistakes. In this test, you made a number of mistakes.

Compare your test to mine below

  it("calls the onSubmit function with the correct data when the form is filled in and the submit button is clicked", async () => {
    renderComponent();
    await userEvent.type(screen.getByRole("textbox", { name: "Name" }), "Renu");
    await userEvent.type(
      screen.getByRole("textbox", { name: "Email" }),
      "[email protected]",
    );
    await userEvent.click(screen.getByRole("button", { name: "Submit" }));
    expect(handleFormSubmitMock).toHaveBeenCalledWith({
      name: "Renu",
      email: "[email protected]",
    });
  });

[BenSheridanEdwards]

You're not testing it renders, you're testing the onClose is called when clicked.

[BenSheridanEdwards]

Again you're testing the handleConfirm is being called.

[BenSheridanEdwards]

These last three tests are all failing without async await

[BenSheridanEdwards]

This test is failing as you're not waiting for the userEvent.type to input your text. You're also using findBy when you should be using getBy.

When you aren't waiting for data to come into your component for it to render, it will always be available, it's only when you are waiting for something async to happen so the content changes that you need findBy

  it("displays the toast message when the form is submitted", async () => {
    renderComponent();
    await userEvent.click(screen.getByRole("button", { name: "Open Form" }));

    await userEvent.type(screen.getByRole("textbox", { name: "Name" }), "Renu");
    await userEvent.type(
      screen.getByRole("textbox", { name: "Email" }),
      "[email protected]",
    );

    await userEvent.click(screen.getByRole("button", { name: "Submit" }));

    expect(
      await screen.findByText(
        "Hello Renu, your email [email protected] has been submitted!",
      ),
    );
  });