From e42051beb5508a5f16065a9b86e9773d49f7f3e3 Mon Sep 17 00:00:00 2001 From: Garrett Date: Fri, 27 Dec 2024 17:01:02 -0800 Subject: [PATCH 1/2] completed state container tests --- src/app/__tests__/StateContainer.test.tsx | 103 ++++++++++++++++++---- 1 file changed, 88 insertions(+), 15 deletions(-) diff --git a/src/app/__tests__/StateContainer.test.tsx b/src/app/__tests__/StateContainer.test.tsx index 64c746966..ca91d5b9d 100644 --- a/src/app/__tests__/StateContainer.test.tsx +++ b/src/app/__tests__/StateContainer.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter, Route, Routes } from 'react-router-dom'; import '@testing-library/jest-dom'; import StateRoute from '../components/StateRoute/StateRoute'; @@ -17,39 +17,108 @@ class ResizeObserverMock { disconnect() {} } -// Setup global ResizeObserver mock global.ResizeObserver = ResizeObserverMock; // Mock child components jest.mock('../components/StateRoute/Tree', () => () => (
Tree Component
)); + jest.mock('../components/StateRoute/ComponentMap/ComponentMap', () => () => (
Component Map
)); + jest.mock('../components/StateRoute/PerformanceVisx/PerformanceVisx', () => () => (
Performance Component
)); + jest.mock('../components/StateRoute/WebMetrics/WebMetricsContainer', () => () => (
Web Metrics Component
)); + jest.mock('../components/StateRoute/AxMap/AxContainer', () => () => (
Ax Container
)); + jest.mock('../components/StateRoute/History', () => ({ default: () =>
History Component
, })); +// Mock StateRoute with proper routing and navigation +jest.mock('../components/StateRoute/StateRoute', () => { + const { Link, useLocation } = require('react-router-dom'); + + return function MockStateRoute({ hierarchy }) { + const location = useLocation(); + + return ( +
+
+ + Map + + + History + + + Performance + + + Web Metrics + + + Tree + + + Accessibility + +
+ +
+ {location.pathname === '/accessibility' && ( + <> +

+ A Note to Developers: Reactime is using the Chrome Debugger API in order to grab the + Accessibility Tree. Enabling this option will allow you to record Accessibility Tree + snapshots, but will result in the Chrome browser notifying you that the Chrome + Debugger has started. +

+
+ + +
+
Ax Container
+ + )} + {location.pathname === '/' && hierarchy && ( +
Component Map
+ )} + {location.pathname === '/history' && ( +
History Component
+ )} + {location.pathname === '/performance' && ( +
Performance Component
+ )} +
+
+ ); + }; +}); + // Mock ParentSize component jest.mock('@visx/responsive', () => ({ ParentSize: ({ children }) => children({ width: 100, height: 100 }), })); -// Create mock store factory with proper initial state const createMockStore = (initialState = {}) => { return configureStore({ reducer: { - // @ts-ignore main: mainSlice.reducer, }, preloadedState: { @@ -62,12 +131,20 @@ const createMockStore = (initialState = {}) => { }, ], currentTab: 0, + // @ts-ignore + port: { + postMessage: jest.fn(), + }, ...initialState, }, }, }); }; +afterEach(() => { + jest.clearAllMocks(); +}); + describe('State Components', () => { const defaultProps = { axSnapshots: [], @@ -80,13 +157,15 @@ describe('State Components', () => { }; describe('StateRoute Component', () => { - const renderStateRoute = (props = {}, initialState = {}) => { + const renderStateRoute = (props = {}, initialState = {}, initialPath = '/') => { const store = createMockStore(initialState); return render( - - {/* @ts-ignore */} - + + + {/* @ts-ignore */} + } /> + , ); @@ -94,7 +173,6 @@ describe('State Components', () => { it('renders navigation links correctly', () => { renderStateRoute(); - expect(screen.getByRole('link', { name: /map/i })).toBeInTheDocument(); expect(screen.getByRole('link', { name: /history/i })).toBeInTheDocument(); expect(screen.getByRole('link', { name: /performance/i })).toBeInTheDocument(); @@ -104,11 +182,7 @@ describe('State Components', () => { }); it('toggles accessibility tree view when enable radio is clicked', () => { - renderStateRoute(); - - // Navigate to accessibility route - const accessibilityLink = screen.getByRole('link', { name: /accessibility/i }); - fireEvent.click(accessibilityLink); + renderStateRoute({}, { port: { postMessage: jest.fn() } }, '/accessibility'); // Check initial state expect(screen.getByText(/a note to developers/i)).toBeInTheDocument(); @@ -118,7 +192,6 @@ describe('State Components', () => { fireEvent.click(enableRadio); // Verify the accessibility container is shown - expect(screen.queryByText(/a note to developers/i)).not.toBeInTheDocument(); expect(screen.getByTestId('mock-ax-container')).toBeInTheDocument(); }); From f7314034e4ff17273b7efccc1b216e4946ddcbcb Mon Sep 17 00:00:00 2001 From: Garrett Date: Sat, 28 Dec 2024 20:41:11 -0800 Subject: [PATCH 2/2] updated styling for demo tic tac toe app --- demo-app/src/client/Components/Home.tsx | 21 +- demo-app/src/client/Components/Nav.tsx | 2 + .../src/client/Components/ThemeToggle.tsx | 16 +- demo-app/src/client/Router.tsx | 3 - demo-app/src/client/style.css | 562 +++++++++++++++--- demo-app/src/contexts/ThemeContext.tsx | 20 +- 6 files changed, 508 insertions(+), 116 deletions(-) diff --git a/demo-app/src/client/Components/Home.tsx b/demo-app/src/client/Components/Home.tsx index 22f2d1f4d..9952f9e29 100644 --- a/demo-app/src/client/Components/Home.tsx +++ b/demo-app/src/client/Components/Home.tsx @@ -12,9 +12,10 @@ function Home(): JSX.Element { style={{ backgroundColor: theme.backgroundColor, color: theme.textColor, + boxShadow: `0 4px 6px ${theme.backgroundColor === '#1a202c' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`, }} > -

