35f96df66e
This commit adds unit tests for the Alerts and EmptyState elements. It includes a new test/documentation feature; elements can now be fully documented with text description and active controls. It *removes* the `babel` imports entirely. Either we don't need them, or the components that do need them are importing them automatically. [An outstanding bug in WebDriverIO](https://github.com/webdriverio/webdriverio/issues/12056) unfortunately means that the tests cannot be run in parallel for the time being.While one test is running, the compiler for other tests becomes unreliable. They're currently working on this issue. I have set the `maxInstances` to **1**. I have updated the `<ak-alert>` component just a bit, providing an attribute alternative to the `Level` property; now instead of passing it a `<ak-alert level=${Levels.Warning}>` properties, you can just say `<ak-alert warning>` and it'll work just fine. The old way is still the default behavior. The default behavior for `EmptyState` was a little confusing; I've re-arranged it for clarity. Since I touched it, I also added the `interface` and `HTMLElementTagNameMap` declarations. Added documentation to all the elements I've touched (so far).
83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
|
|
import { $, expect } from "@wdio/globals";
|
|
|
|
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");
|
|
});
|
|
});
|