[tests] Remove enzyme from QualityMetrics tests #1684

Freedisch · 2023-08-15T08:59:36Z

Which problem is this PR solving?

part of Remove dependency on enzyme #1668
migrating the existing Enzyme based tests to React Testing Libary

Description of the changes

Currently I migrated 3 files

QualityMetrics/BannerText.test.js
QualityMetrics/CountCard.test.js

How was this change tested?

replaced the shallow module from enzyme to render from RTL

Checklist

I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
I have signed all commits
I have run lint and test steps successfully
- for jaeger: make lint test
- for jaeger-ui: yarn lint and yarn test

Signed-off-by: Freedisch <freeproduc@gmail.com>

Freedisch · 2023-08-15T09:04:40Z

I Will keep migrating other files

anshgoyalevil · 2023-08-15T09:44:35Z

@Freedisch Are tests working fine locally? I think you might haven't generated the snapshots.

Freedisch · 2023-08-15T09:51:46Z

@anshgoyalevil, I just noticed, I will update it with the shallow func u created, previously

Signed-off-by: Freedisch <freeproduc@gamil.com>

Freedisch · 2023-08-15T12:29:34Z

Mirgation to RLT with QualityMetrics/BannerText.test.js
QualityMetrics/CountCard.test.js pass test

There is an expected behavior with snapshots with QualityMetrics/MetricCard.test.js and the shallow func does solve it. I will keep looking into that.

yurishkuro · 2023-08-15T15:48:35Z

packages/jaeger-ui/src/components/QualityMetrics/CountCard.test.js


 import CountCard from './CountCard';
+import shallow from '../../utils/ReactShallowRenderer.test';


can the last two tests be modified to assert specific things on the output instead of using shallow? This seems like a simply component to test

Alright, I'm on it

Signed-off-by: Freedisch <freeproduc@gamil.com>

Freedisch · 2023-08-15T23:06:46Z

@yurishkuro, I have updated both tests and currently, they no longer snapshots

yurishkuro · 2023-08-16T15:03:53Z

packages/jaeger-ui/src/components/QualityMetrics/CountCard.test.js

+    const { getByText } = render(<CountCard count={count} title={title} examples={examples} />);
+
+    const countElement = getByText('108');
+    const titleElement = getByText('Test Title');


simplify

Suggested change

const titleElement = getByText('Test Title');

expect(getByText(title)).toBeInTheDocument();

this makes the test easier to read

yurishkuro · 2023-08-16T15:46:34Z

@anshgoyalevil do you mind reviewing this?

anshgoyalevil · 2023-08-16T15:47:30Z

@yurishkuro Sure. Would be happy to review 🚀

anshgoyalevil · 2023-08-16T16:16:03Z

packages/jaeger-ui/src/components/QualityMetrics/BannerText.test.js

  });

  it('renders header when props.bannerText is a string', () => {
-    expect(shallow(<BannerText bannerText="foo text" />)).toMatchSnapshot();


Since toMatchSnapshot() is no longer used, the snapshots created for this test needs to be purged.
You can use the command yarn test --updateSnapshot for that.

anshgoyalevil · 2023-08-16T16:16:46Z

packages/jaeger-ui/src/components/QualityMetrics/BannerText.test.js

-          }}
-        />
-      )
-    ).toMatchSnapshot();


Snapshots need to be purged for this too. Otherwise, the tests would pass, but CI will fail.

anshgoyalevil · 2023-08-16T16:20:16Z

