Add Tests for SubtestsResultsView Component #799

sumairq · 2024-11-12T13:55:12Z

This PR introduces a set of tests for the SubtestsResultsView component to validate its rendering and key functionalities. The main areas tested include:

Rendering and Snapshot: Verifies that the component renders correctly and matches the expected snapshot.
Main Content Display: Confirms that the main content in the view is present.
Breadcrumbs Navigation: Ensures breadcrumbs are displayed for easier navigation within the component.
Subtests Results Table: Checks that the subtests results table is rendered in the view.
Retrigger Button Functionality: Tests the retrigger functionality, confirming the correct alerts and authorization code requests are triggered.
Download JSON Button: Validates that clicking the "Download JSON" button correctly triggers the creation of a blob URL.

Since the SubtestsOverTimeResultsView is identical to SubtestsResultsView only snapshot testing has been done for SubtestsOverTimeResultsView

netlify · 2024-11-12T13:55:27Z

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	`5b3ef94`
🔍 Latest deploy log	https://app.netlify.com/sites/mozilla-perfcompare/deploys/674f26d8e9a6940008f20826
😎 Deploy Preview	https://deploy-preview-799--mozilla-perfcompare.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2024-11-12T13:56:48Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.65%. Comparing base (b059f94) to head (5b3ef94).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #799      +/-   ##
==========================================
+ Coverage   91.26%   92.65%   +1.38%     
==========================================
  Files          92       92              
  Lines        2450     2450              
  Branches      463      463              
==========================================
+ Hits         2236     2270      +34     
+ Misses        191      157      -34     
  Partials       23       23

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

julienw

Hey Sumair,
First thanks a ton for these new tests, this will be extremely useful!
I left a few comments to make them more solid and faster to run as well.
I noticed you were using the test ids a lot, but in reality they should be used as a last ressort. See the "Priority" paragraph at https://testing-library.com/docs/queries/about/#priority for more information about that.
Otherwise after these small changes it should be ready to go!

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

julienw · 2024-11-19T16:01:07Z

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

+    expect(homeBreadcrumb).toBeInTheDocument();
+    expect(resultsBreadcrumb).toBeInTheDocument();


I would move these expectations to just before the snapshot check of the first test.
Also you'll be able to use expect(screen.getByText(...)) there because we already awaited for something else.

You copied them above but you didn't remove this test block, am I missing something?

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

julienw · 2024-11-19T17:01:56Z

src/components/CompareResults/SubtestsResults/SubtestsOverTimeResultsView.tsx

@@ -26,7 +26,10 @@ function SubtestsResultsView(props: SubtestsResultsViewProps) {
  }, [title]);

  return (
-    <div className={styles.container}>
+    <div
+      data-testid='beta-version-subtests-compare-over-time-results'


see above, this is probably not necessary, you can revert this change.

It's still there

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

julienw

thanks, but I think you forgot to handle the review comments fully :) can you have another look please?

julienw · 2024-12-03T13:30:37Z

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

