web: fix flash of unstructured content, add tests for it #11013

kensternberg-authentik · 2024-08-21T17:25:53Z

web: test for flash of unstructured content

What

Add a unit test to ensure the “Loading…” element is displayed correctly before data arrives
Demo how to mock a fetchObjects() call in testing. Very cool.
Make distinguishing rule sets for code, tests, and scripts in nightmare mode
In SearchSelect, Move the styles() declaration to the top of the class for consistency.

Why

To test for the FLOUC issue in SearchSelect.

This is both an exercise in mocking @BeryJu’s fetchObjects() protocol, and shows how we can unit test generic components that render API objects.

The code has been formatted (make web)

…from the backend Provide an alternative, readonly, disabled, unindexed input object with the text "Loading...", to be replaced with the _real_ input element after the content is loaded. This provides the correct appearance and spacing so the content doesn't jiggle about between the start of loading and the SearchSelect element being finalized. It was visually distracting and unappealing.

…correct component under test.

@BeryJu

- Add a unit test to ensure the "Loading..." element is displayed correctly before data arrives - Demo how to mock a `fetchObjects()` call in testing. Very cool. - Make distinguishing rule sets for code, tests, and scripts in nightmare mode - In SearchSelect, Move the `styles()` declaration to the top of the class for consistency. - To test for the FLOUC issue in SearchSelect. This is both an exercise in mocking @BeryJu's `fetchObjects()` protocol, and shows how we can unit test generic components that render API objects.

netlify · 2024-08-21T17:26:08Z

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	`014f43b`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/66c62324dbe63b00080fc121
😎 Deploy Preview	https://deploy-preview-11013--authentik-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-08-21T17:26:10Z

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	`014f43b`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/66c62324ff2b0e00088e370b
😎 Deploy Preview	https://deploy-preview-11013--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2024-08-21T17:33:34Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.77%. Comparing base (d54718c) to head (014f43b).
Report is 14 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11013      +/-   ##
==========================================
+ Coverage   92.70%   92.77%   +0.07%     
==========================================
  Files         736      736              
  Lines       36360    36360              
==========================================
+ Hits        33706    33732      +26     
+ Misses       2654     2628      -26

