Additional tests in mobile resolution (#225)

* Additional tests in mobile resolution

* Update toggle variable name

apps/explorer-e2e/src/integration/asset-page.feature

@@ -4,3 +4,8 @@ Scenario: Navigate to Asset Page
     Given I am on the homepage
     When I navigate to the asset page
     Then asset page is correctly displayed
+
+  Scenario: Navigate to Asset Page using mobile
+    Given I am on mobile and open the toggle menu
+    When I navigate to the asset page
+    Then asset page is correctly displayed

apps/explorer-e2e/src/integration/blocks-page.feature

@@ -5,6 +5,11 @@ Feature: Blocks Page
     When I navigate to the blocks page
     Then blocks page is correctly displayed
 
+  Scenario: Navigate to blocks page using mobile
+    Given I am on mobile and open the toggle menu
+    When I navigate to the blocks page
+    Then blocks page is correctly displayed
+
   Scenario: Navigate to block validator page
     Given I am on the homepage
     When I navigate to the blocks page

apps/explorer-e2e/src/integration/home-page.feature

@@ -1,6 +1,6 @@
 Feature: Home page
 
-  Scenario Outline: Succesfful search for specific id by <IdType>
+  Scenario Outline: Successful search for specific id by <IdType>
     Given I am on the homepage
     When I search for '<Id>'
     Then I am redirected to page containing id '<Id>'

apps/explorer-e2e/src/integration/markets-page.feature

@@ -4,3 +4,8 @@ Scenario: Navigate to markets page
     Given I am on the homepage
     When I navigate to the markets page
     Then markets page is correctly displayed
+
+  Scenario: Navigate to markets page using mobile
+    Given I am on mobile and open the toggle menu
+    When I navigate to the markets page
+    Then markets page is correctly displayed

apps/explorer-e2e/src/integration/network-page.feature

@@ -4,3 +4,8 @@ Feature: Network parameters Page
     Given I am on the homepage
     When I navigate to network parameters page
     Then network parameters page is correctly displayed
+
+  Scenario: Navigate to network parameters page using mobile
+    Given I am on mobile and open the toggle menu
+    When I navigate to network parameters page
+    Then network parameters page is correctly displayed

apps/explorer-e2e/src/integration/transactions-page.feature

@@ -10,3 +10,10 @@ Feature: Transactions Page
     When I navigate to the transactions page
     And I click on the top transaction
     Then transaction details are displayed
+
+  Scenario: Navigate to transactions page using mobile
+    Given I am on mobile and open the toggle menu
+    When I navigate to the transactions page
+    Then transactions page is correctly displayed
+    When I click on the top transaction
+    Then transaction details are displayed

apps/explorer-e2e/src/integration/validators-page.feature

@@ -4,3 +4,8 @@ Scenario: Navigate to validators page
     Given I am on the homepage
     When I navigate to the validators page
     Then validators page is correctly displayed
+
+  Scenario: Navigate to validators page using mobile
+    Given I am on mobile and open the toggle menu
+    When I navigate to the validators page
+    Then validators page is correctly displayed

apps/explorer-e2e/src/support/pages/base-page.js

@@ -12,6 +12,7 @@ export default class BasePage {
   searchField = 'search';
   searchButton = 'search-button';
   searchError = 'search-error';
+  openMobileMenuBtn = 'open-menu';
 
   navigateToTxs() {
     cy.get(`a[href='${this.transactionsUrl}']`).click();
@@ -59,6 +60,10 @@ export default class BasePage {
     cy.getByTestId(this.searchButton).click();
   }
 
+  clickOnToggle() {
+    cy.getByTestId(this.openMobileMenuBtn).click({ force: true });
+  }
+
   validateUrl(expectedUrl) {
     cy.url().should('include', expectedUrl);
   }

apps/explorer-e2e/src/support/step_definitions/common.step.js

@@ -2,6 +2,12 @@ import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
 import BasePage from '../pages/base-page';
 const basePage = new BasePage();
 
+Given('I am on mobile and open the toggle menu', () => {
+  cy.viewport('iphone-x');
+  cy.visit('/');
+  basePage.clickOnToggle();
+});
+
 Given('I am on the homepage', () => {
   cy.visit('/');
 });

apps/explorer/src/app/components/header/header.tsx

@@ -26,7 +26,11 @@ export const Header = ({
           {t('Vega Explorer')}
         </h1>
       </Link>
-      <button className="md:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+      <button
+        data-testid="open-menu"
+        className="md:hidden"
+        onClick={() => setMenuOpen(!menuOpen)}
+      >
         <Icon name={menuOpen ? 'cross' : 'menu'} size={20} />
       </button>
       <Search />