test: add test for discover midnight banner [LW-13628]

packages/core/src/ui/components/MidnightEventBanner/MidnightEventBanner.tsx

@@ -29,7 +29,12 @@ const PopupButtons = ({ translations, onLearnMore, onReminder }: Props): JSX.Ele
     })}
   >
     <Box mb="$10" w="$fill">
-      <Button.CallToAction label={translations.learnMore} w="$fill" onClick={onLearnMore} />
+      <Button.CallToAction
+        label={translations.learnMore}
+        w="$fill"
+        onClick={onLearnMore}
+        data-testid="learn-more-button-popup"
+      />
     </Box>
     <Box w="$fill">
       <Button.Secondary label={translations.reminder} w="$fill" onClick={onReminder} />
@@ -49,10 +54,18 @@ const FullScreenButtons = ({ translations, onLearnMore, onReminder }: Props): JS
     })}
   >
     <Box mr={'$20'}>
-      <Button.CallToAction label={translations.learnMore} onClick={onLearnMore} />
+      <Button.CallToAction
+        label={translations.learnMore}
+        onClick={onLearnMore}
+        data-testid="learn-more-button-extended"
+      />
     </Box>
     <Box>
-      <Button.Secondary label={translations.reminder} onClick={onReminder} />
+      <Button.Secondary
+        label={translations.reminder}
+        onClick={onReminder}
+        data-testid="remind-me-later-button-extended"
+      />
     </Box>
   </Box>
 );
@@ -70,6 +83,7 @@ const Title = ({ translations }: Props): JSX.Element => (
         })
       )}
       weight="$bold"
+      data-testid="midnight-event-banner-title"
     >
       {translations.title}
     </Text.SubHeading>
@@ -113,7 +127,7 @@ export const MidnightEventBanner = ({ translations, onClose, onLearnMore, onRemi
     w="$fill"
   >
     <Box className={styles.close}>
-      <NavigationButton.Close onClick={onClose} />
+      <NavigationButton.Close onClick={onClose} data-testid="midnight-event-banner-close-button" />
     </Box>
     <Flex w="$fill" flexDirection="column">
       <Title translations={translations} />
@@ -126,7 +140,11 @@ export const MidnightEventBanner = ({ translations, onClose, onLearnMore, onRemi
           }
         })}
       >
-        <Text.Body.Normal className={styles.description} weight="$medium">
+        <Text.Body.Normal
+          className={styles.description}
+          weight="$medium"
+          data-testid="midnight-event-banner-description"
+        >
           {translations.description}
         </Text.Body.Normal>
       </Box>

packages/e2e-tests/src/assert/midnightBannerAssert.ts

@@ -0,0 +1,25 @@
+import { expect } from 'chai';
+import { t } from '../utils/translationService';
+import midnightBanner from '../elements/midnightBanner';
+
+class MidnightBannerAssert {
+  async assertSeeMidnightBanner() {
+    await midnightBanner.title.waitForDisplayed();
+    expect(await midnightBanner.title.getText()).to.equal(await t('midnightEventBanner.title'));
+    await midnightBanner.closeButton.waitForDisplayed();
+    await midnightBanner.bannerDescriptionText.waitForDisplayed();
+    expect(await midnightBanner.bannerDescriptionText.getText()).to.equal(await t('midnightEventBanner.description'));
+    await midnightBanner.learnMoreButton.waitForDisplayed();
+    expect(await midnightBanner.learnMoreButton.getText()).to.equal(await t('midnightEventBanner.learnMore'));
+    await midnightBanner.remindMeLaterButton.waitForDisplayed();
+    expect(await midnightBanner.remindMeLaterButton.getText()).to.equal(await t('midnightEventBanner.reminder'));
+  }
+
+  async assertSeeMidnightURL() {
+    const EXPECTED_MIDNIGHT_URL = 'https://www.midnight.gd';
+    const currentUrl = await browser.getUrl();
+    expect(currentUrl).to.contain(EXPECTED_MIDNIGHT_URL);
+  }
+}
+
+export default new MidnightBannerAssert();

packages/e2e-tests/src/elements/midnightBanner.ts

