Skip to content

Commit

Permalink
test(modal): add token theming tests (#9447)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180

## Summary
Add token theming tests for `modal`.
  • Loading branch information
@Elijbet
Elijbet authored May 30, 2024
1 parent 4677c4d commit 73c5dc8
Showing 1 changed file with 137 additions and 3 deletions.
140 changes: 137 additions & 3 deletions packages/calcite-components/src/components/modal/modal.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
import { focusable, hidden, openClose, renders, slots, t9n, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils";
import { ComponentTestTokens } from "../../tests/commonTests/themed";
import { CSS, SLOTS } from "./resources";

describe("calcite-modal", () => {
Expand Down Expand Up @@ -610,7 +611,7 @@ describe("calcite-modal", () => {
});
const scrimStyles = await page.evaluate(() => {
const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background-color");
});
expect(scrimStyles.trim()).toEqual("rgba(0, 0, 0, 0.85)");
});
Expand All @@ -632,7 +633,7 @@ describe("calcite-modal", () => {
});
const scrimStyles = await page.evaluate(() => {
const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background-color");
});
expect(scrimStyles).toEqual(overrideStyle);
});
Expand All @@ -657,3 +658,136 @@ describe("calcite-modal", () => {
expect(closeIcon).not.toBe(null);
});
});

describe("theme", () => {
const modalHTML = html`
<calcite-modal open>
<h3 slot="header">Slot for a header.</h3>
<div slot="content-top">Slot for a content-top.</div>
<div slot="content" style="height: 100px">
Lorem ipsum dolor sit amet, feugiat magna ut, posuere arcu. Curabitur varius erat ut suscipit convallis.
</div>
<div slot="content-bottom">Slot for a content-bottom.</div>
<calcite-button slot="primary" width="full">Button</calcite-button>
</calcite-modal>
`;
const modalBrandHTML = html`
<calcite-modal kind="brand" open>
<h3 slot="header">Slot for a header.</h3>
</calcite-modal>
`;
const modalDangerHTML = html`
<calcite-modal kind="danger" open>
<h3 slot="header">Slot for a header.</h3>
</calcite-modal>
`;
const modalInfoHTML = html`
<calcite-modal kind="info" open>
<h3 slot="header">Slot for a header.</h3>
</calcite-modal>
`;
const modalSuccessHTML = html`
<calcite-modal kind="success" open>
<h3 slot="header">Slot for a header.</h3>
</calcite-modal>
`;
const modalWarningHTML = html`
<calcite-modal kind="warning" open>
<h3 slot="header">Slot for a header.</h3>
</calcite-modal>
`;
describe("default", () => {
const tokens: ComponentTestTokens = {
"--calcite-modal-background-color": {
shadowSelector: `.${CSS.modal}`,
targetProp: "backgroundColor",
},
"--calcite-modal-border-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "--calcite-internal-modal-border-color",
},
"--calcite-modal-close-button-background-color-hover": {
shadowSelector: `.${CSS.modal} .${CSS.close}`,
targetProp: "backgroundColor",
state: { hover: { attribute: "class", value: CSS.close } },
},
"--calcite-modal-close-button-background-color": {
shadowSelector: `.${CSS.modal} .${CSS.close}`,
targetProp: "backgroundColor",
},
"--calcite-modal-content-background-color": {
shadowSelector: `.${CSS.modal} .${CSS.content}`,
targetProp: "backgroundColor",
},
"--calcite-modal-content-padding": {
shadowSelector: `.${CSS.modal} .${CSS.content}`,
targetProp: "padding",
},
"--calcite-modal-content-space": {
shadowSelector: `.${CSS.modal} .${CSS.content}`,
targetProp: "padding",
},
"--calcite-modal-height": {
shadowSelector: `.${CSS.modal}`,
targetProp: "blockSize",
},
"--calcite-modal-shadow": {
shadowSelector: `.${CSS.modal}`,
targetProp: "boxShadow",
},
"--calcite-modal-text-color": {
shadowSelector: `.${CSS.modal}`,
targetProp: "color",
},
"--calcite-modal-width": {
shadowSelector: `.${CSS.modal}`,
targetProp: "inlineSize",
},
"--calcite-modal-scrim-background-color": {
shadowSelector: `.${CSS.scrim}`,
targetProp: "--calcite-scrim-background-color",
},
};
themed(async () => modalHTML, tokens);
});
describe("kindBrand", () => {
const tokens: ComponentTestTokens = {
"--calcite-modal-accent-color": {
targetProp: "--calcite-internal-modal-accent-color",
},
};
themed(async () => modalBrandHTML, tokens);
});
describe("dangerBrand", () => {
const tokens: ComponentTestTokens = {
"--calcite-modal-accent-color": {
targetProp: "--calcite-internal-modal-accent-color",
},
};
themed(async () => modalDangerHTML, tokens);
});
describe("infoBrand", () => {
const tokens: ComponentTestTokens = {
"--calcite-modal-accent-color": {
targetProp: "--calcite-internal-modal-accent-color",
},
};
themed(async () => modalInfoHTML, tokens);
});
describe("successBrand", () => {
const tokens: ComponentTestTokens = {
"--calcite-modal-accent-color": {
targetProp: "--calcite-internal-modal-accent-color",
},
};
themed(async () => modalSuccessHTML, tokens);
});
describe("warningBrand", () => {
const tokens: ComponentTestTokens = {
"--calcite-modal-accent-color": {
targetProp: "--calcite-internal-modal-accent-color",
},
};
themed(async () => modalWarningHTML, tokens);
});
});

0 comments on commit 73c5dc8

Please sign in to comment.