improvement(test): call init after some delay

holgerengels · Sep 4, 2024 · 307b9c8 · 307b9c8
1 parent fcda6f0
commit 307b9c8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 44 deletions.
diff --git a/client/src/components/kmap-test-card-content.ts b/client/src/components/kmap-test-card-content.ts
@@ -1,4 +1,4 @@
-import {css, html, LitElement, PropertyValues} from 'lit';
+import {css, html, LitElement, PropertyValues, ReactiveElement} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {urls} from '../urls';
@@ -40,29 +40,25 @@ export class KMapTestCardContent extends LitElement {
   @state()
   private _answer: string = '';
 
-  @query('#question')
-  // @ts-ignore
-  private _questionElement: HTMLElement;
   @query('#answer')
   private _answerElement: HTMLElement;
 
   protected willUpdate(_changedProperties) {
     if (_changedProperties.has("balance"))
       this._flexes(this.balance);
-  }
-
-  protected async updated(_changedProperties: PropertyValues) {
     if (_changedProperties.has("question")) {
-      await lazyComponents(this.question);
+      lazyComponents(this.question);
       this._question = this._math(this.question);
     }
     if (_changedProperties.has("answer")) {
-      await lazyComponents(this.answer);
+      lazyComponents(this.answer);
       this._answer = this._math(this.answer);
-      setTimeout(() => this.init());
     }
   }
 
+  protected async updated(_changedProperties: PropertyValues) {
+  }
+
   _flexes(balance) {
     if (balance === undefined)
       balance = 4;
@@ -95,26 +91,33 @@ export class KMapTestCardContent extends LitElement {
       ...element.getElementsByTagName("kmap-solve-tree"),
       ...element.getElementsByTagName("kmap-jsxgraph"),
       ...element.getElementsByTagName("kmap-solvee"),
-    ].forEach(element => fun(element as unknown as TestInteraction));
+    ].forEach(async element => {
+      await customElements.whenDefined(element.tagName.toLowerCase())
+      if (element instanceof ReactiveElement)
+        await element.updateComplete;
+      fun(element as unknown as TestInteraction)
+    });
   }
 
-  init() {
-    var element = this._answerElement;
-    var inputs = element.getElementsByTagName("input");
-    for (var i = 0; i < inputs.length; i++) {
-      var input: HTMLInputElement = inputs[i];
-      input.removeAttribute("correctness");
-      input.setAttribute("empty", "")
-      if (input.type === "checkbox")
-        input.checked = false;
-      else
-        input.value = '';
-    }
+  async init() {
+    setTimeout(() => {
+      var element = this._answerElement;
+      var inputs = element.getElementsByTagName("input");
+      for (var i = 0; i < inputs.length; i++) {
+        var input: HTMLInputElement = inputs[i];
+        input.removeAttribute("correctness");
+        input.setAttribute("empty", "")
+        if (input.type === "checkbox")
+          input.checked = false;
+        else
+          input.value = '';
+      }
 
-    this.forEachTestInteraction((testInteraction: TestInteraction) => {
-      testInteraction.init();
-      testInteraction.removeAttribute("correctness");
-    });
+      this.forEachTestInteraction((testInteraction: TestInteraction) => {
+        testInteraction.removeAttribute("correctness");
+        testInteraction.init();
+      });
+    }, 500);
   }
 
   checkValues(): boolean {

diff --git a/client/src/components/kmap-test-exercise.ts b/client/src/components/kmap-test-exercise.ts
@@ -68,7 +68,7 @@ export class KmapTestExercise extends Connected {
     }
   }
 
-  _start() {
+  async _start() {
     if (!this._expandedTests)
       return;
 
@@ -87,13 +87,15 @@ export class KmapTestExercise extends Connected {
     this._currentIndex = 0;
     this._currentTest = this._tests[0];
     store.dispatch.tests.clearResults();
+    await this.updateComplete;
+    this._testCard.init();
   }
 
   _restart() {
     this._start();
   }
 
-  _next(e) {
+  async _next(e) {
     if (this._tests === undefined) return;
 
     let detail = e.detail;
@@ -103,7 +105,8 @@ export class KmapTestExercise extends Connected {
     this._currentIndex++;
     if (this._currentIndex < this._tests.length) {
       this._currentTest = this._tests[this._currentIndex];
-      requestAnimationFrame(() => this._testCard.init())
+      await this.updateComplete;
+      this._testCard.init();
     }
     else
       this.dispatchEvent(new CustomEvent('end', {bubbles: true, composed: true}));

diff --git a/client/src/components/lazy-components.ts b/client/src/components/lazy-components.ts
@@ -1,20 +1,6 @@
 
 export async function lazyComponents(code: string) {
   if (!code) return;
-  /*
-  let result = code.match(/<((kmap-((term-tree)|(ascii-math)|(solve-tree)|(jsxgraph)))|(html-include)|(lazy-html))/g);
-  if (result !== null) {
-    for (let i = 0; i < result.length; i++) {
-      const m = result[i].substring(1);
-      if (customElements.get(m))
-        continue;
-
-      console.log("loading component: " + m);
-
-      //await customElements.whenDefined(m);
-    }
-  }
-   */
   const lazies = [...code.matchAll(/<([a-z0-9-]+) lazy:([^:]+):([^ >]+)/g)];
   for (let i = 0; i < lazies.length; i++) {
     const lazy = lazies[i];