[Project Solar / Phase 1 / Engineering Follow-ups] Add tests for HDS theming service and components #3428

didoo · 2025-12-08T19:56:47Z

📌 Summary

This PR adds:

unit tests for the hds-theming service
integration tests for the HdsThemingSwitcher component (note: this is a temporary component, but better to cover it anyway)
integration tests for the HdsThemingContext "headless" component
snapshot (Percy) tests for foundations/theming page
acceptance (a11y) test for foundations/theming page

Note

Currently in the main branch all the tests have been converted to gts format. Once the feature branch project-solar/phase-1-main-feature-branch have been rebased to main, we will update these tests too (unless @shleewhite can think of an alternative approach)

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-5654

👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've worked with GRC to document the impact of any changes to security controls.
Examples of changes to controls include access controls, encryption, logging, etc.
If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

vercel · 2025-12-08T19:56:53Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Dec 10, 2025 9:03pm
hds-website	Ready	Preview	Dec 10, 2025 9:03pm

Copilot

Pull request overview

This PR adds comprehensive test coverage for the HDS theming system, including unit tests for the theming service and integration tests for the theme switcher and theme context components. These tests ensure proper functionality of theme selection, storage, and application across the design system.

Key changes:

Added unit tests for the hds-theming service covering initialization, theme setting, localStorage persistence, and callbacks
Added integration tests for the HdsThemeSwitcher component to verify rendering, theme selection, and user interactions
Added integration tests for the HdsThemeContext component to verify CSS class application and content yielding

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
showcase/tests/unit/services/hds-theming-test.js	Comprehensive unit tests for the theming service covering initialization, theme management, localStorage operations, error handling, and callbacks
showcase/tests/integration/components/hds/theme-switcher/index-test.js	Integration tests for the theme switcher component covering rendering, size options, theme display, dropdown interactions, and callbacks
showcase/tests/integration/components/hds/theme-context/index-test.js	Integration tests for the theme context component covering CSS class application for themes/modes and content yielding

Comments suppressed due to low confidence (1)

showcase/tests/unit/services/hds-theming-test.js:1

Corrected spelling of 'oen' to 'open' in the comment.

