Skip to content

Commit

Permalink
Clean Up
Browse files Browse the repository at this point in the history
  • Loading branch information
@pivilartisant
pivilartisant committed Oct 23, 2023
1 parent 02198cf commit b93559c
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 211 deletions.
Binary file modified cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown-flow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-dropdown.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-md-dropdown.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ss-visual-screenshots/baseline/Dropdown.cy.tsx-default-option-dropdown-flow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cypress-visual-screenshots/baseline/Dropdown.cy.tsx-default-xs-dropdown.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ess-visual-screenshots/baseline/Dropdown.cy.tsx-fire-function-dropdown-flow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
296 changes: 85 additions & 211 deletions cypress/component/integration/Dropdown.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,90 @@
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(
beforeEach(() => {
cy.mount(
<div className="theme-dark">
<Dropdown
options={[
{
icon: (
<MassaToken size={32} className="bg-c-default rounded-full" />
<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 size={32} />,
icon: <MassaLogo data-testid="dropdown-option-2" size={32} />,
item: 'account 2 name with a biiiiig content',
onClick: () => console.log('option 2'),
},
{ 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 data-testid="dropdown-option-3" size={32} />,
item: 'account 3 name',
},
{
icon: <MassaLogo size={32} />,
item: 'account 2 name with a biiiiig content',
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',
onClick: () => console.log('option 5'),
},
{
icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
item: 'account 6 name',
},
{ 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' },
]}
/>,
);
/>
</div>,
);
});
describe('default dropdown', () => {
it('should render', () => {
cy.get('[data-testid="dropdown"]').should('exist');
});

it('should match snapshot', () => {
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' },
]}
/>,
<div className="theme-dark">
<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' },
]}
/>
</div>,
);
});
it('should render', () => {
Expand All @@ -97,26 +99,32 @@ describe('Component | Integration | Dropdown', function () {
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' },
]}
/>,
<div className="theme-dark">
<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' },
]}
/>
,
</div>,
);
});

Expand All @@ -130,49 +138,10 @@ describe('Component | Integration | Dropdown', function () {
});

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');
it('should open and close when clicked', () => {

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

for (let i = 1; i <= 6; i++) {
Expand Down Expand Up @@ -211,46 +180,6 @@ describe('Component | Integration | Dropdown', function () {
});

describe('select option 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');
it('should open and close when clicked', () => {
Expand All @@ -269,11 +198,6 @@ describe('Component | Integration | Dropdown', function () {
});
// open state
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');
}

cy.get(`[data-testid="dropdown-option-4"]`).click();

// close state
Expand Down Expand Up @@ -302,56 +226,10 @@ describe('Component | Integration | Dropdown', function () {
});

describe('fire function 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',
onClick: () => console.log('option 2'),
},
{
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',
onClick: () => console.log('option 5'),
},
{
icon: <MassaLogo data-testid="dropdown-option-6" size={32} />,
item: 'account 6 name',
},
]}
/>,
);
});

it('should render', () => {
cy.get('[data-testid="dropdown"]').should('exist');
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(
Expand Down Expand Up @@ -379,10 +257,6 @@ describe('Component | Integration | Dropdown', function () {
// open state
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');
}

cy.get(`[data-testid="dropdown-option-5"]`).click();

cy.get('@consoleLog').should('be.calledWith', 'option 5');
Expand Down

0 comments on commit b93559c

Please sign in to comment.