From bfff347601f4deffb35cf6851af0af3242829480 Mon Sep 17 00:00:00 2001
From: pivi <paul.lartisant@icloud.com>
Date: Mon, 23 Oct 2023 09:40:51 +0200
Subject: [PATCH] add correct button styling

---
 cypress/component/integration/Button.cy.tsx | 153 ++++++++++++--------
 1 file changed, 95 insertions(+), 58 deletions(-)

diff --git a/cypress/component/integration/Button.cy.tsx b/cypress/component/integration/Button.cy.tsx
index 461fee0c..5aa34835 100644
--- a/cypress/component/integration/Button.cy.tsx
+++ b/cypress/component/integration/Button.cy.tsx
@@ -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');
@@ -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', () => {
@@ -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');
@@ -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');
       });
 
@@ -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');
       });
 
@@ -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');
       });
 
@@ -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');
       });
 
@@ -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');
@@ -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', () => {
@@ -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', () => {
@@ -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');
       });
 
@@ -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');
       });
 
@@ -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');
       });