Merge branch 'sponsors_tests' of https://github.com/reachaadrika/website

 into sponsors_tests

components/roadmap/RoadmapColumn.js

@@ -7,12 +7,12 @@ export default function RoadmapColumn({
   description,
   colorClass,
   items = [],
-  childrenCollapsed = true,
+  childrenCollapsed = false,
 }) {
   return (
     <div className="mt-8 lg:mt-4">
-      <div className="p-4 text-center">
-        <Heading level="h3" typeStyle="heading-sm-semibold">{title}</Heading>
+      <div className="p-4 text-center" data-testid="RoadmapColumn-heading">
+        <Heading level="h3" typeStyle="heading-sm-semibold" >{title}</Heading>
         <Paragraph typeStyle="body-md" className="mt-2">{description}</Paragraph>
       </div>
       <RoadmapList

components/roadmap/RoadmapItem.js

@@ -15,7 +15,7 @@ export default function RoadmapItem({
   const connectorClasses = 'border-l-2 border-dashed border-gray-300'
   const classNames = `pt-2 ${showConnector && connectorClasses}`
   return (
-    <li className={classNames}>
+    <li className={classNames} data-testid="RoadmapItem-list">
       <div className="flex">
         { showConnector && (
           <div className="flex flex-col justify-center">
@@ -82,7 +82,7 @@ function Pill ({
               </a>
             </div>
             {isCollapsible && (
-              <button className="mr-2" onClick={onClickCollapse}>
+              <button className="mr-2" onClick={onClickCollapse} data-testid="RoadmapItem-button">
                 <IconArrowRight className={`h-4 transform ${isCollapsed ? 'rotate-90' : '-rotate-90'}`} />
               </button>
             )}

components/roadmap/RoadmapList.js

@@ -10,7 +10,7 @@ export default function RoadmapList({
 }) {
   return (
     items && items.length && (
-      <ul className={className}>
+      <ul className={className} data-testid="RoadmapList-list">
         { !collapsed && (
           items.map((item, index) => (
             <RoadmapItem

cypress/test/Roadmap/RoadmapColumn.cy.js

@@ -0,0 +1,62 @@
+import { mount } from '@cypress/react';
+import RoadmapColumn from '../../../components/roadmap/RoadmapColumn';
+import RoadmapList from '../../../components/roadmap/RoadmapList';
+
+describe('RoadmapColumn Component', () => {
+  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(
+      <RoadmapColumn
+        title={title}
+        description={description}
+        colorClass={colorClass}
+        items={items}
+        childrenCollapsed={childrenCollapsed}
+      />
+    );
+    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(
+      <RoadmapColumn
+        title="Dummy Test"
+        description="This is a test for RoadmapColumn"
+        colorClass="red"
+        items={items}
+        childrenCollapsed={false}
+      />
+    );
+    //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(
+      <RoadmapColumn
+        title="Test RoadmapColumn"
+        description="This is a test RoadmapColumn"
+        colorClass="red"
+        items={items}
+        childrenCollapsed={false}
+      />
+    );
+    cy.get('[data-testid="RoadmapItem-list"]').should('have.length', items.length);
+  })
+
+});
+

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(<RoadmapItem item={item} colorClass="bg-blue-400" />);
+
+    // 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(<RoadmapItem item={item} colorClass="bg-blue-400" />);
+
+
+    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(<RoadmapItem item={item} colorClass="bg-blue-400" />);
+    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');
+  });
+});

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(<RoadmapList items={items} />);
+    //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(<RoadmapList items={items} collapsed={true} />);
+    // 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');
+  });
+});