feat: adding unit tests for tools component #1887

reachaadrika · 2023-07-02T18:08:19Z

Description

Tools , component is one of the most essential components of the website and it has various subcomponents , within it , I have included tests for all the subcomponents and they are described as follows :

-CardData.js : : Test I included here was to check the toggle visibility .

-ToolsDashboard.js : This component has components like Filters , ToolCards , ToolList within itself and thus the test I have included for this is whether it renders correctly , since I have also written individual tests for each component present within it .

-ToolsList : It renders the complete list of tools present in tools.json , and checks whenever a new tools is added , can it be seen on the website or if any tools is removed is it completely removed or not .

-ToolsCard : This component renders toolData , in card format , additional test I have included here is to check for the hover element , that when there is a hover on description ( description is very long ) then it is shown in a hover container .

FiltersDisplay** :

-FiltersDropdown :

-Filters :

-Tags :

NOTE : In some components , check was made by fetching classes only since they were not not being able to accessed but data-testid attributes .

Related issue(s)
fixes #1882

… tools_testcases

netlify · 2023-07-02T18:08:27Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`2059014`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64e8e7b39077af00083122c6
😎 Deploy Preview	https://deploy-preview-1887--asyncapi-website.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.

github-actions · 2023-07-02T18:10:30Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	28
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1887--asyncapi-website.netlify.app/

… tools_testcases

…site into tools_testcases

akshatnema · 2023-07-13T17:49:28Z

components/tools/FiltersDisplay.js

