From 7541555bbcf70dbae58aae3b4e5df001d3c134e3 Mon Sep 17 00:00:00 2001 From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com> Date: Sat, 8 Jul 2023 16:05:01 +0530 Subject: [PATCH] feat: adding unit tests for roadmap component (#1791) --- components/roadmap/RoadmapColumn.js | 6 +-- components/roadmap/RoadmapItem.js | 4 +- components/roadmap/RoadmapList.js | 2 +- cypress/test/Roadmap/RoadmapColumn.cy.js | 62 ++++++++++++++++++++++++ cypress/test/Roadmap/RoadmapItem.cy.js | 53 ++++++++++++++++++++ cypress/test/Roadmap/RoadmapList.cy.js | 29 +++++++++++ 6 files changed, 150 insertions(+), 6 deletions(-) create mode 100644 cypress/test/Roadmap/RoadmapColumn.cy.js create mode 100644 cypress/test/Roadmap/RoadmapItem.cy.js create mode 100644 cypress/test/Roadmap/RoadmapList.cy.js diff --git a/components/roadmap/RoadmapColumn.js b/components/roadmap/RoadmapColumn.js index 9c040f5240aa..f443cef09616 100644 --- a/components/roadmap/RoadmapColumn.js +++ b/components/roadmap/RoadmapColumn.js @@ -7,12 +7,12 @@ export default function RoadmapColumn({ description, colorClass, items = [], - childrenCollapsed = true, + childrenCollapsed = false, }) { return (
-
- {title} +
+ {title} {description}
+
  • { showConnector && (
    @@ -82,7 +82,7 @@ function Pill ({
    {isCollapsible && ( - )} diff --git a/components/roadmap/RoadmapList.js b/components/roadmap/RoadmapList.js index 38367d2eee31..95317fb7ffec 100644 --- a/components/roadmap/RoadmapList.js +++ b/components/roadmap/RoadmapList.js @@ -10,7 +10,7 @@ export default function RoadmapList({ }) { return ( items && items.length && ( -
      +
        { !collapsed && ( items.map((item, index) => ( { + it('renders the RoadmapColumn component with title and description', () => { + const title = 'Test RoadmapColumn'; + const description = 'This is a test RoadmapColumn'; + const colorClass = 'blue'; + const items = []; + const childrenCollapsed = false; + mount( + + ); + cy.get('[data-testid="RoadmapColumn-heading"]').contains('h3',title).should('exist'); + cy.get('[data-testid="RoadmapColumn-heading"]').contains('p',description).should('exist'); + }); + + it('renders the RoadmapList component within RoadmapColumn', () => { + const items = [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + ]; + mount( + + ); + //renders RoadmapList component + cy.get(RoadmapList).should('exist'); + + }); + + it('renders the correct number of items in RoadmapList' , () => { + const items = [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + ]; + mount( + + ); + cy.get('[data-testid="RoadmapItem-list"]').should('have.length', items.length); + }) + +}); + diff --git a/cypress/test/Roadmap/RoadmapItem.cy.js b/cypress/test/Roadmap/RoadmapItem.cy.js new file mode 100644 index 000000000000..c589cb6c17cc --- /dev/null +++ b/cypress/test/Roadmap/RoadmapItem.cy.js @@ -0,0 +1,53 @@ +import { mount } from '@cypress/react'; +import RoadmapItem from '../../../components/roadmap/RoadmapItem'; + +describe('RoadmapItem', () => { + const item = { + title: 'Sample Item', + solutions: [{ title: 'Solution 1' }, { title: 'Solution 2' }], + implementations: [ + { title: 'Implementation 1' }, + { title: 'Implementation 2' }, + ], + description: 'Lorem ipsum dolor sit amet.', + }; + + it('renders the collapsed RoadmapItem correctly', () => { + mount(); + + // Assert that the collapsed RoadmapItem is rendered correctly + cy.get('[data-testid="RoadmapItem-list"]').should( + 'have.class', + 'border-l-2 border-dashed border-gray-300' + ); + cy.contains('Sample Item').should('be.visible'); + }); + + it('expands the RoadmapItem when clicked', () => { + mount(); + + + cy.get('[data-testid="RoadmapItem-button"]').click(); + + // Assert that the expanded RoadmapItem is rendered correctly + cy.get('[data-testid="RoadmapItem-list"]').should( + 'have.class', + 'border-l-2 border-dashed border-gray-300' + ); + cy.contains('Sample Item').should('be.visible'); + cy.contains('Solution 1').should('be.visible'); + cy.contains('Solution 2').should('be.visible'); + cy.contains('Implementation 1').should('be.visible'); + cy.contains('Implementation 2').should('be.visible'); + }); + it('opens the description modal when clicked', () => { + mount(); + cy.contains('a', item.title).click(); + + // Assert that the description modal is opened + cy.contains(item.title).should('be.visible'); + cy.contains(item.description).should('be.visible'); + cy.contains(item.title).should('be.visible'); + cy.contains(item.description).should('be.visible'); + }); +}); diff --git a/cypress/test/Roadmap/RoadmapList.cy.js b/cypress/test/Roadmap/RoadmapList.cy.js new file mode 100644 index 000000000000..010f70cbda86 --- /dev/null +++ b/cypress/test/Roadmap/RoadmapList.cy.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { mount } from 'cypress/react'; +import RoadmapList from '../../../components/roadmap/RoadmapList'; +describe('RoadmapList component', () => { + const items = [ + { title: 'Item 1', description: 'Description 1' }, + { title: 'Item 2', description: 'Description 2' }, + { title: 'Item 3', description: 'Description 3' }, + ]; + it('renders the component with items', () => { + mount(); + //check if the length of list matches + cy.get('[data-testid="RoadmapItem-list"]').should('have.length', items.length); + cy.get('[data-testid="RoadmapList-list"]').should('exist'); + cy.get('[data-testid="RoadmapList-list"]').children().should('have.length', items.length); + }); + + it('renders the component with collapsed items', () => { + mount(); + // check if collapsed items are 0 + cy.get('[data-testid="RoadmapItem-list"]').should('have.length',0); + + //component is rendered + cy.get('[data-testid="RoadmapList-list"]').should('exist'); + + //items are not rendered when collapsed + cy.get('[data-testid="RoadmapList-list"]').children().should('not.exist'); + }); +});