83bac1ff6d
This commit provides tests alongside the stories for the aggregate cards. The tests are fairly basic, but they're good enough for starting *and* they provide a pretty good example of how to test when a promise with a delay is involved. Two minor fixes in this code: - The subtext was given a small amount of whitespace above, to remove the crowding that happened. It looks much better with a half-rem of space. - In the rare case that we have a card header with no icon, the ' ' symbol that separates the icon from the header is now not rendered. In the previous form, it would push the header to the left, making it "hang in space" one rem to the right of the visual line formed by the rightmost content border. The padding between the header, body, and footer is odd; body is 1 rem, the header and footer 2rems. This looks good for the graphs, but for the text, not so much.
84 lines
3.5 KiB
TypeScript
84 lines
3.5 KiB
TypeScript
import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
|
|
import { $, expect } from "@wdio/globals";
|
|
|
|
import { msg } from "@lit/localize";
|
|
import { TemplateResult, html, render as litRender } from "lit";
|
|
|
|
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
|
|
|
import "../AggregateCard.js";
|
|
|
|
const render = (body: TemplateResult) => {
|
|
document.adoptedStyleSheets = [
|
|
...document.adoptedStyleSheets,
|
|
ensureCSSStyleSheet(PFBase),
|
|
ensureCSSStyleSheet(AKGlobal),
|
|
];
|
|
return litRender(body, document.body);
|
|
};
|
|
|
|
describe("ak-aggregate-card", () => {
|
|
it("should render the standard card without an icon, link, or subtext", async () => {
|
|
render(
|
|
html`<ak-aggregate-card header="Loading"
|
|
><p>This is the main content</p></ak-aggregate-card
|
|
>`,
|
|
);
|
|
const component = await $("ak-aggregate-card");
|
|
await expect(await component.$(">>>.pf-c-card__header a")).not.toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title i")).not.toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title")).toHaveText("Loading");
|
|
await expect(await component.$(">>>.pf-c-card__body")).toHaveText(
|
|
"This is the main content",
|
|
);
|
|
await expect(await component.$(">>>.subtext")).not.toExist();
|
|
});
|
|
|
|
it("should render the standard card with an icon", async () => {
|
|
render(
|
|
html`<ak-aggregate-card icon="fa fa-bath" header="Loading"
|
|
><p>This is the main content</p></ak-aggregate-card
|
|
>`,
|
|
);
|
|
const component = await $("ak-aggregate-card");
|
|
await expect(await component.$(">>>.pf-c-card__title i")).toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title")).toHaveText("Loading");
|
|
await expect(await component.$(">>>.pf-c-card__body")).toHaveText(
|
|
"This is the main content",
|
|
);
|
|
});
|
|
|
|
it("should render the standard card with an icon, a link, and slotted content", async () => {
|
|
render(
|
|
html`<ak-aggregate-card icon="fa fa-bath" header="Loading" headerLink="http://localhost"
|
|
><p>This is the main content</p></ak-aggregate-card
|
|
>`,
|
|
);
|
|
const component = await $("ak-aggregate-card");
|
|
await expect(await component.$(">>>.pf-c-card__header a")).toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title i")).toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title")).toHaveText("Loading");
|
|
await expect(await component.$(">>>.pf-c-card__body")).toHaveText(
|
|
"This is the main content",
|
|
);
|
|
});
|
|
|
|
it("should render the standard card with an icon, a link, and subtext", async () => {
|
|
render(
|
|
html`<ak-aggregate-card
|
|
icon="fa fa-bath"
|
|
header="Loading"
|
|
headerLink="http://localhost"
|
|
subtext="Xena had subtext"
|
|
><p>This is the main content</p></ak-aggregate-card
|
|
>`,
|
|
);
|
|
const component = await $("ak-aggregate-card");
|
|
await expect(await component.$(">>>.pf-c-card__header a")).toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title i")).toExist();
|
|
await expect(await component.$(">>>.pf-c-card__title")).toHaveText("Loading");
|
|
await expect(await component.$(">>>.subtext")).toHaveText("Xena had subtext");
|
|
});
|
|
});
|