Fix making icons snaphots with custom viewport with size 500x500

auto-mat · Jul 17, 2024 · 03628c6 · 03628c6
1 parent 7adabf7
commit 03628c6
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 93 deletions.
diff --git a/src/components/__tests__/CardEvent.cy.js b/src/components/__tests__/CardEvent.cy.js
@@ -92,14 +92,15 @@ describe('<CardEvent>', () => {
             .and('contain', date)
             .and('contain', year)
             .and('contain', hour);
-          cy.dataCy('card-event-date-icon').then((element) => {
-            cy.testIcon({
-              element: element,
-              name: 'card-event-event',
-              size: iconSize24,
+          cy.dataCy('card-event-date-icon')
+            .should('have.color', blueGrey2)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-event',
+                size: iconSize24,
+              });
             });
-          });
-          cy.dataCy('card-event-date-icon').should('have.color', blueGrey2);
         });
       });
     });
@@ -112,14 +113,15 @@ describe('<CardEvent>', () => {
             .and('have.css', 'font-size', '14px')
             .and('have.css', 'font-weight', '400')
             .and('contain', cardEvent.location);
-          cy.dataCy('card-event-location-icon').then((element) => {
-            cy.testIcon({
-              element: element,
-              name: 'card-event-location',
-              size: iconSize24,
+          cy.dataCy('card-event-location-icon')
+            .should('have.color', blueGrey2)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-location',
+                size: iconSize24,
+              });
             });
-          });
-          cy.dataCy('card-event-location-icon').should('have.color', blueGrey2);
         });
       });
     });
@@ -132,21 +134,20 @@ describe('<CardEvent>', () => {
           .and('have.css', 'height', '42px')
           .and('have.css', 'width', '42px');
         // icon
-        cy.dataCy('card-event-calendar-icon').and('have.color', grey10);
-        cy.window().then(() => {
-          /*
-           * Change viewport fix: `The "target" argument must be an instance
-           * of Buffer or Uint8Array. Received null` error
-           */
-          cy.viewport(1280, 800).then(() => {
-            cy.dataCy('card-event-calendar-icon').then((element) => {
+        /*
+         * Change viewport fix: `The "target" argument must be an instance
+         * of Buffer or Uint8Array. Received null` error
+         */
+        cy.viewport(500, 500).then(() => {
+          cy.dataCy('card-event-calendar-icon')
+            .and('have.color', grey10)
+            .then((element) => {
               cy.testIcon({
                 element: element,
                 name: 'card-event-calendar',
                 size: iconSize18,
               });
             });
-          });
         });
       });
     });
@@ -195,25 +196,24 @@ describe('<CardEvent>', () => {
                 cy.wrap($el).should('contain', cardEvent.location);
               }
             });
-          cy.dataCy('dialog-event-date-icon').then((element) => {
-            cy.testIcon({
-              element: element,
-              name: 'card-event-dialog-event',
-              size: iconSize18,
+          cy.dataCy('dialog-event-date-icon')
+            .should('have.color', blueGrey3)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-dialog-event',
+                size: iconSize18,
+              });
             });
-          });
-          cy.dataCy('dialog-event-date-icon').should('have.color', blueGrey3);
-          cy.dataCy('dialog-event-location-icon').then((element) => {
-            cy.testIcon({
-              element: element,
-              name: 'card-event-dialog-location',
-              size: iconSize18,
+          cy.dataCy('dialog-event-location-icon')
+            .should('have.color', blueGrey3)
+            .then((element) => {
+              cy.testIcon({
+                element: element,
+                name: 'card-event-dialog-location',
+                size: iconSize18,
+              });
             });
-          });
-          cy.dataCy('dialog-event-location-icon').should(
-            'have.color',
-            blueGrey3,
-          );
         });
       });
     });

diff --git a/src/components/__tests__/FormFieldPassword.cy.js b/src/components/__tests__/FormFieldPassword.cy.js
@@ -26,12 +26,7 @@ describe('<FormFieldPassword>', () => {
           component: 'FormFieldPassword',
         },
       });
