Additional tests in mobile resolution (#225)

* Additional tests in mobile resolution

* Update toggle variable name
This commit is contained in:
Joe Tsang 2022-04-11 18:09:54 +01:00 committed by GitHub
parent e92408e31d
commit 446f7b13d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 61 additions and 14 deletions

View File

@ -1,6 +1,11 @@
Feature: Asset Page
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
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

View File

@ -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

View File

@ -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>'

View File

@ -1,6 +1,11 @@
Feature: Markets Page
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
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

View File

@ -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

View File

@ -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

View File

@ -1,6 +1,11 @@
Feature: Validators Page
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
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

View File

@ -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);
}

View File

@ -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('/');
});

View File

@ -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 />