packages/jaeger-ui/src/components/QualityMetrics/BannerText.test.js

  });

  it('renders header when props.bannerText is a string', () => {
-    expect(shallow(<BannerText bannerText="foo text" />)).toMatchSnapshot();
+    const { getByText } = render(<BannerText bannerText="foo text" />);


You can use most of these functions using the screen object from @testing-library/react.
Example,

render(<BannerText bannerText="foo text" />); expect(screen.getByText('foo text')).toBeInTheDocument();

Same goes for other such usages as well

Signed-off-by: Freedisch <freeproduc@gmail.com>

Freedisch · 2023-08-16T17:20:06Z

@anshgoyalevil, updated changes

packages/jaeger-ui/src/components/QualityMetrics/CountCard.test.js

yurishkuro · 2023-08-16T17:22:44Z

packages/jaeger-ui/src/components/QualityMetrics/CountCard.test.js

+    render(<CountCard count={count} title={title} />);
+
+    expect(screen.getByText('108')).toBeInTheDocument();
+    expect(screen.getByText('Test Title')).toBeInTheDocument();


Suggested change

expect(screen.getByText('Test Title')).toBeInTheDocument();

expect(screen.getByText(title)).toBeInTheDocument();

yurishkuro · 2023-08-16T17:23:33Z

packages/jaeger-ui/src/components/QualityMetrics/CountCard.test.js

+    expect(screen.getByText('108')).toBeInTheDocument();
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Examples')).toBeInTheDocument();


use the same constants, not literal strings

Signed-off-by: Freedisch <freeproduc@gmail.com>

yurishkuro · 2023-08-16T19:02:41Z

Note: this description is inaccurate, this issue does not resolve the issue completely, it's a partial solution.

This PR resolve #1668 on my migrating the existing Enzym library to React Testing Libary

I am changing it to "part of ..."

codecov · 2023-08-16T19:12:04Z

Codecov Report

Patch and project coverage have no change.

Comparison is base (1a01faa) 96.01% compared to head (f3be9d9) 96.01%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1684   +/-   ##
=======================================
  Coverage   96.01%   96.01%           
=======================================
  Files         241      241           
  Lines        7560     7560           
  Branches     1985     1985           
=======================================
  Hits         7259     7259           
  Misses        301      301

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

migrating from Enzym to RTL

a12cdf7

Signed-off-by: Freedisch <freeproduc@gmail.com>

Freedisch requested review from everett980 and rubenvp8510 as code owners August 15, 2023 08:59

Freedisch added 2 commits August 15, 2023 15:13

updated tests

751f6f9

Signed-off-by: Freedisch <freeproduc@gamil.com>

revert migration into snapshots

f760b9d

Signed-off-by: Freedisch <freeproduc@gamil.com>

yurishkuro reviewed Aug 15, 2023

View reviewed changes

Freedisch added 2 commits August 16, 2023 01:26

refactor shallow

74c2c7e

Signed-off-by: Freedisch <freeproduc@gamil.com>

rm comments

9034cef

Signed-off-by: Freedisch <freeproduc@gamil.com>

Merge branch 'main' into migration

52364d0

yurishkuro reviewed Aug 16, 2023

View reviewed changes

anshgoyalevil reviewed Aug 16, 2023

View reviewed changes

Freedisch added 2 commits August 16, 2023 20:18

update tests

92bae04

Signed-off-by: Freedisch <freeproduc@gmail.com>

snapshots update

ccc7d43

Signed-off-by: Freedisch <freeproduc@gmail.com>

yurishkuro reviewed Aug 16, 2023

View reviewed changes

packages/jaeger-ui/src/components/QualityMetrics/CountCard.test.js Outdated Show resolved Hide resolved

yurishkuro reviewed Aug 16, 2023

View reviewed changes

Freedisch and others added 2 commits August 16, 2023 20:32

fix

f370b16

Signed-off-by: Freedisch <freeproduc@gmail.com>

Merge branch 'main' into migration

f3be9d9

yurishkuro approved these changes Aug 16, 2023

View reviewed changes

yurishkuro changed the title ~~migrating from Enzym to React Testing Library~~ [tests] Remove enzyme from QualityMetrics tests Aug 16, 2023

yurishkuro merged commit 602cfe3 into jaegertracing:main Aug 16, 2023
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[tests] Remove enzyme from QualityMetrics tests #1684

[tests] Remove enzyme from QualityMetrics tests #1684

Freedisch commented Aug 15, 2023 •

edited by yurishkuro

Freedisch commented Aug 15, 2023

anshgoyalevil commented Aug 15, 2023

Freedisch commented Aug 15, 2023

Freedisch commented Aug 15, 2023

yurishkuro Aug 15, 2023

Freedisch Aug 15, 2023

Freedisch commented Aug 15, 2023

yurishkuro Aug 16, 2023

Freedisch Aug 16, 2023

yurishkuro commented Aug 16, 2023

anshgoyalevil commented Aug 16, 2023

anshgoyalevil Aug 16, 2023

anshgoyalevil Aug 16, 2023

anshgoyalevil Aug 16, 2023

Freedisch commented Aug 16, 2023

yurishkuro Aug 16, 2023

yurishkuro Aug 16, 2023

yurishkuro commented Aug 16, 2023

codecov bot commented Aug 16, 2023


		import CountCard from './CountCard';
		import shallow from '../../utils/ReactShallowRenderer.test';

	const titleElement = getByText('Test Title');
	expect(getByText(title)).toBeInTheDocument();

	expect(screen.getByText('Test Title')).toBeInTheDocument();
	expect(screen.getByText(title)).toBeInTheDocument();

[tests] Remove enzyme from QualityMetrics tests #1684

[tests] Remove enzyme from QualityMetrics tests #1684

Conversation

Freedisch commented Aug 15, 2023 • edited by yurishkuro

Which problem is this PR solving?

Description of the changes

How was this change tested?

Checklist

Freedisch commented Aug 15, 2023

anshgoyalevil commented Aug 15, 2023

Freedisch commented Aug 15, 2023

Freedisch commented Aug 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Freedisch commented Aug 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yurishkuro commented Aug 16, 2023

anshgoyalevil commented Aug 16, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Freedisch commented Aug 16, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yurishkuro commented Aug 16, 2023

codecov bot commented Aug 16, 2023

Codecov Report

Freedisch commented Aug 15, 2023 •

edited by yurishkuro