Skip to content

Commit

Permalink
test(card, card-group): add component token E2E tests (#9600)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180

## Summary

✨🧪✨
  • Loading branch information
@jcfranco
jcfranco authored Jun 18, 2024
1 parent 762b056 commit ac2d13f
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 31 deletions.
54 changes: 33 additions & 21 deletions packages/calcite-components/src/components/card-group/card-group.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
import { accessible, renders, hidden, disabled } from "../../tests/commonTests";
import { CSS } from "../card/resources";
import { accessible, renders, hidden, disabled, themed } from "../../tests/commonTests";
import { CSS as CARD_CSS } from "../card/resources";
import { createSelectedItemsAsserter } from "../../tests/utils";
import { CSS } from "./resources";

describe("calcite-card-group", () => {
describe("renders", () => {
Expand Down Expand Up @@ -70,8 +71,8 @@ describe("calcite-card-group", () => {
const element = await page.find("calcite-card-group");
const card1 = await page.find("#card-1");
const card2 = await page.find("#card-2");
const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);

const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
const selectedItemAsserter = await createSelectedItemsAsserter(
Expand All @@ -88,7 +89,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card2.id]);

card1CheckAction.click();
await card1CheckAction.click();
await page.waitForChanges();
expect(await cardGroupSelectSpy).toHaveReceivedEventTimes(1);
expect(await cardSelectSpy1).toHaveReceivedEventTimes(1);
Expand All @@ -98,7 +99,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card1.id]);

card2CheckAction.click();
await card2CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
expect(cardSelectSpy1).toHaveReceivedEventTimes(1);
Expand All @@ -108,7 +109,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card2.id]);

card2CheckAction.click();
await card2CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
expect(cardSelectSpy1).toHaveReceivedEventTimes(1);
Expand All @@ -132,8 +133,8 @@ describe("calcite-card-group", () => {
const element = await page.find("calcite-card-group");
const card1 = await page.find("#card-1");
const card2 = await page.find("#card-2");
const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);

const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
const selectedItemAsserter = await createSelectedItemsAsserter(
Expand All @@ -146,23 +147,23 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card1.id]);

card1CheckAction.click();
await card1CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(1);
expect(await card1.getProperty("selected")).toBe(true);
expect(await card2.getProperty("selected")).toBe(false);
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card1.id]);

card2CheckAction.click();
await card2CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
expect(await card1.getProperty("selected")).toBe(false);
expect(await card2.getProperty("selected")).toBe(true);
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card2.id]);

card2CheckAction.click();
await card2CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
expect(await card1.getProperty("selected")).toBe(false);
Expand All @@ -186,9 +187,9 @@ describe("calcite-card-group", () => {
const card1 = await page.find("#card-1");
const card2 = await page.find("#card-2");
const card3 = await page.find("#card-3");
const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
const card3CheckAction = await page.find(`#card-3 >>> .${CSS.checkboxWrapper}`);
const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
const card3CheckAction = await page.find(`#card-3 >>> .${CARD_CSS.checkboxWrapper}`);

const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
const selectedItemAsserter = await createSelectedItemsAsserter(
Expand All @@ -201,7 +202,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toEqual([]);
await selectedItemAsserter([]);

card1CheckAction.click();
await card1CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(1);
expect(await card1.getProperty("selected")).toBe(true);
Expand All @@ -210,7 +211,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card1.id]);

card2CheckAction.click();
await card2CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
expect(await card1.getProperty("selected")).toBe(true);
Expand All @@ -219,7 +220,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(2);
await selectedItemAsserter([card1.id, card2.id]);

card3CheckAction.click();
await card3CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
expect(await card1.getProperty("selected")).toBe(true);
Expand All @@ -228,7 +229,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(3);
await selectedItemAsserter([card1.id, card2.id, card3.id]);

card1CheckAction.click();
await card1CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(4);
expect(await card1.getProperty("selected")).toBe(false);
Expand All @@ -237,7 +238,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(2);
await selectedItemAsserter([card2.id, card3.id]);

card2CheckAction.click();
await card2CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(5);
expect(await card1.getProperty("selected")).toBe(false);
Expand All @@ -246,7 +247,7 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(1);
await selectedItemAsserter([card3.id]);

card3CheckAction.click();
await card3CheckAction.click();
await page.waitForChanges();
expect(cardGroupSelectSpy).toHaveReceivedEventTimes(6);
expect(await card1.getProperty("selected")).toBe(false);
Expand Down Expand Up @@ -441,4 +442,15 @@ describe("calcite-card-group", () => {
expect(await element.getProperty("selectedItems")).toHaveLength(2);
await selectedItemAsserter([card4.id, card5.id]);
});

describe("theme", () => {
describe("default", () => {
themed("calcite-card-group", {
"--calcite-card-group-gap": {
shadowSelector: `.${CSS.container}`,
targetProp: "gap",
},
});
});
});
});
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/card-group/card-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
setComponentLoaded,
setUpLoadableComponent,
} from "../../utils/loadable";
import { CSS } from "./resources";