@@ -0,0 +1,36 @@
+/* global WebdriverIO */
+import { ChainablePromiseElement } from 'webdriverio';
+
+class MidnightBanner {
+  private readonly TITLE = '[data-testid="midnight-event-banner-title"]';
+  private readonly LEARN_MORE_BUTTON = '[data-testid="learn-more-button-extended"]';
+  private readonly REMIND_ME_LATER_BUTTON = '[data-testid="remind-me-later-button-extended"]';
+  private readonly CLOSE_BUTTON = '[data-testid="midnight-event-banner-close-button"]';
+  private readonly BANNER_DESCRIPTION_TEXT = '[data-testid="midnight-event-banner-description"]';
+
+  get title(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.TITLE);
+  }
+
+  get learnMoreButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.LEARN_MORE_BUTTON);
+  }
+  get closeButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.CLOSE_BUTTON);
+  }
+
+  get bannerDescriptionText(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.BANNER_DESCRIPTION_TEXT);
+  }
+
+  get remindMeLaterButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.REMIND_ME_LATER_BUTTON);
+  }
+
+  async clickOnLearnMoreButton() {
+    await this.learnMoreButton.waitForClickable();
+    await this.learnMoreButton.click();
+  }
+}
+
+export default new MidnightBanner();

packages/e2e-tests/src/features/MidnightBanner.feature

@@ -0,0 +1,12 @@
+@Midnight-Banner @Testnet
+
+Feature: Midnight - banner view
+
+  Background:
+    Given Wallet is synced
+
+  @LW-13628
+  Scenario: "Discover the Midnight Token Distribution" banner - click on "Learn more" button
+    Given "Discover the Midnight Token Distribution" banner is displayed
+    When I click on "Learn more" button on "Discover the Midnight Token Distribution" banner
+    Then "www.midnight.gd" page is displayed in new tab

packages/e2e-tests/src/hooks/beforeTagHooks.ts

@@ -38,7 +38,7 @@ Before(
 
 Before(
   {
-    tags: '@AddressBook-extended or @Transactions-Extended or @Tokens-extended or @Staking-Extended or @LockWallet-extended or @Top-Navigation-Extended or @NFTs-Extended or @NFT-Folders-Extended or @SendTx-Bundles-Extended or @SendTx-Simple-Extended or @MainNavigation-Extended or @Send-Transaction-Metadata-Extended or @Settings-Extended or @DAppConnector or @DAppConnector-Extended or @Analytics-Settings-Extended or @Banxa-Extended or @GeneratePaperWallet or @SignMessage-Extended or @WalletAddressPage-Extended or @NamiMode-Extended or @VotingCenterExtended or @DAppExplorer-Extended or @WalletRenaming-Extended or @SharedWalletOnboarding-Extended or @NftPrintLab-Extended'
+    tags: '@AddressBook-extended or @Transactions-Extended or @Tokens-extended or @Staking-Extended or @LockWallet-extended or @Top-Navigation-Extended or @NFTs-Extended or @NFT-Folders-Extended or @SendTx-Bundles-Extended or @SendTx-Simple-Extended or @MainNavigation-Extended or @Send-Transaction-Metadata-Extended or @Settings-Extended or @DAppConnector or @DAppConnector-Extended or @Analytics-Settings-Extended or @Banxa-Extended or @GeneratePaperWallet or @SignMessage-Extended or @WalletAddressPage-Extended or @NamiMode-Extended or @VotingCenterExtended or @DAppExplorer-Extended or @WalletRenaming-Extended or @SharedWalletOnboarding-Extended or @NftPrintLab-Extended or @Midnight-Banner'
   },
   async () => {
     await extendedViewRepositoryWalletInitialization([TestWalletName.TestAutomationWallet]);

packages/e2e-tests/src/steps/midnightBannerSteps.ts

@@ -0,0 +1,17 @@
+import { Given, When, Then } from '@cucumber/cucumber';
+import midnightBanner from '../elements/midnightBanner';
+import midnightBannerAssert from '../assert/midnightBannerAssert';
+import { switchToLastWindow } from '../utils/window';
+
+Given(/^"Discover the Midnight Token Distribution" banner is displayed$/, async () => {
+  await midnightBannerAssert.assertSeeMidnightBanner();
+});
+
+When(/^I click on "Learn more" button on "Discover the Midnight Token Distribution" banner$/, async () => {
+  await midnightBanner.clickOnLearnMoreButton();
+});
+
+Then(/^"www.midnight.gd" page is displayed in new tab$/, async () => {
+  await switchToLastWindow();
+  await midnightBannerAssert.assertSeeMidnightURL();
+});

packages/e2e-tests/wdio.conf.base.ts

@@ -104,7 +104,11 @@ export const config: WebdriverIO.Config = {
       './src/features/NetworkRequestsCounting.feature'
     ],
     batch15: ['./src/features/NFTsFolders*.feature', './src/features/SignMessage.feature'],
-    batch16: ['./src/features/SendTransactionBundlesExtended*.feature', './src/features/e2e/SignDataDAppE2E.feature']
+    batch16: [
+      './src/features/SendTransactionBundlesExtended*.feature',
+      './src/features/e2e/SignDataDAppE2E.feature',
+      './src/features/MidnightBanner.feature'
+    ]
   },
   automationProtocol: 'webdriver',
   exclude: [],