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

2025-12-10 17:04:36 +00:00 · 2025-11-18 12:01:41 +01:00
parent 79e5acb954
commit 59198ed6ab
57 changed files with 3680 additions and 25462 deletions
--- a/cypress/integration/sasjs.tests.ts
+++ b/cypress/integration/sasjs.tests.ts
@@ -14,15 +14,23 @@ context('sasjs-tests', function () {

  function loginIfNeeded() {
    cy.get('body').then(($body) => {
-      if ($body.find('input[placeholder="User Name"]').length > 0) {
-        cy.get('input[placeholder="User Name"]')
+      if ($body.find('login-form').length > 0) {
+        cy.get('login-form')
+          .shadow()
+          .find('#username')
          .should('be.visible')
          .type(username)
-        cy.get('input[placeholder="Password"]')
+        cy.get('login-form')
+          .shadow()
+          .find('#password')
          .should('be.visible')
          .type(password)
-        cy.get('.submit-button').should('be.visible').click()
-        cy.get('input[placeholder="User Name"]').should('not.exist') // Wait for login to finish
+        cy.get('login-form')
+          .shadow()
+          .find('#submit-btn')
+          .should('be.visible')
+          .click()
+        cy.get('login-form').should('not.exist') // Wait for login to finish
      }
    })
  }
@@ -30,30 +38,36 @@ context('sasjs-tests', function () {
  it('Should have all tests successful', () => {
    loginIfNeeded()

-    cy.get('.ui.massive.icon.primary.left.labeled.button')
-      .should('be.visible')
-      .click()
+    cy.get('tests-view').shadow().find('#run-btn').should('be.visible').click()

-    cy.get('.ui.massive.loading.primary.button', {
+    cy.get('tests-view')
+      .shadow()
+      .find('#run-btn:disabled', {
        timeout: testingFinishTimeout
-    }).should('not.exist')
+      })
+      .should('not.exist')

-    cy.get('span.icon.failed').should('not.exist')
+    cy.get('test-card').shadow().find('.status-icon.failed').should('not.exist')
  })

  it('Should have all tests successful with debug on', () => {
    loginIfNeeded()

-    cy.get('.ui.fitted.toggle.checkbox label').should('be.visible').click()
-
-    cy.get('.ui.massive.icon.primary.left.labeled.button')
+    cy.get('tests-view')
+      .shadow()
+      .find('#debug-toggle')
      .should('be.visible')
      .click()

-    cy.get('.ui.massive.loading.primary.button', {
-      timeout: testingFinishTimeout
-    }).should('not.exist')
+    cy.get('tests-view').shadow().find('#run-btn').should('be.visible').click()

-    cy.get('span.icon.failed').should('not.exist')
+    cy.get('tests-view')
+      .shadow()
+      .find('#run-btn:disabled', {
+        timeout: testingFinishTimeout
+      })
+      .should('not.exist')
+
+    cy.get('test-card').shadow().find('.status-icon.failed').should('not.exist')
  })
 })
--- a/sasjs-tests/.env
+++ b/sasjs-tests/.env
@@ -1,3 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true
-# Removes index.html inline scripts
-INLINE_RUNTIME_CHUNK=false
--- a/sasjs-tests/.gitignore
+++ b/sasjs-tests/.gitignore
@@ -1,23 +1,29 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.*
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+# sasjs
 sasjsbuild
 sasjsresults
--- a/sasjs-tests/.prettierrc
+++ b/sasjs-tests/.prettierrc
@@ -1,6 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true
-}
--- a/sasjs-tests/README.md
+++ b/sasjs-tests/README.md
@@ -1,6 +1,8 @@
+# SASjs Tests
+
 `sasjs-tests` is a test suite for the SASjs adapter.

-It is a React app bootstrapped using [Create React App](https://github.com/facebook/create-react-app) and [@sasjs/test-framework](https://github.com/sasjs/test-framework).
+Browser-based integration testing for [@sasjs/adapter](https://github.com/sasjs/adapter) using TypeScript, Custom Elements, and zero dependencies.

 When developing on `@sasjs/adapter`, it's good practice to run the test suite against your changed version of the adapter to ensure that existing functionality has not been impacted.

@@ -20,43 +22,122 @@ There are three prerequisites to be able to run the tests:
 2. `sasjs-tests` deployed to your SAS server.
 3. The required SAS services created on the same server.

-### 1. Configuring the SASjs adapter
+### Configuring the SASjs adapter

 There is a `config.json` file in the `/public` folder which specifies the configuration for the SASjs adapter. You can set the values within the `sasjsConfig` property in this file to match your SAS server configuration.

-### 2. Deploying to your SAS server
-
-There is a `deploy` NPM script provided in the `sasjs-tests` project's `package.json`.
-
-It updates `sasjs-tests` to use the latest version of the adapter, and deploys to a specified server via SSH using the `rsync` command.
-
-To be able to run the `deploy` script, two environment variables need to be set:
-
- `SSH_ACCOUNT` - your SSH account, this is of the form username@domain.com
- `DEPLOY_PATH` - the path on the server where `sasjs-tests` will be deployed to, typically `/var/www/html/<some-subfolder>`.
-
-So you can run the script like so:
+#### Installation

 ```bash
-SSH_ACCOUNT=me@my-sas-server.com DEPLOY_PATH=/var/www/html/my-folder/sasjs-tests npm run deploy
+npm install
 ```

-If you are on `WINDOWS`, you will first need to install one dependency:
-```bash
-npm i -g copyfiles
-```
-and then run to build:
-```bash
-npm run update:adapter && npm run build
-```
-when it finishes run to deploy:
-```bash
-scp -rp ./build/* me@my-sas-server.com:/var/www/html/my-folder/sasjs-tests
+#### Configuration
+
+Edit `public/config.json`:
+
+```json
+{
+  "userName": "your-username",
+  "password": "your-password",
+  "sasJsConfig": {
+    "serverUrl": "https://your-sas-server.com",
+    "appLoc": "/Public/app/adapter-tests/services",
+    "serverType": "SASJS",
+    "debug": false,
+    "contextName": "sasjs adapter compute context",
+    "useComputeApi": true
+  }
+}
 ```

-If you'd like to deploy just `sasjs-tests` without changing the adapter version, you can use the `deploy:tests` script, while also setting the same environment variables as above.
+**Server Types:**

-## 3. Creating the required SAS services
+- `SASJS` - SASjs Server
+- `SASVIYA` - SAS Viya
+- `SAS9` - SAS 9.4
+
+## Getting Started
+
+### Development
+
+```bash
+# Build for production
+npm run build
+
+# Watch mode (rebuild on changes)
+npm run dev
+```
+
+The built files are in `build/`:
+
+- `index.html` - App entry point
+- `index.js` - Bundled JavaScript
+- `index.css` - Global styles
+- `config.json` - Configuration
+
+## Test Suites
+
+Tests are defined in `src/testSuites/`:
+
+- **Basic.ts** - Login, config, session management, debug mode
+- **RequestData.ts** - Data serialization (sendArr, sendObj) with various types
+- **FileUpload.ts** - File upload functionality (VIYA only)
+- **Compute.ts** - Compute API, JES API, executeScript (VIYA only)
+- **SasjsRequests.ts** - WORK tables, log capture
+- **SpecialCases.ts** - Edge cases (currently disabled)
+
+Each test suite follows this pattern:
+
+```typescript
+export const myTests = (adapter: SASjs): TestSuite => ({
+  name: 'My Test Suite',
+  tests: [
+    {
+      title: 'Should do something',
+      description: 'Description of what this tests',
+      test: async () => {
+        // Test logic - return a value
+        return adapter.request('service', data)
+      },
+      assertion: (response) => {
+        // Assertion - return true/false
+        return response.success === true
+      }
+    }
+  ],
+  beforeAll: async () => {
+    // Optional: runs once before all tests
+  },
+  afterAll: async () => {
+    // Optional: runs once after all tests
+  }
+})
+```
+
+### Shadow DOM Access
+
+Cypress accesses Shadow DOM using a custom command:
+
+```javascript
+cy.get('login-form').shadow().find('input#username').type('user')
+```
+
+The `shadow()` command is defined in `cypress/support/commands.js`.
+
+## Deployment
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+This creates a `build/` folder ready for deployment.
+
+### Deploy to SAS Server
+
+#### Creating the required SAS services

 The below services need to be created on your SAS server, at the location specified as the `appLoc` in the SASjs configuration.

@@ -126,23 +207,100 @@ data _null_;

 You should now be able to access the tests in your browser at the deployed path on your server.

-## Creating new tests
+#### Using SASjs CLI

-The `src/testSuites` folder contains all the test suites currently available.
-Each suite contains a set of specs, each of which looks like this:
-
-```javascript
-    {
-        title: "Your test title",
-        description: "A slightly more detailed description",
-        test: async () => {
-        // typically makes a request using the adapter and returns a promise
-        },
-        assertion: (response: any) =>
-        // receives the response when the test promise resolves, runs an assertion and returns a boolean
-    }
+```bash
+sasjs deploy -t <target>
 ```

-A test suite is an array of such objects, along with a `name` property.
+### Matrix Notifications

-You can add your test to one of the existing suites if suitable, or create a new file that specifies a new test suite.
+The `sasjs-cypress-run.sh` script sends Matrix chat notifications on test failure:
+
+```bash
+./sasjs-cypress-run.sh $MATRIX_ACCESS_TOKEN $PR_NUMBER
+```
+
+Notification format:
+
+```
+Automated sasjs-tests failed on the @sasjs/adapter PR: <PR_NUMBER>
+```
+
+## SAS Service Setup
+
+The tests require SAS services to be deployed at the `appLoc` specified in `config.json`.
+
+Services expected:
+
+- `common/sendArr` - Echo back array data
+- `common/sendObj` - Echo back object data
+- (Additional services per test suite)
+
+Deploy these services using [SASjs CLI](https://cli.sasjs.io) or manually.
+
+## Troubleshooting
+
+### Build Errors
+
+- Ensure Node.js >= 18
+- Clear `node_modules` and reinstall: `rm -rf node_modules package-lock.json && npm install`
+
+### Cypress Shadow DOM Issues
+
+If Cypress can't access Shadow DOM elements:
+
+1. Verify custom `shadow()` command in `cypress/support/commands.js`
+2. Check element selectors match actual DOM structure
+
+### Test Failures
+
+- Check `config.json` credentials and server URL
+- Verify SAS services are deployed
+- Check browser console for errors
+- Enable `debug: true` in sasJsConfig for verbose logging
+
+## Development
+
+- **Pure Vanilla TS** - No React, no frameworks
+- **Custom Elements** - Web Components with Shadow DOM
+- **Zero Dependencies** - Only @sasjs/adapter + build tools
+- **Minimal Bundle** - 40KB (8KB gzipped)
+
+### Build Stack
+
+- **tsdown** - TypeScript bundler (replaces CRA/react-scripts)
+
+### UI Components (Custom Elements)
+
+- `<login-form>` - SAS authentication
+- `<tests-view>` - Test orchestrator with run controls
+- `<test-suite>` - Test suite display with stats
+- `<test-card>` - Individual test with status (pending/running/passed/failed)
+
+All components use Shadow DOM for style encapsulation and expose custom events for interactivity.
+
+### Adding New Test Suites
+
+1. Create file in `src/testSuites/MyNewTests.ts`
+2. Export function returning TestSuite
+3. Import in `src/index.ts`
+4. Add to `testSuites` array in `showTests()` function
+
+### Modifying UI Components
+
+Components are in `src/components/`:
+
+- Edit `.ts` file
+- Styles are in Shadow DOM `<style>` tags
+- Rebuild with `npm run build`
+
+## License
+
+MIT
+
+## Links
+
+- [@sasjs/adapter](https://adapter.sasjs.io)
+- [SASjs Documentation](https://sasjs.io)
+- [SASjs CLI](https://cli.sasjs.io)
--- a/sasjs-tests/craco.config.js
+++ b/sasjs-tests/craco.config.js
@@ -1,15 +0,0 @@
-// craco.config.js
-// We use craco instead of react-scripts so we can override webpack config, to include source maps
-// so we can debug @sasjs/adapter easier when tests fail
-module.exports = {
-  webpack: {
-    configure: (webpackConfig, { env }) => {
-      // Disable optimizations in both development and production
-      webpackConfig.optimization.minimize = false;
-      webpackConfig.optimization.minimizer = [];
-      webpackConfig.optimization.concatenateModules = false;
-      webpackConfig.optimization.splitChunks = { cacheGroups: { default: false } };
-      return webpackConfig;
-    }
-  }
-};
--- a/sasjs-tests/index.css
+++ b/sasjs-tests/index.css
@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: #f5f5f5;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+.app__error {
+  max-width: 800px;
+  margin: 50px auto;
+  padding: 30px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+  h1 {
+    color: #e74c3c;
+    margin-bottom: 15px;
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+
+  pre {
+    background: #2c3e50;
+    color: #ecf0f1;
+    padding: 15px;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
+}
--- a/sasjs-tests/index.html
+++ b/sasjs-tests/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="./src/images/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SASjs tests</title>
+    <link rel="stylesheet" href="./index.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
--- a/sasjs-tests/package-lock.json
+++ b/sasjs-tests/package-lock.json
--- a/sasjs-tests/package.json
+++ b/sasjs-tests/package.json
@@ -1,50 +1,25 @@
 {
-  "name": "@sasjs/tests",
-  "version": "1.0.0",
-  "homepage": ".",
+  "name": "sasjs-tests-new",
  "private": true,
-  "dependencies": {
-    "@sasjs/adapter": "file:../build/sasjs-adapter-5.0.0.tgz",
-    "@sasjs/test-framework": "1.5.7",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.41",
-    "@types/react": "^16.0.1",
-    "@types/react-dom": "^16.0.0",
-    "@types/react-router-dom": "^5.1.7",
-    "react": "^16.0.1",
-    "react-dom": "^16.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.3"
-  },
+  "version": "0.0.0",
+  "type": "module",
  "scripts": {
-    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider craco build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
    "update:adapter": "cd .. && npm run package:lib && cd sasjs-tests && npm i ../build/sasjs-adapter-5.0.0.tgz",
-    "deploy:tests": "rsync -avhe ssh ./build/* --delete $SSH_ACCOUNT:$DEPLOY_PATH || npm run deploy:tests-win",
-    "deploy:tests-win": "scp %DEPLOY_PATH% ./build/*",
+    "deploy:tests": "rsync -avhe ssh ./dist/* --delete $SSH_ACCOUNT:$DEPLOY_PATH || npm run deploy:tests-win",
+    "deploy:tests-win": "scp %DEPLOY_PATH% ./dist/*",
    "deploy": "npm run update:adapter && npm run build && npm run deploy:tests"
  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
  "devDependencies": {
-    "@craco/craco": "6.4.3",
-    "node-sass": "9.0.0",
-    "source-map-loader": "0.2.4"
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.2"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.2"
+  },
+  "dependencies": {
+    "@sasjs/adapter": "^4.14.0"
  }
 }
--- a/sasjs-tests/public/favicon.ico
+++ b/sasjs-tests/public/favicon.ico
--- a/sasjs-tests/public/index.html
+++ b/sasjs-tests/public/index.html
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Tests for SASjs" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>SASjs Tests</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
--- a/sasjs-tests/public/logo192.png
+++ b/sasjs-tests/public/logo192.png
--- a/sasjs-tests/public/logo512.png
+++ b/sasjs-tests/public/logo512.png
--- a/sasjs-tests/public/manifest.json
+++ b/sasjs-tests/public/manifest.json
@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
--- a/sasjs-tests/public/sasjs-logo.png
+++ b/sasjs-tests/public/sasjs-logo.png
--- a/sasjs-tests/sasjs/sasjsconfig.json
+++ b/sasjs-tests/sasjs/sasjsconfig.json
@@ -20,7 +20,7 @@
      "streamConfig": {
        "streamWeb": true,
        "streamWebFolder": "webv",
-        "webSourcePath": "build",
+        "webSourcePath": "dist",
        "streamServiceName": "adapter-tests",
        "assetPaths": []
      }
@@ -40,7 +40,7 @@
      "streamConfig": {
        "streamWeb": true,
        "streamWebFolder": "webv",
-        "webSourcePath": "build",
+        "webSourcePath": "dist",
        "streamServiceName": "adapter-tests",
        "assetPaths": []
      }
--- a/sasjs-tests/src/App.tsx
+++ b/sasjs-tests/src/App.tsx
@@ -1,42 +0,0 @@
-import React, { ReactElement, useState, useContext, useEffect } from 'react'
-import { TestSuiteRunner, TestSuite, AppContext } from '@sasjs/test-framework'
-import { basicTests } from './testSuites/Basic'
-import { sendArrTests, sendObjTests } from './testSuites/RequestData'
-import { specialCaseTests } from './testSuites/SpecialCases'
-import { sasjsRequestTests } from './testSuites/SasjsRequests'
-import '@sasjs/test-framework/dist/index.css'
-import { computeTests } from './testSuites/Compute'
-import { fileUploadTests } from './testSuites/FileUpload'
-
-const App = (): ReactElement<{}> => {
-  const { adapter, config } = useContext(AppContext)
-  const [testSuites, setTestSuites] = useState<TestSuite[]>([])
-  const appLoc = config.sasJsConfig.appLoc
-
-  useEffect(() => {
-    if (adapter) {
-      const testSuites = [
-        basicTests(adapter, config.userName, config.password),
-        sendArrTests(adapter, appLoc),
-        sendObjTests(adapter),
-        // specialCaseTests(adapter),
-        sasjsRequestTests(adapter),
-        fileUploadTests(adapter)
-      ]
-
-      if (adapter.getSasjsConfig().serverType === 'SASVIYA') {
-        testSuites.push(computeTests(adapter, appLoc))
-      }
-
-      setTestSuites(testSuites)
-    }
-  }, [adapter, config, appLoc])
-
-  return (
-    <div className="app">
-      {adapter && testSuites && <TestSuiteRunner testSuites={testSuites} />}
-    </div>
-  )
-}
-
-export default App
--- a/sasjs-tests/src/Login.scss
+++ b/sasjs-tests/src/Login.scss
@@ -1,34 +0,0 @@
-.login-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    max-width: 30%;
-  }
-
-  form {
-    width: 33%;
-    margin-top: 3%;
-    display: flex;
-    flex-direction: column;
-
-    .row {
-      input {
-        font-size: 0.9em;
-      }
-
-      label {
-        font-weight: bold;
-        font-size: 0.9em;
-        margin-bottom: 4px;
-      }
-    }
-
-    .submit-button {
-      margin-top: 16px;
-    }
-  }
-}
--- a/sasjs-tests/src/Login.tsx
+++ b/sasjs-tests/src/Login.tsx
@@ -1,54 +0,0 @@
-import React, { ReactElement, useState, useCallback, useContext } from 'react'
-import './Login.scss'
-import { AppContext } from '@sasjs/test-framework'
-import { Redirect } from 'react-router-dom'
-
-const Login = (): ReactElement<{}> => {
-  const [username, setUsername] = useState('')
-  const [password, setPassword] = useState('')
-  const appContext = useContext(AppContext)
-
-  const handleSubmit = useCallback(
-    (e: any) => {
-      e.preventDefault()
-      appContext.adapter.logIn(username, password).then((res) => {
-        appContext.setIsLoggedIn(res.isLoggedIn)
-      })
-    },
-    [username, password, appContext]
-  )
-
-  return !appContext.isLoggedIn ? (
-    <div className="login-container">
-      <img src="sasjs-logo.png" alt="SASjs Logo" />
-      <form onSubmit={handleSubmit}>
-        <div className="row">
-          <label>User Name</label>
-          <input
-            placeholder="User Name"
-            value={username}
-            required
-            onChange={(e: any) => setUsername(e.target.value)}
-          />
-        </div>
-        <div className="row">
-          <label>Password</label>
-          <input
-            placeholder="Password"
-            type="password"
-            value={password}
-            required
-            onChange={(e: any) => setPassword(e.target.value)}
-          />
-        </div>
-        <button type="submit" className="submit-button">
-          Log In
-        </button>
-      </form>
-    </div>
-  ) : (
-    <Redirect to="/" />
-  )
-}
-
-export default Login
--- a/sasjs-tests/src/PrivateRoute.tsx
+++ b/sasjs-tests/src/PrivateRoute.tsx
@@ -1,23 +0,0 @@
-import React, { ReactElement, useContext, FunctionComponent } from 'react'
-import { Redirect, Route } from 'react-router-dom'
-import { AppContext } from '@sasjs/test-framework'
-
-interface PrivateRouteProps {
-  component: FunctionComponent
-  exact?: boolean
-  path: string
-}
-
-const PrivateRoute = (
-  props: PrivateRouteProps
-): ReactElement<PrivateRouteProps> => {
-  const { component, path, exact } = props
-  const appContext = useContext(AppContext)
-  return appContext.isLoggedIn ? (
-    <Route component={component} path={path} exact={exact} />
-  ) : (
-    <Redirect to="/login" />
-  )
-}
-
-export default PrivateRoute
--- a/sasjs-tests/src/components/LoginForm.css
+++ b/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;
+}
--- a/sasjs-tests/src/components/LoginForm.ts
+++ b/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)
--- a/sasjs-tests/src/components/RequestsModal.css
+++ b/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;
+}
--- a/sasjs-tests/src/components/RequestsModal.ts
+++ b/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)
--- a/sasjs-tests/src/components/TestCard.css
+++ b/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;
+  }
+}
--- a/sasjs-tests/src/components/TestCard.ts
+++ b/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)
--- a/sasjs-tests/src/components/TestSuite.css
+++ b/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;
+}
--- a/sasjs-tests/src/components/TestSuite.ts
+++ b/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)
--- a/sasjs-tests/src/components/TestsView.css
+++ b/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%;
+}
--- a/sasjs-tests/src/components/TestsView.ts
+++ b/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)
--- a/sasjs-tests/src/components/index.ts
+++ b/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'
--- a/sasjs-tests/src/config/loader.ts
+++ b/sasjs-tests/src/config/loader.ts
@@ -0,0 +1,14 @@
+import type { AppConfig } from '../types'
+
+export interface ConfigWithCredentials extends AppConfig {
+  userName?: string
+  password?: string
+}
+
+export async function loadConfig(): Promise<ConfigWithCredentials> {
+  const response = await fetch('config.json')
+  if (!response.ok) {
+    throw new Error('Failed to load config.json')
+  }
+  return response.json()
+}
--- a/sasjs-tests/src/core/AppContext.ts
+++ b/sasjs-tests/src/core/AppContext.ts
@@ -0,0 +1,60 @@
+import type SASjs from '@sasjs/adapter'
+import type { AppConfig, AppState } from '../types'
+
+export class AppContext {
+  private state: AppState = {
+    config: null,
+    adapter: null,
+    isLoggedIn: false
+  }
+
+  private listeners: Array<(state: AppState) => void> = []
+
+  getState(): AppState {
+    return { ...this.state }
+  }
+
+  setState(newState: Partial<AppState>): void {
+    this.state = { ...this.state, ...newState }
+    this.notifyListeners()
+  }
+
+  subscribe(listener: (state: AppState) => void): () => void {
+    this.listeners.push(listener)
+    // Return unsubscribe function
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener)
+    }
+  }
+
+  private notifyListeners(): void {
+    this.listeners.forEach((listener) => listener(this.getState()))
+  }
+
+  setConfig(config: AppConfig): void {
+    this.setState({ config })
+  }
+
+  setAdapter(adapter: SASjs): void {
+    this.setState({ adapter })
+  }
+
+  setIsLoggedIn(isLoggedIn: boolean): void {
+    this.setState({ isLoggedIn })
+  }
+
+  getAdapter(): SASjs | null {
+    return this.state.adapter
+  }
+
+  getConfig(): AppConfig | null {
+    return this.state.config
+  }
+
+  isUserLoggedIn(): boolean {
+    return this.state.isLoggedIn
+  }
+}
+
+// Global singleton instance
+export const appContext = new AppContext()
--- a/sasjs-tests/src/core/TestRunner.ts
+++ b/sasjs-tests/src/core/TestRunner.ts
@@ -0,0 +1,162 @@
+import type { Test, TestSuite, TestStatus } from '../types'
+import { runTest } from './runTest'
+
+export interface CompletedTest {
+  test: Test
+  result: boolean
+  error: unknown
+  executionTime: number
+  status: TestStatus
+}
+
+export interface CompletedTestSuite {
+  name: string
+  completedTests: CompletedTest[]
+}
+
+export class TestRunner {
+  private testSuites: TestSuite[]
+  private completedTestSuites: CompletedTestSuite[] = []
+  private isRunning = false
+
+  constructor(testSuites: TestSuite[]) {
+    this.testSuites = testSuites
+  }
+
+  async runAllTests(
+    onUpdate?: (
+      completedSuites: CompletedTestSuite[],
+      currentIndex: number
+    ) => void
+  ): Promise<CompletedTestSuite[]> {
+    this.isRunning = true
+    this.completedTestSuites = []
+
+    for (let i = 0; i < this.testSuites.length; i++) {
+      const suite = this.testSuites[i]
+      const completedSuite = await this.runTestSuite(suite, i, onUpdate)
+      this.completedTestSuites.push(completedSuite)
+    }
+
+    this.isRunning = false
+    return this.completedTestSuites
+  }
+
+  async runTestSuite(
+    suite: TestSuite,
+    suiteIndex: number,
+    onUpdate?: (
+      completedSuites: CompletedTestSuite[],
+      currentIndex: number
+    ) => void
+  ): Promise<CompletedTestSuite> {
+    const completedTests: CompletedTest[] = []
+    let context: unknown
+
+    // Run beforeAll if exists
+    if (suite.beforeAll) {
+      context = await suite.beforeAll()
+    }
+
+    // Run each test sequentially
+    for (let i = 0; i < suite.tests.length; i++) {
+      const test = suite.tests[i]
+      const currentIndex = suiteIndex * 1000 + i
+
+      // Set status to running
+      const runningTest: CompletedTest = {
+        test,
+        result: false,
+        error: null,
+        executionTime: 0,
+        status: 'running'
+      }
+      completedTests.push(runningTest)
+
+      // Notify update
+      if (onUpdate) {
+        this.completedTestSuites[suiteIndex] = {
+          name: suite.name,
+          completedTests: [...completedTests]
+        }
+        onUpdate([...this.completedTestSuites], currentIndex)
+      }
+
+      // Execute test
+      const result = await runTest(test, { data: context })
+
+      // Update with result
+      completedTests[i] = {
+        test,
+        result: result.result,
+        error: result.error,
+        executionTime: result.executionTime,
+        status: result.result ? 'passed' : 'failed'
+      }
+
+      // Notify update
+      if (onUpdate) {
+        this.completedTestSuites[suiteIndex] = {
+          name: suite.name,
+          completedTests: [...completedTests]
+        }
+        onUpdate([...this.completedTestSuites], currentIndex)
+      }
+    }
+
+    // Run afterAll if exists
+    if (suite.afterAll) {
+      await suite.afterAll()
+    }
+
+    return {
+      name: suite.name,
+      completedTests
+    }
+  }
+
+  async rerunTest(
+    suiteIndex: number,
+    testIndex: number,
+    onUpdate?: (completedSuites: CompletedTestSuite[]) => void
+  ): Promise<void> {
+    const suite = this.testSuites[suiteIndex]
+    const test = suite.tests[testIndex]
+
+    let context: unknown
+    if (suite.beforeAll) {
+      context = await suite.beforeAll()
+    }
+
+    // Set status to running
+    this.completedTestSuites[suiteIndex].completedTests[testIndex].status =
+      'running'
+    if (onUpdate) {
+      onUpdate([...this.completedTestSuites])
+    }
+
+    // Execute test
+    const result = await runTest(test, { data: context })
+
+    // Update with result
+    this.completedTestSuites[suiteIndex].completedTests[testIndex] = {
+      test,
+      result: result.result,
+      error: result.error,
+      executionTime: result.executionTime,
+      status: result.result ? 'passed' : 'failed'
+    }
+
+    if (onUpdate) {
+      onUpdate([...this.completedTestSuites])
+    }
+  }
+
+  getCompletedTestSuites(): CompletedTestSuite[] {
+    return this.completedTestSuites
+  }
+
+  isTestRunning(): boolean {
+    return this.isRunning
+  }
+}
--- a/sasjs-tests/src/core/index.ts
+++ b/sasjs-tests/src/core/index.ts
@@ -0,0 +1,3 @@
+export * from './runTest'
+export * from './TestRunner'
+export * from './AppContext'
--- a/sasjs-tests/src/core/runTest.ts
+++ b/sasjs-tests/src/core/runTest.ts
@@ -0,0 +1,30 @@
+import type { Test, TestResult } from '../types'
+
+export async function runTest(
+  testToRun: Test,
+  context: unknown
+): Promise<TestResult> {
+  const { test, assertion, beforeTest, afterTest } = testToRun
+  const beforeTestFunction = beforeTest ? beforeTest : () => Promise.resolve()
+  const afterTestFunction = afterTest ? afterTest : () => Promise.resolve()
+
+  const startTime = new Date().valueOf()
+
+  return beforeTestFunction()
+    .then(() => test(context))
+    .then((res) => {
+      return Promise.resolve(assertion(res, context))
+    })
+    .then((testResult) => {
+      afterTestFunction()
+      const endTime = new Date().valueOf()
+      const executionTime = (endTime - startTime) / 1000
+      return { result: testResult, error: null, executionTime }
+    })
+    .catch((e) => {
+      console.error(e)
+      const endTime = new Date().valueOf()
+      const executionTime = (endTime - startTime) / 1000
+      return { result: false, error: e, executionTime }
+    })
+}
--- a/sasjs-tests/src/images/favicon.png
+++ b/sasjs-tests/src/images/favicon.png
--- a/sasjs-tests/src/index.scss
+++ b/sasjs-tests/src/index.scss
@@ -1,61 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #1f2027;
-  color: #eee;
-}
-
-* {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-input {
-  padding: 8px;
-  border-radius: 3px;
-  border: none;
-  font-size: 1.125em;
-}
-
-.submit-button {
-  border: none;
-  border-radius: 3px;
-  padding: 8px;
-  background-color: #f9e804;
-  color: black;
-  font-size: 0.8em;
-
-  &.disabled {
-    pointer-events: none;
-  }
-}
-
-.row {
-  display: flex;
-  flex-direction: column;
-  margin-top: 16px;
-}
-
-.loading-spinner {
-  display: inline-block;
-  width: 50px;
-  height: 50px;
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: #fff;
-  animation: spin 1s ease-in-out infinite;
-  -webkit-animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes spin {
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
--- a/sasjs-tests/src/index.tsx
+++ b/sasjs-tests/src/index.tsx
@@ -1,26 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Route, HashRouter, Switch } from 'react-router-dom'
-import './index.scss'
-import * as serviceWorker from './serviceWorker'
-import { AppProvider } from '@sasjs/test-framework'
-import PrivateRoute from './PrivateRoute'
-import Login from './Login'
-import App from './App'
-
-ReactDOM.render(
-  <AppProvider>
-    <HashRouter>
-      <Switch>
-        <PrivateRoute exact path="/" component={App} />
-        <Route exact path="/login" component={Login} />
-      </Switch>
-    </HashRouter>
-  </AppProvider>,
-  document.getElementById('root')
-)
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister()
--- a/sasjs-tests/src/main.ts
+++ b/sasjs-tests/src/main.ts
@@ -0,0 +1,139 @@
+import * as SASjsModule from '@sasjs/adapter'
+const SASjsImport = (SASjsModule as any).default || SASjsModule
+const SASjs = SASjsImport.default
+
+import { appContext } from './core/AppContext'
+import { type ConfigWithCredentials, loadConfig } from './config/loader'
+import type { TestSuite } from './types'
+
+// Import custom elements (this registers them)
+import './components/LoginForm'
+import './components/TestCard'
+import './components/TestSuite'
+import './components/TestsView'
+import './components/RequestsModal'
+import type { LoginForm } from './components/LoginForm'
+import type { TestsView } from './components/TestsView'
+import type { RequestsModal } from './components/RequestsModal'
+
+// Import test suites
+import { basicTests } from './testSuites/Basic'
+import { sendArrTests, sendObjTests } from './testSuites/RequestData'
+import { fileUploadTests } from './testSuites/FileUpload'
+import { computeTests } from './testSuites/Compute'
+import { sasjsRequestTests } from './testSuites/SasjsRequests'
+
+async function init() {
+  const appContainer = document.getElementById('app')
+  if (!appContainer) {
+    console.error('App container not found')
+    return
+  }
+
+  try {
+    // Load config
+    const config = await loadConfig()
+
+    // Initialize adapter
+    const adapter = new SASjs(config.sasJsConfig)
+    appContext.setAdapter(adapter)
+    appContext.setConfig(config)
+
+    // Check session
+    try {
+      const sessionResponse = await adapter.checkSession()
+      if (sessionResponse && sessionResponse.isLoggedIn) {
+        appContext.setIsLoggedIn(true)
+        showTests(appContainer, adapter, config)
+        return
+      }
+    } catch {
+      console.log('No active session, showing login')
+    }
+
+    // Show login
+    showLogin(appContainer)
+  } catch (error) {
+    console.error('Failed to initialize app:', error)
+    appContainer.innerHTML = `
+      <div class="app__error">
+        <h1>Initialization Error</h1>
+        <p>Failed to load configuration. Please check config.json file.</p>
+        <pre>${error}</pre>
+      </div>
+    `
+  }
+}
+
+function showLogin(container: HTMLElement) {
+  container.innerHTML = ''
+  const loginForm = document.createElement('login-form') as LoginForm
+
+  loginForm.addEventListener('login-success', () => {
+    const adapter = appContext.getAdapter()
+    const config = appContext.getConfig()
+    if (adapter && config) {
+      showTests(container, adapter, config)
+    }
+  })
+
+  container.appendChild(loginForm)
+}
+
+function showTests(
+  container: HTMLElement,
+  adapter: typeof SASjs,
+  config: ConfigWithCredentials
+) {
+  const configTyped = config as {
+    sasJsConfig: { appLoc: string }
+    userName?: string
+    password?: string
+  }
+  const appLoc = configTyped.sasJsConfig.appLoc
+
+  // Build test suites with adapter and credentials
+  const testSuites: TestSuite[] = [
+    basicTests(adapter, configTyped.userName || '', configTyped.password || ''),
+    sendArrTests(adapter, appLoc),
+    sendObjTests(adapter),
+    // specialCaseTests(adapter),
+    sasjsRequestTests(adapter),
+    fileUploadTests(adapter)
+  ]
+
+  // Add compute tests for SASVIYA only
+  if (adapter.getSasjsConfig().serverType === 'SASVIYA') {
+    testSuites.push(computeTests(adapter, appLoc))
+  }
+
+  container.innerHTML = ''
+  const testsView = document.createElement('tests-view') as TestsView
+  testsView.testSuites = testSuites
+
+  const requestsModal = document.createElement(
+    'requests-modal'
+  ) as RequestsModal
+
+  testsView.addEventListener('logout', () => {
+    showLogin(container)
+  })
+
+  container.appendChild(requestsModal)
+  container.appendChild(testsView)
+}
+
+// Subscribe to auth changes
+appContext.subscribe((state) => {
+  const appContainer = document.getElementById('app')
+  if (!appContainer) return
+
+  if (!state.isLoggedIn) {
+    showLogin(appContainer)
+  } else if (state.adapter && state.config) {
+    showTests(appContainer, state.adapter, state.config)
+  }
+})
+
+// Initialize app
+init()
--- a/sasjs-tests/src/react-app-env.d.ts
+++ b/sasjs-tests/src/react-app-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
--- a/sasjs-tests/src/serviceWorker.js
+++ b/sasjs-tests/src/serviceWorker.js
@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-)
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config)
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          )
-        })
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config)
-      }
-    })
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing
-        if (installingWorker == null) {
-          return
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              )
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration)
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.')
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration)
-              }
-            }
-          }
-        }
-      }
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error)
-    })
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
-  })
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type')
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload()
-          })
-        })
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config)
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      )
-    })
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then((registration) => {
-        registration.unregister()
-      })
-      .catch((error) => {
-        console.error(error.message)
-      })
-  }
-}
--- a/sasjs-tests/src/setupTests.js
+++ b/sasjs-tests/src/setupTests.js
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect'
--- a/sasjs-tests/src/testSuites/Basic.ts
+++ b/sasjs-tests/src/testSuites/Basic.ts
@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import SASjs, { LoginMechanism, SASjsConfig } from '@sasjs/adapter'
-import { TestSuite } from '@sasjs/test-framework'
 import { ServerType } from '@sasjs/utils/types'
