habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Provide tests for the aggregate cards, fix a few minor things (#9744)

Browse Source 
* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: provide a test framework

As is typical of a system where a new build engine is involved, this thing is sadly fragile. Use the
wrong import style in wdio.conf.js and it breaks; there are several notes in tsconfig.test.conf and
wdio.conf.ts to tell eslint or tsc not to complain, it's just a different build with different
criteria, the native criteria don't apply.

On the other hand, writing tests is easy and predictable. We can test behaviors at the unit and
component scale in a straightforward manner, and validate our expectations that things work the way
we believe they should.

* Rolling back a reversion.

* web: update storybook, storybook a few things, fix a few things

After examining how people like Adobe and Salesforce do things, I have updated the storybook
configuration to provide run-time configuration of light/dark mode (although right now nothing
happens), inject the correct styling into the page, and update the preview handling so that we can
see the components better.  We'll see how this pans out.

I have provided stories for the AggregateCard, AggregatePromiseCard, and a new QuickActionsCard. I
also fixed a bug in AggregatePromiseCard where it would fail to report a fetch error. It will only
report that "the operation falied," but it will give the full error into the console.

**As an experiment**, I have changed the interpreter for `lint:precommit` and `build:watch` to use
[Bun](https://bun.sh/) instead of NodeJS. We have observed significant speed-ups and much better
memory management with Bun for these two operations. Those are both developer-facing operations, the
behavior of the system undur current CI/CD should not change.

And finally, I've switched the QuickActionsCard view in Admin-Overview to use the new component.
Looks the same.  Reads *way* easier.  :-)

* Slight revision in exception logic.

* Added a ton of documentation; made the failure message configurable.

* A few documentation changes.

* Adjusting paths to work with tests.

* web: Provide tests for the aggregate cards, fix a few minor things

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 '&nbsp;' 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.

* Prettier had opinions.

* Merge and catching up with the evolution of our test framework.
This commit is contained in:
Ken Sternberg
2024-08-24 05:23:49 -07:00
committed by GitHub
parent 811823e648
commit 133181f7d6
8 changed files with 357 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/elements/cards/AggregateCard.ts
View File

@ -1,6 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { CSSResult, TemplateResult, css, html } from "lit";
import { CSSResult, TemplateResult, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -82,6 +82,7 @@ export class AggregateCard extends AKElement implements IAggregateCard {
text-align: center;
}
.subtext {
margin-top: var(--pf-global--spacer--sm);
font-size: var(--pf-global--FontSize--sm);
}
.pf-c-card__body {
@ -119,13 +120,15 @@ export class AggregateCard extends AKElement implements IAggregateCard {
return html`<div class="pf-c-card pf-c-card-aggregate">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__title">
<i class="${ifDefined(this.icon)}"></i>&nbsp;${this.renderHeader()}
${this.icon
? html`<i class="${ifDefined(this.icon)}"></i>&nbsp;`
: nothing}${this.renderHeader()}
</div>
${this.renderHeaderLink()}
</div>
<div class="pf-c-card__body ${this.leftJustified ? "" : "center-value"}">
${this.renderInner()}
${this.subtext ? html`<p class="subtext">${this.subtext}</p>` : html``}
${this.subtext ? html`<p class="subtext">${this.subtext}</p>` : nothing}
</div>
<div class="pf-c-card__footer">&nbsp;</div>
</div>`;

2
web/src/elements/cards/stories/AggregateCard.stories.ts
View File

@ -31,7 +31,7 @@ export const DefaultStory: StoryObj = {
header: "Default",
headerLink: undefined,
subtext: undefined,
isCenter: false,
leftJustified: false,
},
render: ({ icon, header, headerLink, subtext, leftJustified }: IAggregateCard) => {
return html` <div style="background-color: #f0f0f0; padding: 1rem;">

11
web/src/elements/cards/stories/AggregatePromiseCard.stories.ts
View File

@ -29,12 +29,15 @@ export default metadata;
const text =
"Curl up and sleep on the freshly laundered towels mew, but make meme, make cute face growl at dogs in my sleep. Scratch me there, elevator butt humans, humans, humans oh how much they love us felines we are the center of attention they feed, they clean hopped up on catnip mice. Kitty time flop over, for see owner, run in terror";
const MILLIS_PER_SECOND = 1000;
const EXAMPLE_TIMEOUT = 8000; // 8 seconds
export const DefaultStory: StoryObj = {
args: {
icon: undefined,
header: "Default",
headerLink: undefined,
subtext: "Demo has an eight second delay until resolution",
subtext: `Demo has a ${EXAMPLE_TIMEOUT / MILLIS_PER_SECOND} second delay until resolution`,
leftJustified: false,
},
render: ({ icon, header, headerLink, subtext, leftJustified }: IAggregatePromiseCard) => {
@ -55,7 +58,7 @@ export const DefaultStory: StoryObj = {
subtext=${ifDefined(subtext)}
icon=${ifDefined(icon)}
?left-justified=${leftJustified}
.promise=${runThis(8000, text)}
.promise=${runThis(EXAMPLE_TIMEOUT, text)}
>
</ak-aggregate-card-promise>
</div>`;
@ -67,7 +70,7 @@ export const PromiseRejected: StoryObj = {
icon: undefined,
header: "Default",
headerLink: undefined,
subtext: "Demo has an eight second delay until rejection",
subtext: `Demo has a ${EXAMPLE_TIMEOUT / MILLIS_PER_SECOND} second delay until resolution`,
leftJustified: false,
failureMessage: undefined,
},
@ -97,7 +100,7 @@ export const PromiseRejected: StoryObj = {
icon=${ifDefined(icon)}
failureMessage=${ifDefined(failureMessage)}
?left-justified=${leftJustified}
.promise=${runThis(8000, text)}
.promise=${runThis(EXAMPLE_TIMEOUT, text)}
>
</ak-aggregate-card-promise>
</div>`;

82
web/src/elements/cards/tests/AggregateCard.test.ts Normal file
View File

@ -0,0 +1,82 @@
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");
});
});

62
web/src/elements/cards/tests/AggregatePromiseCard.test.ts Normal file
View File

@ -0,0 +1,62 @@
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 "../AggregatePromiseCard.js";
const render = (body: TemplateResult) => {
document.adoptedStyleSheets = [
...document.adoptedStyleSheets,
ensureCSSStyleSheet(PFBase),
ensureCSSStyleSheet(AKGlobal),
];
return litRender(body, document.body);
};
const DELAY = 1000; // milliseconds
describe("ak-aggregate-card-promise", () => {
it("should render the promise card and display the message after a 1 second timeout", async () => {
const text = "RESULT";
const runThis = (timeout: number, value: string) =>
new Promise((resolve, _reject) => setTimeout(resolve, timeout, value));
const promise = runThis(DELAY, text);
render(html`<ak-aggregate-card-promise .promise=${promise}></ak-aggregate-card-promise>`);
const component = await $("ak-aggregate-card-promise");
// Assert we're in pre-resolve mode
await expect(await component.$(">>>.pf-c-card__header a")).not.toExist();
await expect(await component.$(">>>ak-spinner")).toExist();
await promise;
await expect(await component.$(">>>ak-spinner")).not.toExist();
await expect(await component.$(">>>.pf-c-card__body")).toHaveText("RESULT");
});
it("should render the promise card and display failure after a 1 second timeout", async () => {
const text = "EXPECTED FAILURE";
const runThis = (timeout: number, value: string) =>
new Promise((_resolve, reject) => setTimeout(reject, timeout, value));
const promise = runThis(DELAY, text);
render(
html`<ak-aggregate-card-promise
.promise=${promise}
failureMessage=${text}
></ak-aggregate-card-promise>`,
);
const component = await $("ak-aggregate-card-promise");
// Assert we're in pre-resolve mode
await expect(await component.$(">>>.pf-c-card__header a")).not.toExist();
await expect(await component.$(">>>ak-spinner")).toExist();
try {
await promise;
} catch (_e: unknown) {
await expect(await component.$(">>>ak-spinner")).not.toExist();
await expect(await component.$(">>>.pf-c-card__body")).toHaveText(text);
}
});
});

44
web/src/elements/cards/tests/QuickActionCard.test.ts Normal file
View File

@ -0,0 +1,44 @@
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 { QuickAction } from "../QuickActionsCard.js";
import "../QuickActionsCard.js";
const render = (body: TemplateResult) => {
document.adoptedStyleSheets = [
...document.adoptedStyleSheets,
ensureCSSStyleSheet(PFBase),
ensureCSSStyleSheet(AKGlobal),
];
return litRender(body, document.body);
};
const ACTIONS: QuickAction[] = [
["Create a new application", "/core/applications"],
["Check the logs", "/events/log"],
["Explore integrations", "https://goauthentik.io/integrations/", true],
["Manage users", "/identity/users"],
["Check the release notes", "https://goauthentik.io/docs/releases/", true],
];
describe("ak-quick-actions-card", () => {
it("display ak-quick-actions-card", async () => {
render(
html`<ak-quick-actions-card
title="Alt Title"
.actions=${ACTIONS}
></ak-quick-actions-card>`,
);
const component = await $("ak-quick-actions-card");
const items = await component.$$(">>>.pf-c-list li");
await expect(Array.from(items).length).toEqual(5);
await expect(await component.$(">>>.pf-c-list li:nth-of-type(4)")).toHaveText(
"Manage users",
);
});
});