From 927ddf79dba8e8711caf0f1c0d20fe3336671747 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 2 Jul 2024 15:25:10 -0700 Subject: [PATCH] test(loader): add component token E2E tests --- .../src/components/loader/loader.e2e.ts | 134 +++++++++++++++++- .../src/components/loader/loader.scss | 52 +++---- 2 files changed, 161 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/components/loader/loader.e2e.ts b/packages/calcite-components/src/components/loader/loader.e2e.ts index c38ab9394e4..e22a21e1705 100644 --- a/packages/calcite-components/src/components/loader/loader.e2e.ts +++ b/packages/calcite-components/src/components/loader/loader.e2e.ts @@ -1,5 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; -import { hidden, renders } from "../../tests/commonTests"; +import { hidden, renders, themed } from "../../tests/commonTests"; +import { html } from "../../../support/formatting"; describe("calcite-loader", () => { describe("renders", () => { @@ -55,4 +56,135 @@ describe("calcite-loader", () => { expect(loader).toHaveAttribute("id"); expect(loader.getAttribute("id").length).toEqual(36); }); + + describe("theme", () => { + describe("loader colors", () => { + function buildStylesToFreezeAnimationAt(delayInSeconds: number): string { + return html` + :root { --calcite-duration-factor: 0; } calcite-loader { animation-play-state: paused; animation-duration: + 10s; animation-direction: initial; animation-iteration-count: 1; animation-delay: -${delayInSeconds}s; + stroke-width: 10px; /* providing initial values for loader color segments to ensure true negatives */ + --calcite-loader-color-start: black; --calcite-loader-color-middle: black; --calcite-loader-color-end: black; + } + `; + } + + describe("start", () => { + themed( + async () => { + const page = await newE2EPage(); + await page.setContent(html``); + await page.addStyleTag({ + content: buildStylesToFreezeAnimationAt(1), + }); + + return { page, tag: "calcite-loader" }; + }, + { + "--calcite-loader-color-start": { + targetProp: "stroke", + }, + }, + ); + }); + + describe("middle", () => { + themed( + async () => { + const page = await newE2EPage(); + await page.setContent(html``); + await page.addStyleTag({ + content: buildStylesToFreezeAnimationAt(4), + }); + + return { page, tag: "calcite-loader" }; + }, + { + "--calcite-loader-color-middle": { + targetProp: "stroke", + }, + }, + ); + }); + + describe("end", () => { + themed( + async () => { + const page = await newE2EPage(); + await page.setContent(html``); + await page.addStyleTag({ + content: buildStylesToFreezeAnimationAt(7), + }); + + return { page, tag: "calcite-loader" }; + }, + { + "--calcite-loader-color-end": { + targetProp: "stroke", + }, + }, + ); + }); + }); + + describe("determinate", () => { + themed(html``, { + "--calcite-loader-track-color-determinate": { + targetProp: "stroke", + }, + }); + }); + + describe("deprecated", () => { + describe("default", () => { + themed(`calcite-loader`, { + "--calcite-loader-bar-width": { + targetProp: "strokeWidth", + }, + "--calcite-loader-font-size": { + targetProp: "fontSize", + }, + "--calcite-loader-padding": { + targetProp: "paddingBlock", + }, + "--calcite-loader-size": [ + { + targetProp: "blockSize", + }, + { + targetProp: "minBlockSize", + }, + { + targetProp: "inlineSize", + }, + ], + }); + + describe("inline", () => { + themed(html``, { + "--calcite-loader-size-inline": [ + { + targetProp: "blockSize", + }, + { + targetProp: "minBlockSize", + }, + { + targetProp: "inlineSize", + }, + ], + }); + }); + + describe("determinate", () => { + themed(html``, { + "--calcite-loader-font-size": { + shadowSelector: ".loader__percentage", + targetProp: "fontSize", + }, + }); + }); + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss index 45337268070..c8ab4fb6612 100644 --- a/packages/calcite-components/src/components/loader/loader.scss +++ b/packages/calcite-components/src/components/loader/loader.scss @@ -3,7 +3,7 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-loader-bar-width: [Deprecated] defines the width of the loader animation. + * @prop --calcite-loader-bar-width: [Deprecated] defines the width of the loader animation. * @prop --calcite-loader-color-end: defines the color of a loader. Applies to --calcite-loader-color between 66% - 99% of the animation. * @prop --calcite-loader-color-middle: defines the color of a loader. Applies to --calcite-loader-color between 33% - 66% of the animation. * @prop --calcite-loader-color-start: defines the starting color of a loader. Applies to --calcite-loader-color between 0% - 33% of the animation. @@ -11,8 +11,8 @@ * @prop --calcite-loader-padding: [Deprecated] Specifies the padding of the loader. * @prop --calcite-loader-size-inline: [Deprecated] The width and height of an inline loader. * @prop --calcite-loader-size: [Deprecated] The width and height of a non-inline loader. - * @prop --calcite-loader-text-color: var(--calcite-color-text-1); defines the text color of a loader. - * @prop --calcite-loader-track-color-determinate: var(--calcite-color-border-3); defines the track color of a "determinate" loader + * @prop --calcite-loader-text-color: defines the text color of a loader. + * @prop --calcite-loader-track-color-determinate: defines the track color of a "determinate" loader * */ @@ -27,46 +27,48 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; } :host { - --calcite-internal-loader-bar-width: 3; + --calcite-internal-loader-size: var( + --calcite-loader-size, + var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-fallback)) + ); + --calcite-internal-loader-bar-width: #{$stroke-width}px; --calcite-internal-loader-spacing-vertical: theme("spacing.16"); @apply relative mx-auto hidden items-center justify-center opacity-100; font-size: var(--calcite-loader-font-size, var(--calcite-internal-loader-font-size)); stroke: var(--calcite-internal-loader-bar-color, var(--calcite-color-brand)); - stroke-width: var(--calcite-internal-loader-bar-width); + stroke-width: var(--calcite-loader-bar-width, var(--calcite-internal-loader-bar-width)); fill: none; transform: scale(1, 1); animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite linear; padding-block: var(--calcite-loader-padding, theme("spacing.16")); will-change: contents; - block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); - min-block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); - inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); + min-block-size: var(--calcite-internal-loader-size); } :host([scale="s"]) { --calcite-internal-loader-font-size: theme("fontSize.n2"); - --calcite-internal-loader-size: theme("spacing.8"); + --calcite-internal-loader-size-fallback: theme("spacing.8"); } :host([scale="s"][inline]) { - --calcite-internal-loader-size: theme("spacing.3"); + --calcite-internal-loader-size-fallback: theme("spacing.3"); } :host([scale="m"]) { --calcite-internal-loader-font-size: theme("fontSize.0"); - --calcite-internal-loader-size: theme("spacing.16"); + --calcite-internal-loader-size-fallback: theme("spacing.16"); } :host([scale="m"][inline]) { - --calcite-internal-loader-size: theme("spacing.4"); + --calcite-internal-loader-size-fallback: theme("spacing.4"); } :host([scale="l"]) { --calcite-internal-loader-font-size: theme("fontSize.2"); - --calcite-internal-loader-size: theme("spacing.24"); + --calcite-internal-loader-size-fallback: theme("spacing.24"); } :host([scale="l"][inline]) { - --calcite-internal-loader-size: theme("spacing.6"); + --calcite-internal-loader-size-fallback: theme("spacing.6"); } :host([no-padding]) { @@ -82,26 +84,26 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; block text-center; color: var(--calcite-loader-text-color, var(--calcite-color-text-1)); - margin-block-start: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) + theme("spacing.6")); + margin-block-start: calc(var(--calcite-internal-loader-size) + theme("spacing.6")); } .loader__percentage { @apply absolute block text-center; color: var(--calcite-loader-text-color, var(--calcite-color-text-1)); font-size: var(--calcite-loader-font-size, var(--calcite-internal-loader-font-size)); - inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); + inline-size: var(--calcite-internal-loader-size); inset-inline-start: 50%; - margin-inline-start: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) / 2 * -1); + margin-inline-start: calc(var(--calcite-internal-loader-size) / 2 * -1); line-height: 0.25; transform: scale(1, 1); } .loader__svgs { @apply absolute overflow-visible opacity-100; - inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); - block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); + inline-size: var(--calcite-internal-loader-size); + block-size: var(--calcite-internal-loader-size); inset-inline-start: 50%; - margin-inline-start: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) / 2 * -1); + margin-inline-start: calc(var(--calcite-internal-loader-size) / 2 * -1); animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: scaleDuration(--calcite-internal-animation-timing-slow, 6.66); @@ -111,8 +113,8 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; .loader__svg { @apply absolute top-0 origin-center overflow-visible; inset-inline-start: 0; - inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); - block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size)); + inline-size: var(--calcite-internal-loader-size); + block-size: var(--calcite-internal-loader-size); animation-iteration-count: infinite; animation-timing-function: linear; @@ -144,8 +146,10 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; :host([inline]) { @apply relative m-0 animate-none stroke-current stroke-2 py-0; - margin-inline-end: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) * 0.5); - vertical-align: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) * -1 * 0.2); + block-size: var(--calcite-internal-loader-size); + inline-size: var(--calcite-internal-loader-size); + margin-inline-end: calc(var(--calcite-internal-loader-size) * 0.5); + vertical-align: calc(var(--calcite-internal-loader-size) * -1 * 0.2); } :host([inline]) .loader__svgs {