web: Testing and documenting the simple things

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).
This commit is contained in:
Ken Sternberg
2024-05-16 15:26:35 -07:00
parent 9428fd866e
commit 35f96df66e
26 changed files with 1195 additions and 157 deletions

View File

@ -1,7 +1,7 @@
import { customElement } from "lit/decorators.js";
import { property } from "lit/decorators.js";
import { BaseTaskButton } from "./BaseTaskButton";
import { BaseTaskButton, type IBaseTaskButton } from "./BaseTaskButton";
/**
* A button associated with an event handler for loading data. Takes an asynchronous function as its
@ -17,8 +17,10 @@ import { BaseTaskButton } from "./BaseTaskButton";
* @fires ak-button-reset - When the button is reset after the async process completes
*/
type ISpinnerButton = IBaseTaskButton & { callAction: () => Promise<unknown> };
@customElement("ak-spinner-button")
export class SpinnerButton extends BaseTaskButton {
export class SpinnerButton extends BaseTaskButton implements ISpinnerButton {
/**
* The command to run when the button is pressed. Must return a promise. We don't do anything
* with that promise other than check if it's a resolve or reject, and rethrow the event after.
@ -29,4 +31,10 @@ export class SpinnerButton extends BaseTaskButton {
callAction!: () => Promise<unknown>;
}
declare global {
interface HTMLElementTagNameMap {
"ak-spinner-button": SpinnerButton;
}
}
export default SpinnerButton;