Skip to content
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

test: update themed to handle pseudoelements and special underline styling case #9450

Merged
merged 6 commits into from
Jun 4, 2024
Merged

test: update themed to handle pseudoelements and special underline styling case #9450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
65b17dd
test: update themed to handle pseudoelements and special underline st…
jcfranco May 29, 2024
f586df9
update example
jcfranco May 31, 2024
0ed89cb
Merge branch 'epic/7180-component-tokens' into jcfranco/update-theme-…
jcfranco May 31, 2024
5ec3cad
Merge branch 'epic/7180-component-tokens' into jcfranco/update-theme-…
jcfranco Jun 4, 2024
dab5f80
add support for CSS2.1 pseudoelement syntax
jcfranco Jun 4, 2024
04939ad
update action test for coverage
jcfranco Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/action/action.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,8 +226,8 @@ describe("calcite-action", () => {
targetProp: "--calcite-icon-color",
},
"--calcite-action-indicator-color": {
shadowSelector: `.${CSS.actionIndicator}`,
targetProp: "color",
shadowSelector: `.${CSS.actionIndicator}::after`,
targetProp: "background-color",
},
} as const;
themed(
Expand Down
3 changes: 1 addition & 2 deletions packages/calcite-components/src/components/action/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@

.action-indicator {
position: relative;
color: var(--calcite-action-indicator-color, var(--calcite-color-brand));
block-size: var(--calcite-internal-action-line-height);
inline-size: var(--calcite-internal-action-line-height);

Expand All @@ -95,7 +94,7 @@
@apply rounded-full;
inset-block-end: -0.275rem;
inset-inline-end: -0.275rem;
background-color: currentColor;
background-color: var(--calcite-action-indicator-color, var(--calcite-color-brand));
}
}

Expand Down
120 changes: 72 additions & 48 deletions packages/calcite-components/src/tests/commonTests/themed.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ import { getTagAndPage } from "./utils";

expect.extend(toHaveNoViolations);

interface TargetInfo {
el: E2EElement;
selector: string;
shadowSelector: string;
}

const pseudoElementPattern = /:{1,2}(before|after)/;

/**
* This object that represents component tokens and their respective test options.
*/
Expand All @@ -17,43 +25,48 @@ export type ComponentTestTokens = Record<CalciteCSSCustomProp, TestSelectToken |
* Helper to test custom theming of a component's associated tokens.
*
* @example
// describe("theme", () => {
// const tokens: ComponentTestTokens = {
// "--calcite-action-menu-border-color": [
// {
// targetProp: "borderLeftColor",
// },
// {
// shadowSelector: "calcite-action",
// targetProp: "--calcite-action-border-color",
// },
// ],
// "--calcite-action-menu-background-color": {
// targetProp: "backgroundColor",
// shadowSelector: ".container",
// },
// "--calcite-action-menu-trigger-background-color-active": {
// shadowSelector: "calcite-action",
// targetProp: "--calcite-action-background-color",
// state: { press: { attribute: "class", value: CSS.defaultTrigger } },
// },
// "--calcite-action-menu-trigger-background-color-focus": {
// shadowSelector: "calcite-action",
// targetProp: "--calcite-action-background-color",
// state: "focus",
// },
// "--calcite-action-menu-trigger-background-color-hover": {
// shadowSelector: "calcite-action",
// targetProp: "--calcite-action-background-color",
// state: "hover",
// },
// "--calcite-action-menu-trigger-background-color": {
// shadowSelector: "calcite-action",
// targetProp: "--calcite-action-background-color",
// },
// };
// themed(`calcite-action-bar`, tokens);
// });
* describe("theme", () => {
* const tokens: ComponentTestTokens = {
* "--calcite-action-menu-border-color": [
* {
* targetProp: "borderLeftColor",
* },
* {
* shadowSelector: "calcite-action",
* targetProp: "--calcite-action-border-color",
* },
* {
* // added to demonstrate pseudo-element support
* shadowSelector: "calcite-action::after",
* targetProp: "borderColor",
* },
* ],
* "--calcite-action-menu-background-color": {
* targetProp: "backgroundColor",
* shadowSelector: ".container",
* },
* "--calcite-action-menu-trigger-background-color-active": {
* shadowSelector: "calcite-action",
* targetProp: "--calcite-action-background-color",
* state: { press: { attribute: "class", value: CSS.defaultTrigger } },
* },
* "--calcite-action-menu-trigger-background-color-focus": {
* shadowSelector: "calcite-action",
* targetProp: "--calcite-action-background-color",
* state: "focus",
* },
* "--calcite-action-menu-trigger-background-color-hover": {
* shadowSelector: "calcite-action",
* targetProp: "--calcite-action-background-color",
* state: "hover",
* },
* "--calcite-action-menu-trigger-background-color": {
* shadowSelector: "calcite-action",
* targetProp: "--calcite-action-background-color",
* },
* };
* themed(`calcite-action-bar`, tokens);
* });
*
* @param componentTestSetup - A component tag, html, tag + e2e page or provider for setting up a test.
* @param tokens - A record of token names and their associated selectors, shadow selectors, target props, and states.
Expand Down Expand Up @@ -100,7 +113,7 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component

