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

sasjs-tests/src/components/LoginForm.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  max-width: 400px;
+  margin: 100px auto;
+  padding: 40px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #2c3e50;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+label {
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+input {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: #3498db;
+  }
+}
+
+button {
+  padding: 12px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover:not(:disabled) {
+    background: #2980b9;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.error {
+  color: #e74c3c;
+  font-size: 14px;
+  min-height: 20px;
+}

sasjs-tests/src/components/LoginForm.ts

@@ -0,0 +1,90 @@
+import { appContext } from '../core/AppContext'
+
+export class LoginForm extends HTMLElement {
+  private shadow: ShadowRoot
+
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+    this.attachEventListeners()
+  }
+
+  render() {
+    this.shadow.innerHTML = `
+      <link rel="stylesheet" href="${new URL(
+        './LoginForm.css',
+        import.meta.url
+      )}">
+      <h1>SASjs Tests</h1>
+      <form id="login-form">
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" placeholder="Enter username" required />
+
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" placeholder="Enter password" required />
+
+        <button type="submit" id="submit-btn">Log In</button>
+        <div class="error" id="error"></div>
+      </form>
+    `
+  }
+
+  attachEventListeners() {
+    const form = this.shadow.getElementById('login-form') as HTMLFormElement
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault()
+      await this.handleLogin()
+    })
+  }
+
+  async handleLogin() {
+    const username = (
+      this.shadow.getElementById('username') as HTMLInputElement
+    ).value
+    const password = (
+      this.shadow.getElementById('password') as HTMLInputElement
+    ).value
+    const submitBtn = this.shadow.getElementById(
+      'submit-btn'
+    ) as HTMLButtonElement
+    const errorDiv = this.shadow.getElementById('error') as HTMLDivElement
+
+    errorDiv.textContent = ''
+    submitBtn.textContent = 'Logging in...'
+    submitBtn.disabled = true
+
+    try {
+      const adapter = appContext.getAdapter()
+      if (!adapter) {
+        throw new Error('Adapter not initialized')
+      }
+
+      const response = await adapter.logIn(username, password)
+
+      if (response && response.isLoggedIn) {
+        appContext.setIsLoggedIn(true)
+        this.dispatchEvent(
+          new CustomEvent('login-success', {
+            bubbles: true,
+            composed: true
+          })
+        )
+      } else {
+        throw new Error('Login failed')
+      }
+    } catch (error: unknown) {
+      errorDiv.textContent =
+        error instanceof Error
+          ? error.message
+          : 'Login failed. Please try again.'
+      submitBtn.textContent = 'Log In'
+      submitBtn.disabled = false
+    }
+  }
+}
+
+customElements.define('login-form', LoginForm)

sasjs-tests/src/components/RequestsModal.css