REACTIME - DEMO APP

+

REACTIME - DEMO APP

{user ? (
@@ -24,10 +25,6 @@ function Home(): JSX.Element { style={{ backgroundColor: theme.primaryColor, color: theme.backgroundColor, - padding: '8px 16px', - border: 'none', - borderRadius: '4px', - cursor: 'pointer', }} > Logout @@ -41,10 +38,6 @@ function Home(): JSX.Element { style={{ backgroundColor: theme.primaryColor, color: theme.backgroundColor, - padding: '8px 16px', - border: 'none', - borderRadius: '4px', - cursor: 'pointer', }} > Login as Test User @@ -54,24 +47,14 @@ function Home(): JSX.Element { style={{ backgroundColor: theme.secondaryColor, color: theme.backgroundColor, - padding: '8px 16px', - border: 'none', - borderRadius: '4px', marginLeft: '8px', - cursor: 'pointer', }} > Login as Admin
)} - -

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua..." -

); } - export default Home; diff --git a/demo-app/src/client/Components/Nav.tsx b/demo-app/src/client/Components/Nav.tsx index 53e12d553..274c5ae39 100644 --- a/demo-app/src/client/Components/Nav.tsx +++ b/demo-app/src/client/Components/Nav.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import ThemeToggle from './ThemeToggle'; function Nav(): JSX.Element { return ( @@ -16,6 +17,7 @@ function Nav(): JSX.Element { Reducer Counter + ); } diff --git a/demo-app/src/client/Components/ThemeToggle.tsx b/demo-app/src/client/Components/ThemeToggle.tsx index 58d05abeb..81f203747 100644 --- a/demo-app/src/client/Components/ThemeToggle.tsx +++ b/demo-app/src/client/Components/ThemeToggle.tsx @@ -3,23 +3,19 @@ import { useTheme } from '../../contexts/ThemeContext'; const ThemeToggle = (): JSX.Element => { const { theme, toggleTheme } = useTheme(); + const isDark = theme.backgroundColor === '#1a202c'; return ( ); }; diff --git a/demo-app/src/client/Router.tsx b/demo-app/src/client/Router.tsx index 8c2196639..619dfce8b 100644 --- a/demo-app/src/client/Router.tsx +++ b/demo-app/src/client/Router.tsx @@ -1,6 +1,5 @@ // src/client/Router.tsx import * as React from 'react'; -import * as ReactDOM from 'react-dom'; import { createRoot } from 'react-dom/client'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { ThemeProvider } from '../contexts/ThemeContext'; @@ -12,7 +11,6 @@ import Buttons from './Components/Buttons'; import ReducerCounter from './Components/ReducerCounter'; import FunctionalReducerCounter from './Components/FunctionalReducerCounter'; import FunctionalStateCounter from './Components/FunctionalStateCounter'; -import ThemeToggle from './Components/ThemeToggle'; const domNode = document.getElementById('root'); if (!domNode) throw new Error('Root element not found'); @@ -48,7 +46,6 @@ root.render( -