Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option comps rtl #7014

Merged
merged 3 commits into from
Oct 11, 2024
Merged

Option comps rtl #7014

merged 3 commits into from
Oct 11, 2024

Conversation

edleeks87
Copy link
Contributor

Proposed behaviour

Converts Option, OptionGroupHeader and OptionRow unit tests to RTL

Current behaviour

Option, OptionGroupHeader and OptionRow unit tests are enzyme

Checklist

  • Commits follow our style guide
  • Unit tests added or updated if required
  • Typescript d.ts file added or updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Comment on lines 6 to 8
const mockedGuid = "guid-12345";
jest.mock("../../../__internal__/utils/helpers/guid");
(guid as jest.MockedFunction<typeof guid>).mockImplementation(() => mockedGuid);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: it doesn't appear we are asserting the id set on an underlying element in any of the tests. Is this mock required for something else?

Copy link
Contributor Author

@edleeks87 edleeks87 Oct 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one can be removed, I'm actually going to keep it in the other ones as we should be testing when the user set a custom id or not etc

expect(option).not.toHaveAttribute("aria-disabled");
});

it("should call `onSelect` or `onClick` when the user clicks on the element", async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(non-blocking): what do you think of this so it reflects calling both event handlers?

Suggested change
it("should call `onSelect` or `onClick` when the user clicks on the element", async () => {
it("should call `onSelect` and `onClick` when the user clicks on the element", async () => {

@edleeks87 edleeks87 force-pushed the option-comps-rtl branch 2 times, most recently from fed4db4 to c5e43d8 Compare October 11, 2024 09:23
tomdavies73
tomdavies73 previously approved these changes Oct 11, 2024
expect(screen.queryByRole("option", { name: "bar" })).not.toBeInTheDocument();
});

test("should set guid as `id` on the elment when none passed", () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo:

Suggested change
test("should set guid as `id` on the elment when none passed", () => {
test("should set guid as `id` on the element when none passed", () => {

expect(onClick).toHaveBeenCalled();
});

it("should call `onSelect` when the user clicks on the element and `onClick` is not set but custom `id` passed", async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(non-blocking): what do you think of this wording tweak for clarity?

Suggested change
it("should call `onSelect` when the user clicks on the element and `onClick` is not set but custom `id` passed", async () => {
it("calls `onSelect` when clicked and neither `onClick` nor `id` are set", async () => {

});
});

it("should call `onSelect` when the user clicks on the element and `onClick` is not set but custom `id` is passed", async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(non-blocking): similarly, what do you think about this tweak for clarity?:

Suggested change
it("should call `onSelect` when the user clicks on the element and `onClick` is not set but custom `id` is passed", async () => {
it("calls `onSelect` when clicked, without `onClick` set, but with `id` provided.", async () => {

@edleeks87 edleeks87 marked this pull request as ready for review October 11, 2024 12:28
@edleeks87 edleeks87 requested review from a team as code owners October 11, 2024 12:28
@edleeks87 edleeks87 merged commit 4974245 into master Oct 11, 2024
25 checks passed
@edleeks87 edleeks87 deleted the option-comps-rtl branch October 11, 2024 14:18
@carbonci
Copy link
Collaborator

🎉 This PR is included in version 143.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

5 participants