@@ -0,0 +1,193 @@
+:host {
+  display: contents;
+}
+
+button {
+  padding: 8px 16px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-left: 10px;
+
+  &:hover {
+    background: #2980b9;
+  }
+}
+
+dialog {
+  max-width: 95vw;
+  max-height: 95vh;
+  width: 1400px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  background: #2c3e50;
+  color: #ecf0f1;
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #34495e;
+
+  h2 {
+    margin: 0;
+    color: #ecf0f1;
+    font-size: 20px;
+  }
+}
+
+.close-btn {
+  background: transparent;
+  color: #ecf0f1;
+  font-size: 24px;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 0;
+
+  &:hover {
+    background: #34495e;
+  }
+}
+
+.modal-content {
+  padding: 20px;
+  overflow-y: auto;
+  max-height: calc(95vh - 80px);
+}
+
+.debug-message {
+  text-align: center;
+  padding: 60px 20px;
+
+  .icon {
+    font-size: 64px;
+    margin-bottom: 20px;
+  }
+
+  h3 {
+    margin: 10px 0;
+    color: #ecf0f1;
+  }
+
+  span {
+    color: #95a5a6;
+  }
+}
+
+.requests-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+details {
+  border: 1px solid #34495e;
+  border-radius: 4px;
+  background: #34495e;
+
+  &[open] summary::before {
+    transform: rotate(90deg);
+  }
+}
+
+summary {
+  padding: 15px;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background 0.2s;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    content: '▶';
+    display: inline-block;
+    margin-right: 10px;
+    transition: transform 0.2s;
+  }
+
+  &:hover {
+    background: #3d5266;
+  }
+}
+
+.request-timestamp {
+  color: #95a5a6;
+  font-size: 13px;
+}
+
+.request-content {
+  padding: 0 15px 15px 15px;
+}
+
+.tabs {
+  display: flex;
+  gap: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #2c3e50;
+  margin-bottom: 10px;
+}
+
+.tab-btn {
+  padding: 8px 16px;
+  background: transparent;
+  color: #95a5a6;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 14px;
+  margin: 0;
+  border-radius: 0;
+
+  &:hover {
+    color: #ecf0f1;
+    background: transparent;
+  }
+
+  &.active {
+    color: #3498db;
+    border-bottom-color: #3498db;
+    background: transparent;
+  }
+}
+
+.tab-pane {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+pre {
+  background: #1e2832;
+  padding: 15px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 0;
+  color: #ecf0f1;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}

sasjs-tests/src/components/RequestsModal.ts

@@ -0,0 +1,186 @@
+import { appContext } from '../core/AppContext'
+import type { SASjsRequest } from '@sasjs/adapter'
+
+export class RequestsModal extends HTMLElement {
+  private shadow: ShadowRoot
+  private dialog: HTMLDialogElement | null = null
+
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+    this.attachEventListeners()
+  }
+
+  render() {
+    this.shadow.innerHTML = `
+      <link rel="stylesheet" href="${new URL(
+        './RequestsModal.css',
+        import.meta.url
+      )}">
+      <dialog id="requests-dialog">
+        <div class="modal-header">
+          <h2 id="modal-title"></h2>
+          <button class="close-btn" id="close-btn">×</button>
+        </div>
+        <div class="modal-content" id="modal-content"></div>
+      </dialog>
+    `
+  }
+
+  attachEventListeners() {
+    const dialog = this.shadow.getElementById(
+      'requests-dialog'
+    ) as HTMLDialogElement
+    const closeBtn = this.shadow.getElementById('close-btn')
+
+    this.dialog = dialog
+
+    closeBtn?.addEventListener('click', () => this.closeModal())
+    dialog?.addEventListener('click', (e) => {
+      if (e.target === dialog) {
+        this.closeModal()
+      }
+    })
+  }
+
+  openModal() {
+    if (!this.dialog) return
+
+    const adapter = appContext.getAdapter()
+    if (!adapter) return
+
+    const config = adapter.getSasjsConfig()
+    const requests = adapter.getSasRequests()
+
+    const title = this.shadow.getElementById('modal-title')
+    const content = this.shadow.getElementById('modal-content')
+
+    if (!title || !content) return
+
+    title.textContent = config.debug ? 'Last 20 requests' : ''
+
+    if (!config.debug) {
+      content.innerHTML = `
+        <div class="debug-message">
+          <div class="icon">🐛</div>
+          <h3>There is no debug information available.</h3>
+          <span>Please turn on debug and re-run your tests.</span>
+        </div>
+      `
+    } else if (!requests || requests.length === 0) {
+      content.innerHTML = `
+        <div class="debug-message">
+          <div class="icon">🐛</div>
+          <h3>There are no requests available.</h3>
+          <span>Please run a test and check again.</span>
+        </div>
+      `
+    } else {
+      content.innerHTML = `
+        <div class="requests-list">
+          ${requests
+            .map((request, index) => this.renderRequest(request, index))
+            .join('')}
+        </div>
+      `
+
+      this.attachTabListeners()
+    }
+
+    this.dialog.showModal()
+  }
+
+  closeModal() {
+    this.dialog?.close()
+  }
+
+  renderRequest(request: SASjsRequest, index: number): string {
+    const timestamp = new Date(request.timestamp)
+    const formattedDate = timestamp.toLocaleString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric'
+    })
+    const timeAgo = this.getTimeAgo(timestamp)
+
+    return `
+      <details data-index="${index}">
+        <summary>
+          <span>${request.serviceLink}</span>
+          <span class="request-timestamp">${formattedDate} (${timeAgo})</span>
+        </summary>
+        <div class="request-content">
+          <div class="tabs">
+            <button class="tab-btn active" data-tab="log-${index}">Log</button>
+            <button class="tab-btn" data-tab="source-${index}">Source Code</button>
+            <button class="tab-btn" data-tab="generated-${index}">Generated Code</button>
+          </div>
+          <div class="tab-panes">
+            <div class="tab-pane active" id="log-${index}">
+              <pre>${this.decodeHtml(request.logFile)}</pre>
+            </div>
+            <div class="tab-pane" id="source-${index}">
+              <pre>${this.decodeHtml(request.sourceCode)}</pre>
+            </div>
+            <div class="tab-pane" id="generated-${index}">
+              <pre>${this.decodeHtml(request.generatedCode)}</pre>
+            </div>
+          </div>
+        </div>
+      </details>
+    `
+  }
+
+  attachTabListeners() {
+    const tabBtns = this.shadow.querySelectorAll('.tab-btn')
+    tabBtns.forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        const target = e.currentTarget as HTMLElement
+        const tabId = target.getAttribute('data-tab')
+        if (!tabId) return
+
+        const container = target.closest('.request-content')
+        if (!container) return
+
+        container
+          .querySelectorAll('.tab-btn')
+          .forEach((b) => b.classList.remove('active'))
+        container
+          .querySelectorAll('.tab-pane')
+          .forEach((p) => p.classList.remove('active'))
+
+        target.classList.add('active')
+        const pane = container.querySelector(`#${tabId}`)
+        pane?.classList.add('active')
+      })
+    })
+  }
+
+  decodeHtml(encodedString: string): string {
+    const tempElement = document.createElement('textarea')
+    tempElement.innerHTML = encodedString
+    return tempElement.value
+  }
+
+  getTimeAgo(date: Date): string {
+    const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000)
+
+    if (seconds < 60) return `${seconds} seconds ago`
+    const minutes = Math.floor(seconds / 60)
+    if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`
+    const hours = Math.floor(minutes / 60)
+    if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`
+    const days = Math.floor(hours / 24)
+    return `${days} day${days !== 1 ? 's' : ''} ago`
+  }
+}
+
+customElements.define('requests-modal', RequestsModal)

