diff --git a/apps/trading-e2e/src/integration/navbar.cy.ts b/apps/trading-e2e/src/integration/navbar.cy.ts new file mode 100644 index 000000000..5c63065a0 --- /dev/null +++ b/apps/trading-e2e/src/integration/navbar.cy.ts @@ -0,0 +1,99 @@ +import { mockConnectWallet } from '@vegaprotocol/cypress'; + +before(() => { + cy.mockTradingPage(); + cy.mockSubscription(); + cy.visit('/'); + cy.wait('@Market'); + cy.getByTestId('dialog-close').click(); +}); + +describe('Desktop view', { tags: '@smoke' }, () => { + describe('Navbar', () => { + const links = ['Markets', 'Trading', 'Portfolio']; + const hashes = ['#/markets/all', '#/markets/market-0', '#/portfolio']; + + links.forEach((link, index) => { + it(`${link} should be correctly rendered`, () => { + cy.getByTestId('navbar') + .find(`[data-testid="navbar-links"] a[data-testid=${link}]`) + .then((element) => { + cy.wrap(element).click(); + cy.wrap(element) + .get('span.absolute.md\\:h-1.w-full') + .should('exist'); + cy.location('hash').should('equal', hashes[index]); + }); + }); + }); + }); +}); + +describe('Mobile view', { tags: '@smoke' }, () => { + const viewportHeight = Cypress.config('viewportHeight'); + const viewportWidth = Cypress.config('viewportWidth'); + before(() => { + // a little hack to keep the viewport size between tests (cypress bug) + Cypress.config({ + viewportWidth: 560, + viewportHeight: 890, + }); + cy.viewport(560, 890); + }); + + describe('wallet drawer', () => { + it('wallet drawer should be correctly rendered', () => { + mockConnectWallet(); + cy.connectVegaWallet(true); + cy.getByTestId('connect-vega-wallet-mobile').click(); + cy.getByTestId('wallets-drawer').should('be.visible'); + cy.getByTestId('wallets-drawer').within((el) => { + cy.wrap(el).get('button').contains('Disconnect').click(); + }); + cy.getByTestId('wallets-drawer').should('not.be.visible'); + }); + }); + + describe('menu drawer', () => { + it('Markets should be correctly rendered', () => { + cy.getByTestId('button-menu-drawer').click(); + cy.getByTestId('menu-drawer').should('be.visible'); + cy.getByTestId('menu-drawer').within((el) => { + cy.wrap(el).getByTestId('Markets').click(); + cy.location('hash').should('equal', '#/markets/all'); + }); + }); + it('Trading should be correctly rendered', () => { + cy.getByTestId('button-menu-drawer').click(); + cy.getByTestId('menu-drawer').within((el) => { + cy.wrap(el).getByTestId('Trading').click(); + cy.location('hash').should('equal', '#/markets/market-0'); + }); + }); + it('Portfolio should be correctly rendered', () => { + cy.getByTestId('button-menu-drawer').click(); + cy.getByTestId('menu-drawer').within((el) => { + cy.wrap(el).getByTestId('Portfolio').click(); + cy.location('hash').should('equal', '#/portfolio'); + }); + }); + + it('Menu drawer should not be visible until opened', () => { + cy.getByTestId('menu-drawer').should('not.be.visible'); + cy.getByTestId('button-menu-drawer').click(); + cy.getByTestId('menu-drawer').should('be.visible'); + cy.getByTestId('menu-drawer') + .find('[data-testid="theme-switcher"]') + .should('be.visible'); + cy.getByTestId('button-menu-drawer').click(); + cy.getByTestId('menu-drawer').should('not.be.visible'); + }); + }); + after(() => { + // a little hack to keep the viewport size between tests (cypress bug) + Cypress.config({ + viewportWidth, + viewportHeight, + }); + }); +}); diff --git a/apps/trading-e2e/src/integration/global.cy.ts b/apps/trading-e2e/src/integration/wallets.cy.ts similarity index 65% rename from apps/trading-e2e/src/integration/global.cy.ts rename to apps/trading-e2e/src/integration/wallets.cy.ts index c165c103e..729ff5b34 100644 --- a/apps/trading-e2e/src/integration/global.cy.ts +++ b/apps/trading-e2e/src/integration/wallets.cy.ts @@ -7,7 +7,7 @@ const manageVegaBtn = 'manage-vega-wallet'; const form = 'rest-connector-form'; const dialogContent = 'dialog-content'; -describe('vega wallet v1', { tags: '@smoke' }, () => { +describe('connect hosted wallet', { tags: '@smoke' }, () => { beforeEach(() => { // Using portfolio page as it requires vega wallet connection cy.visit('/#/portfolio'); @@ -58,7 +58,7 @@ describe('vega wallet v1', { tags: '@smoke' }, () => { }); }); -describe('vega wallet v2', { tags: '@smoke' }, () => { +describe('connect vega wallet', { tags: '@smoke' }, () => { beforeEach(() => { // Using portfolio page as it requires vega wallet connection cy.visit('/#/portfolio'); @@ -127,63 +127,3 @@ describe('ethereum wallet', { tags: '@smoke' }, () => { cy.getByTestId(connectEthWalletBtn).should('exist'); }); }); - -describe('Navbar', { tags: '@smoke' }, () => { - beforeEach(() => { - cy.mockTradingPage(); - cy.mockSubscription(); - cy.visit('/'); - cy.wait('@Market'); - cy.getByTestId('dialog-close').click(); - }); - - it('should be properly rendered', () => { - const links = ['Markets', 'Trading', 'Portfolio']; - const hashes = ['#/markets/all', '#/markets/market-0', '#/portfolio']; - let i = 0; - cy.getByTestId('navbar').within(() => { - cy.get('[data-testid="navbar-links"] a[data-testid]', { log: true }) - .should('have.length', 3) - .each((item) => { - cy.wrap(item).click(); - cy.wrap(item).get('span.absolute.md\\:h-1.w-full').should('exist'); - cy.location('hash').should('equal', hashes[i]); - cy.wrap(item).should('have.data', 'testid', links[i++]); - }); - }); - }); - - it('wallet drawer should be correctly rendered', () => { - cy.viewport(560, 890); - mockConnectWallet(); - cy.connectVegaWallet(true); - cy.getByTestId('connect-vega-wallet-mobile').click(); - cy.getByTestId('wallets-drawer').should('be.visible'); - cy.getByTestId('wallets-drawer').within((el) => { - cy.wrap(el).get('button').contains('Disconnect').click(); - }); - cy.getByTestId('wallets-drawer').should('not.be.visible'); - }); - - it('menu drawer should be correctly rendered', () => { - cy.viewport(560, 890); - cy.getByTestId('button-menu-drawer').click(); - cy.getByTestId('menu-drawer').should('be.visible'); - cy.getByTestId('menu-drawer').within((el) => { - cy.wrap(el).getByTestId('Markets').click(); - cy.location('hash').should('equal', '#/markets/all'); - }); - cy.getByTestId('button-menu-drawer').click(); - cy.getByTestId('menu-drawer').within((el) => { - cy.wrap(el).getByTestId('Trading').click(); - cy.location('hash').should('equal', '#/markets/market-0'); - }); - cy.getByTestId('button-menu-drawer').click(); - cy.getByTestId('menu-drawer').within((el) => { - cy.wrap(el).getByTestId('Portfolio').click(); - cy.location('hash').should('equal', '#/portfolio'); - cy.wrap(el).getByTestId('theme-switcher').should('be.visible'); - }); - cy.getByTestId('menu-drawer').should('not.be.visible'); - }); -});