tokens testing

---

tags: [tokens]

Tokens Testing

Global & Core

Snapshots of existing core and global tokens are kept in the calcite-design-tokens package. You can confirm current tokens by running npm run test.

Component Tokens

E2E

Automated testing of component tokens may be done via the themed helper found in commonTests.

describe("theme", () => {
    themed('calcite-button', {
       "--calcite-button-background-color": {
            shadowSelector: 'button',
            targetProp: "backgroundColor",
        },
        "--calcite-button-background-color-hover": {
            shadowSelector: 'button',
            targetProp: "backgroundColor",
            state: 'hover'
        }
        "--calcite-button-background-color-active": {
            shadowSelector: 'button',
            targetProp: "backgroundColor",
            state: { press: { attribute: "class", value: CSS.button } },
        }
    }
}

The themed helper accepts an object of tokens to test with the token name as the key and accepts an object or array of objects as a value with the following properties...

/**
 * The selector of the target element. When not provided, the component tag is used.
 */
selector?: string;

/**
 * This selector will be used to find the target element within the shadow DOM of the component.
 */
shadowSelector?: string;

/**
 * The CSSStyleDeclaration property to assert on.
 */
targetProp: CSSProp | MappedCalciteCSSCustomProp;

/**
 * The state to apply to the target element. 
 */
state?: State | RequireExactlyOne<Record<State, ContextSelectByAttr>, "focus" | "hover" | "press">;

Chromatic

Design tokens should not make any changes to Chromatic tests unless already approved for breaking changes.

Demo pages (manual testing)

Manual testing of component tokens should still be conducted when potential breaking changes are introduced.

1. open the component's html demo page.
2. add a new "theme-ing" section if one doesn't already exist.
3. add a <demo-theme> component around the component(s) to test.
4. add all relevant component tokens to the tokens prop in a list. This will automatically generate some token values based on the name. OR add a style prop to either demo-theme or a specific component with the variable you want to test and a value.
5. check the component in the demo page.
   1. Open the component in the dev-tools
   2. Do the applied token names make sense?
      1. Do the names give customers a good representation of how they can update the component?
      2. Are names consistent with the Calcite Tokens naming schema?
   3. Do applied tokens make the expected changes? Example: Does -background-color change the background color of the component? Does -indicator change the color of selection indicator visual elements in the component?

Example - set tokens with demo-theme

<demo-theme tokens="
    --calcite-button-background-color, 
    --calcite-button-border-color, 
    --calcite-button-corner-radius, 
    --calcite-button-corner-radius-start-start, 
    --calcite-button-corner-radius-start-end, 
    --calcite-button-corner-radius-end-start, 
    --calcite-button-corner-radius-end-end, 
    --calcite-button-loader-color, 
    --calcite-button-shadow, 
    --calcite-button-text-color, 
    --calcite-button-icon-color"
><calcite-button kind="inverse" scale="l"> Button </calcite-button></demo-theme>

Example - set tokens with style

<calcite-button kind="inverse" scale="l" style="--calcite-button-background-color: var(--calcite-color-info); --calcite-button-border-color: green; "> Button </calcite-button>