populate data into UI

Author: christian-bromann

packages/app/src/components/browser/snapshot.ts

@@ -36,12 +36,12 @@ const COMPONENT = 'wdio-devtools-browser'
 @customElement(COMPONENT)
 export class DevtoolsBrowser extends Element {
   #vdom = document.createDocumentFragment()
-  #activeUrl = ''
+  #activeUrl?: string
 
-  @consume({ context: metadataContext })
+  @consume({ context: metadataContext, subscribe: true })
   metadata: Metadata | undefined = undefined
 
-  @consume({ context: mutationContext })
+  @consume({ context: mutationContext, subscribe: true })
   mutations: TraceMutation[] = []
 
   static styles = [...Element.styles, css`
@@ -79,12 +79,6 @@ export class DevtoolsBrowser extends Element {
     window.addEventListener('app-mutation-highlight', this.#highlightMutation.bind(this))
     window.addEventListener('app-mutation-select', (ev) => this.#renderBrowserState(ev.detail))
     await this.updateComplete
-    this.#setIframeSize()
-
-    /**
-     * Render initial document
-     */
-    this.#renderBrowserState()
   }
 
   #setIframeSize () {
@@ -258,7 +252,7 @@ export class DevtoolsBrowser extends Element {
 
   async #renderBrowserState (mutationEntry?: TraceMutation) {
     const mutations = this.mutations
-    if (!mutations) {
+    if (!mutations || !mutations.length) {
       return
     }
 
@@ -298,6 +292,14 @@ export class DevtoolsBrowser extends Element {
   }
 
   render() {
+    /**
+     * render a browser state if it hasn't before
+     */
+    if (this.mutations && this.mutations.length && !this.#activeUrl) {
+      this.#setIframeSize()
+      this.#renderBrowserState()
+    }
+
     return html`
       <section class="w-full bg-sideBarBackground rounded-t-md shadow-md">
         <header class="flex block mx-2">
@@ -309,7 +311,7 @@ export class DevtoolsBrowser extends Element {
             ${this.#activeUrl}
           </div>
         </header>
-        ${this.mutations
+        ${this.mutations && this.mutations.length
           ? html`<iframe class="origin-top-left"></iframe>`
           : html`<wdio-devtools-placeholder style="height: 100%"></wdio-devtools-placeholder>`
         }

packages/app/src/components/sidebar/explorer.ts

@@ -2,7 +2,7 @@ import { Element } from '@core/element'
 import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
-import { type SuiteStats } from '@wdio/reporter'
+import type { TestStats, SuiteStats } from '@wdio/reporter'
 
 import { TestState } from './test-suite.js'
 import { suiteContext } from '../../controller/DataManager.js'
@@ -36,8 +36,8 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     }
   `]
 
-  @consume({ context: suiteContext })
-  suites: Record<string, SuiteStats> = {}
+  @consume({ context: suiteContext, subscribe: true })
+  suites: Record<string, SuiteStats>[] | undefined = undefined
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -84,31 +84,39 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     )
   }
 
-  render() {
-    if (typeof this.suites !== 'object') {
-      return
+  #getTestEntry (entry: TestStats | SuiteStats): TestEntry {
+    if ('tests' in entry) {
+      const entries = [...entry.tests, ...entry.suites]
+      return {
+        label: entry.title,
+        state: entry.tests.some((t) => !t.end)
+          ? TestState.RUNNING
+          : entry.tests.find((t) => t.state === 'failed')
+            ? TestState.FAILED
+            : TestState.PASSED,
+        children: Object.values(entries)
+          .map(this.#getTestEntry.bind(this))
+          .filter(this.#filterEntry.bind(this))
+      }
     }
-    const suites = Object.values(this.suites[0]).map((suite: SuiteStats) => {
-      const state = !suite.tests.find((t) => t.end)
+    return {
+      label: entry.title,
+      state: !entry.end
         ? TestState.RUNNING
-        : suite.tests.find((t) => t.state === 'failed')
+        : entry.state === 'failed'
           ? TestState.FAILED
-          : TestState.PASSED
+          : TestState.PASSED,
+      children: []
+    }
+  }
 
-      return {
-        label: suite.title,
-        state,
-        children: Object.values(suite.tests).map((test) => ({
-          label: test.title,
-          state: !test.end
-            ? TestState.RUNNING
-            : test.state === 'failed'
-              ? TestState.FAILED
-              : TestState.PASSED,
-          children: []
-        })).filter(this.#filterEntry.bind(this))
-      }
-    }).filter(this.#filterEntry.bind(this))
+  render() {
+    if (!this.suites) {
+      return
+    }
+    const suites = Object.values(this.suites[0])
+      .map(this.#getTestEntry.bind(this))
+      .filter(this.#filterEntry.bind(this))
 
     return html`
       <header class="pl-4 py-2 flex shadow-md pr-2">

packages/app/src/components/sidebar/test-suite.ts

@@ -43,7 +43,7 @@ const TEST_ENTRY = 'wdio-test-entry'
 @customElement(TEST_ENTRY)
 export class ExplorerTestEntry extends CollapseableEntry {
   @property({ attribute: 'is-collapsed' })
-  isCollapsed = 'true'
+  isCollapsed = 'false'
 
   @property({ type: String })
   state?: TestState

packages/app/src/components/workbench/actions.ts

@@ -4,7 +4,6 @@ import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
 import { mutationContext, type TraceMutation, commandContext, type CommandLog } from '../../controller/DataManager.js'
-import { type ActionEntry } from './actionItems/item.js'
 
 import '~icons/mdi/pencil.js'
 import '~icons/mdi/family-tree.js'
@@ -20,8 +19,6 @@ const SOURCE_COMPONENT = 'wdio-devtools-actions'
 
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsActions extends Element {
-  #entries: ActionEntry[] = []
-
   static styles = [...Element.styles, css`
     :host {
       display: flex;
@@ -30,25 +27,23 @@ export class DevtoolsActions extends Element {
     }
   `]
 
-  @consume({ context: mutationContext })
+  @consume({ context: mutationContext, subscribe: true })
   mutations: TraceMutation[] = []
 
-  @consume({ context: commandContext })
+  @consume({ context: commandContext, subscribe: true })
   commands: CommandLog[] = []
 
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.#entries = [...this.mutations || [], ...this.commands || []]
-      .sort((a, b) => a.timestamp - b.timestamp)
-  }
-
   render() {
     const mutations = this.mutations || []
-    if (!this.#entries.length || !mutations.length) {
+    const commands = this.commands || []
+    const entries = [...mutations, ...commands]
+      .sort((a, b) => a.timestamp - b.timestamp)
+
+    if (!entries.length || !mutations.length) {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
-    return this.#entries.map((entry) => {
+    return entries.map((entry) => {
       const elapsedTime = entry.timestamp - mutations[0].timestamp
 
       if ('command' in entry) {

packages/app/src/components/workbench/console.ts

@@ -1,7 +1,7 @@
 /// <reference types="../../../script" />
 
 import { Element } from '@core/element'
-import { html, css } from 'lit'
+import { html, css, nothing } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
@@ -27,23 +27,28 @@ export class DevtoolsConsoleLogs extends Element {
       height: 100%;
       flex-direction: column;
       padding: 5px;
+      min-height: 200px;
     }
   `]
 
-  @consume({ context: consoleLogContext })
-  logs: Partial<ConsoleLogs> = {}
+  @consume({ context: consoleLogContext, subscribe: true })
+  logs: ConsoleLogs[] | undefined = undefined
 
   render() {
-    if (!this.logs || this.logs.length === 0) {
+    if (!this.logs) {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
+    const logs = this.logs.length === 0
+      ? [{ args: '' }]
+      : this.logs
+
     return html`
-      ${Object.values(this.logs).map((log: any) => html`
+      ${Object.values(logs).map((log: any) => html`
         <dl class="w-full flex grow-0">
           <dt class="flex">
             <icon-mdi-chevron-right class="text-base transition-transform block"></icon-mdi-chevron-right>
-            <span class="block bg-${BG[log.type]} rounded text-sm py-[1px] px-[5px] my-1">${log.type}</span>
+            ${log.type ? html`<span class="block bg-${BG[log.type]} rounded text-sm py-[1px] px-[5px] my-1">${log.type}</span>` : nothing}
           </dt>
           <dd class="flex justify-center items-center mx-2">${log.args}</dd>
         </dl>

packages/app/src/components/workbench/logs.ts

@@ -23,6 +23,7 @@ export class DevtoolsSource extends Element {
       display: block;
       width: 100%;
       height: 100%;
+      min-height: 200px;
     }
   `]
 
@@ -53,7 +54,11 @@ export class DevtoolsSource extends Element {
 
   render() {
     if (!this.command) {
-      return html`<section class="flex items-center justify-center text-sm w-full h-full">Please select a command to view details!</section>`
+      return html`
+        <section class="flex items-center justify-center text-sm w-full h-full">
+          Please select a command to view details!
+        </section>
+      `
     }
 
     return html`

packages/app/src/components/workbench/metadata.ts

@@ -12,8 +12,8 @@ import '~icons/mdi/chevron-right.js'
 const SOURCE_COMPONENT = 'wdio-devtools-metadata'
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsMetadata extends Element {
-  @consume({ context: metadataContext })
-  metadata: Partial<Metadata> = {}
+  @consume({ context: metadataContext, subscribe: true })
+  metadata: Partial<Metadata> | undefined = undefined
 
   static styles = [...Element.styles, css`
     :host {

packages/app/src/components/workbench/source.ts

@@ -31,13 +31,12 @@ export class DevtoolsSource extends Element {
     }
   `]
 
-  @consume({ context: sourceContext })
+  @consume({ context: sourceContext, subscribe: true })
   sources: Record<string, string> = {}
 
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('app-source-highlight', this.#highlightCallSource.bind(this))
-    setTimeout(() => this.#renderEditor(Object.keys(this.sources || {})[0]))
   }
 
   #renderEditor (filePath: string, highlightLine?: number) {
@@ -81,8 +80,14 @@ export class DevtoolsSource extends Element {
   }
 
   render() {
+    const sourceFileNames = Object.keys(this.sources || {})
+    if (sourceFileNames.length === 0) {
+      return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
+    }
+
+    this.#renderEditor(sourceFileNames[0])
     return html`
-      <wdio-devtools-placeholder></wdio-devtools-placeholder>
+      <section class="p-2">loading...</section>
     `
   }
 }