Skip to content

Commit

Permalink
Add dropdown test
Browse files Browse the repository at this point in the history
  • Loading branch information
pivilartisant committed Oct 16, 2023
1 parent 5ffb1d9 commit 7120e06
Showing 5 changed files with 216 additions and 1 deletion.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
215 changes: 215 additions & 0 deletions cypress/component/integration/Dropdown.cy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
import '../../../src/global.css';
import React from 'react';
import { Dropdown, MassaLogo, MassaToken } from '../../../src/components';
import { compareSnapshot } from '../../compareSnapshot';

describe('Component | Integration | Dropdown', function () {
describe('Dropdown', () => {
describe('default dropdown', () => {
beforeEach(() => {
cy.mount(
<Dropdown
options={[
{
icon: (
<MassaToken size={32} className="bg-c-default rounded-full" />
),
item: 'account 1 name',
onClick: () => console.log('option 1'),
},
{
icon: <MassaLogo size={32} />,
item: 'account 2 name with a biiiiig content',
},
{ icon: <MassaLogo size={32} />, item: 'account 3 name' },
{ icon: <MassaLogo size={32} />, item: 'account 4 name' },
{ icon: <MassaLogo size={32} />, item: 'account 5 name' },
{ icon: <MassaLogo size={32} />, item: 'account 6 name' },
]}
/>,
);
});
it('should render', () => {
cy.get('[data-testid="dropdown"]').should('exist');
});

it('should match snapshot', () => {
cy.mount(
<Dropdown
options={[
{
icon: (
<MassaToken size={32} className="bg-c-default rounded-full" />
),
item: 'account 1 name',
onClick: () => console.log('option 1'),
},
{
icon: <MassaLogo size={32} />,
item: 'account 2 name with a biiiiig content',
},
{ icon: <MassaLogo size={32} />, item: 'account 3 name' },
{ icon: <MassaLogo size={32} />, item: 'account 4 name' },
{ icon: <MassaLogo size={32} />, item: 'account 5 name' },
{ icon: <MassaLogo size={32} />, item: 'account 6 name' },
]}
/>,
);

compareSnapshot(cy, 'default-dropdown');
});
});

describe('default xs dropdown', () => {
beforeEach(() => {
cy.mount(
<Dropdown
size={'xs'}
options={[
{
icon: (
<MassaToken size={32} className="bg-c-default rounded-full" />
),
item: 'account 1 name',
onClick: () => console.log('option 1'),
},
{
icon: <MassaLogo size={32} />,
item: 'account 2 name with a biiiiig content',
},
{ icon: <MassaLogo size={32} />, item: 'account 3 name' },
{ icon: <MassaLogo size={32} />, item: 'account 4 name' },
{ icon: <MassaLogo size={32} />, item: 'account 5 name' },
{ icon: <MassaLogo size={32} />, item: 'account 6 name' },
]}
/>,
);
});
it('should render', () => {
cy.get('[data-testid="dropdown"]').should('exist');
});

it('should match snapshot', () => {
compareSnapshot(cy, 'default-xs-dropdown');
});
});

describe('default md dropdown', () => {
beforeEach(() => {
cy.mount(
<Dropdown
size={'md'}
options={[
{
icon: (
<MassaToken size={32} className="bg-c-default rounded-full" />
),
item: 'account 1 name',
onClick: () => console.log('option 1'),
},
{
icon: <MassaLogo size={32} />,
item: 'account 2 name with a biiiiig content',
},
{ icon: <MassaLogo size={32} />, item: 'account 3 name' },
{ icon: <MassaLogo size={32} />, item: 'account 4 name' },
{ icon: <MassaLogo size={32} />, item: 'account 5 name' },
{ icon: <MassaLogo size={32} />, item: 'account 6 name' },
]}
/>,
);
});

it('should render', () => {
cy.get('[data-testid="dropdown"]').should('exist');
});

it('should match snapshot', () => {
compareSnapshot(cy, 'default-md-dropdown');
});
});

describe('default dropdown flow', () => {
beforeEach(() => {
cy.mount(
<Dropdown
options={[
{
icon: (
<MassaToken
data-testid="dropdown-option-1"
size={32}
className="bg-c-default rounded-full"
/>
),
item: 'account 1 name',
onClick: () => console.log('option 1'),
},
{
icon: <MassaLogo data-testid="dropdown-option-2" size={32} />,
item: 'account 2 name with a biiiiig content',
},
{
icon: <MassaLogo data-testid="dropdown-option-3" size={32} />,
item: 'account 3 name',
},
{
icon: <MassaLogo data-testid="dropdown-option-4" size={32} />,
item: 'account 4 name',
},
{
icon: <MassaLogo data-testid="dropdown-option-5" size={32} />,
item: 'account 5 name',
},
{
icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
item: 'account 6 name',
},
]}
/>,
);
});

it('should render', () => {
cy.get('[data-testid="dropdown"]').should('exist');
});

// init state
it('should open and close when clicked', () => {
cy.get('[data-testid="dropdown"]').should('exist');

for (let i = 1; i <= 6; i++) {
cy.get(`[data-testid="dropdown-option-${i}"]`).should('exist');
}

cy.get('[data-testid="dropdown-option-1"]').should('be.visible');
for (let i = 2; i <= 6; i++) {
cy.get(`[data-testid="dropdown-option-${i}"]`).should(
'not.be.visible',
);
}

// open
cy.get('[data-testid="dropdown-button"]').should('exist').click();

for (let i = 1; i <= 6; i++) {
cy.get(`[data-testid="dropdown-option-${i}"]`).should('be.visible');
}

// close
cy.get('[data-testid="dropdown-button"]').should('exist').click();

cy.get('[data-testid="dropdown-option-1"]').should('be.visible');
for (let i = 2; i <= 6; i++) {
cy.get(`[data-testid="dropdown-option-${i}"]`).should(
'not.be.visible',
);
}
});

it('should match snapshot', () => {
compareSnapshot(cy, 'default-dropdown');
});
});
});
});
2 changes: 1 addition & 1 deletion src/components/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
@@ -94,7 +94,7 @@ export function Dropdown(props: IDropdownProps) {
)}

<button
data-testid={`dropdown-button`}
data-testid="dropdown-button"
onClick={toggleDropdown}
type="button"
className={`flex default-button border-secondary justify-between

0 comments on commit 7120e06

Please sign in to comment.