LIVE-448 - Add playwright test suite for market page

src/renderer/screens/market/CountervalueSelect.tsx

@@ -42,6 +42,7 @@ function CounterValueSelect({
     <>
       <Track onUpdate event="MarketCounterValueSelect" counterValue={cvOption && cvOption.value} />
       <Dropdown
+        data-test-id="market-counter-value-select"
         label={t("market.currency")}
         name="currency"
         menuPortalTarget={document.body}

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

@@ -149,7 +149,11 @@ function MarkeCoinChartComponent({
             )}
           </Flex>
         </Flex>
-        <Bar onTabChange={setRange} initialActiveIndex={activeRangeIndex}>
+        <Bar
+          data-test-id="market-coin-range-select"
+          onTabChange={setRange}
+          initialActiveIndex={activeRangeIndex}
+        >
           {ranges.map(key => (
             <Text color="inherit" variant="small" key={key}>
               {t(`market.range.${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

@@ -320,6 +320,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

@@ -141,7 +141,7 @@ function MarketRowItem({
           <TableCell loading />
         </TableRow>
       ) : (
-        <TableRow onClick={onCurrencyClick}>
+        <TableRow data-test-id={`market-${currency?.ticker}-row`} onClick={onCurrencyClick}>
           <TableCell>{currency?.marketcapRank ?? "-"}</TableCell>
           <TableCell>
             <CryptoCurrencyIconWrapper>
@@ -168,12 +168,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>
                   )}
@@ -214,7 +223,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

@@ -110,7 +110,12 @@ 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}>
@@ -122,6 +127,7 @@ export default function Market() {
           </Flex>
           <Flex mx={3}>
             <Dropdown
+              data-test-id="market-range-select"
               label={t("market.rangeLabel")}
               menuPortalTarget={document.body}
               onChange={updateTimeRange}

tests/models/Layout.ts

@@ -9,6 +9,7 @@ export class Layout {
   readonly inputWarning: Locator;
   readonly drawerCollapseButton: Locator;
   readonly drawerPortfolioButton: Locator;
+  readonly drawerMarketButton: Locator;
   readonly drawerAccountsButton: Locator;
   readonly drawerDiscoverButton: Locator;
   readonly drawerSendButton: Locator;
@@ -36,6 +37,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");
@@ -69,6 +71,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,37 @@
+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;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.searchInput = page.locator("data-test-id=market-search-input");
+    this.counterValueSelect = page.locator("data-test-id=market-counter-value-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");
+  }
+
+  async search(query: string) {
+    await this.searchInput.fill(query);
+  }
+
+  async openFilterDrawer() {
+    await this.filterDrawerButton.click();
+  }
+
+  async openCoinPage(ticker: string) {
+    const coinRow = this.page.locator(`data-test-id=market-${ticker}-row`);
+    await coinRow.click();
+  }
+
+  async openBuyPage(ticker: string) {
+    const buyButton = this.page.locator(`data-test-id=market-${ticker}-buy-button`);
+    await buyButton.click();
+  }
+}

tests/specs/market.spec.ts

@@ -0,0 +1,39 @@
+import { expect } from "@playwright/test";
+
+import test from "../fixtures/common";
+import { MarketPage } from "../models/MarketPage";
+import { Layout } from "../models/Layout";
+import { MarketCoinPage } from "../models/MarketCoinPage";
+
+test.use({ userdata: "skip-onboarding" });
+
+test("Market", async ({ page }) => {
+  const marketPage = new MarketPage(page);
+  const marketCoinPage = new MarketCoinPage(page);
+  const layout = new Layout(page);
+
+  await test.step("go to market", async () => {
+    await layout.goToMarket();
+    expect(await page.screenshot()).toMatchSnapshot("market-page.png");
+  });
+
+  await test.step("go to market -> bitcoin", async () => {
+    await marketPage.openCoinPage("btc");
+    expect(await page.screenshot()).toMatchSnapshot("market-btc-page.png");
+  });
+
+  await test.step("go to market -> bitcoin -> buy", async () => {
+    await marketCoinPage.openBuyPage();
+    expect(await page.screenshot()).toMatchSnapshot("market-btc-buy-page.png");
+  });
+
+  await test.step("go to market", async () => {
+    await layout.goToMarket();
+    expect(await page.screenshot()).toMatchSnapshot("market-page.png");
+  });
+
+  await test.step("go to market -> buy bitcoin", async () => {
+    await marketPage.openBuyPage("btc");
+    expect(await page.screenshot()).toMatchSnapshot("market-btc-buy-page.png");
+  });
+});