sasjs-tests/src/components/TestCard.css

@@ -0,0 +1,126 @@
+:host {
+  display: block;
+  border: 2px solid #ecf0f1;
+  border-radius: 6px;
+  padding: 15px;
+  background: #fafafa;
+  transition: border-color 0.2s;
+
+  &[status='passed'] {
+    border-color: #27ae60;
+    background: #f0fff4;
+  }
+
+  &[status='failed'] {
+    border-color: #e74c3c;
+    background: #fff5f5;
+  }
+
+  &[status='running'] {
+    border-color: #f39c12;
+    background: #fffbf0;
+  }
+
+  &[status='pending'] {
+    border-color: #95a5a6;
+    background: #f8f9fa;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.status-icon {
+  font-size: 20px;
+  font-weight: bold;
+
+  &.passed {
+    color: #27ae60;
+  }
+  &.failed {
+    color: #e74c3c;
+  }
+  &.running {
+    color: #f39c12;
+    animation: spin 1s linear infinite;
+  }
+  &.pending {
+    color: #95a5a6;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+h3 {
+  font-size: 16px;
+  color: #2c3e50;
+  margin: 0;
+}
+
+.description {
+  color: #7f8c8d;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.details {
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.time {
+  color: #7f8c8d;
+  margin-bottom: 5px;
+}
+
+.error {
+  margin-top: 10px;
+
+  strong {
+    color: #e74c3c;
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  pre {
+    background: #2c3e50;
+    color: #ecf0f1;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 12px;
+    line-height: 1.4;
+    margin: 0;
+  }
+}
+
+button {
+  margin-top: 10px;
+  padding: 6px 12px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+
+  &:hover:not(:disabled) {
+    background: #2980b9;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}

sasjs-tests/src/components/TestCard.ts

@@ -0,0 +1,110 @@
+import type { TestStatus } from '../types'
+import type { CompletedTest } from '../core/TestRunner'
+
+export class TestCard extends HTMLElement {
+  private shadow: ShadowRoot
+  private _testData: CompletedTest | null = null
+
+  static get observedAttributes() {
+    return ['status', 'execution-time']
+  }
+
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  attributeChangedCallback(_name: string, oldValue: string, newValue: string) {
+    if (oldValue !== newValue) {
+      this.render()
+    }
+  }
+
+  set testData(data: CompletedTest) {
+    this._testData = data
+    this.setAttribute('status', data.status)
+    if (data.executionTime) {
+      this.setAttribute('execution-time', data.executionTime.toString())
+    }
+    this.render()
+  }
+
+  get testData(): CompletedTest | null {
+    return this._testData
+  }
+
+  render() {
+    if (!this._testData) return
+
+    const { test, status, executionTime, error } = this._testData
+    const statusIcon = this.getStatusIcon(status)
+
+    this.shadow.innerHTML = `
+      <link rel="stylesheet" href="${new URL(
+        './TestCard.css',
+        import.meta.url
+      )}">
+      <div class="header">
+        <span class="status-icon ${status}">${statusIcon}</span>
+        <h3>${test.title}</h3>
+      </div>
+      <p class="description">${test.description}</p>
+
+      ${
+        executionTime
+          ? `
+        <div class="details">
+          <div class="time">Time: ${executionTime.toFixed(3)}s</div>
+        </div>
+      `
+          : ''
+      }
+
+      ${
+        error
+          ? `
+        <div class="error">
+          <strong>Error:</strong>
+          <pre>${(error as Error).message || String(error)}</pre>
+        </div>
+      `
+          : ''
+      }
+
+      <button id="rerun-btn">Rerun</button>
+    `
+
+    const rerunBtn = this.shadow.getElementById('rerun-btn')
+    if (rerunBtn) {
+      rerunBtn.addEventListener('click', () => {
+        this.dispatchEvent(
+          new CustomEvent('rerun', {
+            bubbles: true,
+            composed: true
+          })
+        )
+      })
+    }
+  }
+
+  getStatusIcon(status: TestStatus): string {
+    switch (status) {
+      case 'passed':
+        return '✓'
+      case 'failed':
+        return '✗'
+      case 'running':
+        return '⟳'
+      case 'pending':
+        return '○'
+      default:
+        return '?'
+    }
+  }
+}
+
+customElements.define('test-card', TestCard)

sasjs-tests/src/components/TestSuite.css

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ecf0f1;
+}
+
+h2 {
+  color: #2c3e50;
+  font-size: 20px;
+  margin: 0;
+}
+
+.stats {
+  font-size: 14px;
+  color: #7f8c8d;
+}
+
+.tests {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 15px;
+}

sasjs-tests/src/components/TestSuite.ts

@@ -0,0 +1,80 @@
+import type { CompletedTestSuite } from '../core/TestRunner'
+import { TestCard } from './TestCard'
+
+export class TestSuiteElement extends HTMLElement {
+  private shadow: ShadowRoot
+  private _suiteData: CompletedTestSuite | null = null
+  private _suiteIndex: number = 0
+
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  set suiteData(data: CompletedTestSuite) {
+    this._suiteData = data
+    this.render()
+  }
+
+  get suiteData(): CompletedTestSuite | null {
+    return this._suiteData
+  }
+
+  set suiteIndex(index: number) {
+    this._suiteIndex = index
+  }
+
+  get suiteIndex(): number {
+    return this._suiteIndex
+  }
+
+  render() {
+    if (!this._suiteData) return
+
+    const { name, completedTests } = this._suiteData
+    const passed = completedTests.filter((t) => t.status === 'passed').length
+    const failed = completedTests.filter((t) => t.status === 'failed').length
+    const running = completedTests.filter((t) => t.status === 'running').length
+
+    this.shadow.innerHTML = `
+      <link rel="stylesheet" href="${new URL(
+        './TestSuite.css',
+        import.meta.url
+      )}">
+      <div class="header">
+        <h2>${name}</h2>
+        <div class="stats">Passed: ${passed} | Failed: ${failed} | Running: ${running}</div>
+      </div>
+      <div class="tests" id="tests-container"></div>
+    `
+
+    const testsContainer = this.shadow.getElementById('tests-container')
+    if (testsContainer) {
+      completedTests.forEach((completedTest, testIndex) => {
+        const card = document.createElement('test-card') as TestCard
+        card.testData = completedTest
+
+        card.addEventListener('rerun', () => {
+          this.dispatchEvent(
+            new CustomEvent('rerun-test', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                suiteIndex: this._suiteIndex,
+                testIndex
+              }
+            })
+          )
+        })
+
+        testsContainer.appendChild(card)
+      })
+    }
+  }
+}
+
+customElements.define('test-suite', TestSuiteElement)

sasjs-tests/src/components/TestsView.css

@@ -0,0 +1,104 @@
+:host {
+  display: block;
+  width: 100%;
+  padding: 80px 20px 20px 20px;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background: white;
+  border-bottom: 2px solid #3498db;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  height: 32px;
+}
+
+h1 {
+  color: #2c3e50;
+  margin: 0;
+  font-size: 20px;
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.logout-btn {
+  padding: 8px 16px;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+
+  &:hover {
+    background: #c0392b;
+  }
+}
+
+.requests-btn {
+  padding: 8px 16px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+
+  &:hover {
+    background: #2980b9;
+  }
+}
+
+.debug-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    color: #2c3e50;
+    cursor: pointer;
+  }
+}
+
+input[type='checkbox'] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.run-btn {
+  padding: 8px 16px;
+  background: #27ae60;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: #229954;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.results {
+  margin-top: 64px;
+  width: 100%;
+}

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)

sasjs-tests/src/components/index.ts

@@ -0,0 +1,5 @@
+export { LoginForm } from './LoginForm'
+export { TestCard } from './TestCard'
+export { TestSuiteElement } from './TestSuite'
+export { TestsView } from './TestsView'
+export { RequestsModal } from './RequestsModal'