Skip to content

Commit

Permalink
add correct button styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@pivilartisant
pivilartisant committed Nov 7, 2023
1 parent 94c7fa9 commit bfff347
Showing 1 changed file with 95 additions and 58 deletions.
153 changes: 95 additions & 58 deletions cypress/component/integration/Button.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ describe('Component | Integration | Button', function () {

describe('primary button without icons', () => {
beforeEach(() => {
cy.mount(<Button />);
cy.mount(
<div className="theme-dark">
<Button />
</div>,
);
});
it('should render primary button without icons', () => {
cy.get('[data-testid="button"]').should('exist');
Expand All @@ -24,7 +28,11 @@ describe('Component | Integration | Button', function () {

describe('primary button with preIcon', () => {
beforeEach(() => {
cy.mount(<Button preIcon={<FiArrowUpRight data-testid="preIcon" />} />);
cy.mount(
<div className="theme-dark">
<Button preIcon={<FiArrowUpRight data-testid="preIcon" />} />;
</div>,
);
});

it('should render primary button with preIcon', () => {
Expand All @@ -40,7 +48,11 @@ describe('Component | Integration | Button', function () {

describe('primary button with posIcon', () => {
beforeEach(() => {
cy.mount(<Button posIcon={<FiArrowUpRight data-testid="posIcon" />} />);
cy.mount(
<div className="theme-dark">
<Button posIcon={<FiArrowUpRight data-testid="posIcon" />} />
</div>,
);
});
it('should render primary button with posIcon', () => {
cy.get('[data-testid="button"]').should('exist');
Expand All @@ -56,19 +68,21 @@ describe('Component | Integration | Button', function () {
describe('primary button with both icons and with children', () => {
beforeEach(() => {
cy.mount(
<Button
preIcon={<FiArrowUpRight data-testid="preIcon" />}
posIcon={<FiArrowUpRight data-testid="posIcon" />}
>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button
preIcon={<FiArrowUpRight data-testid="preIcon" />}
posIcon={<FiArrowUpRight data-testid="posIcon" />}
>
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render primary button with both icons and children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('exist');
cy.get('[data-testid="posIcon"]').should('exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand All @@ -80,16 +94,18 @@ describe('Component | Integration | Button', function () {
describe('primary button with preIcon with children', () => {
beforeEach(() => {
cy.mount(
<Button preIcon={<FiArrowUpRight data-testid="preIcon" />}>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button preIcon={<FiArrowUpRight data-testid="preIcon" />}>
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render primary button with preIcon and with children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('exist');
cy.get('[data-testid="posIcon"]').should('not.exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand All @@ -101,16 +117,18 @@ describe('Component | Integration | Button', function () {
describe('primary button with posIcon with children', () => {
beforeEach(() => {
cy.mount(
<Button posIcon={<FiArrowUpRight data-testid="posIcon" />}>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button posIcon={<FiArrowUpRight data-testid="posIcon" />}>
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render primary button with posIcon and children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('not.exist');
cy.get('[data-testid="posIcon"]').should('exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand All @@ -122,16 +140,18 @@ describe('Component | Integration | Button', function () {
describe('primary button without icons and with children', () => {
beforeEach(() => {
cy.mount(
<Button>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button>
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render primary button without icons and children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('not.exist');
cy.get('[data-testid="posIcon"]').should('not.exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand All @@ -144,7 +164,11 @@ describe('Component | Integration | Button', function () {

describe('secondary button without icons', () => {
beforeEach(() => {
cy.mount(<Button variant="secondary" />);
cy.mount(
<div className="theme-dark">
<Button variant="secondary" />
</div>,
);
});
it('should render secondary button without icons', () => {
cy.get('[data-testid="button"]').should('exist');
Expand All @@ -160,10 +184,13 @@ describe('Component | Integration | Button', function () {
describe('secondary button with preIcon', () => {
beforeEach(() => {
cy.mount(
<Button
variant="secondary"
preIcon={<FiArrowUpRight data-testid="preIcon" />}
/>,
<div className="theme-dark">
<Button
variant="secondary"
preIcon={<FiArrowUpRight data-testid="preIcon" />}
/>
,
</div>,
);
});
it('should render secondary button with preIcon', () => {
Expand All @@ -180,10 +207,13 @@ describe('Component | Integration | Button', function () {
describe('secondary button with posIcon', () => {
beforeEach(() => {
cy.mount(
<Button
variant="secondary"
posIcon={<FiArrowUpRight data-testid="posIcon" />}
/>,
<div className="theme-dark">
<Button
variant="secondary"
posIcon={<FiArrowUpRight data-testid="posIcon" />}
/>
,
</div>,
);
});
it('should render secondary button with posIcon', () => {
Expand All @@ -200,20 +230,22 @@ describe('Component | Integration | Button', function () {
describe('secondary button with both icons and with children', () => {
beforeEach(() => {
cy.mount(
<Button
variant="secondary"
preIcon={<FiArrowUpRight data-testid="preIcon" />}
posIcon={<FiArrowUpRight data-testid="posIcon" />}
>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button
variant="secondary"
preIcon={<FiArrowUpRight data-testid="preIcon" />}
posIcon={<FiArrowUpRight data-testid="posIcon" />}
>
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render secondary button with both icons and children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('exist');
cy.get('[data-testid="posIcon"]').should('exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand All @@ -228,43 +260,46 @@ describe('Component | Integration | Button', function () {
describe('secondary button with preIcon with children', () => {
beforeEach(() => {
cy.mount(
<Button
variant="secondary"
preIcon={<FiArrowUpRight data-testid="preIcon" />}
>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button
variant="secondary"
preIcon={<FiArrowUpRight data-testid="preIcon" />}
>
<div data-testid="children">Children</div>
</Button>
</div>,
);
});
it('should render secondary button with preIcon and with children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('exist');
cy.get('[data-testid="posIcon"]').should('not.exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

it('should match snapshot', () => {
compareSnapshot(cy, 'primary-button-with-preIcon-with-children');
compareSnapshot(cy, 'secondary-button-with-preIcon-with-children');
});
});

describe('secondary button with posIcon with children', () => {
beforeEach(() => {
cy.mount(
<Button
variant="secondary"
posIcon={<FiArrowUpRight data-testid="posIcon" />}
>
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button
variant="secondary"
posIcon={<FiArrowUpRight data-testid="posIcon" />}
>
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render secondary button with posIcon and children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('not.exist');
cy.get('[data-testid="posIcon"]').should('exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand All @@ -276,16 +311,18 @@ describe('Component | Integration | Button', function () {
describe('secondary button without icons and with children', () => {
beforeEach(() => {
cy.mount(
<Button variant="secondary">
<div data-testid="children">Children</div>
</Button>,
<div className="theme-dark">
<Button variant="secondary">
<div data-testid="children">Children</div>
</Button>
,
</div>,
);
});
it('should render secondary button without icons and children', () => {
cy.get('[data-testid="button"]').should('exist');
cy.get('[data-testid="preIcon"]').should('not.exist');
cy.get('[data-testid="posIcon"]').should('not.exist');
cy.get('[data-testid="children"]').should('exist');
cy.get('[data-testid="children"]').should('contain', 'Children');
});

Expand Down

0 comments on commit bfff347

Please sign in to comment.