const el = await page.find(selector);
const tokenStyle = `${token}: ${setTokens[token]}`;
let target = el;
const target: TargetInfo = { el, selector, shadowSelector };
let contextSelector: ContextSelectByAttr;
let stateName: State;

Expand All @@ -115,13 +128,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(pseudoElementPattern, "");
target.el = await page.find(`${selector} >>> ${effectiveShadowSelector}`);
Copy link
Contributor

Choose a reason for hiding this comment

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

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);
    ```

Copy link
Member Author

Choose a reason for hiding this comment

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

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?

}
if (state && typeof state !== "string") {
contextSelector = Object.values(state)[0] as ContextSelectByAttr;
}

if (!target) {
if (!target.el) {
throw new Error(
`[${token}] target (${selector}${
shadowSelector ? " >>> " + shadowSelector : ""
Expand Down Expand Up @@ -168,9 +182,9 @@ type State = "press" | "hover" | "focus";
*/
export type TestTarget = {
/**
* The element to get the computed style from.
* An object with target element and selector info.
*/
target: E2EElement;
target: TargetInfo;

/**
* @todo doc
Expand Down Expand Up @@ -242,15 +256,21 @@ export type TestSelectToken = {
*
* @param element
* @param property
* @param pseudoElement
*/
async function getComputedStylePropertyValue(element: E2EElement, property: string): Promise<string> {
async function getComputedStylePropertyValue(
element: E2EElement,
property: string,
pseudoElement?: string,
): Promise<string> {
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),
Copy link
Contributor

Choose a reason for hiding this comment

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

💪

property,
pseudoElement,
);
}

Expand All @@ -272,6 +292,9 @@ async function assertThemedProps(page: E2EPage, options: TestTarget): Promise<vo
await page.mouse.reset();
await page.waitForChanges();

const targetEl = target.el;
const pseudoElement = target.shadowSelector?.match(pseudoElementPattern)?.[0] ?? undefined;

if (contextSelector) {
const rect = (await page.evaluate((context: TestTarget["contextSelector"]) => {
const searchInShadowDom = (node: Node): HTMLElement | SVGElement | Node | undefined => {
Expand Down Expand Up @@ -344,20 +367,21 @@ async function assertThemedProps(page: E2EPage, options: TestTarget): Promise<vo
await page.mouse.up();
}
} else if (state) {
await target[state as Exclude<State, "press">]();
await targetEl[state as Exclude<State, "press">]();
}

await page.waitForChanges();

if (targetProp.startsWith("--calcite-")) {
expect(await getComputedStylePropertyValue(target, targetProp)).toBe(expectedValue);
expect(await getComputedStylePropertyValue(targetEl, targetProp, pseudoElement)).toBe(expectedValue);
return;
}

const styles = await target.getComputedStyle();
const styles = await targetEl.getComputedStyle(pseudoElement);
const isFakeBorderToken = token.includes("border-color") && targetProp === "boxShadow";
const isLinearGradientUnderlineToken = token.includes("link-underline-color") && targetProp === "backgroundImage";

if (isFakeBorderToken) {
if (isFakeBorderToken || isLinearGradientUnderlineToken) {
expect(styles[targetProp]).toMatch(expectedValue);
return;
}
Expand Down
Loading