Skip to content

Commit

Permalink
test(loader): add component token E2E tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcfranco
jcfranco committed Jul 3, 2024
1 parent 2c5b6ef commit 927ddf7
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 25 deletions.
134 changes: 133 additions & 1 deletion packages/calcite-components/src/components/loader/loader.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -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", () => {
Expand Down Expand Up @@ -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`<calcite-loader></calcite-loader>`);
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`<calcite-loader></calcite-loader>`);
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`<calcite-loader></calcite-loader>`);
await page.addStyleTag({
content: buildStylesToFreezeAnimationAt(7),
});

return { page, tag: "calcite-loader" };
},
{
"--calcite-loader-color-end": {
targetProp: "stroke",
},
},
);
});
});

describe("determinate", () => {
themed(html`<calcite-loader type="determinate" value="10"></calcite-loader>`, {
"--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 inline></calcite-loader>`, {
"--calcite-loader-size-inline": [
{
targetProp: "blockSize",
},
{
targetProp: "minBlockSize",
},
{
targetProp: "inlineSize",
},
],
});
});

describe("determinate", () => {
themed(html`<calcite-loader type="determinate" value="10"></calcite-loader>`, {
"--calcite-loader-font-size": {
shadowSelector: ".loader__percentage",
targetProp: "fontSize",
},
});
});
});
});
});
});
52 changes: 28 additions & 24 deletions packages/calcite-components/src/components/loader/loader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
*
* 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.
* @prop --calcite-loader-font-size: [Deprecated] Specifies the font size of the loading percentage when type is `"determinate"`.
* @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
*
*/

Expand All @@ -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]) {
Expand All @@ -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);
Expand All @@ -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;

Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 927ddf7

Please sign in to comment.