Closed vomaksh closed 1 month ago
Sorry, diff of index.spec.js
is a mess.
I'm reviewing your PR #18 @ginruh, thank you for sending and sorry for this 3 months delay.
PS: please let me know if you can do these changes, or if I should go over them by myself!
Your PR looks great, I think we should replace
expect(rccsCard).toHaveTextContent("valid thru");
with
expect(
rccsCard.querySelector(".rccs__expiry__valid").textContent
).toStrictEqual("valid thru");
I think toHaveTextContent is too permissive, and toStrictEqual more strict, more similar to the strictness of the tests currently written.
I suggest you to go through each it()
compare with the previews one, and check className by className it strictly render what's expected it to render.
Taking this one as example:
BEFORE:
it("should render the card front", () => {
const front = wrapper.find(".rccs__card--front");
expect(front.length).toBe(1);
expect(front.find(".rccs__card__background").length).toBe(1);
expect(front.find(".rccs__number").length).toBe(1);
expect(front.find(".rccs__number").text()).toBe("•••• •••• •••• ••••");
expect(front.find(".rccs__name").length).toBe(1);
expect(front.find(".rccs__name").text()).toBe("YOUR NAME HERE");
expect(front.find(".rccs__expiry").length).toBe(1);
expect(front.find(".rccs__expiry__valid").text()).toBe("valid thru");
expect(front.find(".rccs__expiry__value").text()).toBe("••/••");
expect(front.find(".rccs__chip").length).toBe(1);
expect(front.find(".rccs__issuer").length).toBe(1);
});
AFTER:
it("should render the card front", () => {
renderCreditCards();
const rccs = screen.getByTestId("rccs");
const rccsCard = within(rccs).getByTestId("rccs__card");
expect(rccsCard).toHaveTextContent("•••• •••• •••• ••••");
expect(rccsCard).toHaveTextContent("YOUR NAME HERE");
expect(rccsCard).toHaveTextContent("valid thru");
expect(rccsCard).toHaveTextContent("••/••");
});
.rccs__expiry__valid
element, I don't think this is necessary and we can remove it as you did.rccs__expiry__valid
strictly render the correct prop, you applied expect(rccsCard).toHaveTextContent("valid thru");
I think it's too permissive, I'd rather ask you to replace it with something like this:
expect(
rccsCard.querySelector(".rccs__expiry__valid").textContent
).toStrictEqual("valid thru");
SUGGESTED REWRITTEN:
it("should render the card front", () => {
renderCreditCards();
const rccs = screen.getByTestId("rccs");
const rccsCard = within(rccs).getByTestId("rccs__card");
expect(rccsCard.querySelector(".rccs__number").textContent).toStrictEqual("•••• •••• •••• ••••");
expect(rccsCard.querySelector(".rccs__name").textContent).toStrictEqual("YOUR NAME HERE");
expect(rccsCard.querySelector(".rccs__expiry__valid").textContent).toStrictEqual("valid thru");
expect(rccsCard.querySelector(".rccs__expiry__value").textContent).toStrictEqual("••/••");
});
Thanks @felquis for your feedback. I tried to fix the issues you mentioned.
In the above recommendation, toStrictEqual
was asked to be used but I found it overkill for our usage since we are dealing with primitive types. For primitive types such as string, toBe
is fine.
Thank you for all this quality contribution!
Details mentioned in #17