test: add simple notifications test, add page objects for test #27096
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { Driver } from '../../webdriver/driver'; | ||
| import FirstTimeTurnOnNotificationsModal from '../pages/notifications/first-time-turn-on-modal'; | ||
| import HeaderNavbar from '../pages/header-navbar'; | ||
|
|
||
| /** | ||
| * This function enables the notifications through the header options menu from the home page | ||
| * | ||
| * Note: this flow focuses on the journey of a user who is enabling this feature for the first time | ||
| * | ||
| * @param driver - The webdriver instance. | ||
| */ | ||
| export const enableNotificationsFirstTime = async ( | ||
| driver: Driver, | ||
| ): Promise<void> => { | ||
| console.log(`Start enable notifications from home screen`); | ||
| const header = new HeaderNavbar(driver); | ||
| await header.goToNotifiationsList(); | ||
|
|
||
| const turnOnNotificationsModal = new FirstTimeTurnOnNotificationsModal( | ||
| driver, | ||
| ); | ||
| await turnOnNotificationsModal.check_pageIsLoaded(); | ||
| await turnOnNotificationsModal.clickTurnOnNotifications(); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { Driver } from '../../webdriver/driver'; | ||
|
|
||
| class AccountOptionsMenu { | ||
| private driver: Driver; | ||
|
|
||
| private readonly notificationsMenuItem = | ||
| '[data-testid="notifications-menu-item"]'; | ||
|
|
||
| constructor(driver: Driver) { | ||
| this.driver = driver; | ||
| } | ||
|
|
||
| async clickNotificationsMenuItem(): Promise<void> { | ||
| await this.driver.clickElement(this.notificationsMenuItem); | ||
| } | ||
| } | ||
|
|
||
| export default AccountOptionsMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,43 @@ | ||
| import { Driver } from '../../webdriver/driver'; | ||
| import AccountOptionsMenu from './account-options-menu'; | ||
|
|
||
| class HeaderNavbar { | ||
| private driver: Driver; | ||
|
|
||
| private accountMenuButton: string; | ||
|
|
||
| private accountOptionsMenuButton: string; | ||
|
|
||
| private lockMetaMaskButton: string; | ||
|
|
||
| private accountOptionsMenu: AccountOptionsMenu; | ||
|
|
||
| constructor(driver: Driver) { | ||
| this.driver = driver; | ||
| this.lockMetaMaskButton = '[data-testid="global-menu-lock"]'; | ||
| this.accountMenuButton = '[data-testid="account-menu-icon"]'; | ||
| this.accountOptionsMenuButton = | ||
| '[data-testid="account-options-menu-button"]'; | ||
| this.accountOptionsMenu = new AccountOptionsMenu(driver); | ||
| } | ||
|
|
||
| async openAccountMenu(): Promise<void> { | ||
| await this.driver.clickElement(this.accountMenuButton); | ||
| } | ||
|
|
||
| async openAccountOptionsMenu(): Promise<void> { | ||
| await this.driver.clickElement(this.accountOptionsMenuButton); | ||
| } | ||
|
|
||
| async lockMetaMask(): Promise<void> { | ||
| await this.openAccountOptionsMenu(); | ||
| await this.driver.clickElement(this.lockMetaMaskButton); | ||
| } | ||
|
|
||
| async goToNotifiationsList(): Promise<void> { | ||
| this.openAccountOptionsMenu(); | ||
| this.accountOptionsMenu.clickNotificationsMenuItem(); | ||
| } | ||
| } | ||
|
|
||
| export default HeaderNavbar; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Driver } from '../../../webdriver/driver'; | ||
|
|
||
| class FirstTimeTurnOnNotificationsModal { | ||
| private driver: Driver; | ||
|
|
||
| private readonly turnOnButton = | ||
| '[data-testid="turn-on-notifications-button"]'; | ||
|
|
||
| constructor(driver: Driver) { | ||
| this.driver = driver; | ||
| } | ||
|
|
||
| async check_pageIsLoaded(): Promise<void> { | ||
| try { | ||
| await this.driver.waitForSelector(this.turnOnButton); | ||
| } catch (e) { | ||
| console.log( | ||
| 'Timeout while waiting for TurnOnNotificationsModal to be loaded', | ||
| e, | ||
| ); | ||
| throw e; | ||
| } | ||
| console.log('TurnOnNotificationsModal is loaded'); | ||
| } | ||
|
|
||
| async clickTurnOnNotifications(): Promise<void> { | ||
| await this.driver.clickElement(this.turnOnButton); | ||
|
There was a problem hiding this comment. use |
||
| } | ||
| } | ||
|
|
||
| export default FirstTimeTurnOnNotificationsModal; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Driver } from '../../../webdriver/driver'; | ||
|
|
||
| class NotificationsListPage { | ||
| private driver: Driver; | ||
|
|
||
| private readonly backButton = '[data-testid="back-button"]'; | ||
|
|
||
| private readonly notificationsSettingsButton = | ||
| '[data-testid="notifications-settings-button"]'; | ||
|
|
||
| private readonly noNotificationsReceivedPlaceholder = | ||
| '[data-testid="notifications-list-placeholder"]'; | ||
|
|
||
| constructor(driver: Driver) { | ||
| this.driver = driver; | ||
| } | ||
|
|
||
| async check_pageIsLoaded(): Promise<void> { | ||
| try { | ||
| await this.driver.waitForMultipleSelectors([ | ||
| this.backButton, | ||
| this.notificationsSettingsButton, | ||
| ]); | ||
| } catch (e) { | ||
| console.log( | ||
| 'Timeout while waiting for notifications list page to be loaded', | ||
| e, | ||
| ); | ||
| throw e; | ||
| } | ||
| console.log('Notifications list page is loaded'); | ||
| } | ||
|
|
||
| async check_noNotificationsReceived(): Promise<void> { | ||
chloeYue marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| try { | ||
| await this.driver.waitForSelector( | ||
| this.noNotificationsReceivedPlaceholder, | ||
| ); | ||
| } catch (e) { | ||
| console.log( | ||
| 'Timed out while waiting for the empty notifications list placeholder to be displayed', | ||
| e, | ||
| ); | ||
| } | ||
| console.log('Notifications list is empty as expected'); | ||
| } | ||
| } | ||
|
|
||
| export default NotificationsListPage; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { | ||
| withFixtures, | ||
| logInWithBalanceValidation, | ||
| defaultGanacheOptions, | ||
| } from '../../helpers'; | ||
| import { enableNotificationsFirstTime } from '../../page-objects/flows/enable-notifications'; | ||
| import FixtureBuilder from '../../fixture-builder'; | ||
| import NotificationsListPage from '../../page-objects/pages/notifications/notifications-list'; | ||
| import { mockNotificationServices } from './mocks'; | ||
|
|
||
| describe('Notifications', function () { | ||
| describe('from inside MetaMask', function () { | ||
| it('enables notifications for the first time', async function () { | ||
| await withFixtures( | ||
| { | ||
| fixtures: new FixtureBuilder().build(), | ||
| ganacheOptions: defaultGanacheOptions, | ||
| title: this.test?.fullTitle(), | ||
| testSpecificMock: mockNotificationServices, | ||
| }, | ||
| async ({ driver, ganacheServer }) => { | ||
| await logInWithBalanceValidation(driver, ganacheServer); | ||
| await enableNotificationsFirstTime(driver); | ||
|
|
||
| // should land on notifications list | ||
| const notificationsListPage = new NotificationsListPage(driver); | ||
| await notificationsListPage.check_pageIsLoaded(); | ||
| await notificationsListPage.check_noNotificationsReceived(); | ||
| }, | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With this implementation, for notifications, we use
clickNotificationsMenuItemin theAccountOptionsMenupage, but we clicklockMetaMaskButtonusing the selectors in theheader-navbarpage directly. However, thenotificationsMenuItemand thelockMetaMaskButtonare on the same modal, which creates inconsistency. I suggest that we don't create a new page class forAccountOptionsMenubecause it only has a few buttons without complex interactions onAccountOptionsMenu. We can just add thenotificationsMenuItemselector in theheader-navbarpage and click on it directly here. This provides an easier implementation.