-
-
Notifications
You must be signed in to change notification settings - Fork 632
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adding unit tests for dashboard folder (#1735)
- Loading branch information
1 parent
7642c6a
commit df1b59d
Showing
14 changed files
with
269 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import { mount } from '@cypress/react'; | ||
| import Table from '../../../components/dashboard/table/Table'; | ||
| import GoodFirstIssues from '../../../components/dashboard/GoodFirstIssues'; | ||
|
|
||
| describe('GoodFirstIssues Component', () => { | ||
| const issues = [ | ||
| { id: 1, repo: 'Repository 1', area: 'Area 1' }, | ||
| { id: 2, repo: 'Repository 2', area: 'Area 2' }, | ||
| { id: 3, repo: 'Repository 3', area: 'Area 3' }, | ||
|
|
||
| ]; | ||
|
|
||
| it('renders the GoodFirstIssues component', () => { | ||
| mount(<GoodFirstIssues issues={issues} />); | ||
| // Assert that the component is rendered successfully | ||
| cy.get('[data-testid="GoodFirstIssues-main-div"]').should('exist'); | ||
| cy.get(Table).should('exist'); | ||
| }); | ||
|
|
||
| it('filters issues based on selected repository', () => { | ||
| mount(<GoodFirstIssues issues={issues} />); | ||
| // Select a specific repository , Repo 1 for now | ||
| const selectedRepo = 'Repository 1'; | ||
|
|
||
| mount(<GoodFirstIssues issues={issues} />); | ||
|
|
||
| // Select the mentioned repository | ||
| cy.get('select[name="selectedRepo"]').select(selectedRepo); | ||
|
|
||
| // check that the selected repository is displayed | ||
| cy.contains(selectedRepo).should('exist'); | ||
|
|
||
| //check if Filter component renders | ||
| cy.get('[data-testid="GoodFirstIssues-filter-component"]').should('exist'); | ||
|
|
||
| // check no other repo is displayed | ||
| cy.get('select[name="selectedRepo"] option').should('not.contain', 'Repository 2').and('not.contain', 'Repository 3') | ||
|
|
||
|
|
||
| }); | ||
|
|
||
| it('filters issues based on selected area', () => { | ||
| mount(<GoodFirstIssues issues={issues} />); | ||
| }); | ||
|
|
||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'cypress/react'; | ||
| import GoodFirstIssuesTip from '../../../components/dashboard/GoodFirstIssuesTip'; | ||
|
|
||
| describe('GoodFirstIssuesTip', () => { | ||
| beforeEach(() => { | ||
| mount(<GoodFirstIssuesTip />); | ||
| }); | ||
|
|
||
| it('toggles the tip when hovering over the icon', () => { | ||
| cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').trigger('mouseenter'); | ||
| cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').trigger('mouseleave'); | ||
|
|
||
| }); | ||
|
|
||
| it('renders the tip content with the correct text', () => { | ||
| cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').trigger('mouseenter'); | ||
| //checking for the available class here | ||
| cy.get('.bg-white').should('have.css', 'visibility', 'visible'); | ||
|
|
||
| cy.contains('Is this your first contribution?').should('exist'); | ||
| cy.contains('The issues in this column are perfect for you!').should( | ||
| 'exist' | ||
| ); | ||
| cy.contains( | ||
| 'These issues are of low-complexity and should be a quick commit.' | ||
| ).should('exist'); | ||
| cy.contains('Thanks for your help, and welcome!').should('exist'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'cypress/react'; | ||
| import Header from '../../../components/dashboard/Header'; | ||
| import Button from '../../../components/buttons/Button'; | ||
| import GithubButton from '../../../components/buttons/GithubButton'; | ||
| import SlackButton from '../../../components/buttons/SlackButton'; | ||
|
|
||
| describe('Header', () => { | ||
| beforeEach(() => { | ||
| mount( | ||
| <Header | ||
| ButtonComponent={Button} | ||
| GithubButtonComponent={() => <GithubButton size="small" />} | ||
| SlackButtonComponent={SlackButton} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| it('renders the header correctly', () => { | ||
| cy.get('[data-testid="Header-heading"]').should('contain', 'Dashboard'); | ||
| cy.get('[data-testid="Header-paragraph"]').should( | ||
| 'contain', | ||
| 'Visualize our progress. Get involved.' | ||
| ); | ||
| cy.get('[data-testid="Github-button"]').should('exist'); | ||
| cy.get('[data-testid="Slack-button"]').should('exist'); | ||
| cy.contains('Contribution Guide') | ||
| .should('have.attr', 'href', 'https://github.com/asyncapi?type=source#-contribute-to-asyncapi') | ||
| .should('have.attr', 'target', '_blank'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'cypress/react' | ||
| import Filters from '../../../../components/dashboard/table/Filters'; | ||
|
|
||
|
|
||
| describe('Filters', () => { | ||
| const sampleIssues = [ | ||
| { area: 'Area 1', repo: 'Repo 1' }, | ||
| { area: 'Area 2', repo: 'Repo 1' }, | ||
| { area: 'Area 1', repo: 'Repo 2' }, | ||
| { area: 'Area 2', repo: 'Repo 2' }, | ||
| ]; | ||
|
|
||
| it('displays the filter menu correctly', () => { | ||
|
|
||
| mount( | ||
| <Filters | ||
| className="test-class" | ||
| issues={sampleIssues} | ||
| allIssues={sampleIssues} | ||
| selectedArea="Area 1" | ||
| selectedRepo="Repo 1" | ||
| /> | ||
| ); | ||
|
|
||
| // Click on the filter icon to open the menu | ||
| cy.get('[data-testid="Filters-img-container"]').click(); | ||
|
|
||
| // Verify that the menu is displayed | ||
| cy.get('div[data-testid="Filter-menu"]').should('be.visible'); | ||
|
|
||
| // Verify the heading "Filter Issues" | ||
| cy.contains('h4', 'Filter Issues').should('be.visible'); | ||
|
|
||
| // Verify the filter options | ||
| cy.contains('BY REPOSITORY').should('be.visible'); | ||
| cy.contains('BY AREA').should('be.visible'); | ||
|
|
||
| // Verify that the menu is closed | ||
| cy.get('div[data-testid="Filter-menu"]').should('exist'); | ||
|
|
||
| }); | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'cypress/react'; | ||
| import Row from '../../../../components/dashboard/table/Row'; | ||
|
|
||
| describe('Row component', () => { | ||
| const item = { | ||
| resourcePath: 'asyncapi', | ||
| isPR: false, | ||
| repo: 'asyncapi', | ||
| title: 'Example Issue', | ||
| labels: [ | ||
| { name: 'bug' }, | ||
| { name: 'feature' }, | ||
| ], | ||
| }; | ||
|
|
||
| it('renders the component correctly', () => { | ||
| mount(<Row item={item} />); | ||
|
|
||
| // Assert that the component is rendered | ||
| cy.get('li').should('exist'); | ||
| cy.get('.p-4').should('exist'); | ||
| cy.get('a').should('have.attr', 'href', 'https://github.com/asyncapi'); | ||
|
|
||
| // Assert the content within the component | ||
|
|
||
| cy.get('.text-base').should('have.text', 'Example Issue'); | ||
| cy.get('.flex-wrap > :nth-child(1)').should('have.text', 'bug'); | ||
| cy.get('.flex-wrap > :nth-child(2)').should('have.text', 'feature'); | ||
| }); | ||
|
|
||
| it('opens the link in a new tab', () => { | ||
| mount(<Row item={item} />); | ||
|
|
||
| // Assert that the link opens in a new tab | ||
| cy.get('[data-testid="Row-github-redirect"]').should('have.attr', 'target', '_blank'); | ||
| cy.get('[data-testid="Row-github-redirect"]').should('have.attr', 'rel', 'noreferrer'); | ||
| }); | ||
|
|
||
| it('renders the correct icon based on isPR prop', () => { | ||
| item.isPR = true; | ||
| mount(<Row item={item} />); | ||
|
|
||
| // Assert that the correct icon is rendered for a PR | ||
| cy.get('[data-testid="Row-img-issue"]').should('have.attr', 'src', '/img/illustrations/icons/issue.svg'); | ||
|
|
||
| item.isPR = false; | ||
| mount(<Row item={item} />); | ||
|
|
||
| // Assert that the correct icon is rendered for an issue | ||
| cy.get('[data-testid="Row-img-issue"]').should('have.attr', 'src', '/img/illustrations/icons/issue.svg'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { mount } from 'cypress/react'; | ||
| import Table from '../../../../components/dashboard/table/Table'; | ||
|
|
||
| describe('Table Component', () => { | ||
| const data = [ | ||
| { id: 1, title: 'Item 1' }, | ||
| { id: 2, title: 'Item 2' }, | ||
| { id: 3, title: 'Item 3' }, | ||
| ]; | ||
|
|
||
| it('renders the component', () => { | ||
| mount( | ||
| <Table | ||
| title="My Table" | ||
| data={data} | ||
| className="test-class" | ||
| listClassName="test-list-class" | ||
| /> | ||
| ); | ||
|
|
||
| cy.contains('h2', 'My Table').should('be.visible'); | ||
| }); | ||
|
|
||
| it('renders the correct item names', () => { | ||
| mount( | ||
| <Table | ||
| title="My Table" | ||
| data={data} | ||
| className="test-class" | ||
| listClassName="test-list-class" | ||
| /> | ||
| ); | ||
|
|
||
| cy.get('.test-list-class').should('be.visible'); | ||
|
|
||
| cy.get('.test-list-class [data-testid="Row-spanText"]').each((row, index) => { | ||
| cy.wrap(row).should('contain', data[index].title); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| }) |