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.

Sign up for GitHub

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

Jump to bottom

refactor(simple-select): convert enzyme tests to RTL #6992

Merged
merged 3 commits into from
Oct 9, 2024
Merged

refactor(simple-select): convert enzyme tests to RTL #6992

merged 3 commits into from
Oct 9, 2024

Conversation

Parsium
Copy link
Contributor

@Parsium Parsium commented Sep 27, 2024

Proposed behaviour

  • Convert all Enzyme tests to React Testing Library (RTL)
  • Ensure an internal timer is cleaned-up when component unmounts

Current behaviour

  • All jest tests are written with the legacy Enzyme library
  • An internal timer is not properly cleaned-up after the component unmounts, leading to possible memory leak

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

@Parsium Parsium self-assigned this Sep 27, 2024
@Parsium Parsium force-pushed the FE-6629/simple-select-rtl branch 4 times, most recently from 34f680f to 5575b47 Compare September 27, 2024 12:26
@edleeks87 edleeks87 self-requested a review October 2, 2024 08:55
edleeks87
edleeks87 reviewed Oct 2, 2024
View reviewed changes
src/components/select/simple-select/simple-select.component.tsx
@@ -231,16 +229,16 @@ export const SimpleSelect = React.forwardRef<

filterText.current = newVal;
selectValueStartingWithText(newVal);
clearTimeout(filterTimer.current as TimerId);
window.clearTimeout(filterTimer.current);
Copy link
Contributor

Choose a reason for hiding this comment

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

Comment (non-blocking): it might be worth looking if we can come up with something that allows us to set these globally like below, happy for that to be a future bit of work rather than part of this PR etc

global.setTimeout = function (callback, delay) {
    return window.setTimeout(callback, delay);
  };
  
   global.setInterval = function (callback, delay) {
    return window.setInterval(callback, delay);
  };

  global.clearTimeout = function (id) {
    return window.clearTimeout(id);
  };

  global.clearInterval = function (id) {
    return window.clearInterval(id);
  };

src/components/select/simple-select/simple-select.component.tsx
@@ -331,6 +331,7 @@ export const SimpleSelect = React.forwardRef<
useEffect(() => {
return function cleanup() {
window.clearTimeout(filterTimer.current);
window.clearTimeout(focusTimer.current);
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): you could probably fold this change into the commit before but it's not critical etc

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll make sure to do this before release 👍🏼

src/components/select/__internal__/select-list/select-list.test.tsx
<Option id="red" value="red" text="red" />
</SelectListWithInput>
);
it.each(["top", "bottom", "left", "right"] as const)(
Copy link
Contributor

Choose a reason for hiding this comment

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

comment: FYI these are the tests I've changed as part of #6991, I suspect this PR will get merged before it but just in case wanted to make you aware where the conflict might arise

src/components/select/simple-select/simple-select.test.tsx Outdated Show resolved Hide resolved
src/components/select/simple-select/simple-select.test.tsx Outdated Show resolved Hide resolved
src/components/select/simple-select/simple-select.test.tsx Outdated Show resolved Hide resolved
src/components/select/simple-select/simple-select.test.tsx Outdated Show resolved Hide resolved
src/components/select/simple-select/simple-select.test.tsx Outdated Show resolved Hide resolved
src/components/select/simple-select/simple-select.test.tsx Outdated Show resolved Hide resolved
src/components/select/simple-select/simple-select.test.tsx Show resolved Hide resolved
@DipperTheDan DipperTheDan self-requested a review October 8, 2024 09:06
DipperTheDan
DipperTheDan reviewed Oct 8, 2024
View reviewed changes
src/components/select/simple-select/simple-select.test.tsx
expect(screen.getByRole("textbox")).toBeInTheDocument();
});

test("applies transparent background and no border to input, when transparent prop is true", () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

question/suggestion(non-blocking): Is this required for coverage? If not, this could be moved to a chromatic snapshot. If it is required, a comment above saying it is like we have elsewhere would be ideal.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah this is for satisfying coverage, I'll leave a comment confirming this 👍🏼

@Parsium Parsium force-pushed the FE-6629/simple-select-rtl branch 5 times, most recently from 5575b47 to cbed1af Compare October 8, 2024 15:15
@Parsium Parsium marked this pull request as ready for review October 9, 2024 08:51
@Parsium Parsium requested a review from a team as a code owner October 9, 2024 08:52
@Parsium Parsium merged commit f8e383e into master Oct 9, 2024
24 checks passed
@Parsium Parsium deleted the FE-6629/simple-select-rtl branch October 9, 2024 09:05
@carbonci
Copy link
Collaborator

🎉 This PR is included in version 143.0.0 🎉

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
Reviewers

@edleeks87 edleeks87 edleeks87 approved these changes

@DipperTheDan DipperTheDan DipperTheDan approved these changes

Assignees

@Parsium Parsium

Labels
No QA Required No UX QA Required Passed Review released Squad Front End
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@Parsium @carbonci @edleeks87 @DipperTheDan