Nico
7290b27a56
<!-- Add the related story/sub-task/bug number, like Resolves #123, or remove if NA --> **Related issue:** Resolves #46034 ## Testing - [x] QA'd all new/changed functionality manually ### Before My Device page was showing the light mode logo even when in dark mode. <img width="1412" height="756" alt="Screenshot 2026-05-22 at 11 51 57 AM" src="https://github.com/user-attachments/assets/9f098d96-b9d1-4618-b6f4-e7ee49629506" /> <img width="1340" height="708" alt="Screenshot 2026-05-22 at 11 35 59 AM" src="https://github.com/user-attachments/assets/dfff3a53-e08b-4b7a-a3fc-97f33e0d691d" /> ### After My Device page correctly shows the logo for both modes Light: <img width="1434" height="725" alt="Screenshot 2026-05-22 at 11 48 51 AM" src="https://github.com/user-attachments/assets/4d5913c5-5264-40ac-bbdf-21c271637898" /> <img width="1337" height="451" alt="Screenshot 2026-05-22 at 11 48 55 AM" src="https://github.com/user-attachments/assets/1cd6193e-b910-46ea-8f89-0cd88ad07382" /> Dark (Fleet's default logo): <img width="1127" height="644" alt="Screenshot 2026-05-22 at 11 48 08 AM" src="https://github.com/user-attachments/assets/a55a0026-f301-4281-8419-83cc9a707bb7" /> <img width="1357" height="528" alt="Screenshot 2026-05-22 at 11 48 15 AM" src="https://github.com/user-attachments/assets/471a604a-9524-4d5a-8af4-cfe09d2430fc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Organization logos now adapt to dark or light mode, showing the appropriate themed variant across the app. * **Bug Fixes / Improvements** * Device and host pages now pick the correct logo variant with sensible fallbacks so logos display consistently when theme-specific images are missing. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/46063?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fleet UI tests
The test directory contains the jest configuration, test setup, request handlers, mock server definition, testing utilities, and entity stubs (deprecated and will be replaced by mocks in frontend/__mocks__) for use in test files throughout the application. The test files for components and app functions are located in the same directory as the files they test.
Table of contents
- Jest configuration
- Test setup
- Request handlers and their setup
- Testing utilities
- Entity stubs (deprecated)
- Related links
Jest configuration
This is where the jest configuration is located. Refer to Jest's official documentation.
Test setup
This file configures the testing environment for every test file.
Request handlers and their setup
Default handlers and custom handlers are both defined within the handlers directory and return mocked data. The handlers directory will naturally grow with more default and custom handlers required for more tests. We use mock service worker to define all request handlers.
Default handlers and custom handlers differ in their setup. Default handlers are setup in mock-server.ts. The mock server will serve the default handlers outlined in default-handlers.ts. Custom handlers must be setup inline within a component's test suite (frontend/**/ComponentName.tests.tsx). For example, we would setup the custom handler activityHandler9Activities inline using mockServer.use(activityHandler9Activities);.
Testing utilities
We use various utility functions to write our tests.
Testing stubs Deprecated
Testing stubs are still being used in a handful of old tests. We are no longer following this pattern of adding data to testing stubs. Rather, we are building stubs as mocks located in the frontend/__mocks__ directory.
Related links
Check out how we mock data used for unit and integration tests.
Follow this guide to run tests locally.
Visit the frontend overview of Fleet UI testing for more information on our testing strategy, philosophies, and tools.