LIVE-448 - Add playwright test suite for market page (#4736)

* Add playwright test suite for market page

* update screenshots (linux)

* update screenshots (windows)

* update screenshots (windows)

* update screenshots (linux)

* update screenshots (windows)

* Fix screenshots

* Update market tests

* update screenshots (linux)

* update screenshots (windows)

* update screenshots (windows)

* Fix conflicts

* Update LLC

* update screenshots (linux)

* update screenshots (linux)

* update screenshots (linux)

* ci run

* Fix merge

* update screenshots (windows)

* market page tests

* update screenshots (linux)

* update screenshots (windows)

* last ci run

* Split sorting test step in two

Co-authored-by: Team Live <[email protected]>
Co-authored-by: Nabil Bourenane <[email protected]>

src/renderer/components/LoadingPlaceholder.tsx

@@ -38,7 +38,7 @@ const Activity = styled.div`
 
 function LoadingPlaceholder({ style }: { style?: any }) {
   return (
-    <Wrapper style={style}>
+    <Wrapper data-test-id="loading-placeholder" style={style}>
       <Activity />
     </Wrapper>
   );

src/renderer/screens/market/MarketCoinScreen/MarketCoinChart.tsx

@@ -150,7 +150,11 @@ function MarkeCoinChartComponent({
             )}
           </Flex>
         </Flex>
-        <Bar onTabChange={setRange} initialActiveIndex={activeRangeIndex}>
+        <Bar
+          data-test-id="market-coin-range-select"
+          onTabChange={setRange}
+          initialActiveIndex={activeRangeIndex}
+        >
           {ranges
             .filter(k => k !== "1h")
             .map(key => (

src/renderer/screens/market/MarketCoinScreen/index.tsx

@@ -208,7 +208,7 @@ export default function MarketCoinScreen() {
           <Flex pl={3} flexDirection="column" alignItems="left" pr={16}>
             <Flex flexDirection="row" alignItems="center">
               <Title>{name}</Title>
-              <StarContainer onClick={toggleStar}>
+              <StarContainer data-test-id="market-coin-star-button" onClick={toggleStar}>
                 <Icon name={isStarred > 0 ? "StarSolid" : "Star"} size={18} />
               </StarContainer>
             </Flex>
@@ -221,19 +221,25 @@ export default function MarketCoinScreen() {
           {internalCurrency && (
             <>
               {availableOnBuy && (
-                <Button variant="shade" mr={1} onClick={onBuy}>
+                <Button
+                  data-test-id="market-coin-buy-button"
+                  variant="shade"
+                  mr={1}
+                  onClick={onBuy}
+                >
                   {t("accounts.contextMenu.buy")}
                 </Button>
               )}
               {availableOnSwap && (
-                <Button variant="shade" onClick={onSwap}>
+                <Button data-test-id="market-coin-swap-button" variant="shade" onClick={onSwap}>
                   {t("accounts.contextMenu.swap")}
                 </Button>
               )}
             </>
           )}
           <Flex justifyContent="flex-end" ml={4}>
             <CounterValueSelect
+              data-test-id="market-coin-counter-value-select"
               counterCurrency={counterCurrency}
               setCounterCurrency={setCounterCurrency}
               supportedCounterCurrencies={supportedCounterCurrencies}

src/renderer/screens/market/MarketList.tsx

@@ -314,6 +314,7 @@ function MarketList({
           )}
           <TableRow header>
             <SortTableCell
+              data-test-id="market-sort-button"
               onClick={toggleSortBy}
               orderByKey="market_cap"
               orderBy={orderBy}
@@ -331,6 +332,7 @@ function MarketList({
               <TableCell disabled>{t("market.marketList.last7d")}</TableCell>
             )}
             <TableCell
+              data-test-id="market-star-button"
               disabled={starredMarketCoins.length <= 0 && starred.length <= 0}
               onClick={toggleStarredAccounts}
             >

src/renderer/screens/market/MarketRowItem.tsx

@@ -143,7 +143,7 @@ function MarketRowItem({
           <TableCell loading />
         </TableRow>
       ) : (
-        <TableRow onClick={onCurrencyClick}>
+        <TableRow data-test-id={`market-${currency?.ticker}-row`} onClick={onCurrencyClick}>
           <TableCell>{currency?.marketcapRank ?? "-"}</TableCell>
           <TableCell overflow="hidden" mr={3}>
             <CryptoCurrencyIconWrapper>
@@ -170,12 +170,21 @@ function MarketRowItem({
               {currency.internalCurrency && (
                 <>
                   {availableOnBuy && (
-                    <Button variant="shade" mr={1} onClick={onBuy}>
+                    <Button
+                      data-test-id={`market-${currency?.ticker}-buy-button`}
+                      variant="shade"
+                      mr={1}
+                      onClick={onBuy}
+                    >
                       {t("accounts.contextMenu.buy")}
                     </Button>
                   )}
                   {availableOnSwap && (
-                    <Button variant="shade" onClick={onSwap}>
+                    <Button
+                      data-test-id={`market-${currency?.ticker}-swap-button`}
+                      variant="shade"
+                      onClick={onSwap}
+                    >
                       {t("accounts.contextMenu.swap")}
                     </Button>
                   )}
@@ -218,7 +227,7 @@ function MarketRowItem({
               )}
             </TableCell>
           )}
-          <TableCell onClick={onStarClick}>
+          <TableCell data-test-id={`market-${currency?.ticker}-star-button`} onClick={onStarClick}>
             <Icon name={isStarred ? "StarSolid" : "Star"} size={18} />
           </TableCell>
         </TableRow>

src/renderer/screens/market/SideDrawerFilter.tsx

@@ -34,7 +34,13 @@ export default function SideDrawerFilter({
 
   return (
     <>
-      <Button Icon={Icons.FiltersRegular} variant="shade" outline onClick={openDrawer} />
+      <Button
+        data-test-id="market-filter-drawer-button"
+        Icon={Icons.FiltersRegular}
+        variant="shade"
+        outline
+        onClick={openDrawer}
+      />
       <SideDrawer
         isOpen={isOpen}
         onRequestClose={closeDrawer}

src/renderer/screens/market/index.tsx

@@ -108,17 +108,27 @@ export default function Market() {
       <Title>{t("market.title")}</Title>
       <Flex flexDirection="row" pr="6px" my={2} alignItems="center" justifyContent="space-between">
         <SearchContainer>
-          <SearchInput value={search} onChange={updateSearch} placeholder={t("common.search")} />
+          <SearchInput
+            data-test-id="market-search-input"
+            value={search}
+            onChange={updateSearch}
+            placeholder={t("common.search")}
+          />
         </SearchContainer>
         <Flex flexDirection="row" alignItems="center" justifyContent="flex-end">
-          <Flex width="290px" justifyContent="flex-end" ml={3}>
+          <Flex
+            data-test-id="market-countervalue-select"
+            width="290px"
+            justifyContent="flex-end"
+            ml={3}
+          >
             <CounterValueSelect
               counterCurrency={counterCurrency}
               setCounterCurrency={setCounterCurrency}
               supportedCounterCurrencies={supportedCounterCurrencies}
             />
           </Flex>
-          <Flex mx={3}>
+          <Flex data-test-id="market-range-select" mx={3}>
             <Dropdown
               label={t("market.rangeLabel")}
               menuPortalTarget={document.body}

tests/models/Layout.ts

@@ -3,13 +3,15 @@ import { Page, Locator } from "@playwright/test";
 export class Layout {
   readonly page: Page;
   readonly totalBalance: Locator;
+  readonly pageScroller: Locator;
   readonly loadingLogo: Locator;
   readonly logo: Locator;
   readonly bigSpinner: Locator;
   readonly inputError: Locator;
   readonly inputWarning: Locator;
   readonly drawerCollapseButton: Locator;
   readonly drawerPortfolioButton: Locator;
+  readonly drawerMarketButton: Locator;
   readonly drawerAccountsButton: Locator;
   readonly drawerDiscoverButton: Locator;
   readonly drawerSendButton: Locator;
@@ -37,6 +39,7 @@ export class Layout {
     // drawer
     this.drawerCollapseButton = page.locator("data-test-id=drawer-collapse-button");
     this.drawerPortfolioButton = page.locator("data-test-id=drawer-dashboard-button");
+    this.drawerMarketButton = page.locator("data-test-id=drawer-market-button");
     this.drawerAccountsButton = page.locator("data-test-id=drawer-accounts-button");
     this.drawerDiscoverButton = page.locator("data-test-id=drawer-catalog-button");
     this.drawerSendButton = page.locator("data-test-id=drawer-send-button");
@@ -57,6 +60,7 @@ export class Layout {
     this.discreetTooltip = page.locator("#tippy-12"); //automatically generated tippy id but it's consistent
 
     // general
+    this.pageScroller = page.locator("id=page-scroller");
     this.loadingLogo = page.locator("id=loading-logo");
     this.logo = page.locator("data-test-id=logo");
     this.inputError = page.locator("id=input-error"); // no data-test-id because css style is applied
@@ -71,6 +75,10 @@ export class Layout {
     await this.drawerPortfolioButton.click();
   }
 
+  async goToMarket() {
+    await this.drawerMarketButton.click();
+  }
+
   async goToAccounts() {
     await this.drawerAccountsButton.click();
   }

tests/models/MarketCoinPage.ts

@@ -0,0 +1,27 @@
+import { Page, Locator } from "@playwright/test";
+
+export class MarketCoinPage {
+  readonly page: Page;
+  readonly buyButton: Locator;
+  readonly swapButton: Locator;
+  readonly counterValueSelect: Locator;
+  readonly marketRangeSelect: Locator;
+  readonly starFilterButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.buyButton = page.locator("data-test-id=market-coin-buy-button");
+    this.swapButton = page.locator("data-test-id=market-coin-swap-button");
+    this.counterValueSelect = page.locator("data-test-id=market-coin-counter-value-select");
+    this.marketRangeSelect = page.locator("data-test-id=market-coin-range-select");
+    this.starFilterButton = page.locator("data-test-id=market-coin-star-button");
+  }
+
+  async openBuyPage() {
+    await this.buyButton.click();
+  }
+
+  async openSwapPage() {
+    await this.swapButton.click();
+  }
+}

tests/models/MarketPage.ts

@@ -0,0 +1,83 @@
+import { Page, Locator } from "@playwright/test";
+
+export class MarketPage {
+  readonly page: Page;
+  readonly searchInput: Locator;
+  readonly counterValueSelect: Locator;
+  readonly marketRangeSelect: Locator;
+  readonly filterDrawerButton: Locator;
+  readonly starFilterButton: Locator;
+  readonly sortButton: Locator;
+  readonly loadingPlaceholder: Locator;
+  readonly coinRow: Function;
+  readonly starButton: Function;
+  readonly buyButton: Function;
+  readonly swapButton: Function;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.searchInput = page.locator("data-test-id=market-search-input");
+    this.counterValueSelect = page.locator("data-test-id=market-countervalue-select");
+    this.marketRangeSelect = page.locator("data-test-id=market-range-select");
+    this.filterDrawerButton = page.locator("data-test-id=market-filter-drawer-button");
+    this.starFilterButton = page.locator("data-test-id=market-star-button");
+    this.sortButton = page.locator("data-test-id=market-sort-button");
+    this.loadingPlaceholder = page.locator("data-test-id=loading-placeholder");
+    this.coinRow = (ticker: string): Locator => page.locator(`data-test-id=market-${ticker}-row`);
+    this.starButton = (ticker: string): Locator =>
+      page.locator(`data-test-id=market-${ticker}-star-button`);
+    this.buyButton = (ticker: string): Locator =>
+      page.locator(`data-test-id=market-${ticker}-buy-button`);
+    this.swapButton = (ticker: string): Locator =>
+      page.locator(`data-test-id=market-${ticker}-swap-button`);
+  }
+
+  async search(query: string) {
+    await this.searchInput.fill(query);
+  }
+
+  async openFilterDrawer() {
+    await this.filterDrawerButton.click();
+  }
+
+  async toggleInvertSort() {
+    await this.sortButton.click();
+  }
+
+  async switchCountervalue(ticker: string) {
+    await this.counterValueSelect.click();
+    // TODO: For some reason need to hack selects like that
+    await this.page.click('#react-select-2-listbox div div:has-text("Thai Baht - THB")');
+  }
+
+  async switchMarketRange(range: string) {
+    await this.marketRangeSelect.click();
+    // TODO: For some reason need to hack selects like that
+    await this.page.click(`text=${range}`);
+  }
+
+  async toggleStarFilter() {
+    await this.starFilterButton.click();
+  }
+
+  async openCoinPage(ticker: string) {
+    await this.coinRow(ticker).click();
+  }
+
+  async starCoin(ticker: string) {
+    await this.starButton(ticker).click();
+  }
+
+  async openBuyPage(ticker: string) {
+    await this.buyButton(ticker).click();
+  }
+
+  async openSwapPage(ticker: string) {
+    await this.swapButton(ticker).click();
+  }
+
+  async waitForLoading() {
+    await this.loadingPlaceholder.first().waitFor({ state: "detached" });
+    await this.swapButton("btc").waitFor({ state: "attached" }); // swap buttons are displayed few seconds after
+  }
+}

tests/playwright.config.ts

@@ -4,7 +4,7 @@ const config: PlaywrightTestConfig = {
   testDir: "specs/",
   testIgnore: "specs/recorder.spec.ts",
   outputDir: "./artifacts/test-results",
-  timeout: 60000,
+  timeout: process.env.CI ? 60000 : 600000,
   globalTimeout: 0,
   globalSetup: require.resolve("./utils/global-setup"),
   globalTeardown: require.resolve("./utils/global-teardown"),