diff --git a/src/components/__tests__/CardEvent.cy.js b/src/components/__tests__/CardEvent.cy.js index 224527a19..93c98da26 100644 --- a/src/components/__tests__/CardEvent.cy.js +++ b/src/components/__tests__/CardEvent.cy.js @@ -92,14 +92,15 @@ describe('', () => { .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('', () => { .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('', () => { .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('', () => { 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 index f929d3d70..dd1d458eb 100644 --- a/src/components/__tests__/FormFieldPassword.cy.js +++ b/src/components/__tests__/FormFieldPassword.cy.js @@ -26,12 +26,7 @@ describe('', () => { 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('', () => { .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 index 82b3f3903..94517988f 100644 --- a/src/components/__tests__/FormFieldPasswordConfirm.cy.js +++ b/src/components/__tests__/FormFieldPasswordConfirm.cy.js @@ -50,20 +50,18 @@ describe('', () => { .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 index b166c443d..d1bca6f37 100644 --- a/src/components/__tests__/FormLogin.cy.js +++ b/src/components/__tests__/FormLogin.cy.js @@ -72,18 +72,19 @@ describe('', () => { }); 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('', () => { .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 index 62c2e8bd5..8e589192b 100644 --- a/src/components/__tests__/FormRegister.cy.js +++ b/src/components/__tests__/FormRegister.cy.js @@ -81,15 +81,12 @@ describe('', () => { }); 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, }); }); });