Flag	Coverage Δ
e2e	`49.29% <ø> (+0.11%)`	⬆️
integration	`25.05% <ø> (ø)`
unit	`90.24% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-08-21T18:03:40Z

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-014f43b0cd484827e9182227c9f5133af998da8f
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

For arm64, use these values:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-014f43b0cd484827e9182227c9f5133af998da8f-arm64
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
    image:
        repository: ghcr.io/goauthentik/dev-server
        tag: gh-014f43b0cd484827e9182227c9f5133af998da8f

For arm64, use these values:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
    image:
        repository: ghcr.io/goauthentik/dev-server
        tag: gh-014f43b0cd484827e9182227c9f5133af998da8f-arm64

Afterwards, run the upgrade commands from the latest release notes.

kensternberg-authentik · 2024-08-21T17:26:52Z

web/scripts/eslint.nightmare.mjs

+const MAX_PARAMS = 5;
+const MAX_COGNITIVE_COMPLEXITY = 9;
+
+const rules = {


I moved the rules up into their own block for re-use and, hah!, got bit by my own standards. Changing this file caused lint:nightmare to complain that I had magic numbers in the eslint.nightmate configuration files. Fair.

kensternberg-authentik · 2024-08-21T17:27:17Z

web/scripts/eslint.nightmare.mjs

+            },
+            globals: {
+                ...globals.nodeBuiltin,
+                ...globals.jest,


Parsing the test files requires I include the global definition for the test functions.

kensternberg-authentik · 2024-08-21T17:28:44Z

web/src/elements/forms/SearchSelect/SearchSelect.ts

@@ -228,8 +230,15 @@ export class SearchSelectBase<T>
            return html`<em>${msg("Failed to fetch objects: ")} ${this.error.detail}</em>`;
        }

+        // `this.objects` is both a container and a sigil; if it is in the `undefined` state, it's a


After implementing the loader display, I worried that my implementation is naive. It is, but not in a way that breaks my expectations. This comment explains the state management between "First loading," "displaying," and "displaying and loading."

kensternberg-authentik · 2024-08-21T17:29:05Z

web/src/elements/forms/SearchSelect/ak-search-select-ez.ts

@@ -48,7 +46,7 @@ export interface ISearchSelectEz<T> extends ISearchSelectBase<T> {
 @customElement("ak-search-select-ez")
 export class SearchSelectEz<T> extends SearchSelectBase<T> implements ISearchSelectEz<T> {
    static get styles() {
-        return [PFBase];
+        return [...SearchSelectBase.styles];


Child classes should use as much of the parent as possible.

kensternberg-authentik · 2024-08-21T17:30:17Z

web/src/elements/forms/SearchSelect/ak-search-select-view.ts

@@ -69,6 +69,10 @@ export interface ISearchSelectView {
 */
 @customElement("ak-search-select-view")
 export class SearchSelectView extends AKElement implements ISearchSelectView {
+    static get styles() {


Just moved for consistency. I need to document our component pattern more seriously.

kensternberg-authentik · 2024-08-21T17:32:22Z

web/src/elements/forms/SearchSelect/tests/ak-search-select.test.ts

@@ -1,100 +1,108 @@
+/* eslint-env jest */


This is an awful diff. This test file was originally just about the view, so I renamed it to ak-search-select-view.test.ts. This is actually a new test file to test the API interaction. I recommend View File using the three-dot entry to the right. ➠

* main: website/docs: cve release notes (#11026) security: fix CVE-2024-42490 (#11022) web: bump API Client version (#11021) providers/scim: optimize sending all members within a group (#9968) providers/scim: add API endpoint to sync single user (#8486) web: bump chromedriver from 127.0.3 to 128.0.0 in /tests/wdio (#11017) web: dual-select uses, part 2: dual-select harder (#9377) web: fix flash of unstructured content, add tests for it (#11013) core: bump drf-orjson-renderer from 1.7.2 to 1.7.3 (#11015) core: bump github.com/gorilla/sessions from 1.3.0 to 1.4.0 (#11002) website/docs: Correct the forward authentication configuration template for Caddy (#11012)

* main: (165 commits) web/flows: update flow background (#11044) web: bump API Client version (#11043) website/integrations: Correct Discord avatar code and add warning. (#11031) core, web: update translations (#11032) website: bump docusaurus-theme-openapi-docs from 4.0.0 to 4.0.1 in /website (#11034) core: bump ruff from 0.6.1 to 0.6.2 (#11035) core: bump goauthentik.io/api/v3 from 3.2024063.12 to 3.2024063.13 (#11036) web: bump the babel group across 1 directory with 3 updates (#11038) web: bump wireit from 0.14.7 to 0.14.8 in /web (#11039) web: bump @goauthentik/api from 2024.6.3-1723921843 to 2024.6.3-1724337552 in /web/sfe (#11040) enterprise: add up-to-date license status (#11042) website/docs: cve release notes (#11026) security: fix CVE-2024-42490 (#11022) web: bump API Client version (#11021) providers/scim: optimize sending all members within a group (#9968) providers/scim: add API endpoint to sync single user (#8486) web: bump chromedriver from 127.0.3 to 128.0.0 in /tests/wdio (#11017) web: dual-select uses, part 2: dual-select harder (#9377) web: fix flash of unstructured content, add tests for it (#11013) core: bump drf-orjson-renderer from 1.7.2 to 1.7.3 (#11015) ...

* web/element/ak-select-table: Provide unit test accessibility to Firefox and Safari; wrap calls to manipulate test DOMs directly in a browser.exec call so they run in the proper context and be await()ed properly web: finalize testing for tables web: added basic unit testing to API-free tables website/docs: cve release notes (#11026) security: fix CVE-2024-42490 (#11022) web: bump API Client version (#11021) providers/scim: optimize sending all members within a group (#9968) providers/scim: add API endpoint to sync single user (#8486) web: bump chromedriver from 127.0.3 to 128.0.0 in /tests/wdio (#11017) web: dual-select uses, part 2: dual-select harder (#9377) web: fix flash of unstructured content, add tests for it (#11013) core: bump drf-orjson-renderer from 1.7.2 to 1.7.3 (#11015) core: bump github.com/gorilla/sessions from 1.3.0 to 1.4.0 (#11002) web: interim commit of the basic sortable & selectable table. website/docs: Correct the forward authentication configuration template for Caddy (#11012) web: test for flash of unstructured content web: comment on state management in API layer, move file to point to correct component under test. web: fix Flash of Unstructured Content while SearchSelect is loading from the backend

kensternberg-authentik added 3 commits August 20, 2024 15:00

web: comment on state management in API layer, move file to point to …

f2f4d09

…correct component under test.

kensternberg-authentik commented Aug 21, 2024

View reviewed changes

kensternberg-authentik marked this pull request as ready for review August 21, 2024 18:38

kensternberg-authentik requested a review from a team as a code owner August 21, 2024 18:38

kensternberg-authentik changed the title ~~Web/bug/search select flouc issue~~ web: fix flash of unstructured content, add tests for it Aug 21, 2024

BeryJu approved these changes Aug 22, 2024

View reviewed changes

BeryJu merged commit 85eb104 into main Aug 22, 2024
67 of 68 checks passed

BeryJu deleted the web/bug/search-select-flouc-issue branch August 22, 2024 09:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

web: fix flash of unstructured content, add tests for it #11013

web: fix flash of unstructured content, add tests for it #11013

kensternberg-authentik commented Aug 21, 2024

netlify bot commented Aug 21, 2024 •

edited

Loading

netlify bot commented Aug 21, 2024 •

edited

Loading

codecov bot commented Aug 21, 2024 •

edited

Loading

github-actions bot commented Aug 21, 2024

kensternberg-authentik Aug 21, 2024

kensternberg-authentik Aug 21, 2024

kensternberg-authentik Aug 21, 2024

kensternberg-authentik Aug 21, 2024 •

edited

Loading

kensternberg-authentik Aug 21, 2024

kensternberg-authentik Aug 21, 2024

web: fix flash of unstructured content, add tests for it #11013

web: fix flash of unstructured content, add tests for it #11013

Conversation

kensternberg-authentik commented Aug 21, 2024

What

Why

netlify bot commented Aug 21, 2024 • edited Loading

✅ Deploy Preview for authentik-docs ready!

netlify bot commented Aug 21, 2024 • edited Loading

✅ Deploy Preview for authentik-storybook ready!

codecov bot commented Aug 21, 2024 • edited Loading

Codecov Report

github-actions bot commented Aug 21, 2024

kensternberg-authentik Aug 21, 2024

Choose a reason for hiding this comment

kensternberg-authentik Aug 21, 2024

Choose a reason for hiding this comment

kensternberg-authentik Aug 21, 2024

Choose a reason for hiding this comment

kensternberg-authentik Aug 21, 2024 • edited Loading

Choose a reason for hiding this comment

kensternberg-authentik Aug 21, 2024

Choose a reason for hiding this comment

kensternberg-authentik Aug 21, 2024

Choose a reason for hiding this comment

netlify bot commented Aug 21, 2024 •

edited

Loading

netlify bot commented Aug 21, 2024 •

edited

Loading

codecov bot commented Aug 21, 2024 •

edited

Loading

kensternberg-authentik Aug 21, 2024 •

edited

Loading