mirror of
https://github.com/actualbudget/actual.git
synced 2026-03-22 00:13:45 -05:00
65dee4c627
* Fix accessibility issues: use semantic HTML and correct tab indices - Replace View with semantic h1 in ModalHeader - Fix tabIndex from 1 to 0 in Menu component - Remove disabled oxlint accessibility rules - Update components to use proper semantic HTML elements * Refactor button elements to semantic HTML in Autocomplete and CategoryAutocomplete components - Replace button elements with div/View while maintaining role="button" for accessibility. - Update styles and props accordingly to ensure consistent behavior. - Adjust onClick types in Item and SecondaryItem components for better type safety. * Add release notes for upcoming maintenance updates addressing various accessibility issues * Refactor autocomplete components to improve text alignment and button semantics - Added textAlign: 'left' style to AccountItem and PayeeItem for consistent text alignment. - Removed type="button" from CategoryItem to streamline button semantics. - Updated ItemContent to use the Button component instead of a button element, enhancing accessibility and consistency. * Refactor budget and report components to improve text alignment - Removed font: 'inherit' style from EnvelopeBudgetComponents and TrackingBudgetComponents for cleaner styling. - Updated ActionableGridListItem and ReportCard components to replace font: 'inherit' with textAlign: 'left' for consistent text alignment. * Update ActionableGridListItem to include font inheritance for improved styling consistency * Refactor button elements to use the Button component for consistency and improved semantics - Updated various components (EnvelopeBudgetComponents, IncomeCategoryMonth, CategoryMonth, ActionableGridListItem, ReportCard, DesktopLinkedNotes) to replace native button elements with the custom Button component. - Adjusted styles and event handlers to align with the new Button implementation, ensuring consistent behavior and accessibility across the application. * Update Button and ActionableGridListItem styles for consistency - Set a fixed borderRadius of 4 for the Button component, ensuring uniformity across variants. - Adjusted ActionableGridListItem to have a borderRadius of 0 for a cleaner design. * Update CategoryAutocomplete to include button type attribute for improved semantics * Update VRT screenshots Auto-generated by VRT workflow PR: #6679 * Update VRT screenshot for Payees search functionality --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Actual on the web
E2E tests
E2E (end-to-end) tests use Playwright. Running them requires an Actual server to be running either locally or on a remote server.
Functional
Running against the local server:
# Start the development server
yarn start
# Run against the local server (localhost:3001)
yarn e2e
Running against a remote server:
E2E_START_URL=http://my-remote-server.com yarn e2e
Visual regression
Visual regression tests (also known as screenshot tests) check that the visual appearance of the product has not regressed. Each environment has slightly different colors, fonts etc. Mac differs from Windows which differs from Linux. In order to have a stable test environment for visual comparisons - you must use a standartised docker container. This ensures that the tests are always ran in a consistent environment.
Prerequisites:
- Docker installed
Running against the local server
First start a dev instance:
HTTPS=true yarn start
or using the dev container:
HTTPS=true docker compose up --build
Note the network IP address and port the dev instance is listening on.
Next, navigate to the root of your project folder, run the standardized docker container, and launch the visual regression tests from within it.
Run via yarn:
# By default, this connects to https://localhost:3001
yarn vrt:docker
# To use a different ip and port:
yarn vrt:docker --e2e-start-url https://ip:port
# To update snapshots, use the following command:
yarn vrt:docker --e2e-start-url https://ip:port --update-snapshots
Run manually:
# Run docker container
docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.57.0-jammy /bin/bash
# If you receive an error such as "docker: invalid reference format", please instead use the following command:
docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.57.0-jammy /bin/bash
# Once inside the docker container, run the VRT tests: important - they MUST be ran against a HTTPS server.
# Use the ip and port noted earlier
E2E_START_URL=https://ip:port yarn vrt
# To update snapshots, use the following command:
E2E_START_URL=https://ip:port yarn vrt --update-snapshots
Running against a remote server
You can also run the tests against a remote server by passing the URL:
Run in standardized docker container:
E2E_START_URL=https://my-remote-server.com yarn vrt:docker
# Or pass in server URL as argument
yarn vrt:docker --e2e-start-url https://my-remote-server.com
Run locally:
E2E_START_URL=https://my-remote-server.com yarn vrt