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

Frontend: Unit tests /components directory, convert to svg icons #8716

Merged
merged 17 commits into from
Dec 7, 2022

Conversation

RachelElysia
Copy link
Member

@RachelElysia RachelElysia commented Nov 15, 2022

Unit tests added:

  • EnrollSecretRow.tests.tsx related Add Tests for EnrollSecret Components #8836
    • Hides secret by default
    • Shows secret when clicking the eye button
  • LastUpdatedText.tests.tsx closes Add Tests for LastUpdatedText Component #8839
    • Renders text
    • Renders updated never if missing timestamp
    • Renders tooltip
  • PlatformCompatibility.tests.tsx
    • Renders compatible platforms
    • Renders empty state
    • Renders error state
  • DropdownCell.tests.tsx related Add Tests for Dropdown Component #8825
    • Renders dropdown placeholder and options
  • IssuesCell.tests.tsx related Add Tests for Table Cell Components #8833
    • Renders icon, issue count, tooltip
    • Add new issue icon (similar to alert icon, but outlined and not filled in)
  • LinkCell.tests.tsx related Add Tests for Table Cell Components #8833
    • Renders text and correct path
  • PillCell.tests.tsx related Add Tests for Table Cell Components #8833
    • Refactored to take object {indicator: string, id: number} instead of array [string, number] (from PackTableConfig, ScheduleTableConfig, QueriesTableConfig)
    • Renders pill text and tooltip on hover
  • PlatformCell.tests.tsx related Add Tests for Table Cell Components #8833
    • Renders platform icons in order
    • Renders empty state
    • Add data-testid to platform svg icons so we could test the order of the icons
  • RevealButton.tsx
    • Renders show and hide text
    • Hides caret by default, shows caret on left or right
    • Renders tooltip if provided
    • Refactored className to be consistent with other className patterns
    • Refactored to use new Icon patterns and replace CSS rendering png icons as pseudoclass
  • SummaryTile.tests.tsx
    • Updated test to include icon since we now have data-testid to test icon rendering

Other

  • Removed import {v4 as uuid } from "uuid"; because it was throwing an error with the typescript compiler when running a test on the file. Replaced all 4 instances with with loadash uniqueId

SVG icons added moved to icon PR so this PR can focus soley on unit tests

Checklist for submitter

If some of the following don't apply, delete the relevant line.

  • Manual QA for all new/changed functionality

@RachelElysia RachelElysia force-pushed the unit-tests-low-hanging branch from 5364946 to 218f716 Compare November 18, 2022 20:48
@RachelElysia RachelElysia force-pushed the unit-tests-low-hanging branch from 218f716 to 466e04c Compare November 28, 2022 18:27
@RachelElysia RachelElysia marked this pull request as ready for review November 29, 2022 15:31
@RachelElysia RachelElysia requested a review from a team November 29, 2022 15:31
@ghernandez345
Copy link
Contributor

nice. we should be able to close some of these issues here when we merge this in. #8773

@lukeheath
Copy link
Member

🔥


// Click eye icon
const eyeIcon = screen.findByTestId("eye-icon");
await user.click(await eyeIcon);
Copy link
Contributor

@ghernandez345 ghernandez345 Dec 5, 2022

Choose a reason for hiding this comment

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

do you need the await in await eyeIcon?

would this work?

const eyeIcon = screen.getByTestId("eye-icon");

Copy link
Member Author

Choose a reason for hiding this comment

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

Thank you! I was wondering why it wasn't working, merp, the diff between find by test id and get by test id.

Copy link
Contributor

@ghernandez345 ghernandez345 left a comment

Choose a reason for hiding this comment

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

very nice PR. nice work 👍🏽


describe("Issue cell", () => {
it("renders icon, total issues, and failing policies tooltip", async () => {
const { user } = renderWithSetup(
Copy link
Contributor

Choose a reason for hiding this comment

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

The custom renderer will always set up the user events for testing. what do you think about doing this as an alternative?

const render = customRender()
const { user } = render(...)

tbh I kinda prefer just using renderWithSetup when you only need user events setup. what do you think?

Copy link
Member Author

Choose a reason for hiding this comment

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

TODO: Rachel, read this later

Copy link
Member Author

Choose a reason for hiding this comment

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

@ghernandez345 looks a lot cleaner, only issue I see is when we need { user } and render is defined already so we can't redefine it so it looks wonky (e.g. RevealButton.tests.tsx)

I went ahead and made this change.

Copy link
Contributor

Choose a reason for hiding this comment

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

where do you mean? I dont see where that is the case

@lukeheath
Copy link
Member

@ghernandez345 @RachelElysia Would y'all please make sure any tests covered here are closed in the related epic? Feel free to bring them onto the release board if you want. Since they don't need QA, it's not strictly necessary.

ghernandez345
ghernandez345 previously approved these changes Dec 6, 2022
@RachelElysia RachelElysia merged commit fa8ee02 into fleetdm:main Dec 7, 2022
@RachelElysia RachelElysia deleted the unit-tests-low-hanging branch December 7, 2022 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Add Tests for LastUpdatedText Component
3 participants