+    setup({
+      Component: SubtestsResultsMain,
+      componentProps: { view: 'subtests-results' },
+      route: '/subtestsCompareWithBase',


shouldn't that be /subtests-compare-results ?

julienw · 2024-12-03T13:38:49Z

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

+  Component,
+  componentProps = {},


It would be easier to pass the react element directly:

const setup = ({ element, ... }: { element: React.ReactElement, ... )) { ... renderWithRouter(element, { route, search, loader, }); } // and then setup({ element: <SubtestsResultsView title=""/>, ... });

julienw · 2024-12-03T13:39:31Z

src/components/CompareResults/SubtestsResults/SubtestsOverTimeResultsView.tsx

@@ -26,7 +26,10 @@ function SubtestsResultsView(props: SubtestsResultsViewProps) {
  }, [title]);

  return (
-    <div className={styles.container}>
+    <div
+      data-testid='beta-version-subtests-compare-over-time-results'


It's still there

julienw · 2024-12-03T13:42:00Z

src/__tests__/CompareResults/SubtestsResultsView.test.tsx

+    expect(homeBreadcrumb).toBeInTheDocument();
+    expect(resultsBreadcrumb).toBeInTheDocument();


You copied them above but you didn't remove this test block, am I missing something?

julienw

looks good to me now, we can merge once the snapshots are updated and the tests are green!

Highlights: [Julien Wajsberg] Add the 'No value' value to the Confidence column also in the subtest… (#807) [Julien Wajsberg] Persist column filters as URL parameters (#810) [beatrice-acasandrei] PCF-501 Search by email should be using substrings (#805) [esanuandra] PCF-549 Add the name of the device used instead of just "Android" (#803) [esanuandra] PCF-323 Expanded row doesn't match the figma design (#800) [Carla Severe] Added the checked item count to the filter header name (#806) [esanuandra] PCF-524 Display the mean instead of the median in the results table rows + update the column title + display median in the expanded row as well (#798) Internal changes: [Julien Wajsberg] Extract the table filters into a common hook (#808) [Julien Wajsberg] Use keys for the column filters (#809) [Carla Severe] Update perfcompare doc link in ReadME (#811) [Sumair Qaisar] Add Tests for SubtestsResultsView Component (#799)

sumairq changed the title ~~Add Tests for SubtestsResultsView Component~~ Add Tests for SubtestsResultsView Component [WIP] 🚧 Nov 12, 2024

sumairq changed the title ~~Add Tests for SubtestsResultsView Component [WIP] 🚧~~ Add Tests for SubtestsResultsView Component Nov 19, 2024

sumairq force-pushed the subtests-tests branch from 0be03b3 to 1287c45 Compare November 19, 2024 10:37

julienw requested changes Nov 19, 2024

View reviewed changes

julienw mentioned this pull request Nov 22, 2024

Use keys for the column filters #809

Merged

julienw reviewed Nov 22, 2024

View reviewed changes

src/__tests__/CompareResults/SubtestsResultsView.test.tsx Show resolved Hide resolved

sumairq force-pushed the subtests-tests branch 2 times, most recently from 1464030 to 6fa8a05 Compare November 27, 2024 16:06

sumairq added 6 commits November 27, 2024 21:21

Migrate subtests test data to 'fixtures.ts' file

b23d749

Write tests for subtestsResultsView

c78098d

Update snapshots

664ed71

Add snapshot test for 'SubtestsOverTimeResultsView'

f7f066d

Create setup function and cleanup tests

6a4d4db

Update snapshots

94e22f7

sumairq force-pushed the subtests-tests branch from 139043e to 94e22f7 Compare November 27, 2024 16:21

sumairq requested a review from julienw November 27, 2024 16:23

Merge branch 'main' into subtests-tests

c891c3a

julienw reviewed Dec 3, 2024

View reviewed changes

sumairq added 2 commits December 3, 2024 20:21

Refactor setup function and cleanup tests

98c86ac

Update snapshots

20d5257

sumairq force-pushed the subtests-tests branch from a6972b2 to 20d5257 Compare December 3, 2024 15:23

Merge branch 'main' into subtests-tests

23aaaab

sumairq requested a review from julienw December 3, 2024 15:25

julienw approved these changes Dec 3, 2024

View reviewed changes

julienw enabled auto-merge (squash) December 3, 2024 15:30

Update snapshots

5b3ef94

auto-merge was automatically disabled December 3, 2024 15:42
Head branch was pushed to by a user without write access

julienw merged commit 3af866d into mozilla:main Dec 3, 2024
10 checks passed

julienw mentioned this pull request Dec 6, 2024

Deploy Dec 6, 2024 #814

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Tests for SubtestsResultsView Component #799

Add Tests for SubtestsResultsView Component #799

sumairq commented Nov 12, 2024 •

edited

Loading

netlify bot commented Nov 12, 2024 •

edited

Loading

codecov bot commented Nov 12, 2024 •

edited

Loading

julienw left a comment

julienw Nov 19, 2024

julienw Dec 3, 2024

julienw Nov 19, 2024

julienw Dec 3, 2024

julienw left a comment

julienw Dec 3, 2024

julienw Dec 3, 2024

julienw Dec 3, 2024

julienw Dec 3, 2024

julienw left a comment

		expect(homeBreadcrumb).toBeInTheDocument();
		expect(resultsBreadcrumb).toBeInTheDocument();

Add Tests for SubtestsResultsView Component #799

Add Tests for SubtestsResultsView Component #799

Conversation

sumairq commented Nov 12, 2024 • edited Loading

netlify bot commented Nov 12, 2024 • edited Loading

✅ Deploy Preview for mozilla-perfcompare ready!

codecov bot commented Nov 12, 2024 • edited Loading

Codecov Report

julienw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienw left a comment

Choose a reason for hiding this comment

sumairq commented Nov 12, 2024 •

edited

Loading

netlify bot commented Nov 12, 2024 •

edited

Loading

codecov bot commented Nov 12, 2024 •

edited

Loading