diff --git a/src/client/src/App/Analytics/PnL/__tests__/PNLBar.test.tsx b/src/client/src/App/Analytics/PnL/__tests__/PNLBar.test.tsx index 4f3a9ca3d4..818e7f5938 100644 --- a/src/client/src/App/Analytics/PnL/__tests__/PNLBar.test.tsx +++ b/src/client/src/App/Analytics/PnL/__tests__/PNLBar.test.tsx @@ -27,17 +27,4 @@ describe("PNLBar", () => { expect(screen.getByTestId("priceLabel").textContent).toBe(`-26,043.69`) }) - - it("renders the bar correctly", () => { - const { container } = render( - - - , - ) - expect(container.firstChild).toMatchSnapshot() - }) }) diff --git a/src/client/src/App/Analytics/PnL/__tests__/__snapshots__/PNLBar.test.tsx.snap b/src/client/src/App/Analytics/PnL/__tests__/__snapshots__/PNLBar.test.tsx.snap deleted file mode 100644 index 09df91a5fc..0000000000 --- a/src/client/src/App/Analytics/PnL/__tests__/__snapshots__/PNLBar.test.tsx.snap +++ /dev/null @@ -1,150 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`PNLBar > renders the bar correctly 1`] = ` -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -.c5 { - width: 100%; - -webkit-transition: -webkit-transform 0.5s; - -webkit-transition: transform 0.5s; - transition: transform 0.5s; - font-size: 11px; - -webkit-transition-timing-function: cubic-bezier(0.165,0.84,0.44,1); - transition-timing-function: cubic-bezier(0.165,0.84,0.44,1); -} - -.c2 { - -webkit-flex: 0 1 20px; - -ms-flex: 0 1 20px; - flex: 0 1 20px; -} - -.c9 { - width: 100%; - height: 20px; -} - -.c6 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - height: 1.1rem; - -webkit-transition: -webkit-transform 0.2s; - -webkit-transition: transform 0.2s; - transition: transform 0.2s; - color: #ff274b; - padding-bottom: 0px; -} - -.c6:hover { - -webkit-transform: scale(1.64); - -ms-transform: scale(1.64); - transform: scale(1.64); - -webkit-transform-origin: center 12px; - -ms-transform-origin: center 12px; - transform-origin: center 12px; -} - -.c7 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - width: 6px; - height: 6px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - background-color: #ff274b; -} - -.c1 { - -webkit-flex: 0 0 60px; - -ms-flex: 0 0 60px; - flex: 0 0 60px; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - opacity: 0.6; - font-size: 11px; - color: #fff; -} - -.c3 { - width: 100%; -} - -.c8 { - background-color: #444c5f; - height: 0.125rem; - width: 100%; - border: 1px solid #444c5f; -} - -.c10 { - width: 1.6px; - height: 5px; - background-color: #444c5f; - border: 1px solid #444c5f; -} - -
-
- EURAUD -
-
-
-
-
- -26k -
-
-
-
-
-
-
-
-
-`; diff --git a/src/client/src/App/Analytics/Positions/__tests__/Positions.test.tsx b/src/client/src/App/Analytics/Positions/__tests__/Positions.test.tsx index 9168f1e3cd..e6b8ac24d1 100644 --- a/src/client/src/App/Analytics/Positions/__tests__/Positions.test.tsx +++ b/src/client/src/App/Analytics/Positions/__tests__/Positions.test.tsx @@ -119,33 +119,4 @@ describe("Positions", () => { expect(screen.getByTestId("tooltip").textContent).toBe("AUD -1,557,031") }) - - // TODO (5350): fix test failure - Windows snapshot incompatible with Mac - it.skip("should display the correct bubble chart", async () => { - const positionMock$ = new BehaviorSubject< - Record - >(positionMock) - analyticsMock.__setPositionMock(positionMock$) - - const subscription = positions$.subscribe() - const { container } = render( - - - - - , - ) - - expect(container.firstChild).toMatchSnapshot() - - act(() => { - positionMock$.next(positionMock2) - }) - - await new Promise((res) => setTimeout(res, 2200)) - - expect(container.firstChild).toMatchSnapshot() - - subscription.unsubscribe() - }) }) diff --git a/src/client/src/App/Analytics/Positions/__tests__/__snapshots__/Positions.test.tsx.snap b/src/client/src/App/Analytics/Positions/__tests__/__snapshots__/Positions.test.tsx.snap deleted file mode 100644 index 5b7d30594b..0000000000 --- a/src/client/src/App/Analytics/Positions/__tests__/__snapshots__/Positions.test.tsx.snap +++ /dev/null @@ -1,187 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Positions > should display the correct bubble chart 1`] = ` -.c0 { - margin-bottom: 1rem; - font-size: 15px; - font-weight: normal; -} - -.c1 { - text-anchor: middle; - height: 18rem; - overflow: hidden; - position: relative; -} - -
-
- Positions -
-
- -
-`; - -exports[`Positions > should display the correct bubble chart 2`] = ` -.c0 { - margin-bottom: 1rem; - font-size: 15px; - font-weight: normal; -} - -.c1 { - text-anchor: middle; - height: 18rem; - overflow: hidden; - position: relative; -} - -
-
- Positions -
-
- -
-`; diff --git a/src/client/src/App/Analytics/ProfitAndLoss/__tests__/ProfitAndLoss.test.tsx b/src/client/src/App/Analytics/ProfitAndLoss/__tests__/ProfitAndLoss.test.tsx deleted file mode 100644 index 1bc268fb71..0000000000 --- a/src/client/src/App/Analytics/ProfitAndLoss/__tests__/ProfitAndLoss.test.tsx +++ /dev/null @@ -1,84 +0,0 @@ -// import { Subscribe } from "@react-rxjs/core" -import { BehaviorSubject } from "rxjs" - -import { HistoryEntry } from "@/services/analytics" -import { analyticsMock } from "@/services/analytics/__mocks__/_analytics" -// import { TestThemeProvider } from "@/utils/testUtils" - -// import { LineChart, lineChart$ } from "../LineChart" - -vi.mock("@/services/analytics/analytics") - -const historyMock1: HistoryEntry[] = [ - { - timestamp: 1613402446096, - usPnl: -2722245.789415593, - }, - { - timestamp: 1613402456097, - usPnl: -2713309.3362381877, - }, - { - timestamp: 1613402466096, - usPnl: -2700750.747100412, - }, -] - -const historyMock2: HistoryEntry[] = [ - { - timestamp: 1613402446096, - usPnl: -2722245.789415593, - }, - { - timestamp: 1613402456097, - usPnl: -2713309.3362381877, - }, - { - timestamp: 1613402466096, - usPnl: -2700750.747100412, - }, - { - timestamp: 1613402466098, - usPnl: -2700750.74710042, - }, -] - -describe("Profit and Loss", () => { - beforeEach(() => { - analyticsMock.__resetMocks() - }) - - it.skip("renders the chart correctly", () => { - const historyMock$ = new BehaviorSubject(historyMock1) - analyticsMock.__setHistoryMock(historyMock$) - - // const tree = renderer - // .create( - // - // - // - // - // , - // ) - // .toJSON() - - // expect(tree).toMatchSnapshot() - }) - - it.skip("renders the chart with updates", () => { - const historyMock$ = new BehaviorSubject(historyMock2) - analyticsMock.__setHistoryMock(historyMock$) - - // const tree = renderer - // .create( - // - // - // - // - // , - // ) - // .toJSON() - - // expect(tree).toMatchSnapshot() - }) -}) diff --git a/src/client/src/App/Trades/TradesGrid/DateFilter.tsx b/src/client/src/App/Trades/TradesGrid/DateFilter.tsx index dafeca7684..4dc31eae1c 100644 --- a/src/client/src/App/Trades/TradesGrid/DateFilter.tsx +++ b/src/client/src/App/Trades/TradesGrid/DateFilter.tsx @@ -26,8 +26,10 @@ const DateFilterInput = ({ fieldValueName, field, selected, + dataTestId, }: { fieldValueName: "value1" | "value2" + dataTestId?: string field: DateColField selected: DateFilterContent }) => { @@ -46,6 +48,7 @@ const DateFilterInput = ({ }) }} type="date" + data-testid={dataTestId} /> ) } @@ -59,8 +62,12 @@ export const DateFilter = ({ }) => { const colDef = useColDef() const selected = useAppliedDateFilters(field, colDef) + return ( - + { @@ -71,6 +78,7 @@ export const DateFilter = ({ }} /> + onColFilterToggle(field, option)} selected={isSelected} > diff --git a/src/client/src/App/Trades/TradesGrid/components/FilterPopup.tsx b/src/client/src/App/Trades/TradesGrid/components/FilterPopup.tsx index 0fc34f30cd..91fbb21eaa 100644 --- a/src/client/src/App/Trades/TradesGrid/components/FilterPopup.tsx +++ b/src/client/src/App/Trades/TradesGrid/components/FilterPopup.tsx @@ -19,14 +19,14 @@ export const FilterPopupOuter = styled.span` } ` -export const FilterPopupInner = styled.div` +export const FilterPopupInner = styled.div<{ leftAlignFilter: boolean }>` position: absolute; width: fit-content; min-height: 100%; max-height: 8rem; overflow-y: auto; top: 2rem; - left: 10%; + left: ${({ leftAlignFilter }) => (leftAlignFilter ? "83%" : "10%")}; background-color: ${({ theme }) => theme.primary.base}; padding: 6px; box-shadow: ${({ theme }) => theme.core.textColor} 0px 0px 0.3125rem 0px; @@ -36,12 +36,19 @@ export const FilterPopup = ({ parentRef, ariaLabel, children, + leftAlignFilter = false, }: { ariaLabel?: string + leftAlignFilter?: boolean parentRef: React.RefObject } & WithChildren) => ( - + {children} diff --git a/src/client/src/App/Trades/__tests__/FxTrades.filter.test.tsx b/src/client/src/App/Trades/__tests__/FxTrades.filter.test.tsx index dab5818a7c..69577df462 100644 --- a/src/client/src/App/Trades/__tests__/FxTrades.filter.test.tsx +++ b/src/client/src/App/Trades/__tests__/FxTrades.filter.test.tsx @@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event" import { BehaviorSubject } from "rxjs" import { ComparatorType } from "@/App/Trades/TradesState" -import { Trade, tradesTestData } from "@/services/trades" +import { Trade, TradeStatus, tradesTestData } from "@/services/trades" import { tradesMock } from "@/services/trades/__mocks__/_trades" import { setupMockWindow, TestThemeProvider } from "@/utils/testUtils" @@ -62,8 +62,8 @@ describe("for notional column", () => { expect(container.querySelector(notionalFilterMenu)).toBe(null) }) - it.skip("filter icon and menu should work correct", async () => { - const { container, findAllByTestId } = renderComponent() + it("filter icon and menu should work correct", async () => { + const { container } = renderComponent() act(() => { fireEvent.mouseOver( @@ -87,26 +87,150 @@ describe("for notional column", () => { }) expect(input.value).toBe("1000000") - let rows = await findAllByTestId(/trades-grid-row/) + let rows = await screen.findAllByTestId(/trades-grid-row/) expect(rows.length).toBe(2) - act(() => { - userEvent.selectOptions( - container.querySelector("select") as Element, - ComparatorType.Greater, - ) + fireEvent.change(container.querySelector("select") as Element, { + target: { value: ComparatorType.Greater }, + }) }) - rows = await findAllByTestId(/trades-grid-row/) + + rows = await screen.findAllByTestId(/trades-grid-row/) expect(rows.length).toBe(1) act(() => { - userEvent.selectOptions( - container.querySelector("select") as Element, - ComparatorType.NotEqual, - ) + fireEvent.change(container.querySelector("select") as Element, { + target: { value: ComparatorType.NotEqual }, + }) }) - rows = await findAllByTestId(/trades-grid-row/) + rows = await screen.findAllByTestId(/trades-grid-row/) expect(rows.length).toBe(1) }) }) + +// Applies to all column with set filter +describe("Set filter", () => { + setupMockWindow() + + describe("For Status column", () => { + const statusFilterIcon = '[aria-label="Open Status field filter pop up"]' + const statusFilterMenu = + '[aria-label="Filter trades by status field value"]' + + beforeEach(() => { + const tradesSubj = new BehaviorSubject(mockTrades) + tradesMock.__setTrades(tradesSubj.asObservable()) + }) + + it("no filter icon or menu should be rendered", () => { + const { container } = renderComponent() + expect(container.querySelector(statusFilterIcon)).toBe(null) + expect(container.querySelector(statusFilterMenu)).toBe(null) + }) + + it("filter icon and menu should work correct", async () => { + const { container } = renderComponent() + + act(() => { + fireEvent.mouseOver( + screen.getByText("Status").closest("div") as Element, + ) + }) + + expect(container.querySelector(statusFilterIcon)).not.toBe(null) + + act(() => { + fireEvent.click(container.querySelector(statusFilterIcon) as Element) + }) + + expect(container.querySelector(statusFilterMenu)).not.toBe(null) + + let rows = await screen.findAllByTestId(/trades-grid-row/) + + expect(rows.length).toBe(3) + + const selectDoneOption = await screen.findByTestId( + `select-option-${TradeStatus.Done}`, + ) + act(() => { + fireEvent.click(selectDoneOption) + }) + + rows = await screen.findAllByTestId(/trades-grid-row/) + expect(rows.length).toBe(1) + + // Unselect Done option + act(() => { + fireEvent.click(selectDoneOption) + }) + + rows = await screen.findAllByTestId(/trades-grid-row/) + expect(rows.length).toBe(3) + }) + }) +}) + +// Applies to all columns with Date Filter +describe("Date Filter", () => { + setupMockWindow() + + describe("For Trade Date column", () => { + const tradeDateFilterIcon = + '[aria-label="Open Trade Date field filter pop up"]' + const tradeDateFilterMenu = + '[aria-label="Filter trades by tradeDate field value"]' + + beforeEach(() => { + const tradesSubj = new BehaviorSubject(mockTrades) + tradesMock.__setTrades(tradesSubj.asObservable()) + }) + + it("no filter icon or menu should be rendered", () => { + const { container } = renderComponent() + expect(container.querySelector(tradeDateFilterIcon)).toBe(null) + expect(container.querySelector(tradeDateFilterMenu)).toBe(null) + }) + + it("filter icon and menu should work correct", async () => { + const { container } = renderComponent() + + act(() => { + fireEvent.mouseOver( + screen.getByText("Trade Date").closest("div") as Element, + ) + }) + + expect(container.querySelector(tradeDateFilterIcon)).not.toBe(null) + + act(() => { + fireEvent.click(container.querySelector(tradeDateFilterIcon) as Element) + }) + + expect(container.querySelector(tradeDateFilterMenu)).not.toBe(null) + + let rows = await screen.findAllByTestId(/trades-grid-row/) + + expect(rows.length).toBe(3) + const dateInput = (await screen.findByTestId( + "date-filter-input", + )) as HTMLInputElement + + act(() => { + fireEvent.change(dateInput, { target: { value: "2021-01-13" } }) + }) + + rows = await screen.findAllByTestId(/trades-grid-row/) + expect(rows.length).toBe(1) + + act(() => { + fireEvent.change(container.querySelector("select") as Element, { + target: { value: ComparatorType.Greater }, + }) + }) + + rows = await screen.findAllByTestId(/trades-grid-row/) + expect(rows.length).toBe(1) + }) + }) +}) diff --git a/src/client/src/App/Trades/__tests__/FxTrades.quickFilter.test.tsx b/src/client/src/App/Trades/__tests__/FxTrades.quickFilter.test.tsx index 98e0b9e4da..1c4f96f61d 100644 --- a/src/client/src/App/Trades/__tests__/FxTrades.quickFilter.test.tsx +++ b/src/client/src/App/Trades/__tests__/FxTrades.quickFilter.test.tsx @@ -1,4 +1,5 @@ -import { render, screen, within } from "@testing-library/react" +import { fireEvent, render, screen, within } from "@testing-library/react" +import { act } from "react-dom/test-utils" import { BehaviorSubject } from "rxjs" import * as Trades from "@/services/trades" @@ -22,6 +23,15 @@ vi.mock("../TradesState/tableTrades", async () => { useFxTradeRowHighlight: vi.fn().mockReturnValue(undefined), } }) +vi.mock("../TradesGrid/utils") +vi.mock("react-virtualized-auto-sizer", () => ({ + default: ({ + children, + }: { + children: React.FunctionComponent<{ height: number; width: number }> + }) => children({ height: 100, width: 100 }), +})) + const { mockTrades } = Trades.tradesTestData const renderComponent = () => @@ -50,4 +60,29 @@ describe("Trades quick filter", () => { ).queryByRole("textbox")?.textContent, ).toBe("") }) + + it("should filter across columns", async () => { + const tradesSubj = new BehaviorSubject(mockTrades) + tradesMock.__setTrades(tradesSubj) + + renderComponent() + + let rows = await screen.findAllByTestId(/trades-grid-row/) + expect(rows.length).toBe(3) + + const searchTextBox = within( + screen.getByRole("search", { + name: "Search by text across all trade fields", + }), + ).queryByRole("textbox") as HTMLInputElement + + act(() => { + fireEvent.change(searchTextBox, { + target: { value: "Pend" }, + }) + }) + + rows = await screen.findAllByTestId(/trades-grid-row/) + expect(rows.length).toBe(1) + }) }) diff --git a/src/client/src/services/trades/__mocks__/trades.mock.ts b/src/client/src/services/trades/__mocks__/trades.mock.ts index a4653a4a6d..df0681055e 100644 --- a/src/client/src/services/trades/__mocks__/trades.mock.ts +++ b/src/client/src/services/trades/__mocks__/trades.mock.ts @@ -64,7 +64,7 @@ export const mockTrades: FxTrade[] = [ dealtCurrency: "USD", direction: Direction.Buy, spotRate: 103.891, - tradeDate: new Date("2021-01-13T17:32:26.7011799+00:00"), + tradeDate: new Date("2021-01-14T17:32:26.7011799+00:00"), valueDate: new Date("2021-01-15T17:32:26.7012023+00:00"), status: TradeStatus.Pending, }, @@ -76,7 +76,7 @@ export const mockTrades: FxTrade[] = [ dealtCurrency: "USD", direction: Direction.Buy, spotRate: 103.924, - tradeDate: new Date("2021-01-13T20:02:39.4410315+00:00"), + tradeDate: new Date("2021-01-11T20:02:39.4410315+00:00"), valueDate: new Date("2021-01-15T20:02:39.4410596+00:00"), status: TradeStatus.Rejected, },