Skip to content

test(dashboard): use title attribute to find expand/collapse button #1342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
spliffone wants to merge 1 commit into
base: main
Choose a base branch
from
Open

test(dashboard): use title attribute to find expand/collapse button #1342

spliffone wants to merge 1 commit into from

Conversation

@spliffone
Copy link
Member

@spliffone spliffone commented Jan 20, 2026 •
edited
Loading

Describe in detail what your merge request does and why. Add relevant
screenshots and reference related issues via Closes #XY or Related to #XY.

@spliffone spliffone requested a review from a team as a code owner January 20, 2026 16:25
@gemini-code-assist
Copy link

gemini-code-assist bot commented Jan 20, 2026

Summary of Changes

Hello @spliffone, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the reliability of the dashboard card component's expand and collapse tests. By transitioning from generic and order-dependent CSS selectors to precise attribute-based selectors, the changes ensure that test interactions accurately target the intended UI elements, thereby improving the maintainability and stability of the test suite.

Highlights

  • Test Selector Refinement: Updated the test selectors for the dashboard card's expand and restore functionality to use more specific button[title="Expand"] and button[title="Restore"] attributes.
  • Improved Test Robustness: Moved away from generic .dropdown-item class selectors and index-based selection, making the tests more resilient to future UI changes and less dependent on the exact DOM structure.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist[bot]
gemini-code-assist bot reviewed Jan 20, 2026
View reviewed changes
Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request improves the robustness of tests in si-dashboard-card.component.spec.ts by using the title attribute to select the expand/collapse buttons instead of relying on fragile CSS class names and element order. This is a great improvement. My review includes suggestions to make the tests even more explicit about element presence by avoiding optional chaining, which can sometimes hide issues during test runs.

projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
component.enableExpandInteraction = true;
fixture.detectChanges();
(element.querySelector('si-content-action-bar .dropdown-item') as HTMLElement).click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')?.click();
Copy link

@gemini-code-assist gemini-code-assist bot Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

While using optional chaining (?.) prevents a null pointer exception if the element is not found, in a test it's generally better to fail explicitly. If the element isn't found, the click is silently skipped, and the test will fail on a later assertion, which can be misleading. Using a non-null assertion (!) will cause the test to fail immediately with a clearer error if the element is not found. This makes debugging easier.

Suggested change
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')?.click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')!.click();

projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
fixture.detectChanges();
expect(component.card().isExpanded()).toBeTrue();
(element.querySelector('si-content-action-bar .dropdown-item') as HTMLElement).click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')?.click();
Copy link

@gemini-code-assist gemini-code-assist bot Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and improved test clarity, please use the non-null assertion operator (!) here as well. This ensures the test fails explicitly if the element is not found.

Suggested change
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')?.click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')!.click();

projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
fixture.detectChanges();
// Second element in content action bar is our expand actions
(element.querySelectorAll('si-content-action-bar .dropdown-item')[1] as HTMLElement).click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')?.click();
Copy link

@gemini-code-assist gemini-code-assist bot Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and improved test clarity, please use the non-null assertion operator (!) here as well. This ensures the test fails explicitly if the element is not found.

Suggested change
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')?.click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')!.click();

projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
fixture.detectChanges();
expect(component.card().isExpanded()).toBeTrue();
(element.querySelectorAll('si-content-action-bar .dropdown-item')[1] as HTMLElement).click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')?.click();
Copy link

@gemini-code-assist gemini-code-assist bot Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and improved test clarity, please use the non-null assertion operator (!) here as well. This ensures the test fails explicitly if the element is not found.

Suggested change
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')?.click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')!.click();

projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
component.secondaryActions = [{ title: 'Action' }];
fixture.detectChanges();
(element.querySelector('si-content-action-bar .dropdown-item') as HTMLElement).click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')?.click();
Copy link

@gemini-code-assist gemini-code-assist bot Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and improved test clarity, please use the non-null assertion operator (!) here as well. This ensures the test fails explicitly if the element is not found.

Suggested change
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')?.click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Expand"]')!.click();

projects/element-ng/dashboard/si-dashboard-card.component.spec.ts
fixture.detectChanges();
expect(component.card().isExpanded()).toBeTrue();
(element.querySelector('si-content-action-bar .dropdown-item') as HTMLElement).click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')?.click();
Copy link

@gemini-code-assist gemini-code-assist bot Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and improved test clarity, please use the non-null assertion operator (!) here as well. This ensures the test fails explicitly if the element is not found.

Suggested change
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')?.click();
element.querySelector<HTMLElement>('si-content-action-bar button[title="Restore"]')!.click();

@github-actions
Copy link

github-actions bot commented Jan 20, 2026

Code Coverage

@github-actions
Copy link

github-actions bot commented Jan 20, 2026

Documentation.
Examples.
Playwright report.

Coverage Reports:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@spliffone