fix(cypress): fix cypress tests for SearchableSelect and add missing useRef import#272
Conversation
- Update all Cypress tests to use click-based selection instead of cy.select() - Add selectSearchableOption helper function to support custom dropdowns - Fix missing useRef import in EuclidRulesPage component - Update SearchableSelect component button selectors
jagan-jaya
changed the title
There was a problem hiding this comment.
Pull request overview
This PR updates the Euclid Rules Cypress tests to work with the new SearchableSelect (button + searchable dropdown) instead of native <select>, and fixes a missing React hook import that caused a runtime error.
Changes:
- Added
data-cy/data-valuehooks toSearchableSelectusage to support reliable Cypress selection/assertions. - Introduced Cypress helper functions for interacting with
SearchableSelect, and migrated affected Euclid rules specs away fromcy.select(). - Updated a few UI-copy assertions in other Cypress specs to match current UI messages; added an
aria-labelfor the condition remove button.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/components/ui/SearchableSelect.tsx | Adds dataCy support and exposes selected value via data-value for test assertions. |
| website/src/components/pages/EuclidRulesPage.tsx | Fixes missing useRef import; adds dataCy props to condition LHS/value selects; adds accessible label for remove button. |
| cypress/support/euclid-helpers.js | Adds new Cypress helpers for selecting LHS/value via SearchableSelect. |
| cypress/e2e/ui/euclid-rules-nested-branches.cy.js | Migrates LHS selection/assertions to the new helpers and data-value attribute. |
| cypress/e2e/ui/euclid-rules-lifecycle.cy.js | Migrates LHS/value selection to helpers while keeping operator selection via native <select>. |
| cypress/e2e/ui/euclid-rules-enum-operators.cy.js | Adjusts operator/value assertions for SearchableSelect and checkbox-based multi-select mode. |
| cypress/e2e/ui/euclid-rules-e2e.cy.js | Updates end-to-end rule creation flows to use new selection helpers. |
| cypress/e2e/ui/euclid-rules-builder.cy.js | Updates UI interaction assertions and remove-condition action for the new DOM structure. |
| cypress/e2e/ui/decision-explorer.cy.js | Updates assertions for debit-routing enabled/disabled copy. |
| cypress/e2e/ui/debit-routing-page.cy.js | Updates success-message assertions for debit-routing enable/disable copy. |
| cypress/e2e/ui/auth-page.cy.js | Updates assertion for updated Auth page hero heading text. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function selectCondLhs(index, value) { | ||
| cy.get('[data-cy="cond-lhs"]').eq(index).within(() => { | ||
| cy.get('button.cond-select').click() | ||
| cy.get('input[placeholder="Search…"]').clear().type(value) | ||
| cy.get('button:not(.cond-select)').first().click() | ||
| }) |
There was a problem hiding this comment.
selectCondLhs (and selectCondVal) always clicks the first result button after typing. If the search term matches multiple options (common with prefix keys), this can select the wrong value and make tests flaky. Prefer selecting the option deterministically (e.g., by exact match) or add a stable attribute (like data-value) on option buttons and click by that.
| function selectCondLhs(index, value) { | ||
| cy.get('[data-cy="cond-lhs"]').eq(index).within(() => { | ||
| cy.get('button.cond-select').click() | ||
| cy.get('input[placeholder="Search…"]').clear().type(value) | ||
| cy.get('button:not(.cond-select)').first().click() | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * Select an enum value from the SearchableSelect value dropdown. | ||
| * Works inside or outside a cy.within() scope. | ||
| * @param {number} index - 0-based index of cond-val within current scope | ||
| * @param {string} value - enum value to search and select (e.g. 'card') | ||
| */ | ||
| function selectCondVal(index, value) { | ||
| cy.get('[data-cy="cond-val"]').eq(index).within(() => { | ||
| cy.get('button.cond-select').click() | ||
| cy.get('input[placeholder="Search…"]').clear().type(value) | ||
| cy.get('button:not(.cond-select)').first().click() | ||
| }) | ||
| } |
There was a problem hiding this comment.
selectCondLhs and selectCondVal are effectively identical apart from the [data-cy=...] selector. Consider extracting a single generic helper (e.g., taking the data-cy value) and reusing it for both to reduce duplication and keep future updates consistent.
| /** | ||
| * Select a routing-key (LHS) from the SearchableSelect dropdown. | ||
| * Works inside or outside a cy.within() scope. | ||
| * @param {number} index - 0-based index of cond-lhs within current scope | ||
| * @param {string} value - routing key value to search and select (e.g. 'payment_method') | ||
| */ | ||
| function selectCondLhs(index, value) { | ||
| cy.get('[data-cy="cond-lhs"]').eq(index).within(() => { | ||
| cy.get('button.cond-select').click() | ||
| cy.get('input[placeholder="Search…"]').clear().type(value) | ||
| cy.get('button:not(.cond-select)').first().click() | ||
| }) | ||
| } |
There was a problem hiding this comment.
The PR description says it adds a selectSearchableOption Cypress helper, but the code adds selectCondLhs / selectCondVal instead. Either update the PR description or rename/extract to match the described helper so future readers can find it easily.
This PR fixes Cypress test failures caused by the new SearchableSelect component:
Changes
Testing