-
-
Notifications
You must be signed in to change notification settings - Fork 933
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
web: provide a test framework (#9681)
* 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.
* Adjusting paths to work with tests.
* add ci to test
Signed-off-by: Jens Langhammer <[email protected]>
* web: patch spotlight on the fly to fix syntax issue that blocked storybook build
This should be a temporary hack. I have an [open
issue](getsentry/spotlight#419) and [pull
request](getsentry/spotlight#420) with the
Spotlight people already to fix the issue.
* Somehow missed these in the merge.
* Merge missed something.
* Fixed an issue where npm install and npm ci had different shell script behaviors.
* Removed debugging messages.
---------
Signed-off-by: Jens Langhammer <[email protected]>
Co-authored-by: Jens Langhammer <[email protected]>- Loading branch information
1 parent
f827c26
commit 861992f
Showing
9 changed files
with
16,838 additions
and
13,061 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| #!/usr/bin/env bash | ||
|
|
||
| TARGET=$(find "./node_modules/@spotlightjs/overlay/dist/" -name "index-[0-9a-f]*.js"); | ||
|
|
||
| if ! grep -GL 'QX2 = ' "$TARGET" > /dev/null ; then | ||
| patch --forward --no-backup-if-mismatch -p0 "$TARGET" <<EOF | ||
| --- a/index-5682ce90.js 2024-06-13 16:19:28 | ||
| +++ b/index-5682ce90.js 2024-06-13 16:20:23 | ||
| @@ -4958,11 +4958,10 @@ | ||
| } | ||
| ); | ||
| } | ||
| -const q2 = w.lazy(() => import("./main-3257b7fc.js").then((n) => n.m)); | ||
| +const q2 = w.lazy(() => import("./main-3257b7fc.js").then((n) => n.m)), QX2 = () => {}; | ||
| function Gp({ | ||
| data: n, | ||
| - onUpdateData: a = () => { | ||
| - }, | ||
| + onUpdateData: a = QX2, | ||
| editingEnabled: s = !1, | ||
| clipboardEnabled: o = !1, | ||
| displayDataTypes: c = !1, | ||
| EOF | ||
| else | ||
| echo "spotlight overlay.js patch already applied" | ||
| fi |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| 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 "./EmptyState.js"; | ||
|
|
||
| const render = (body: TemplateResult) => { | ||
| document.adoptedStyleSheets = [ | ||
| ...document.adoptedStyleSheets, | ||
| ensureCSSStyleSheet(PFBase), | ||
| ensureCSSStyleSheet(AKGlobal), | ||
| ]; | ||
| return litRender(body, document.body); | ||
| }; | ||
|
|
||
| describe("ak-empty-state", () => { | ||
| it("should render the default loader", async () => { | ||
| render(html`<ak-empty-state ?loading=${true} header=${msg("Loading")}> </ak-empty-state>`); | ||
|
|
||
| const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon"); | ||
| await expect(empty).toExist(); | ||
|
|
||
| const header = await $("ak-empty-state").$(">>>.pf-c-title"); | ||
| await expect(header).toHaveText("Loading"); | ||
| }); | ||
|
|
||
| it("should handle standard boolean", async () => { | ||
| render(html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`); | ||
|
|
||
| const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon"); | ||
| await expect(empty).toExist(); | ||
|
|
||
| const header = await $("ak-empty-state").$(">>>.pf-c-title"); | ||
| await expect(header).toHaveText("Loading"); | ||
| }); | ||
|
|
||
| it("should render a static empty state", async () => { | ||
| render(html`<ak-empty-state header=${msg("No messages found")}> </ak-empty-state>`); | ||
|
|
||
| const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon"); | ||
| await expect(empty).toExist(); | ||
| await expect(empty).toHaveClass("fa-question-circle"); | ||
|
|
||
| const header = await $("ak-empty-state").$(">>>.pf-c-title"); | ||
| await expect(header).toHaveText("No messages found"); | ||
| }); | ||
|
|
||
| it("should render a slotted message", async () => { | ||
| render( | ||
| html`<ak-empty-state header=${msg("No messages found")}> | ||
| <p slot="body">Try again with a different filter</p> | ||
| </ak-empty-state>`, | ||
| ); | ||
|
|
||
| const message = await $("ak-empty-state").$(">>>.pf-c-empty-state__body").$(">>>p"); | ||
| await expect(message).toHaveText("Try again with a different filter"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "baseUrl": ".", | ||
| "types": ["node", "webdriverio/async", "@wdio/cucumber-framework", "expect-webdriverio"], | ||
| "target": "esnext", | ||
| "forceConsistentCasingInFileNames": true, | ||
| "experimentalDecorators": true, | ||
| "lib": [ | ||
| "ES5", | ||
| "ES2015", | ||
| "ES2016", | ||
| "ES2017", | ||
| "ES2018", | ||
| "ES2019", | ||
| "ES2020", | ||
| "ESNext", | ||
| "DOM", | ||
| "DOM.Iterable", | ||
| "WebWorker" | ||
| ], | ||
| "paths": { | ||
| "@goauthentik/admin/*": ["./src/admin/*"], | ||
| "@goauthentik/common/*": ["./src/common/*"], | ||
| "@goauthentik/components/*": ["./src/components/*"], | ||
| "@goauthentik/docs/*": ["../website/docs/*"], | ||
| "@goauthentik/elements/*": ["./src/elements/*"], | ||
| "@goauthentik/flow/*": ["./src/flow/*"], | ||
| "@goauthentik/locales/*": ["./src/locales/*"], | ||
| "@goauthentik/polyfill/*": ["./src/polyfill/*"], | ||
| "@goauthentik/standalone/*": ["./src/standalone/*"], | ||
| "@goauthentik/user/*": ["./src/user/*"] | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.