@@ -14,7 +14,7 @@ export default function FiltersDisplay({ checkedValues = [], setValues }) {
  return (
    <>
    {checkedValues.length>0 && 
-    <div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150">
+    <div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150" data-testid="FiltersDisplay-div">


Suggested change

<div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150" data-testid="FiltersDisplay-div">

<div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150" data-testid="FiltersDisplay-main">

akshatnema · 2023-07-13T17:50:35Z

components/tools/Tags.js

@@ -1,6 +1,6 @@
 export default function SelectTags({name='', bgColor, borderColor}) {
  return (
-    <div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`}>
+    <div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`} data-testid='Tags-div'>


Suggested change

<div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`} data-testid='Tags-div'>

<div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`} data-testid='Tags-main'>

akshatnema · 2023-07-13T17:54:31Z

components/tools/ToolsList.js

@@ -3,11 +3,11 @@ import Heading from '../typography/Heading'
 import Paragraph from '../typography/Paragraph'
 export default function toolsList({ toolsData }) {
  return (
-    <div className="">
+    <div className="" data-testid="Tools-list" >


Suggested change

<div className="" data-testid="Tools-list" >

<div className="" data-testid="ToolsList-main" >

akshatnema · 2023-07-13T17:55:34Z

config/tools.json

Remove the changes inside this file. This file is auto-generated.

How to remove changes from this file ?

cypress/test/tools/ToolsDashboard.cy.js

akshatnema · 2023-07-13T18:19:05Z

cypress/test/tools/Filters.cy.js

+    // Click on the category dropdown
+    cy.get('[data-testid="Filters-Category-dropdown"]').click();
+  });
+


You should also check for the case where you selected some filters from each filter type and clicked on Apply button, and then verifying the action using context variables.

akshatnema · 2023-07-13T18:21:54Z

cypress/test/tools/CategoryDropdown.cy.js

+
+  it('calls setopenCategory when a category is clicked', () => {
+    cy.get('@setopenCategory').as('setopenCategoryStub');
+    cy.get('[data-testid="CategoryDropdown-div"]').find('[data-testid="CategoryDropdown-link"]').first().click().then(() => {


Kindly look into this eslint warning in this line:

It is unsafe to chain further commands that rely on the subject after this command. It is best to split the chain, chaining again from cy. in a next command line.

akshatnema · 2023-07-13T18:22:52Z

cypress/test/tools/ToolsCard.cy.js

+  };
+
+  it('renders ToolsCard component', () => {
+    mount(<ToolsCard toolData={ toolData } />);


use beforeEach function to mount the component.

Applicable everywhere.

akshatnema · 2023-07-13T18:31:52Z

cypress/test/tools/FiltersDisplay.cy.js

+      <FiltersDisplay checkedValues={ checkedValues } setValues={ setValues } />
+    ).then(() => {
+      cy.get('.max-w-lg > div').should('have.length', checkedValues.length);
+      cy.get('.max-w-lg > div').first().find('[data-testid="Filters-Display-Button"]').click();


Filter1 is not getting deleted using this click event. Do correct it.

akshatnema · 2023-07-13T18:32:04Z

cypress/test/tools/FiltersDisplay.cy.js

+  });
+
+  it('should remove selected filter on filter click', () => {
+    let checkedValues = ['Filter1', 'Filter2', 'Filter3'];


Suggested change

let checkedValues = ['Filter1', 'Filter2', 'Filter3'];

let checkedValues = ['Filter-1', 'Filter-2', 'Filter-3'];

Co-authored-by: Akshat Nema <[email protected]>

…site into tools_testcases

akshatnema · 2023-08-12T06:02:12Z

cypress/test/tools/Filters.cy.js

+
+  // helper function to verify the applied filters
+  const verifyFilters = (filterType) => {
+    // check that applied filters contain the selected filters from the dropdown


Where are you verifying the filters using context variables?

I am not using context variables to verify .

akshatnema · 2023-08-12T06:19:41Z

CardData test file doesn't have correct UI shown up.

@reachaadrika Look into this issue as well.

reachaadrika · 2023-08-14T19:20:57Z

CardData test file doesn't have correct UI shown up.

@reachaadrika Look into this issue as well.

Checked and updated @akshatnema

…site into tools_testcases

akshatnema · 2023-08-25T17:57:09Z

/rtm

reachaadrika added 5 commits June 21, 2023 20:38

initial test

08177f3

additional changes in tests

e45a590

Merge branch 'master' of https://github.com/reachaadrika/website into…

574444a

… tools_testcases

tests for tools component

94d1fd4

Merge branch 'master' of https://github.com/reachaadrika/website into…

d9811e2

… tools_testcases

reachaadrika requested review from derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners July 2, 2023 18:08

additional fix

6cce2f5

reachaadrika and others added 6 commits July 8, 2023 16:25

Merge branch 'master' into tools_testcases

838ea37

Merge branch 'master' into tools_testcases

05c70d5

Merge branch 'master' of https://github.com/reachaadrika/website into…

de2918f

… tools_testcases

Merge branch 'master' into tools_testcases

8c463cd

Merge branch 'master' into tools_testcases

fc25e67

Merge branch 'master' into tools_testcases

e37ef56

akshatnema added the gsoc This label should be used for issues or discussions related to ideas for Google Summer of Code label Jul 11, 2023

reachaadrika and others added 3 commits July 12, 2023 00:33

Merge branch 'master' into tools_testcases

0d7e34d

Merge branch 'tools_testcases' of https://github.com/reachaadrika/web…

7af9240

…site into tools_testcases

fixed hover

feaf533

akshatnema requested changes Jul 13, 2023

View reviewed changes

Merge branch 'master' into tools_testcases

e09c145

reachaadrika requested a review from Mayaleeeee as a code owner July 13, 2023 19:24

reachaadrika and others added 4 commits July 14, 2023 22:55

Merge branch 'master' into tools_testcases

61d5ede

Update cypress/test/tools/FiltersDropdown.cy.js

474d6eb

Co-authored-by: Akshat Nema <[email protected]>

Update cypress/test/tools/FiltersDisplay.cy.js

486dcc9

Co-authored-by: Akshat Nema <[email protected]>

inital changes

f68535d

reachaadrika and others added 6 commits August 9, 2023 21:06

initial updates

1782d89

Merge branch 'master' into tools_testcases

c13ab04

Merge branch 'tools_testcases' of https://github.com/reachaadrika/web…

dafc607

…site into tools_testcases

move MockData to utils

43006a1

delete mockData

3ee4282

fix import for newsroom mockData

4bed778

akshatnema reviewed Aug 12, 2023

View reviewed changes

Merge branch 'master' into tools_testcases

de75f2b

reachaadrika and others added 16 commits August 17, 2023 00:33

Merge branch 'master' into tools_testcases

3a641a7

Merge branch 'master' into tools_testcases

ef9591f

Merge branch 'master' into tools_testcases

4bfba6d

Merge branch 'master' into tools_testcases

65b2f38

add checks using context variables

efba816

Merge branch 'tools_testcases' of https://github.com/reachaadrika/web…

ef7b9c6

…site into tools_testcases

Merge branch 'master' into tools_testcases

577ff58

add context tools

5ac04e2

Merge branch 'tools_testcases' of https://github.com/reachaadrika/web…

6f484a0

…site into tools_testcases

ToolsDashboard Integration changes

c7cc303

Merge branch 'master' into tools_testcases

4664401

toolDashboard fixes

f57221d

Merge branch 'tools_testcases' of https://github.com/reachaadrika/web…

38ccbfd

…site into tools_testcases

fix ToolsDashboard test case

524f3ba

Merge branch 'master' into tools_testcases

19640f1

Format Code changes

2059014

akshatnema approved these changes Aug 25, 2023

View reviewed changes

asyncapi-bot added the ready-to-merge label Aug 25, 2023

asyncapi-bot merged commit dca658a into asyncapi:master Aug 25, 2023
11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adding unit tests for tools component #1887

feat: adding unit tests for tools component #1887

reachaadrika commented Jul 2, 2023

netlify bot commented Jul 2, 2023 •

edited

Loading

github-actions bot commented Jul 2, 2023 •

edited

Loading

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 14, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 20, 2023

akshatnema Aug 12, 2023

reachaadrika Aug 18, 2023

akshatnema commented Aug 12, 2023

reachaadrika commented Aug 14, 2023

akshatnema commented Aug 25, 2023

	<div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150" data-testid="FiltersDisplay-div">
	<div className="max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150" data-testid="FiltersDisplay-main">

	<div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`} data-testid='Tags-div'>
	<div className={`text-center text-sm py-1 px-2 rounded-lg ${bgColor} border ${borderColor}`} data-testid='Tags-main'>

	<div className="" data-testid="Tools-list" >
	<div className="" data-testid="ToolsList-main" >

	let checkedValues = ['Filter1', 'Filter2', 'Filter3'];
	let checkedValues = ['Filter-1', 'Filter-2', 'Filter-3'];

feat: adding unit tests for tools component #1887

feat: adding unit tests for tools component #1887

Conversation

reachaadrika commented Jul 2, 2023

netlify bot commented Jul 2, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented Jul 2, 2023 • edited Loading

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

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

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

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

akshatnema commented Aug 12, 2023

reachaadrika commented Aug 14, 2023

akshatnema commented Aug 25, 2023

netlify bot commented Jul 2, 2023 •

edited

Loading

github-actions bot commented Jul 2, 2023 •

edited

Loading