Plugin E2E: Add missing components to the components fixture#2621
Open
Plugin E2E: Add missing components to the components fixture#2621
Conversation
…and ColorPicker to components fixture Extends the components fixture introduced in #2583 with six additional Grafana UI components. Each component gets a static getContainer() for version-conditional container resolution and a within(root) method for DOM scoping. Uses CSS/structural fallback selectors for all Grafana versions; data-testid selectors will be added once grafana/grafana#124120 merges and @grafana/e2e-selectors is updated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Hello! 👋 This repository uses Auto for releasing packages using PR labels. ❌ This PR cannot be merged until the following issues are addressed:
🏷️ More info about which labels to use
|
|
Marcus Andersson seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
1 similar comment
|
Marcus Andersson seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
grafana-plugins-platform-bot
Bot
moved this from 📬 Triage
to 🔬 In review
in Grafana Catalog Team
Contributor
There was a problem hiding this comment.
Pull request overview
Adds additional Grafana UI component wrappers to the components fixture in @grafana/plugin-e2e so tests can interact with common controls (Select, MultiSelect, Switch, RadioGroup, UnitPicker, ColorPicker) on arbitrary pages, using within(root) scoping similar to existing dataSourcePicker and timeRangePicker.
Changes:
- Add
getContainer()+within(root)support for six component models (Select, MultiSelect, Switch, RadioGroup, UnitPicker, ColorPicker). - Extend
Componentsfixture to expose these components and export them from the package public API. - Add e2e coverage for the new fixture entries (except MultiSelect, per PR notes).
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/plugin-e2e/tests/as-admin-user/components/components.spec.ts | Adds e2e tests validating new components.*.within(...) helpers. |
| packages/plugin-e2e/src/models/components/UnitPicker.ts | Adds getContainer() + within() for UnitPicker scoping. |
| packages/plugin-e2e/src/models/components/Switch.ts | Adds version-conditional getContainer() + within() for Switch scoping. |
| packages/plugin-e2e/src/models/components/Select.ts | Adds getContainer() + within() for Select scoping. |
| packages/plugin-e2e/src/models/components/RadioGroup.ts | Adds version-conditional getContainer() + within() for RadioGroup scoping. |
| packages/plugin-e2e/src/models/components/MultiSelect.ts | Adds getContainer() + within() for MultiSelect scoping. |
| packages/plugin-e2e/src/models/components/ColorPicker.ts | Adds getContainer() + within() for ColorPicker scoping. |
| packages/plugin-e2e/src/models/Components.ts | Adds new component instances to the components fixture. |
| packages/plugin-e2e/src/index.ts | Exports the new component classes from the public API. |
Comment on lines
+15
to
+17
| return base.locator( | ||
| '[class*="-grafana-select-value-container"]:not([class*="-grafana-select-value-container-multi"])' | ||
| ); |
| } | ||
|
|
||
| within(root: Locator): MultiSelect { | ||
| return new MultiSelect(this.ctx, MultiSelect.getContainer(this.ctx, root)); |
Comment on lines
+17
to
+19
| within(root: Locator): MultiSelect { | ||
| return new MultiSelect(this.ctx, MultiSelect.getContainer(this.ctx, root)); | ||
| } |
Comment on lines
+13
to
24
| static getContainer(ctx: PluginTestCtx, root?: Locator): Locator { | ||
| const base = root ?? ctx.page; | ||
| return base.locator('[data-testid*="colorswatch"]'); | ||
| } | ||
|
|
||
| within(root: Locator): ColorPicker { | ||
| return new ColorPicker(this.ctx, ColorPicker.getContainer(this.ctx, root)); | ||
| } | ||
|
|
||
| async selectOption(rgbOrHex: string, options?: SelectOptionsType): Promise<void> { | ||
| await this.element.getByRole('button').click(options); | ||
| await this.getCustomTab().click(options); |
Comment on lines
29
to
+46
| readonly dataSourcePicker: DataSourcePicker; | ||
| readonly timeRangePicker: TimeRange; | ||
| readonly select: Select; | ||
| readonly multiSelect: MultiSelect; | ||
| readonly switch: Switch; | ||
| readonly radioGroup: RadioGroup; | ||
| readonly unitPicker: UnitPicker; | ||
| readonly colorPicker: ColorPicker; | ||
|
|
||
| constructor(ctx: PluginTestCtx) { | ||
| this.dataSourcePicker = new DataSourcePicker(ctx); | ||
| this.timeRangePicker = new TimeRange(ctx); | ||
| this.select = new Select(ctx, Select.getContainer(ctx)); | ||
| this.multiSelect = new MultiSelect(ctx, MultiSelect.getContainer(ctx)); | ||
| this.switch = new Switch(ctx, Switch.getContainer(ctx)); | ||
| this.radioGroup = new RadioGroup(ctx, RadioGroup.getContainer(ctx)); | ||
| this.unitPicker = new UnitPicker(ctx, UnitPicker.getContainer(ctx)); | ||
| this.colorPicker = new ColorPicker(ctx, ColorPicker.getContainer(ctx)); |
Contributor
Playwright test results
Troubleshooting404 when clicking on
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this PR does / why we need it:
Follow-up to #2583. Adds six more Grafana UI components to the
componentsfixture: Select, MultiSelect, Switch, RadioGroup, UnitPicker, and ColorPicker. Each component gets astatic getContainer()method for version-conditional container resolution and awithin(root)method for DOM scoping, matching the pattern established bydataSourcePickerandtimeRangePicker.Uses CSS/structural fallback selectors that work across all supported Grafana versions (8.5+). Once grafana/grafana#124120 merges and
@grafana/e2e-selectorsis updated, a follow-up will adddata-testidcontainer selectors for Grafana >= 13.1.0. The six component classes are also now exported from the package public API.Which issue(s) this PR fixes:
Follows up on #2583 and depends on grafana/grafana#124120 for stable container selectors.
Special notes for your reviewer:
switchis used as a property name on theComponentsclass. It's a JS reserved word but valid as a property name in ES6+ class definitions.[class*="-grafana-select-value-container"]) rely on Grafana's Emotion-generated class naming convention and will be replaced by stabledata-testidselectors in a follow-up.