/**

showcase/tests/unit/services/hds-theming-test.js

showcase/tests/integration/components/hds/theme-switcher/index-test.js

showcase/tests/integration/components/hds/theme-context/index-test.js

…rompt) Initial prompt (Gemini 2.5 / VSCode) ---- **Prompt:** Hello! Your task is to add unit tests for the `hds-theming` service in the Helios Design System. **Goal:** Create a comprehensive unit test suite for the `hds-theming` service located at `packages/components/src/services/hds-theming.ts`. **Context & Requirements:** 1. **File Location:** Create the new (single) test file at `showcase/tests/unit/services/hds-theming-test.js`. 2. **Code Conventions:** * Use the existing unit tests in `showcase/tests/unit/services/` as a reference for our testing conventions and style. * The files `showcase/tests/unit/services/hds-intl-test.js` and `showcase/tests/unit/services/hds-time-test.js` are a good example to follow. * You can also reference some of the integration tests in `showcase/tests/integration/components/hds/`, as a reference for coding conventions, test structure, and best practices. * Other code conventions: * do not organize the tests in sub-`module()`s, keep everything flat under the main module 3. **Test Coverage:** Ensure your tests cover the following scenarios for the `HdsThemingService`: * **Default State:** The service initializes with the correct default values. * **`initializeTheme()`:** * Test its behavior when `localStorage` is empty. * Test its behavior with valid data in `localStorage`. * Test its behavior with malformed JSON data in `localStorage`. * **`setTheme()`:** * Test setting each theme value (`Default`, `System`, `Light`, `Dark`, and `undefined`). * Verify that the correct CSS classes (`hds-theme-*`, `hds-mode-*`) are applied to the `<html>` element. * Verify that `localStorage` is correctly updated with the theme and options. * Test setting custom light and dark theme options. * Ensure the `onSetTheme` (local) and `globalOnSetTheme` (global) callbacks are triggered with the correct arguments. * **Getters:** Verify that `currentTheme`, `currentMode`, `currentLightTheme`, and `currentDarkTheme` return the correct values. **Debugging** 1. Condider the option of using my local IDE/environment to run the test, so you have access to the console and see the tests failures, and you can iteratively adapt your code until all tests are passing. 2. If after a certain number of iterations (max 10) you still see failing tests, ask me if you have to continue iterating or not. If the answer is not, stop generating code and offer me the option to save what you already have. Please proceed with creating the test file and implementing the tests as described. Let me know if you have any questions. ----

… with localized AI prompts)

Initial prompt (Gemini 2.5 / VSCode) - Result: many tests are not passing ---- **Prompt:** Hello! Your task is to add integration tests for the `HdsThemeSwitcher` component in the Helios Design System. **Goal:** Add comprehensive integration tests for the `HdsThemeSwitcher` component located at `packages/components/src/components/hds/theme-switcher`. **Context & Requirements:** 1. **Source code:** The component's source code is in the folder `packages/components/src/components/hds/theme-switcher` which contains * an Handlebars template file `index.hbs` * a TypeScrip backing class file `index.ts` 2. **Analyze Component:** Examine the `HdsThemeSwitcher` component's arguments (`Args`), yielded blocks, and actions to determine what needs to be tested. 3. **File Location:** Create the new (single) test file at `showcase/tests/integration/components/hds/theme-switcher/index-test.js`. 4. **Code Conventions:** * Integration tests for HDS components are located in `showcase/tests/integration/components/hds/`. * Use existing integration tests, such as `showcase/tests/integration/components/hds/button/index-test.js` (use another 4 or 5 files at random), as a reference for coding conventions, test structure, and best practices. * Follow the testing guidelines outlined in the project's `copilot-instructions.md` file. 5. **Test Coverage:** Ensure your tests cover the following scenarios for the `HdsThemeSwitcher`: * Test that the component renders with the base `hds-theme-switcher` CSS class. * Test that the component correctly displays the initial theme. * Test the interaction of clicking the theme switcher button to open the theme menu. * Test that clicking a theme in the menu calls the `@onSelectTheme` action with the correct theme name as the payload. * Test any other arguments or states of the component. **Debugging** 1. Condider the option of using my local IDE/environment to run the test, so you have access to the console and see the tests failures, and you can iteratively adapt your code until all tests are passing. 2. If after a certain number of iterations (max 10) you still see failing tests, ask me if you have to continue iterating or not. If the answer is not, stop generating code and offer me the option to save what you already have. Please proceed with creating the test file and implementing the tests as described. Let me know if you have any questions. ----

Same prompt (Claude Sonnet 4.5 / VSCode) - Result: many tests are still not passing

Initial prompt (Gemini 2.5 / VSCode) - Result: some tests are not passing - - - - - **Prompt:** Hello! Your task is to add integration tests for the `HdsThemeContext` component in the Helios Design System. **Goal:** Add comprehensive integration tests for the `HdsThemeContext` component located at `packages/components/src/components/hds/theme-context`. **Context & Requirements:** 1. **Source code:** The component's source code is in the folder `packages/components/src/components/hds/theme-context` which contains * an Handlebars template file `index.hbs` * a TypeScrip backing class file `index.ts` * a TypeScrip types definition file `types.ts` 2. **Analyze Component:** Examine the `HdsThemeContext` component's arguments (`Args`), yielded blocks, and actions to determine what needs to be tested. 3. **File Location:** Create the new (single) test file at `showcase/tests/integration/components/hds/theme-context/index-test.js`. 4. **Code Conventions:** * Integration tests for HDS components are located in `showcase/tests/integration/components/hds/`. * Use existing integration tests, such as `showcase/tests/integration/components/hds/button/index-test.js` (use another 4 or 5 files at random), as a reference for coding conventions, test structure, and best practices. * Follow the testing guidelines outlined in the project's `copilot-instructions.md` file. 5. **Test Coverage:** Ensure your tests cover the following scenarios for the `HdsThemeContext`: * Test that the component renders with the base `hds-theme-context` CSS class. * Test that the component correctly applies the correct context * Test that it correctly applies a different class depending if the context is a theme or a mode * Test that it correctly yields the content * Test that it correctly spreads the `...attributes` * Test any other arguments or states of the component. Please proceed with creating the test file and implementing the tests as described. Let me know if you have any questions. - - - - - -

otherwise visual tests for `foundations/theming` page with different themes would not work

showcase/tests/integration/components/hds/theme-context/index-test.js

showcase/tests/unit/services/hds-theming-test.js

showcase/tests/acceptance/components/hds/theming-test.js

showcase/tests/integration/components/hds/theme-switcher/index-test.js

showcase/tests/unit/services/hds-theming-test.js

KristinLBradley · 2025-12-09T19:51:52Z

showcase/tests/integration/components/hds/theme-context/index-test.js

+        <p id="test-content">This is yielded content</p>
+      </Hds::ThemeContext>
+    `);
+    assert.dom('#test-content').exists();


This one seems a bit redundant perhaps.

We test to test the yielding of content. This one in particular makes sense to me, since it's one of the two main functions of this component (apply a class and yield the content)

KristinLBradley · 2025-12-09T21:36:06Z

showcase/tests/integration/components/hds/theme-switcher/index-test.js

+
+    // change theme
+    const lightOptionButton = this.element.querySelector(
+      '.hds-dropdown-list-item:nth-of-type(3) button',


Is there another way the button could be selected that doesn't rely solely on the DOM structure like this?

Not that I could think of (we could use the inner text, but the logic would become even more complex)

showcase/tests/unit/services/hds-theming-test.js

KristinLBradley

Looks good! Just added a few very minor comments/suggestions.

Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com> Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>

…theming service and components (#3428) Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com> Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>

didoo requested review from KristinLBradley, Copilot and dchyun December 8, 2025 19:56

hashibot-hds added the showcase label Dec 8, 2025

Copilot AI reviewed Dec 8, 2025

View reviewed changes

showcase/tests/unit/services/hds-theming-test.js Outdated Show resolved Hide resolved

showcase/tests/integration/components/hds/theme-switcher/index-test.js Outdated Show resolved Hide resolved

showcase/tests/integration/components/hds/theme-context/index-test.js Show resolved Hide resolved

vercel bot deployed to Preview – hds-showcase December 8, 2025 20:46 View deployment

vercel bot deployed to Preview – hds-showcase December 8, 2025 20:49 View deployment

didoo added 7 commits December 8, 2025 20:51

hds-theming service tests - small tweaks and adjustments (some done…

b578ac9

… with localized AI prompts)

HdsThemeSwitcher component tests - Second run

78c8465

Same prompt (Claude Sonnet 4.5 / VSCode) - Result: many tests are still not passing

HdsThemeSwitcher component tests - Finalized tests (manually)

5456453

HdsThemeContext tests - small tweaks and adjustments

59f1be4

didoo force-pushed the project-solar/phase-1/HDS-5654/00_integration-and-unit-tests branch from 882d34c to a8c8db8 Compare December 8, 2025 20:51

vercel bot deployed to Preview – hds-showcase December 8, 2025 20:53 View deployment

vercel bot deployed to Preview – hds-website December 8, 2025 20:57 View deployment

didoo added 2 commits December 8, 2025 21:10

added snapshot testing for foundations/theming page

48d4a36

added acceptance (a11y) test for foundations/theming page

71b25cf

didoo force-pushed the project-solar/phase-1/HDS-5654/00_integration-and-unit-tests branch from a8c8db8 to 71b25cf Compare December 8, 2025 21:12

vercel bot deployed to Preview – hds-showcase December 8, 2025 21:14 View deployment

vercel bot deployed to Preview – hds-website December 8, 2025 21:16 View deployment

updated index.html for tests to include “themed” tokens CSS files

4c653cb

otherwise visual tests for `foundations/theming` page with different themes would not work

didoo changed the title ~~[Project Solar / Phase 1 / Engineering Follow-ups] Add integration and unit tests for HDS theming service/components~~ [Project Solar / Phase 1 / Engineering Follow-ups] Add tests for HDS theming service and components Dec 9, 2025

vercel bot deployed to Preview – hds-showcase December 9, 2025 09:45 View deployment

vercel bot deployed to Preview – hds-website December 9, 2025 09:47 View deployment

dchyun reviewed Dec 9, 2025

View reviewed changes

KristinLBradley reviewed Dec 9, 2025

View reviewed changes

showcase/tests/unit/services/hds-theming-test.js Outdated Show resolved Hide resolved

KristinLBradley reviewed Dec 9, 2025

View reviewed changes

Apply suggestions from code review

e8bc956

Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com> Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>

vercel bot deployed to Preview – hds-showcase December 10, 2025 11:21 View deployment

vercel bot deployed to Preview – hds-website December 10, 2025 11:23 View deployment

didoo marked this pull request as ready for review December 10, 2025 11:30

didoo requested a review from a team as a code owner December 10, 2025 11:30

improved tests for hds-theming service per code review suggestion

b75728d

vercel bot deployed to Preview – hds-showcase December 10, 2025 21:00 View deployment

vercel bot deployed to Preview – hds-website December 10, 2025 21:03 View deployment

didoo requested review from KristinLBradley and dchyun December 11, 2025 09:20

didoo added the project solar label Dec 11, 2025

dchyun approved these changes Dec 11, 2025

View reviewed changes

didoo merged commit 0c86eb6 into project-solar/phase-1-main-feature-branch Dec 11, 2025
17 checks passed

didoo deleted the project-solar/phase-1/HDS-5654/00_integration-and-unit-tests branch December 11, 2025 18:20

[Project Solar / Phase 1 / Engineering Follow-ups] Add tests for HDS theming service and components #3428

[Project Solar / Phase 1 / Engineering Follow-ups] Add tests for HDS theming service and components #3428

Uh oh!

Conversation

didoo commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KristinLBradley Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

didoo Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

KristinLBradley Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

didoo Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KristinLBradley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

didoo commented Dec 8, 2025 •

edited

Loading

vercel bot commented Dec 8, 2025 •

edited

Loading