/**
* @slot - A slot for adding one or more `calcite-card`s.
Expand Down Expand Up @@ -248,7 +249,7 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
<div
aria-disabled={toAriaBoolean(this.disabled)}
aria-label={this.label}
class="container"
class={CSS.container}
role={role}
>
<slot
Expand Down
3 changes: 3 additions & 0 deletions packages/calcite-components/src/components/card-group/resources.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const CSS = {
container: "container",
};
115 changes: 114 additions & 1 deletion packages/calcite-components/src/components/card/card.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests";
import { accessible, renders, slots, hidden, t9n, themed } from "../../tests/commonTests";
import { placeholderImage } from "../../../.storybook/placeholderImage";
import { html } from "../../../support/formatting";
import { CSS, SLOTS } from "./resources";
Expand Down Expand Up @@ -116,4 +116,117 @@ describe("calcite-card", () => {
const loaderContainer = await page.find("calcite-card >>> .calcite-card-loader-container");
expect(loaderContainer.getAttribute("aria-live")).toBe("polite");
});

describe("theme", () => {
describe("default", () => {
themed(
html`<calcite-card>
<span slot="heading">Heading</span>
<span slot="description">Description</span>
</calcite-card>`,
{
"--calcite-card-background-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "backgroundColor",
},
"--calcite-card-corner-radius": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "borderRadius",
},
"--calcite-card-border-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "borderColor",
},
"--calcite-card-shadow": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "boxShadow",
},
},
);
});

describe("selectable", () => {
themed(
html`<calcite-card selection-mode="single">
<span slot="heading">Heading</span>
<span slot="description">Description</span>
</calcite-card>`,
{
"--calcite-card-selection-icon-color": {
shadowSelector: `calcite-icon`,
targetProp: "--calcite-icon-color",
},
"--calcite-card-selection-background-color": {
shadowSelector: `.${CSS.checkboxWrapper}`,
targetProp: "backgroundColor",
},
"--calcite-card-selection-background-color-active": {
shadowSelector: `.${CSS.checkboxWrapper}`,
targetProp: "backgroundColor",
state: { press: { attribute: "class", value: CSS.checkboxWrapper } },
},
"--calcite-card-selection-background-color-hover": {
shadowSelector: `.${CSS.checkboxWrapper}`,
targetProp: "backgroundColor",
state: "hover",
},
},
);
});

describe("selected", () => {
themed(
html`<calcite-card selected selection-mode="single">
<span slot="heading">Heading</span>
<span slot="description">Description</span>
</calcite-card>`,
{
"--calcite-card-accent-color-selected": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "boxShadow",
},
"--calcite-card-border-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "borderColor",
},
"--calcite-card-selection-background-color-selected": {
shadowSelector: `.${CSS.checkboxWrapper}`,
targetProp: "backgroundColor",
},
"--calcite-card-selection-icon-color-selected": {
shadowSelector: `calcite-icon`,
targetProp: "--calcite-icon-color",
},
"--calcite-card-selection-icon-color-hover": {
shadowSelector: `calcite-icon`,
targetProp: "--calcite-icon-color",
state: "hover",
},
},
);
});

describe("loading", () => {
themed(
html`<calcite-card loading>
<span slot="heading">Heading</span>
<span slot="description">Description</span>
</calcite-card>`,
{
"--calcite-card-loader-color-start": {
shadowSelector: `calcite-loader`,
targetProp: "--calcite-loader-color-start",
},
"--calcite-card-loader-color-middle": {
shadowSelector: `calcite-loader`,
targetProp: "--calcite-loader-color-middle",
},
"--calcite-card-loader-color-end": {
shadowSelector: `calcite-loader`,
targetProp: "--calcite-loader-color-end",
},
},
);
});
});
});
13 changes: 5 additions & 8 deletions packages/calcite-components/src/components/card/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
*
* These properties can be overridden using the component's tag as selector.
*
*
* @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
* @prop --calcite-card-background-color: Specifies the background color of the component.
* @prop --calcite-card-border-color: Specifies the border color of the component.
* @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-card-loader-color-end: Specifies the end color of the loader
* @prop --calcite-card-loader-color-middle: Specifies the middle color of the loader
* @prop --calcite-card-loader-color-start: Specifies the start color of the loader
* @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.
* @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
* @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.
Expand All @@ -16,11 +18,6 @@
* @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
* @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
* @prop --calcite-card-shadow: Specifies the shadow of the component.
* @prop --calcite-card-loader-color-one-third: Specifies the starting color of the loader
* @prop --calcite-card-loader-color-start: Specifies the starting color of the loader
* @prop --calcite-card-loader-color-two-thirds: Specifies the starting color of the loader
*
*/

:host {
Expand Down Expand Up @@ -217,9 +214,9 @@ slot[name="footer-end"]::slotted(*) {
}

calcite-loader {
--calcite-loader-color-middle: var(--calcite-card-loader-color-one-third);
--calcite-loader-color-start: var(--calcite-card-loader-color-start);
--calcite-loader-color-end: var(--calcite-card-loader-color-two-thirds);
--calcite-loader-color-middle: var(--calcite-card-loader-color-middle);
--calcite-loader-color-end: var(--calcite-card-loader-color-end);
}

@include base-component();
Expand Down

0 comments on commit ac2d13f

Please sign in to comment.