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 6, 2023
1 parent 94c7fa9 commit c165301
Showing 1 changed file with 95 additions and 50 deletions.
145 changes: 95 additions & 50 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,12 +68,15 @@ 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', () => {
Expand All @@ -80,9 +95,12 @@ 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', () => {
Expand All @@ -101,9 +119,12 @@ 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', () => {
Expand All @@ -122,9 +143,12 @@ 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', () => {
Expand All @@ -144,7 +168,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 +188,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 +211,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,13 +234,16 @@ 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', () => {
Expand All @@ -228,12 +265,14 @@ 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', () => {
Expand All @@ -245,19 +284,22 @@ describe('Component | Integration | Button', function () {
});

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', () => {
Expand All @@ -276,9 +318,12 @@ 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', () => {
Expand Down

0 comments on commit c165301

Please sign in to comment.