fix: e2e

packages/client/docs/ui/UI-docs.md

@@ -45,7 +45,7 @@ File location: `../apps/MainRoute/widgets/workspace/Workspace.tsx`
 
   ![Workspace Header](./images/browser/workspace-header.png) <br/>
 
-  - Navigation items `ALL`, `EUR`, `USD`, `GBP`, `AUD`, and `NZD` can be found on the same file, written as `<NavItem />` components - which are dynamically loaded. It is also segregated by a `<LeftNav>` _styled_ component.
+  - Navigation items `All`, `EUR`, `USD`, `GBP`, `AUD`, and `NZD` can be found on the same file, written as `<NavItem />` components - which are dynamically loaded. It is also segregated by a `<LeftNav>` _styled_ component.
 
   - Tile view buttons (Normal view & Analytics view) are also found on the same file, written as `<NavItem />` components - segregated by a `<RightNav>` _styled_ component.
 

packages/client/e2e/fx-analytics.spec.ts

@@ -4,14 +4,14 @@ import { test } from "./fixtures"
 import { ElementTimeout, isOpenFin } from "./utils"
 
 const currencyPairs = [
-  "EURUSD",
-  "USDJPY",
-  "GBPUSD",
-  "GBPJPY",
-  "EURJPY",
-  "AUDUSD",
-  "NZDUSD",
-  "EURCAD",
+  "EUR/USD",
+  "USD/JPY",
+  "GBP/USD",
+  "GBP/JPY",
+  "EUR/JPY",
+  "AUD/USD",
+  "NZD/USD",
+  "EUR/CAD",
 ]
 
 const currencies = ["NZD", "USD", "JPY", "GBP", "EUR", "CAD", "AUD"]
@@ -64,7 +64,7 @@ test.describe("Analytics panel", () => {
 
       await expect(pnlLocator).toHaveAttribute(
         "color",
-        pnlValue < 0 ? "negative" : "positive",
+        pnlValue < 0 ? "Colors/Border/border-sell" : "Colors/Border/border-buy",
       )
     })
   })
@@ -108,20 +108,14 @@ test.describe("Analytics panel", () => {
 
   test.describe("PnL section", () => {
     test("PnL value is displayed for each currencies", async () => {
-      const pnlSection = analyticsPage
-        .locator("div")
-        .filter({ has: analyticsPage.locator("div", { hasText: "PnL" }) })
-        .last()
-
       for (const currencypair of currencyPairs) {
-        const amountString = await pnlSection
-          .locator("div", {
-            hasText: currencypair,
-          })
-          .first()
+        const amountString = await analyticsPage
+          .getByTestId(`pnlbar-${currencypair}`)
           .getByTestId("priceLabel")
           .textContent()
+
         const regexp = RegExp(`[-,.0-9km]`, "g")
+
         expect(
           amountString,
           `amount for ${currencypair} doesn't match abbreviated numerical pattern`,

packages/client/e2e/fx-spot-tile.spec.ts

@@ -44,7 +44,7 @@ test.describe("Spot Tile", () => {
         .nth(1)
       await expect(blotterTradeID).toHaveText(tradeId)
 
-      await tilePage.locator("[data-testid='tabItem-ALL']").click()
+      await tilePage.locator("[data-testid='tabItem-All']").click()
     })
 
     test("When I buy USD/JPY then a tile displays in green with confirmation message", async () => {
@@ -133,7 +133,7 @@ test.describe("Spot Tile", () => {
 
   test.describe("Toggle between prices and graph views", () => {
     test("When I click the graph icon on the Live Rates bar then I should toggle from graph to price views", async () => {
-      const toggle = tilePage.locator("[data-testid='toggleButton']")
+      const toggle = tilePage.locator("[data-testid='action-toggleTileView']")
 
       // first click, goes into normal mode, should be no graphs
       await toggle.click()
@@ -199,7 +199,7 @@ test.describe("Spot Tile", () => {
         .locator('div[aria-label="Lives Rates Tiles"] > div')
         .count()
       expect(totalNZDTiles).toBe(1)
-      await tilePage.locator("[data-testid='tabItem-ALL']").click()
+      await tilePage.locator("[data-testid='tabItem-All']").click()
     })
   })
 })

packages/client/package.json

@@ -99,7 +99,7 @@
     "next": "14.2.13"
   },
   "optionalDependencies": {
-    "@adaptive-uikit/figma-to-theme": "0.0.1"
+    "@adaptive-uikit/figma-to-theme": "0.0.2"
   },
   "devDependencies": {
     "@adaptive/hydra-web-codegen": "4.70.0",

packages/client/src/client/App/Analytics/PnL/PNLBar.tsx

@@ -52,7 +52,7 @@ const PNLBar = ({
   const base = symbol.slice(0, 3)
   const terms = symbol.slice(3)
   return (
-    <BarContainer>
+    <BarContainer data-testid={`pnlbar-${base + "/" + terms}`}>
       <Typography
         variant="Text xs/Regular"
         color="Colors/Text/text-quaternary (500)"

packages/client/src/client/App/LiveRates/Tile/PriceMovement/PriceMovement.styles.ts

@@ -8,15 +8,15 @@ export const MovementIconUP = styled(FaSortUp)<{ $show: boolean }>`
     theme.newTheme.color["Colors/Text/text-success-primary (600)"]};
   top: 50%;
   margin-top: -16px;
-`
+` // TODO Dave to confirm new negative and positive colours
 export const MovementIconDown = styled(FaSortDown)<{ $show: boolean }>`
   position: absolute;
   visibility: ${({ $show: show }) => (show ? "visible" : "hidden")};
   color: ${({ theme }) =>
     theme.newTheme.color["Colors/Text/text-error-primary (600)"]};
   bottom: 50%;
   margin-bottom: -16px;
-`
+` // TODO Dave to confirm new negative and positive colours
 
 export const MovementValue = styled.div`
   padding: ${({ theme }) => theme.newTheme.spacing.lg} 0;