Skip to content

Commit

Permalink
feat: add unit tests for AlgoliaSearch,GeneratorInstallation and Open…
Browse files Browse the repository at this point in the history
…APIComparison component (#1916)

Co-authored-by: akshatnema <[email protected]>
  • Loading branch information
reachaadrika and akshatnema authored Jul 17, 2023
1 parent ac4dad3 commit 103a859
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 22 deletions.
44 changes: 22 additions & 22 deletions components/OpenAPIComparison.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,41 +15,41 @@ export default function OpenAPIComparison({ className = '' }) {
});

return (
<div className={`${className} flex flex-wrap text-center`}>
<div className={ `${ className } flex flex-wrap text-center` }>
<div className="flex-1 border border-black p-2 mr-1">
<h3 className="text-lg font-sans font-medium mb-4 ml-2">OpenAPI 3.0</h3>

<div>
<div className={(hoverState.Info ? `bg-blue-100 ` : ` `) + `border border-blue-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Info: false })}>
<div className={ (hoverState.Info ? `bg-blue-100 ` : ` `) + `border border-blue-300 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Info: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Info: false }) } data-testid="OpenAPI-sec-info">
Info
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Servers: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Servers: false })}>
<div className={ (hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2' } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Servers: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Servers: false }) } data-testid="OpenAPI-sec-servers">
Servers
</div>
<div className="flex-1 hover:bg-gray-200 border border-bg-gray-500 p-2 m-2">
Security
</div>
</div>
<div className={(hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Paths: false })}>
<div className={ (hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Paths: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Paths: false }) } data-testid="OpenAPI-paths">
Paths
<div className="flex flex-wrap flex-1">
<div className={(hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2`} onMouseEnter={() => { return setHoverState(prevState => ({ ...prevState, PathItem: true })) }} onMouseLeave={() => { return setHoverState({ ...hoverState, PathItem: false }) }}>
<div className={ (hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2` } onMouseEnter={ () => { return setHoverState(prevState => ({ ...prevState, PathItem: true })) } } onMouseLeave={ () => { return setHoverState({ ...hoverState, PathItem: false }) } } data-testid="OpenAPI-path-item">
Path Item

<div className="flex flex-col flex-wrap flex-1">
<div className={(hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Summary: true }))} onMouseLeave={() => { return setHoverState({ ...hoverState, Summary: false }) }}>
<div className={ (hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Summary: true })) } onMouseLeave={ () => { return setHoverState({ ...hoverState, Summary: false }) } } data-testid="OpenAPI-summary">
Summary and description
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Operation ? `bg-orange-100` : 'bg-white') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Operation: false })}>
<div className={ (hoverState.Operation ? `bg-orange-100` : 'bg-white') + ` flex-1 border border-orange-300 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Operation: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Operation: false }) } data-testid="OpenAPI-operation">
Operation (GET, PUT, POST, etc.)

<div className="flex flex-wrap flex-1">
<div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Message: false })}>
<div className={ (hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Message: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Message: false }) } data-testid="OpenAPI-request">
Request
</div>
<div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Message: false })}>
<div className={ (hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Message: true })) } onMouseLeave={ () => setHoverState({ ...hoverState, Message: false }) } data-testid="OpenAPI-responses">
Responses
</div>
</div>
Expand All @@ -60,14 +60,14 @@ export default function OpenAPIComparison({ className = '' }) {
</div>
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
<div className={ (hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Tags: true })) } onMouseLeave={ () => setHoverState({ Tags: false }) } data-testid="OpenAPI-tags">
<p>Tags</p>
</div>
<div className={(hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
<div className={ (hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, External: true })) } onMouseLeave={ () => setHoverState({ External: false }) } data-testid="OpenAPI-external">
<p>External Docs</p>
</div>
</div>
<div className={(hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Components: true }))} onMouseLeave={() => setHoverState({ Components: false })}>
<div className={ (hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Components: true })) } onMouseLeave={ () => setHoverState({ Components: false }) } data-testid="OpenAPI-components">
Components

<div className="grid grid-cols-2 grid-gap-2 flex-1 mt-1">
Expand Down Expand Up @@ -101,32 +101,32 @@ export default function OpenAPIComparison({ className = '' }) {
<h3 className="text-lg font-sans font-medium mb-4 ml-2">AsyncAPI 2.0</h3>

<div>
<div className={(hoverState.Info ? `bg-blue-100 ` : ' ') + 'border border-blue-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
<div className={ (hoverState.Info ? `bg-blue-100 ` : ' ') + 'border border-blue-300 p-2 m-2' } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Info: true })) } onMouseLeave={ () => setHoverState({ Info: false }) }>
Info
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Servers: true }))} onMouseLeave={() => setHoverState({ Servers: false })}>
<div className={ (hoverState.Servers ? `bg-green-100` : ' ') + ' flex-1 border border-green-300 p-2 m-2' } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Servers: true })) } onMouseLeave={ () => setHoverState({ Servers: false }) }>
Servers (hosts + security)
</div>
</div>
<div className={(hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
<div className={ (hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Paths: true })) } onMouseLeave={ () => setHoverState({ Paths: false }) }>
Channel

<div className="flex flex-wrap flex-1">
<div className={(hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
<div className={ (hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, PathItem: true })) } onMouseLeave={ () => setHoverState({ PathItem: false }) }>
Channel Item

<div className="flex flex-wrap flex-1">
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Operation ? `bg-orange-100` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
<div className={ (hoverState.Operation ? `bg-orange-100` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Operation: true })) } onMouseLeave={ () => setHoverState({ Operation: false }) }>
Operation (Publish and Subscribe)

<div className="flex flex-col flex-wrap flex-1">
<div className={(hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Summary: true }))} onMouseLeave={() => setHoverState({ Summary: false })} >
<div className={ (hoverState.Summary ? 'bg-blue-200' : 'bg-white') + ` border border-blue-500 p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Summary: true })) } onMouseLeave={ () => setHoverState({ Summary: false }) } >
Summary, description, tags, etc.
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
<div className={ (hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2` } onMouseEnter={ () => setHoverState(prevState => ({ ...prevState, Message: true })) } onMouseLeave={ () => setHoverState({ Message: false }) }>
Message

<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Expand All @@ -150,14 +150,14 @@ export default function OpenAPIComparison({ className = '' }) {
</div>
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
<div className={ (hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Tags: true })) } onMouseLeave={ () => setHoverState({ Tags: false }) }>
<p>Tags</p>
</div>
<div className={(hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
<div className={ (hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, External: true })) } onMouseLeave={ () => setHoverState({ External: false }) }>
<p>External Docs</p>
</div>
</div>
<div className={(hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Components: true }))} onMouseLeave={() => setHoverState({ Components: false })}>
<div className={ (hoverState.Components ? `bg-gray-100` : ' ') + ` flex-1 border border-black p-2 m-2` } onMouseOver={ () => setHoverState(prevState => ({ ...prevState, Components: true })) } onMouseLeave={ () => setHoverState({ Components: false }) }>
Components

<div className="grid grid-cols-2 grid-gap-2 flex-wrap flex-1 mt-2">
Expand Down
27 changes: 27 additions & 0 deletions cypress/test/AlgoliaSearch.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { mount } from 'cypress/react'
import AlgoliaSearch from '../../components/AlgoliaSearch'
import { SearchButton } from '../../components/AlgoliaSearch';
import { DocSearchModal } from '@docsearch/react'

describe('AlgoliaSearch component', () => {
it('renders without errors', () => {
mount(
<AlgoliaSearch>
<SearchButton>Search</SearchButton>
</AlgoliaSearch>
)
})

it('performs search for a specific page', () => {
mount(
<AlgoliaSearch>
<SearchButton>Open Search</SearchButton>
</AlgoliaSearch>
);
cy.get('button').click(); // Open the search modal
cy.get('input[placeholder="Search resources"]').type('welcome')
cy.should('have.value', 'welcome')
// Check if the docsearch-list element contains the text 'Welcome'
cy.get('#docsearch-list').contains('Welcome')
});
});
8 changes: 8 additions & 0 deletions cypress/test/GeneratorInstallation.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { mount } from 'cypress/react';
import GeneratorInstallation from '../../components/GeneratorInstallation';

describe('GeneratorInstallation', () => {
it('renders without errors', () => {
mount(<GeneratorInstallation />);
});
});
57 changes: 57 additions & 0 deletions cypress/test/OpenAPIComparison.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { mount } from '@cypress/react'
import OpenAPIComparison from '../../components/OpenAPIComparison'

describe('OpenAPIComparison', () => {
it('renders without errors', () => {
mount(<OpenAPIComparison />);

});

it('changes background color on hover', () => {
mount(<OpenAPIComparison />);

// Hover over the "Info" element
cy.contains('Info').trigger('mouseover');
cy.get('[data-testid="OpenAPI-sec-info"]').should('exist');

// Hover over the "Servers" element
cy.contains('Servers').trigger('mouseover');
cy.get('[data-testid="OpenAPI-sec-servers"]').should('exist');

// Hover over the "Paths" element
cy.contains('Paths').trigger('mouseover');
cy.get('[data-testid="OpenAPI-paths"]').should('exist');

// Hover over the "Path Item" element
cy.contains('Path Item').trigger('mouseover');
cy.get('[data-testid="OpenAPI-path-item"]').should('exist');

// Hover over the "Summary and description" element
cy.contains('Summary and description').trigger('mouseover');
cy.get('[data-testid="OpenAPI-summary"]').should('exist');

// Hover over the "Operation (GET, PUT, POST, etc.)" element
cy.contains('Operation (GET, PUT, POST, etc.)').trigger('mouseover');
cy.get('[data-testid="OpenAPI-operation"]').should('exist');

// Hover over the "Request" element
cy.contains('Request').trigger('mouseover');
cy.get('[data-testid="OpenAPI-request"]').should('exist');

// Hover over the "Responses" element
cy.contains('Responses').trigger('mouseover');
cy.get('[data-testid="OpenAPI-responses"]').should('exist');

// Hover over the "Tags" element
cy.contains('Tags').trigger('mouseover');
cy.get('[data-testid="OpenAPI-tags"]').should('exist');

// Hover over the "External Docs" element
cy.contains('External Docs').trigger('mouseover');
cy.get('[data-testid="OpenAPI-external"]').should('exist');

// Hover over the "Components" element
cy.contains('Components').trigger('mouseover');
cy.get('[data-testid="OpenAPI-components"]').should('exist');
});
});

0 comments on commit 103a859

Please sign in to comment.