Add sorting e2e tests

src/typescript/frontend/src/components/emoji-picker/EmojiPickerWithInput.tsx

@@ -316,6 +316,7 @@ export const EmojiPickerWithInput = ({
           >
             <EmojiPicker
               id="picker"
+              data-testid="picker"
               className={mode}
               drag={(e) => ctrls.start(e, { snapToCursor: false })}
               filterEmojis={filterEmojis}

src/typescript/frontend/src/components/pages/home/components/emoji-table/ClientGrid.tsx

@@ -53,6 +53,7 @@ export const ClientGrid = ({
             prevIndex={i}
             runInitialAnimation={true}
             sortBy={sortBy}
+            data-testid="market-grid-item"
           />
         );
       })}

src/typescript/frontend/tests/e2e/market-order.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from "@playwright/test";
+import { EmojicoinClient } from "../../../sdk/src/client/emojicoin-client";
+import { getFundedAccount } from "../../../sdk/src/utils/test/test-accounts";
+import { ONE_APT_BIGINT, sleep, SYMBOL_EMOJI_DATA } from "../../../sdk/src";
+
+test("check sorting order", async ({ page }) => {
+  const user = getFundedAccount("777");
+  const rat = SYMBOL_EMOJI_DATA.byName("rat")!.emoji;
+  const markets = [
+    [rat, SYMBOL_EMOJI_DATA.byName("cat")!.emoji],
+    [rat, SYMBOL_EMOJI_DATA.byName("dog")!.emoji],
+    [rat, SYMBOL_EMOJI_DATA.byName("eagle")!.emoji],
+    [rat, SYMBOL_EMOJI_DATA.byName("sauropod")!.emoji],
+  ];
+
+  const client = new EmojicoinClient();
+
+  for (let i = 0; i < markets.length; i++) {
+    await client.register(user, markets[i]);
+    await client.buy(user, markets[i], 1n * ONE_APT_BIGINT / 100n * BigInt(10 ** (markets.length - i)));
+  }
+
+  await page.goto("/home");
+
+  await sleep(10000);
+
+  const search = page.getByTestId("emoji-input");
+  expect(search).toBeVisible();
+  await search.click();
+
+  const picker = page.getByTestId("picker");
+  expect(picker).toBeVisible();
+
+  const emojiSearch = page.getByPlaceholder("Search");
+  expect(emojiSearch).toBeVisible();
+  await emojiSearch.fill("rat");
+
+  await picker.getByLabel(rat).click();
+
+  let marketGridItems = page.getByTestId("market-grid-item");
+  expect(marketGridItems).toHaveCount(markets.length);
+
+  const filters = page.getByText(/{Sort/);
+  expect(filters).toBeVisible();
+
+  await filters.click();
+
+  const dailyVolume = page.locator('#emoji-grid-header').getByText('24h Volume');
+  expect(dailyVolume).toBeVisible();
+
+  const bumpOrder = page.locator('#emoji-grid-header').getByText('Bump Order');
+  expect(bumpOrder).toBeVisible();
+
+  await dailyVolume.click();
+
+  marketGridItems = page.getByTestId("market-grid-item");
+  expect(marketGridItems).toHaveText(markets.map(e => new RegExp(e.join(""))));
+
+  await filters.click();
+  await bumpOrder.click();
+
+  marketGridItems = page.getByTestId("market-grid-item");
+  expect(marketGridItems).toHaveText(markets.map(e => new RegExp(e.join(""))).reverse());
+});

src/typescript/frontend/tests/e2e/search.spec.ts

@@ -5,7 +5,8 @@ import { SYMBOL_EMOJI_DATA } from "../../../sdk/src";
 
 test("check search results", async ({ page }) => {
   const user = getFundedAccount("666");
-  const symbols = [SYMBOL_EMOJI_DATA.byName("cat")!.emoji, SYMBOL_EMOJI_DATA.byName("cat")!.emoji];
+  const cat = SYMBOL_EMOJI_DATA.byName("cat")!.emoji;
+  const symbols = [cat,cat];
 
   const client = new EmojicoinClient();
 
@@ -15,7 +16,19 @@ test("check search results", async ({ page }) => {
 
   const search = page.getByTestId("emoji-input");
   expect(search).toBeVisible();
-  await search.fill(symbols.join(""));
+  await search.click();
+
+  const picker = page.getByTestId("picker");
+  expect(picker).toBeVisible();
+
+  const emojiSearch = page.getByPlaceholder("Search");
+  expect(emojiSearch).toBeVisible();
+  await emojiSearch.fill("cat");
+
+  const emojiSearchCatButton = picker.getByLabel(cat).first();
+  expect(emojiSearchCatButton).toBeVisible();
+  await emojiSearchCatButton.click();
+  await emojiSearchCatButton.click();
 
   const marketCard = page.getByText("cat,cat", { exact: true });
   expect(marketCard).toBeVisible();