-      /*
-       * Use defautl viewport size instead of
-       * cy.viewport('macbook-16');
-       * this fix issue with making  input icon
-       * snaphot image
-       */
+      cy.viewport('macbook-16');
     });
 
     it('renders password field', () => {
@@ -52,17 +47,19 @@ describe('<FormFieldPassword>', () => {
         .and('have.css', 'border-radius', '8px');
       // input
       cy.dataCy('form-password-input').should('be.visible');
-      // icon
-      cy.dataCy('form-password-icon')
-        .should('contain', 'visibility')
-        .and('have.color', colorPrimary)
-        .then((element) => {
-          cy.testIcon({
-            element: element,
-            name: 'form-field-password',
-            size: 18,
+      cy.viewport(500, 500).then(() => {
+        // icon
+        cy.dataCy('form-password-icon')
+          .should('contain', 'visibility')
+          .and('have.color', colorPrimary)
+          .then((element) => {
+            cy.testIcon({
+              element: element,
+              name: 'form-field-password',
+              size: 18,
+            });
           });
-        });
+      });
       testPasswordInputReveal({
         identifierPassword: 'form-password',
       });

diff --git a/src/components/__tests__/FormFieldPasswordConfirm.cy.js b/src/components/__tests__/FormFieldPasswordConfirm.cy.js
@@ -50,20 +50,18 @@ describe('<FormFieldPasswordConfirm>', () => {
         .and('have.css', 'border-radius', '8px');
       // input
       cy.dataCy('form-password-confirm-input').should('be.visible');
-      // icon
-      cy.dataCy('form-password-confirm-icon')
-        .should('contain', 'visibility')
-        .and('have.color', colorPrimary);
-      cy.viewport(1280, 800).then(() => {
-        cy.window().then(() => {
-          cy.dataCy('form-password-confirm-icon').then((element) => {
+      cy.viewport(500, 500).then(() => {
+        // icon
+        cy.dataCy('form-password-confirm-icon')
+          .should('contain', 'visibility')
+          .and('have.color', colorPrimary)
+          .then((element) => {
             cy.testIcon({
-              element,
+              element: element,
               name: 'form-field-password-confirm',
               size: 18,
             });
           });
-        });
       });
     });
 

diff --git a/src/components/__tests__/FormLogin.cy.js b/src/components/__tests__/FormLogin.cy.js
@@ -72,18 +72,19 @@ describe('<FormLogin>', () => {
     });
 
     it('renders password show/hide icon', () => {
-      cy.viewport(1280, 800).then(() => {
-        cy.window().then(() => {
-          cy.dataCy('form-login-password-icon', { timeout: 5000 }).then(
-            (element) => {
-              cy.testIcon({ element, name: 'form-login-password', size: 18 });
-            },
-          );
-        });
+      cy.viewport(500, 500).then(() => {
+        cy.dataCy('form-login-password-icon')
+          .should('contain', 'visibility')
+          .and('have.color', `${colorPrimary}`)
+          .then((element) => {
+            cy.testIcon({
+              element: element,
+              name: 'form-login-password',
+              size: 18,
+            });
+          });
       });
-      cy.dataCy('form-login-password-icon')
-        .should('contain', 'visibility')
-        .and('have.color', `${colorPrimary}`);
+
       cy.dataCy('form-login-password-icon')
         .invoke('height')
         .should('be.equal', 18);
@@ -185,16 +186,17 @@ describe('<FormLogin>', () => {
         .should('be.visible')
         .and('have.backgroundColor', 'rgba(255, 255, 255, 0.5)')
         .and('have.css', 'border-radius', '9999px');
-      // icon
-      cy.viewport(1280, 800).then(() => {
-        cy.window().then(() => {
-          cy.dataCy('form-reset-finished-icon', { timeout: 5000 }).then(
-            (element) => {
-              cy.testIcon({ element, name: 'form-login-finished', size: 40 });
-            },
-          );
+      cy.viewport(500, 500).then(() => {
+        // icon
+        cy.dataCy('form-reset-finished-icon').then((element) => {
+          cy.testIcon({
+            element: element,
+            name: 'form-login-finished',
+            size: 40,
+          });
         });
       });
+
       // title
       cy.dataCy('form-reset-finished-title')
         .should('be.visible')

diff --git a/src/components/__tests__/FormRegister.cy.js b/src/components/__tests__/FormRegister.cy.js
@@ -81,15 +81,12 @@ describe('<FormRegister>', () => {
     });
 
     it('renders show/hide icons for password inputs', () => {
-      // password
-      cy.viewport(1280, 800).then(() => {
-        cy.window().then(() => {
-          cy.dataCy('form-register-password-icon').then((element) => {
-            cy.testIcon({
-              element,
-              name: 'form-register-password-show',
-              size: 18,
-            });
+      cy.viewport(500, 500).then(() => {
+        cy.dataCy('form-register-password-icon').then((element) => {
+          cy.testIcon({
+            element: element,
+            name: 'form-register-password-show',
+            size: 18,
           });
         });
       });