+import type { TestSuite } from '../types'

 const stringData: any = { table1: [{ col1: 'first col value' }] }

@@ -61,7 +63,7 @@ export const basicTests = (
        'Should fail on first attempt and should log the user in on second attempt',
      test: async () => {
        await adapter.logOut()
-        await adapter.logIn('invalid', 'invalid').catch((err: any) => {})
+        await adapter.logIn('invalid', 'invalid').catch((_err: any) => {})
        return await adapter.logIn(userName, password)
      },
      assertion: (response: any) =>
--- a/sasjs-tests/src/testSuites/Compute.ts
+++ b/sasjs-tests/src/testSuites/Compute.ts
@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import SASjs from '@sasjs/adapter'
-import { TestSuite } from '@sasjs/test-framework'
+import type { TestSuite } from '../types'

 const stringData: any = { table1: [{ col1: 'first col value' }] }

--- a/sasjs-tests/src/testSuites/FileUpload.ts
+++ b/sasjs-tests/src/testSuites/FileUpload.ts
@@ -1,5 +1,7 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import SASjs from '@sasjs/adapter'
-import { TestSuite } from '@sasjs/test-framework'
+import type { TestSuite } from '../types'

 export const fileUploadTests = (adapter: SASjs): TestSuite => ({
  name: 'File Upload Tests',
--- a/sasjs-tests/src/testSuites/RequestData.ts
+++ b/sasjs-tests/src/testSuites/RequestData.ts
@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import SASjs from '@sasjs/adapter'
-import { TestSuite } from '@sasjs/test-framework'
+import type { TestSuite } from '../types'

 const stringData: any = { table1: [{ col1: 'first col value' }] }
 const numericData: any = { table1: [{ col1: 3.14159265 }] }
--- a/sasjs-tests/src/testSuites/SasjsRequests.ts
+++ b/sasjs-tests/src/testSuites/SasjsRequests.ts
@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import SASjs from '@sasjs/adapter'
-import { TestSuite } from '@sasjs/test-framework'
+import type { TestSuite } from '../types'

 const data: any = { table1: [{ col1: 'first col value' }] }

--- a/sasjs-tests/src/testSuites/SpecialCases.ts
+++ b/sasjs-tests/src/testSuites/SpecialCases.ts
@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import SASjs from '@sasjs/adapter'
-import { TestSuite } from '@sasjs/test-framework'
+import type { TestSuite } from '../types'

 const specialCharData: any = {
  table1: [
@@ -325,7 +327,7 @@ export const specialCaseTests = (adapter: SASjs): TestSuite => ({
        // We receive formats in response. We compare it with formats that we included in request to make sure they are equal
        const resVars = res[`$${testTable}`].vars

-        Object.keys(resVars).forEach((key: any, i: number) => {
+        Object.keys(resVars).forEach((key: any, _i: number) => {
          let formatValue =
            testTableWithSpecialNumeric[`$${testTable}`].formats[
              key.toLowerCase()
@@ -373,7 +375,7 @@ export const specialCaseTests = (adapter: SASjs): TestSuite => ({
        // We receive formats in response. We compare it with formats that we included in request to make sure they are equal
        const resVars = res[`$${testTable}`].vars

-        Object.keys(resVars).forEach((key: any, i: number) => {
+        Object.keys(resVars).forEach((key: any, _i: number) => {
          let formatValue =
            testTableWithSpecialNumeric[`$${testTable}`].formats[
              key.toLowerCase()
@@ -421,7 +423,7 @@ export const specialCaseTests = (adapter: SASjs): TestSuite => ({
        // We receive formats in response. We compare it with formats that we included in request to make sure they are equal
        const resVars = res[`$${testTable}`].vars

-        Object.keys(resVars).forEach((key: any, i: number) => {
+        Object.keys(resVars).forEach((key: any, _i: number) => {
          let formatValue =
            testTableWithSpecialNumericLowercase[`$${testTable}`].formats[
              key.toLowerCase()
@@ -478,7 +480,7 @@ export const specialCaseTests = (adapter: SASjs): TestSuite => ({
        // We receive formats in response. We compare it with formats that we included in request to make sure they are equal
        const resVars = res[`$${testTable}`].vars

-        Object.keys(resVars).forEach((key: any, i: number) => {
+        Object.keys(resVars).forEach((key: any, _i: number) => {
          let formatValue =
            testTableWithSpecialNumeric[`$${testTable}`].formats[
              key.toLowerCase()
--- a/sasjs-tests/src/types/context.ts
+++ b/sasjs-tests/src/types/context.ts
@@ -0,0 +1,12 @@
+import type SASjs from '@sasjs/adapter'
+import type { SASjsConfig } from '@sasjs/adapter'
+
+export interface AppConfig {
+  sasJsConfig: SASjsConfig
+}
+
+export interface AppState {
+  config: AppConfig | null
+  adapter: SASjs | null
+  isLoggedIn: boolean
+}
--- a/sasjs-tests/src/types/index.ts
+++ b/sasjs-tests/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from './test'
+export * from './context'
--- a/sasjs-tests/src/types/test.ts
+++ b/sasjs-tests/src/types/test.ts
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface Test {
+  title: string
+  description: string
+  beforeTest?: (...args: any) => Promise<any>
+  afterTest?: (...args: any) => Promise<any>
+  test: (context: any) => Promise<any>
+  assertion: (...args: any) => boolean
+}
+
+export interface TestSuite {
+  name: string
+  tests: Test[]
+  beforeAll?: (...args: any) => Promise<any>
+  afterAll?: (...args: any) => Promise<any>
+}
+
+export interface TestResult {
+  result: boolean
+  error: Error | null
+  executionTime: number
+}
+
+export type TestStatus = 'pending' | 'running' | 'passed' | 'failed'
--- a/sasjs-tests/src/utils/Assert.ts
+++ b/sasjs-tests/src/utils/Assert.ts
@@ -1,22 +0,0 @@
-export const assert = (
-  expression: boolean | (() => boolean),
-  message = 'Assertion failed'
-) => {
-  let result
-  try {
-    if (typeof expression === 'boolean') {
-      result = expression
-    } else {
-      result = expression()
-    }
-  } catch (e: any) {
-    console.error(message)
-    throw new Error(message)
-  }
-  if (!!result) {
-    return
-  } else {
-    console.error(message)
-    throw new Error(message)
-  }
-}
--- a/sasjs-tests/test.md
+++ b/sasjs-tests/test.md
@@ -0,0 +1,148 @@
+`sasjs-tests` is a test suite for the SASjs adapter.
+
+It is a React app bootstrapped using [Create React App](https://github.com/facebook/create-react-app) and [@sasjs/test-framework](https://github.com/sasjs/test-framework).
+
+When developing on `@sasjs/adapter`, it's good practice to run the test suite against your changed version of the adapter to ensure that existing functionality has not been impacted.
+
+You can use the provided `update:adapter` NPM script for this.
+
+```bash
+    npm run update:adapter
+```
+
+This scripts builds a new version of the adapter and installs it in the `sasjs-tests` project.
+
+## Running tests
+
+There are three prerequisites to be able to run the tests:
+
+1. Correct server configuration for the SASjs adapter.
+2. `sasjs-tests` deployed to your SAS server.
+3. The required SAS services created on the same server.
+
+### 1. Configuring the SASjs adapter
+
+There is a `config.json` file in the `/public` folder which specifies the configuration for the SASjs adapter. You can set the values within the `sasjsConfig` property in this file to match your SAS server configuration.
+
+### 2. Deploying to your SAS server
+
+There is a `deploy` NPM script provided in the `sasjs-tests` project's `package.json`.
+
+It updates `sasjs-tests` to use the latest version of the adapter, and deploys to a specified server via SSH using the `rsync` command.
+
+To be able to run the `deploy` script, two environment variables need to be set:
+
+- `SSH_ACCOUNT` - your SSH account, this is of the form username@domain.com
+- `DEPLOY_PATH` - the path on the server where `sasjs-tests` will be deployed to, typically `/var/www/html/<some-subfolder>`.
+
+So you can run the script like so:
+
+```bash
+SSH_ACCOUNT=me@my-sas-server.com DEPLOY_PATH=/var/www/html/my-folder/sasjs-tests npm run deploy
+```
+
+If you are on `WINDOWS`, you will first need to install one dependency:
+```bash
+npm i -g copyfiles
+```
+and then run to build:
+```bash
+npm run update:adapter && npm run build
+```
+when it finishes run to deploy:
+```bash
+scp -rp ./build/* me@my-sas-server.com:/var/www/html/my-folder/sasjs-tests
+```
+
+If you'd like to deploy just `sasjs-tests` without changing the adapter version, you can use the `deploy:tests` script, while also setting the same environment variables as above.
+
+## 3. Creating the required SAS services
+
+The below services need to be created on your SAS server, at the location specified as the `appLoc` in the SASjs configuration.
+
+The code below will work on ALL SAS platforms (Viya, SAS 9 EBI, SASjs Server).
+
+```sas
+filename mc url "https://raw.githubusercontent.com/sasjs/core/main/all.sas";
+%inc mc;
+%let apploc=/Public/app/adapter-tests;
+filename ft15f001 temp lrecl=1000;
+parmcards4;
+  %webout(FETCH)
+  %webout(OPEN)
+  %macro x();
+  %if %symexist(sasjs_tables) %then %do i=1 %to %sysfunc(countw(&sasjs_tables));
+    %let table=%scan(&sasjs_tables,&i);
+    %webout(OBJ,&table,missing=STRING,showmeta=YES)
+  %end;
+  %else %do i=1 %to &_webin_file_count; 
+    %webout(OBJ,&&_webin_name&i,missing=STRING,showmeta=YES) 
+  %end;
+  %mend; %x()
+  %webout(CLOSE)
+;;;;
+%mx_createwebservice(path=&apploc/services/common,name=sendObj)
+parmcards4;
+  %webout(FETCH)
+  %webout(OPEN)
+  %macro x();
+  %if %symexist(sasjs_tables) %then %do i=1 %to %sysfunc(countw(&sasjs_tables));
+    %let table=%scan(&sasjs_tables,&i);
+    %webout(ARR,&table,missing=STRING,showmeta=YES)
+  %end;
+  %else %do i=1 %to &_webin_file_count; 
+    %webout(ARR,&&_webin_name&i,missing=STRING,showmeta=YES) 
+  %end;
+  %mend; %x()
+  %webout(CLOSE)
+;;;;
+%mx_createwebservice(path=&apploc/services/common,name=sendArr)
+parmcards4;
+  data work.macvars;
+    set sashelp.vmacro;
+  run;
+  %webout(OPEN)
+  %webout(OBJ,macvars) 
+  %webout(CLOSE)
+;;;;
+%mx_createwebservice(path=&apploc/services/common,name=sendMacVars)
+parmcards4;
+If you can keep your head when all about you
+    Are losing theirs and blaming it on you,
+If you can trust yourself when all men doubt you,
+    But make allowance for their doubting too;
+;;;;
+%mx_createwebservice(path=&apploc/services/common,name=makeErr)
+parmcards4;
+%webout(OPEN)
+data _null_;
+  file _webout;
+  put ' the discovery channel ';
+ run;
+%webout(CLOSE)
+;;;;
+%mx_createwebservice(path=&apploc/services/common,name=invalidJSON)
+```
+
+You should now be able to access the tests in your browser at the deployed path on your server.
+
+## Creating new tests
+
+The `src/testSuites` folder contains all the test suites currently available.
+Each suite contains a set of specs, each of which looks like this:
+
+```javascript
+    {
+        title: "Your test title",
+        description: "A slightly more detailed description",
+        test: async () => {
+        // typically makes a request using the adapter and returns a promise
+        },
+        assertion: (response: any) =>
+        // receives the response when the test promise resolves, runs an assertion and returns a boolean
+    }
+```
+
+A test suite is an array of such objects, along with a `name` property.
+
+You can add your test to one of the existing suites if suitable, or create a new file that specifies a new test suite.
--- a/sasjs-tests/tsconfig.json
+++ b/sasjs-tests/tsconfig.json
@@ -1,28 +1,26 @@
 {
  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "sourceMap": true,
-    "inlineSources": true,
-    "allowJs": true,
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
    "noEmit": true,
-    "jsx": "react-jsx",
-    "noFallthroughCasesInSwitch": true
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
--- a/sasjs-tests/vite.config.js
+++ b/sasjs-tests/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+export default defineConfig({
+  build: {
+    assetsInlineLimit: 0,
+    assetsDir: ''
+  },
+  base: ''
+})