-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42 from deriv-com/f_ui_fixes
Contract Detail Desktop View and UI Fixes
- Loading branch information
Showing
6 changed files
with
193 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -65,4 +65,4 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => { | |
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from "react" | ||
| import { useNavigate } from "react-router-dom" | ||
| import { X } from "lucide-react" | ||
| import { | ||
| ContractSummary, | ||
| EntryExitDetails, | ||
| OrderDetails, | ||
| Payout, | ||
| } from "./components" | ||
|
|
||
| const DesktopContractDetailsPage: React.FC = () => { | ||
| const navigate = useNavigate() | ||
|
|
||
| return ( | ||
| <div className="flex flex-col h-screen bg-gray-50 w-full" data-testid="desktop-contract-details"> | ||
| <div className="flex justify-between items-center p-4 bg-white"> | ||
| <h1 className="text-xl font-bold mx-auto">Contract details</h1> | ||
| <button onClick={() => navigate(-1)} className="text-gray-600"> | ||
| <X className="w-6 h-6" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="flex flex-1 overflow-hidden relative"> | ||
| <div className="w-[320px] border-r bg-white flex flex-col" data-testid="left-panel"> | ||
| <div className="flex-1 overflow-y-auto p-4 pb-40" data-testid="content-area"> | ||
| <ContractSummary /> | ||
| <OrderDetails /> | ||
| <Payout /> | ||
| <EntryExitDetails /> | ||
| </div> | ||
| <div className="absolute bottom-16 left-0 right-0 m-4 w-[290px] b-[55px]" data-testid="close-button-container"> | ||
| <div className="max-w-[1200px] mx-auto"> | ||
| <button | ||
| onClick={() => navigate(-1)} | ||
| className="w-full bg-black text-white py-3 rounded-lg" | ||
| > | ||
| Close | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex-1 flex flex-col"> | ||
| <div className="flex-1 m-4 mb-20 bg-white rounded-lg border flex items-center justify-center text-gray-500 "> | ||
| Chart placeholder | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default DesktopContractDetailsPage |
99 changes: 99 additions & 0 deletions
99
src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import React from "react"; | ||
| import { render, screen, fireEvent } from "@testing-library/react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import DesktopContractDetailsPage from "../DesktopContractDetailsPage"; | ||
|
|
||
| // Mock the router hook | ||
| jest.mock("react-router-dom", () => ({ | ||
| useNavigate: jest.fn(), | ||
| })); | ||
|
|
||
| // Mock the components | ||
| jest.mock("../components", () => ({ | ||
| ContractSummary: function ContractSummary() { return React.createElement('div', { 'data-testid': 'contract-summary' }, 'Contract Summary') }, | ||
| OrderDetails: function OrderDetails() { return React.createElement('div', { 'data-testid': 'order-details' }, 'Order Details') }, | ||
| Payout: function Payout() { return React.createElement('div', { 'data-testid': 'payout' }, 'Payout') }, | ||
| EntryExitDetails: function EntryExitDetails() { return React.createElement('div', { 'data-testid': 'entry-exit-details' }, 'Entry Exit Details') }, | ||
| }), { virtual: true }); | ||
|
|
||
| describe("DesktopContractDetailsPage", () => { | ||
| const mockNavigate = jest.fn(); | ||
|
|
||
| beforeEach(() => { | ||
| (useNavigate as jest.Mock).mockReturnValue(mockNavigate); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it("renders all components correctly", () => { | ||
| render(<DesktopContractDetailsPage />); | ||
|
|
||
| // Check header | ||
| expect(screen.getByText("Contract details")).toBeInTheDocument(); | ||
|
|
||
| // Check all sections are rendered | ||
| expect(screen.getByTestId("contract-summary")).toBeInTheDocument(); | ||
| expect(screen.getByTestId("order-details")).toBeInTheDocument(); | ||
| expect(screen.getByTestId("payout")).toBeInTheDocument(); | ||
| expect(screen.getByTestId("entry-exit-details")).toBeInTheDocument(); | ||
|
|
||
| // Check chart placeholder | ||
| expect(screen.getByText("Chart placeholder")).toBeInTheDocument(); | ||
|
|
||
| // Check close button | ||
| expect(screen.getByText("Close")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("navigates back when close button is clicked", () => { | ||
| render(<DesktopContractDetailsPage />); | ||
|
|
||
| const closeButton = screen.getByText("Close"); | ||
| fireEvent.click(closeButton); | ||
|
|
||
| expect(mockNavigate).toHaveBeenCalledWith(-1); | ||
| }); | ||
|
|
||
| it("navigates back when header close button is clicked", () => { | ||
| render(<DesktopContractDetailsPage />); | ||
|
|
||
| const headerCloseButton = screen.getByRole("button", { name: /close/i }); | ||
| fireEvent.click(headerCloseButton); | ||
|
|
||
| expect(mockNavigate).toHaveBeenCalledWith(-1); | ||
| }); | ||
|
|
||
| it("has correct layout structure", () => { | ||
| render(<DesktopContractDetailsPage />); | ||
|
|
||
| // Check main container | ||
| const mainContainer = screen.getByTestId("desktop-contract-details"); | ||
| expect(mainContainer).toHaveClass("flex flex-col h-screen bg-gray-50 w-full"); | ||
|
|
||
| // Check left panel | ||
| const leftPanel = screen.getByTestId("left-panel"); | ||
| expect(leftPanel).toHaveClass("w-[320px] border-r bg-white flex flex-col"); | ||
|
|
||
| // Check content area | ||
| const contentArea = screen.getByTestId("content-area"); | ||
| expect(contentArea).toHaveClass("flex-1 overflow-y-auto p-4 pb-40"); | ||
|
|
||
| // Check close button container | ||
| const closeButtonContainer = screen.getByTestId("close-button-container"); | ||
| expect(closeButtonContainer).toHaveClass("absolute bottom-16 left-0 right-0 m-4 w-[290px] b-[55px]"); | ||
| }); | ||
|
|
||
| it("renders in correct order", () => { | ||
| render(<DesktopContractDetailsPage />); | ||
|
|
||
| const content = screen.getByTestId("content-area"); | ||
| const children = Array.from(content.children); | ||
|
|
||
| // Check components are rendered in correct order | ||
| expect(children[0]).toHaveAttribute("data-testid", "contract-summary"); | ||
| expect(children[1]).toHaveAttribute("data-testid", "order-details"); | ||
| expect(children[2]).toHaveAttribute("data-testid", "payout"); | ||
| expect(children[3]).toHaveAttribute("data-testid", "entry-exit-details"); | ||
| }); | ||
| }); |