test: update themed to handle pseudoelements and special underline styling case #9450
Conversation
This file contains 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
jcfranco
added
the
skip visual snapshots
alisonailea
requested changes
May 31, 2024
| type E2EElementInternal = E2EElement & { | ||
| _elmHandle: ElementHandle; | ||
| }; | ||
|
|
||
| return await (element as E2EElementInternal)._elmHandle.evaluate( | ||
| (el, targetProp): string => window.getComputedStyle(el).getPropertyValue(targetProp), | ||
| (el, targetProp, pseudoElement): string => window.getComputedStyle(el, pseudoElement).getPropertyValue(targetProp), |
| @@ -115,13 +121,14 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component | |||
| styleTargets[selector][1].push(tokenStyle); | |||
| } | |||
| if (shadowSelector) { | |||
| target = shadowSelector ? await page.find(`${selector} >>> ${shadowSelector}`) : target; | |||
| const effectiveShadowSelector = shadowSelector.replace(/::.*$/, ""); | |||
| target.el = await page.find(`${selector} >>> ${effectiveShadowSelector}`); | |||
There was a problem hiding this comment.
I tested this with alert, action, and menu-item. Action passed but when I tested alert and menu-item it only passed when I put a debugger on line 125 and then immediately continued to play the test.
const tokens: ComponentTestTokens = {
"--calcite-alert-dismiss-progress-background-color": {
shadowSelector: `.${CSS.dismissProgress}::after`,
targetProp: "backgroundColor",
},
};
themed(`<calcite-alert open auto-close>`, tokens);
const tokens: ComponentTestTokens = {
"--calcite-menu-item-action-border-color": [
{
shadowSelector: "calcite-action::after",
targetProp: "backgroundColor",
},
],
};
themed(`calcite-menu-item`, tokens);
```
There was a problem hiding this comment.
This might be a separate issue since all updates in this PR are synchronous or update existing async code.
I noticed the PR was not synced up with epic/7180-component-tokens, which I have taken care of. Would you mind testing again?
…to-handle-pseudoelements-and-special-underline-case
…to-handle-pseudoelements-and-special-underline-case
alisonailea
approved these changes
Jun 4, 2024
jcfranco
deleted the
jcfranco/update-theme-to-handle-pseudoelements-and-special-underline-case
branch
jcfranco
added a commit
that referenced
this pull request
Jun 4, 2024
✨🧪🧰✨
Test/Assertion failure messages should provide more context now:
```zsh
FAIL src/components/action-pad/action-pad.e2e.ts (7.262 s)
● calcite-action-pad › theme › default › is themeable
expect(received).toBe(expected) // Object.is equality
Expected: "[--calcite-action-pad-trigger-background-color-active:--calcite-action-group-trigger-background-color-active] rgb(0, 191, 255)"
Received: "[--calcite-action-pad-trigger-background-color-active:--calcite-action-group-trigger-background-color-active] "
```
```zsh
FAIL src/components/handle/handle.e2e.ts
● calcite-handle › theme › selected › is themeable
expect(received).toBe(expected) // Object.is equality
Expected: "[--calcite-handle-background-color-selected:backgroundColor] rgb(0, 191, 255)"
Received: "[--calcite-handle-background-color-selected:backgroundColor] rgba(0, 0, 0, 0)"
```
```zsh
FAIL src/components/action-group/action-group.e2e.ts (5.418 s)
● calcite-action-group › theme › is themeable
[--calcite-action-group-trigger-background-color-hover] target node (calcite-action-group >>> calcite-action) must be clickable (larger than 1x1) for state: hover
380 | })`;
```
**Note**: this depends on
#9450.
This was referenced Jun 20, 2024
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.
Related Issue: #7180
Summary
✨🧪✨
Examples