feat(sasjs-tests): update tests, use vite and minimal deps

sasjs-tests/src/components/TestsView.ts

@@ -0,0 +1,156 @@
+import { TestRunner, type CompletedTestSuite } from '../core/TestRunner'
+import type { TestSuite } from '../types'
+import { appContext } from '../core/AppContext'
+import { TestSuiteElement } from './TestSuite'
+
+export class TestsView extends HTMLElement {
+  private shadow: ShadowRoot
+  private testRunner: TestRunner | null = null
+  private _testSuites: TestSuite[] = []
+  private debugMode: boolean = false
+
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  get testSuites(): TestSuite[] {
+    return this._testSuites
+  }
+
+  set testSuites(suites: TestSuite[]) {
+    this._testSuites = suites
+    this.testRunner = new TestRunner(suites)
+    this.render()
+  }
+
+  render() {
+    this.shadow.innerHTML = `
+      <link rel="stylesheet" href="${new URL(
+        './TestsView.css',
+        import.meta.url
+      )}">
+      <div class="header">
+        <h1>SASjs Adapter Tests</h1>
+        <div class="header-controls">
+          <div class="debug-toggle">
+            <input type="checkbox" id="debug-toggle" ${
+              this.debugMode ? 'checked' : ''
+            } />
+            <label for="debug-toggle">Debug Mode</label>
+          </div>
+          <button class="run-btn" id="run-btn">Run All Tests</button>
+          <button class="logout-btn" id="logout-btn">Logout</button>
+          <button class="requests-btn" id="requests-btn">View Requests</button>
+        </div>
+      </div>
+
+      <div class="results" id="results"></div>
+    `
+
+    const logoutBtn = this.shadow.getElementById('logout-btn')
+    logoutBtn?.addEventListener('click', () => this.handleLogout())
+
+    const debugToggle = this.shadow.getElementById(
+      'debug-toggle'
+    ) as HTMLInputElement
+    debugToggle?.addEventListener('change', (e) => this.handleDebugToggle(e))
+
+    const runBtn = this.shadow.getElementById('run-btn') as HTMLButtonElement
+    runBtn?.addEventListener('click', () => this.handleRunTests(runBtn))
+
+    const requestsBtn = this.shadow.getElementById('requests-btn')
+    requestsBtn?.addEventListener('click', () => this.handleViewRequests())
+  }
+
+  handleViewRequests() {
+    const requestsModal = document.querySelector('requests-modal') as any
+    if (requestsModal && requestsModal.openModal) {
+      requestsModal.openModal()
+    }
+  }
+
+  handleDebugToggle(e: Event) {
+    const checkbox = e.target as HTMLInputElement
+    this.debugMode = checkbox.checked
+
+    const adapter = appContext.getAdapter()
+    if (adapter) {
+      adapter.setDebugState(this.debugMode)
+    }
+  }
+
+  async handleLogout() {
+    const adapter = appContext.getAdapter()
+    if (adapter) {
+      await adapter.logOut()
+      appContext.setIsLoggedIn(false)
+      this.dispatchEvent(
+        new CustomEvent('logout', {
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+  }
+
+  async handleRunTests(runBtn: HTMLButtonElement) {
+    if (!this.testRunner) return
+
+    runBtn.disabled = true
+    runBtn.textContent = 'Running...'
+
+    const resultsContainer = this.shadow.getElementById('results')
+    if (resultsContainer) {
+      resultsContainer.innerHTML = ''
+    }
+
+    await this.testRunner.runAllTests((completedSuites) => {
+      this.renderResults(resultsContainer!, completedSuites)
+    })
+
+    runBtn.disabled = false
+    runBtn.textContent = 'Run All Tests'
+  }
+
+  renderResults(container: HTMLElement, completedSuites: CompletedTestSuite[]) {
+    container.innerHTML = ''
+
+    completedSuites.forEach((suite, suiteIndex) => {
+      const suiteElement = document.createElement(
+        'test-suite'
+      ) as TestSuiteElement
+      suiteElement.suiteData = suite
+      suiteElement.suiteIndex = suiteIndex
+
+      suiteElement.addEventListener('rerun-test', ((e: CustomEvent) => {
+        const { suiteIndex, testIndex } = e.detail
+        this.handleRerunTest(suiteIndex, testIndex, container)
+      }) as EventListener)
+
+      container.appendChild(suiteElement)
+    })
+  }
+
+  async handleRerunTest(
+    suiteIndex: number,
+    testIndex: number,
+    container: HTMLElement
+  ) {
+    if (!this.testRunner) return
+
+    await this.testRunner.rerunTest(
+      suiteIndex,
+      testIndex,
+      (completedSuites) => {
+        this.renderResults(container, completedSuites)
+      }
+    )
+  }
+}
+
+customElements.define('tests-view', TestsView)