diff --git a/client/cypress/e2e/_8connectWallet.cy.ts b/client/cypress/e2e/_8connectWallet.cy.ts index 1d67f4ad52..153a0585fb 100644 --- a/client/cypress/e2e/_8connectWallet.cy.ts +++ b/client/cypress/e2e/_8connectWallet.cy.ts @@ -1,76 +1,76 @@ -// // eslint-disable-next-line import/no-extraneous-dependencies -// import chaiColors from 'chai-colors'; +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; -// import { connectWallet, visitWithLoader } from 'cypress/utils/e2e'; -// import { beforeSetup } from 'cypress/utils/onboarding'; -// import viewports from 'cypress/utils/viewports'; -// import { -// HAS_ONBOARDING_BEEN_CLOSED, -// IS_ONBOARDING_ALWAYS_VISIBLE, -// IS_ONBOARDING_DONE, -// } from 'src/constants/localStorageKeys'; -// import { ROOT, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; +import { connectWallet, visitWithLoader } from 'cypress/utils/e2e'; +import { beforeSetup } from 'cypress/utils/onboarding'; +import viewports from 'cypress/utils/viewports'; +import { + HAS_ONBOARDING_BEEN_CLOSED, + IS_ONBOARDING_ALWAYS_VISIBLE, + IS_ONBOARDING_DONE, +} from 'src/constants/localStorageKeys'; +import { ROOT, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; -// chai.use(chaiColors); +chai.use(chaiColors); -// Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => { -// describe(`[AW IS CLOSED] Connect wallet: ${device}`, { viewportHeight, viewportWidth }, () => { -// before(() => { -// beforeSetup(); -// cy.clearLocalStorage(); -// }); +Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => { + describe(`[AW IS CLOSED] Connect wallet: ${device}`, { viewportHeight, viewportWidth }, () => { + before(() => { + beforeSetup(); + cy.clearLocalStorage(); + }); -// beforeEach(() => { -// localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); -// localStorage.setItem(IS_ONBOARDING_DONE, 'true'); -// localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); -// visitWithLoader(ROOT.absolute, ROOT_ROUTES.home.absolute); -// }); + beforeEach(() => { + localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT.absolute, ROOT_ROUTES.home.absolute); + }); -// after(() => { -// cy.disconnectMetamaskWalletFromAllDapps(); -// }); + after(() => { + cy.disconnectMetamaskWalletFromAllDapps(); + }); -// it('Connect wallet button opens Connect wallet Modal', () => { -// cy.get('[data-test=LayoutTopBar__Button]').click(); -// cy.wait(500); -// cy.get('[data-test=ModalLayoutConnectWallet]').should('be.visible'); -// }); + it('Connect wallet button opens Connect wallet Modal', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet]').should('be.visible'); + }); -// it('Close button in top-right corner is visible and closes Connect wallet Modal when clicked', () => { -// cy.get('[data-test=LayoutTopBar__Button]').click(); -// cy.wait(500); -// cy.get('[data-test=ModalLayoutConnectWallet__Button]').should('be.visible'); -// cy.get('[data-test=ModalLayoutConnectWallet__Button]').click(); -// cy.wait(500); -// cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); -// }); + it('Close button in top-right corner is visible and closes Connect wallet Modal when clicked', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet__Button]').should('be.visible'); + cy.get('[data-test=ModalLayoutConnectWallet__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); + }); -// it('Connect wallet Modal has overflow which closes Connect wallet Modal when clicked', () => { -// cy.get('[data-test=LayoutTopBar__Button]').click(); -// cy.wait(500); -// cy.get('[data-test=ModalLayoutConnectWallet__overflow]').should('exist'); -// cy.get('[data-test=ModalLayoutConnectWallet__overflow]').click({ force: true }); -// cy.wait(500); -// cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); -// }); + it('Connect wallet Modal has overflow which closes Connect wallet Modal when clicked', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet__overflow]').should('exist'); + cy.get('[data-test=ModalLayoutConnectWallet__overflow]').click({ force: true }); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); + }); -// it('Connect wallet Modal shows "WalletConnect" and "Browser wallet" options when wallet with "injected" id is detected.', () => { -// cy.get('[data-test=LayoutTopBar__Button]').click(); -// cy.wait(500); -// cy.get('[data-test=ConnectWallet__BoxRounded--browserWallet]').should('be.visible'); -// cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').should('be.visible'); -// }); + it('Connect wallet Modal shows "WalletConnect" and "Browser wallet" options when wallet with "injected" id is detected.', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ConnectWallet__BoxRounded--browserWallet]').should('be.visible'); + cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').should('be.visible'); + }); -// it('Clicking on "WalletConnect" option, opens WalletConnect modal', () => { -// cy.get('[data-test=LayoutTopBar__Button]').click(); -// cy.wait(500); -// cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').click(); -// }); + it('Clicking on "WalletConnect" option, opens WalletConnect modal', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').click(); + }); -// it('Clicking on "Browser wallet" option connects with MetaMask wallet', () => { -// connectWallet({ isPatronModeEnabled: false }); -// cy.get('[data-test=LayoutTopBar__Button]').should('contain.text', '0x'); -// }); -// }); -// }); + it('Clicking on "Browser wallet" option connects with MetaMask wallet', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.get('[data-test=LayoutTopBar__Button]').should('contain.text', '0x'); + }); + }); +}); diff --git a/client/cypress/e2e/_9calendar.cy.ts b/client/cypress/e2e/_9calendar.cy.ts index f0ad5e78e8..384a771bd0 100644 --- a/client/cypress/e2e/_9calendar.cy.ts +++ b/client/cypress/e2e/_9calendar.cy.ts @@ -14,174 +14,174 @@ import { ROOT, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; chai.use(chaiColors); -// Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { -// describe(`[AW IS CLOSED] Calendar: ${device}`, { viewportHeight, viewportWidth }, () => { -// before(() => { -// cy.clearLocalStorage(); -// }); +Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { + describe(`[AW IS CLOSED] Calendar: ${device}`, { viewportHeight, viewportWidth }, () => { + before(() => { + cy.clearLocalStorage(); + }); -// beforeEach(() => { -// mockCoinPricesServer(); -// localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); -// localStorage.setItem(IS_ONBOARDING_DONE, 'true'); -// localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); -// const now = Date.UTC(2024, 2, 19, 9, 30, 0, 0); -// cy.clock(now, ['Date']); -// visitWithLoader(ROOT.absolute, ROOT_ROUTES.home.absolute); -// }); + beforeEach(() => { + mockCoinPricesServer(); + localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + const now = Date.UTC(2024, 2, 19, 9, 30, 0, 0); + cy.clock(now, ['Date']); + visitWithLoader(ROOT.absolute, ROOT_ROUTES.home.absolute); + }); -// it('Epoch info badge opens Calendar on click', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=Calendar]').should('be.visible'); -// }); + it('Epoch info badge opens Calendar on click', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=Calendar]').should('be.visible'); + }); -// it('Clicking on overlay closes the Calendar', () => { -// cy.wait(2000); -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.get('[data-test=Calendar]').should('be.visible'); -// if (isMobile) { -// cy.get('[data-test=LayoutTopBarCalendar__ModalCalendar__overflow]').click({ -// force: true, -// }); -// } else { -// cy.get('[data-test=LayoutTopBarCalendar__calendarOverflow]').click(); -// } -// cy.get('[data-test=Calendar]').should('not.exist'); -// }); + it('Clicking on overlay closes the Calendar', () => { + cy.wait(2000); + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.get('[data-test=Calendar]').should('be.visible'); + if (isMobile) { + cy.get('[data-test=LayoutTopBarCalendar__ModalCalendar__overflow]').click({ + force: true, + }); + } else { + cy.get('[data-test=LayoutTopBarCalendar__calendarOverflow]').click(); + } + cy.get('[data-test=Calendar]').should('not.exist'); + }); -// it('Active milestone (e3-snapshot-vote) is always visible after calendar open (and has correct style)', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=CalendarItem][data-is-active=true]').should('be.visible'); -// cy.get('[data-test=CalendarItem][data-is-active=true]') -// .invoke('css', 'opacity') -// .should('eq', '1'); -// cy.get('[data-test=CalendarItem][data-is-active=true]') -// .then($el => $el.css('backgroundColor')) -// .should('be.colored', '#f1faf8'); -// cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => { -// cy.get('[data-test=CalendarItem__title__day]') -// .then($el => $el.css('color')) -// .should('be.colored', '#2d9b87'); -// cy.get('[data-test=CalendarItem__title__monthShort]') -// .then($el => $el.css('color')) -// .should('be.colored', '#2d9b87'); -// cy.get('[data-test=CalendarItem__label]').invoke('text').should('eq', 'Snapshot vote'); -// cy.get('[data-test=CalendarItem__label]') -// .then($el => $el.css('color')) -// .should('be.colored', '#2d9b87'); -// cy.get('[data-test=CalendarItem__date]') -// .then($el => $el.css('color')) -// .should('be.colored', '#2d9b87'); -// }); -// }); + it('Active milestone (e3-snapshot-vote) is always visible after calendar open (and has correct style)', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=CalendarItem][data-is-active=true]').should('be.visible'); + cy.get('[data-test=CalendarItem][data-is-active=true]') + .invoke('css', 'opacity') + .should('eq', '1'); + cy.get('[data-test=CalendarItem][data-is-active=true]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#f1faf8'); + cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => { + cy.get('[data-test=CalendarItem__title__day]') + .then($el => $el.css('color')) + .should('be.colored', '#2d9b87'); + cy.get('[data-test=CalendarItem__title__monthShort]') + .then($el => $el.css('color')) + .should('be.colored', '#2d9b87'); + cy.get('[data-test=CalendarItem__label]').invoke('text').should('eq', 'Snapshot vote'); + cy.get('[data-test=CalendarItem__label]') + .then($el => $el.css('color')) + .should('be.colored', '#2d9b87'); + cy.get('[data-test=CalendarItem__date]') + .then($el => $el.css('color')) + .should('be.colored', '#2d9b87'); + }); + }); -// it('Milestone (e3-snapshot-vote) with "to" param shows end date of event', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => { -// cy.get('[data-test=CalendarItem__date]') -// .invoke('text') -// .should('eq', 'Closes 22 March 12am CET'); -// }); -// }); + it('Milestone (e3-snapshot-vote) with "to" param shows end date of event', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => { + cy.get('[data-test=CalendarItem__date]') + .invoke('text') + .should('eq', 'Closes 22 March 12am CET'); + }); + }); -// it('Milestone (e3-project-updates-close) without "to" param shows hour and timezone of event start', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=CalendarItem]') -// .eq(2) -// .within(() => { -// cy.get('[data-test=CalendarItem__date]').invoke('text').should('eq', '12am CET'); -// }); -// }); + it('Milestone (e3-project-updates-close) without "to" param shows hour and timezone of event start', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=CalendarItem]') + .eq(2) + .within(() => { + cy.get('[data-test=CalendarItem__date]').invoke('text').should('eq', '12am CET'); + }); + }); -// if (isMobile) { -// it('User can scroll through milestones by drag&drop vertically', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=CalendarItem][data-is-active=true]').then($calendarItemActive => { -// const { top: calendarItemActiveTop } = $calendarItemActive[0].getBoundingClientRect(); + if (isMobile) { + it('User can scroll through milestones by drag&drop vertically', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=CalendarItem][data-is-active=true]').then($calendarItemActive => { + const { top: calendarItemActiveTop } = $calendarItemActive[0].getBoundingClientRect(); -// cy.get('[data-test=CalendarItem]').eq(2).should('not.be.visible'); -// cy.get('[data-test=CalendarItem]') -// .eq(2) -// .then($prevCalendarItem => { -// const { height: prevCalendarItemHeight } = -// $prevCalendarItem[0].getBoundingClientRect(); -// const prevCalendarItemMarginBottm = parseInt( -// $prevCalendarItem.css('marginBottom'), -// 10, -// ); + cy.get('[data-test=CalendarItem]').eq(2).should('not.be.visible'); + cy.get('[data-test=CalendarItem]') + .eq(2) + .then($prevCalendarItem => { + const { height: prevCalendarItemHeight } = + $prevCalendarItem[0].getBoundingClientRect(); + const prevCalendarItemMarginBottm = parseInt( + $prevCalendarItem.css('marginBottom'), + 10, + ); -// const pointerDownPageY = calendarItemActiveTop; -// const pointerUpPageY = Math.ceil( -// calendarItemActiveTop + prevCalendarItemHeight + prevCalendarItemMarginBottm, -// ); + const pointerDownPageY = calendarItemActiveTop; + const pointerUpPageY = Math.ceil( + calendarItemActiveTop + prevCalendarItemHeight + prevCalendarItemMarginBottm, + ); -// cy.get('[data-test=Calendar__wrapper]') -// .trigger('pointerdown', { -// pageY: pointerDownPageY, -// }) -// .trigger('pointermove', { -// pageY: pointerUpPageY, -// }) -// .trigger('pointerup', { -// pageY: pointerUpPageY, -// }); + cy.get('[data-test=Calendar__wrapper]') + .trigger('pointerdown', { + pageY: pointerDownPageY, + }) + .trigger('pointermove', { + pageY: pointerUpPageY, + }) + .trigger('pointerup', { + pageY: pointerUpPageY, + }); -// cy.get('[data-test=CalendarItem]').eq(2).should('be.visible'); -// }); -// }); -// }); -// } else { -// it('User can scroll through milestones by drag&drop horizontally', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=CalendarItem][data-is-active=true]').then($calendarItemActive => { -// const { left: calendarItemActiveLeft } = $calendarItemActive[0].getBoundingClientRect(); + cy.get('[data-test=CalendarItem]').eq(2).should('be.visible'); + }); + }); + }); + } else { + it('User can scroll through milestones by drag&drop horizontally', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=CalendarItem][data-is-active=true]').then($calendarItemActive => { + const { left: calendarItemActiveLeft } = $calendarItemActive[0].getBoundingClientRect(); -// cy.get('[data-test=CalendarItem]').eq(2).should('not.be.visible'); -// cy.get('[data-test=CalendarItem]') -// .eq(2) -// .then($prevCalendarItem => { -// const { width: prevCalendarItemWidth } = $prevCalendarItem[0].getBoundingClientRect(); -// const prevCalendarItemMarginRight = parseInt( -// $prevCalendarItem.css('marginRight'), -// 10, -// ); + cy.get('[data-test=CalendarItem]').eq(2).should('not.be.visible'); + cy.get('[data-test=CalendarItem]') + .eq(2) + .then($prevCalendarItem => { + const { width: prevCalendarItemWidth } = $prevCalendarItem[0].getBoundingClientRect(); + const prevCalendarItemMarginRight = parseInt( + $prevCalendarItem.css('marginRight'), + 10, + ); -// const pointerDownPageX = calendarItemActiveLeft; -// const pointerUpPageX = Math.ceil( -// calendarItemActiveLeft + prevCalendarItemWidth + prevCalendarItemMarginRight, -// ); + const pointerDownPageX = calendarItemActiveLeft; + const pointerUpPageX = Math.ceil( + calendarItemActiveLeft + prevCalendarItemWidth + prevCalendarItemMarginRight, + ); -// cy.get('[data-test=Calendar__wrapper]') -// .trigger('pointerdown', { -// pageX: pointerDownPageX, -// }) -// .trigger('pointermove', { -// pageX: pointerUpPageX, -// }); + cy.get('[data-test=Calendar__wrapper]') + .trigger('pointerdown', { + pageX: pointerDownPageX, + }) + .trigger('pointermove', { + pageX: pointerUpPageX, + }); -// cy.get('[data-test=CalendarItem]').eq(2).should('be.visible'); -// }); -// }); -// }); -// } + cy.get('[data-test=CalendarItem]').eq(2).should('be.visible'); + }); + }); + }); + } -// if (isMobile) { -// it('User can close Calendar by clicking on close button (X) in top-right corner', () => { -// cy.get('[data-test=LayoutTopBarCalendar]').click(); -// cy.wait(2000); -// cy.get('[data-test=Calendar]').should('be.visible'); -// cy.get('[data-test=LayoutTopBarCalendar__ModalCalendar__Button]').click(); -// cy.get('[data-test=Calendar]').should('not.exist'); -// }); -// } -// }); -// }); + if (isMobile) { + it('User can close Calendar by clicking on close button (X) in top-right corner', () => { + cy.get('[data-test=LayoutTopBarCalendar]').click(); + cy.wait(2000); + cy.get('[data-test=Calendar]').should('be.visible'); + cy.get('[data-test=LayoutTopBarCalendar__ModalCalendar__Button]').click(); + cy.get('[data-test=Calendar]').should('not.exist'); + }); + } + }); +}); describe('move time - AW IS OPEN - less than 24h to change AW', () => { before(() => {