kempo 4.2.4 → 4.2.7

package/test/components/Test.js

@@ -1,357 +0,0 @@
-import Component from '../kempo/components/Component.js';
-
-const html = str => new DOMParser().parseFromString(str, 'text/html').body.childNodes[0];
-const runClickHandler = Symbol('runClickHandler'),
-      toggleLogsClickHandler = Symbol('toggleLogsClickHandler'),
-      testUpdatedHandler = Symbol('testUpdatedHandler');
-
-export default class TestSuite extends Component {
-  constructor(){
-    super();
-
-    this[runClickHandler] = () => {
-      this.runAll();
-    }
-
-    this.registerAttribute('name', '');
-  }
-  async render(force){
-    if(await super.render(force)){
-      await this.loadTests();
-      this.shadowRoot.getElementById('runAll').addEventListener('click', this[runClickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    if(this.rendered){
-      this.shadowRoot.getElementById('runAll').removeEventListener('click', this[runClickHandler]);
-    }
-    super.disconnectedCallback();
-  }
-  async loadTests(){
-    const {
-     name,
-     description,
-     tests 
-    } = await import(`../tests/${this.name}.test.js`);
-    const testSuiteLink = `/suite.html?name=${this.name}`;
-    const currentPath = location.pathname + location.search;
-    if(testSuiteLink === currentPath){
-      this.shadowRoot.getElementById('name').innerHTML = name;
-    } else {
-      this.shadowRoot.getElementById('name').innerHTML = `<a href="${testSuiteLink}">${name}</a>`;
-    }
-    this.shadowRoot.getElementById('description').innerHTML = description;
-    tests.forEach( ({name, description, test}) => {
-      this.appendChild(new Test(name, description, test));
-    });
-  }
-  async runAll(){
-    const $tests = [...this.querySelectorAll('k-test')];
-    for(const $test of $tests){
-      await $test.run();
-    }
-  }
-  get shadowTemplate(){
-    return /*html*/`
-      <h3 id="name"></h3>
-      <p id="description"></p>
-      <button
-        id="runAll"
-        class="secondary mb"
-      >
-        Run All Tests in this Suite
-      </button>
-      <slot name="test"></slot>
-      ${super.shadowTemplate}
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        padding: var(--spacer);
-        margin-bottom: var(--spacer);
-      }
-    `;
-  }
-}
-window.customElements.define('k-test-suite', TestSuite);
-
-
-class Test extends Component {
-  constructor(name, description, test){
-    super();
-
-    this[runClickHandler] = () => this.run();
-    this[toggleLogsClickHandler] = () => {
-      this.showLogs = !this.showLogs;
-    }
-
-    this.registerAttribute('status', 'Not Ran');
-    this.registerAttribute('name', name);
-    this.registerAttribute('description', description);
-    this.registerAttribute('showLogs', false);
-    this.registerProp('test', test);
-    this.registerProp('logs', []);
-  }
-  async render(force){
-    if(super.render(force)){
-      this.shadowRoot.getElementById('name').innerHTML = this.name;
-      this.shadowRoot.getElementById('description').innerHTML = this.description;
-      this.shadowRoot.getElementById('run').addEventListener('click', this[runClickHandler]);
-      this.shadowRoot.getElementById('toggleLogs').addEventListener('click', this[toggleLogsClickHandler]);
-      return true;
-    }
-    return false;
-  }
-  connectedCallback(){
-    super.connectedCallback();
-    this.dispatchEvent(new CustomEvent('testadded', {
-      bubbles: true,
-      test: this 
-    }));
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    this.shadowRoot.getElementById('run').removeEventListener('click', this[runClickHandler]);
-    this.shadowRoot.getElementById('toggleLogs').removeEventListener('click', this[toggleLogsClickHandler]);
-  }
-  log(...args){
-    let type = 'log',
-        messages = [...args];
-    if(['log', 'error', 'warning', 'success'].includes(args[0])){
-      type = args[0];
-      messages = [...args].slice(1);
-    }
-    this.logs.push({ type, messages });
-    if(this.rendered){
-      this.shadowRoot.getElementById('logs').appendChild(html(/*html*/`
-        <div class="log log-${type}">${
-          messages.map(message => /*html*/`<div class="log-message">${message}</div>`).join('')
-        }</div>
-      `));
-    }
-  }
-  logError(...messages){
-    this.log('error', messages);
-  }
-  logWarning(...messages){
-    this.log('warning', messages);
-  }
-  logSuccess(...messages){
-    this.log('success', messages);
-  }
-  renderLogs(){
-    return this.logs.reverse().map( ({type, messages}) => /*html*/`
-      <div class="log log-${type}">${
-        messages.map(message => /*html*/`<div class="log-message">${message}</div>`).join('')
-      }</div>
-    `).join('');
-  }
-  async run(){
-    if(this.status !== 'Not Ran') this.log('<br />-----<br /><br />');
-    this.log('Starting Test');
-    const pass = (...messages) => {
-      const msg = messages.length?messages.join('<br />'):'No message';
-      this.log(`<div class='log-success'>Passed: ${msg}</div>`);
-      this.status = 'Passed';
-      this.shadowRoot.getElementById('status').innerText = this.status;
-      this.dispatchEvent(new CustomEvent('testrun', {
-        detail: {
-          test: this,
-          status: this.status,
-          passed: true
-        },
-        bubbles: true
-      }));
-    }
-    const fail = (...messages) => {
-      const msg = messages.length?messages.join('<br />'):'No Message';
-      this.log(`<div class='log-error'>Failed: ${msg}</div>`);
-      this.status = 'Failed';
-      this.shadowRoot.getElementById('status').innerText = this.status;
-      this.dispatchEvent(new CustomEvent('testrun', {
-        detail: {
-          test: this,
-          status: this.status,
-          passed: false
-        },
-        bubbles: true
-      }));
-    }
-    await this.test({
-      pass,
-      fail,
-      log: this.log.bind(this),
-      logError: this.logError.bind(this),
-      logWarning: this.logWarning.bind(this),
-      logSuccess: this.logSuccess.bind(this)
-    });
-  }
-
-  get shadowTemplate(){
-    return /*html*/`
-      ${super.shadowTemplate}
-      <h5>
-        <span id="name"></span>
-        <small>(
-          <span id="status">
-            ${this.status}
-          </span>
-        )</small>
-      </h5>
-      <p id="description"></p>
-      <button
-        id="run"
-        class="d-b mb"
-      >Run Test</button>
-      <button
-        id="toggleLogs"
-        class="link"
-      >
-        <span class="show-logs-true">Hide</span>
-        <span class="show-logs-false">Show</span>
-        Logs
-      </button>
-      <pre class="show-logs-true"><code id="logs"></code></pre>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        margin-bottom: var(--spacer);
-        padding: var(--spacer);
-      }
-      :host(:not([show-logs="true"])) .show-logs-true,
-      :host([show-logs="true"]) .show-logs-false {
-        display: none;
-      }
-      #logs {
-        min-height: 6rem;
-        max-height: 36rem;
-        resize: vertical;
-      }
-      :host([status="Passed"]) h5,
-      .log-success {
-        color: var(--tc_success);
-      }
-      :host([status="Failed"]) h5,
-      .log-error {
-        color: var(--tc_danger);
-      }
-      .log-warning {
-        color: var(--tc_warning);
-      }
-      .log-error .log-message::before {
-        content: 'Error: ';
-      }
-      .log-warning .log-message::before {
-        content: 'Warning: ';
-      }
-    `;
-  }
-}
-window.customElements.define('k-test', Test);
-
-class TestSummary extends Component {
-  constructor(){
-    super();
-
-    this[testUpdatedHandler] = () => {
-      this.update();
-    }
-    this[runClickHandler] = () => {
-      this.runAll();
-    }
-
-    this.registerAttributes({
-      passed: 0,
-      failed: 0,
-      notRan: 0
-    });
-  }
-  connectedCallback(){
-    super.connectedCallback();
-    this.update();
-    window.addEventListener('testadded', this[testUpdatedHandler]);
-    window.addEventListener('testrun', this[testUpdatedHandler]);
-  }
-  disconnectedCallback(){
-    window.removeEventListener('testadded', this[testUpdatedHandler]);
-    window.removeEventListener('testrun', this[testUpdatedHandler]);
-    if(this.rendered){
-      this.shadowRoot.getElementById('runAll').removeEventListener('click', this[runClickHandler]);
-    }
-    super.disconnectedCallback();
-  }
-  async render(force){
-    if(super.render(force)){
-      this.shadowRoot.getElementById('runAll').addEventListener('click', this[runClickHandler]);
-      return true;
-    }
-    return false;
-  }
-  update(){
-    let notRan = 0,
-        failed = 0,
-        passed = 0;
-    const $tests = [...document.querySelectorAll('k-test')];
-    $tests.forEach( $test => {
-      if($test.status === 'Passed'){
-        passed++;
-      } else if($test.status === 'Failed'){
-        failed++;
-      } else {
-        notRan++;
-      }
-    });
-    this.passed = passed;
-    this.failed = failed;
-    this.notRan = notRan;
-    if(this.rendered){
-      this.shadowRoot.getElementById('notRan').innerText = this.notRan;
-      this.shadowRoot.getElementById('passed').innerText = this.passed;
-      this.shadowRoot.getElementById('failed').innerText = this.failed;
-    }
-  }
-  async runAll(){
-    const $tests = [...document.querySelectorAll('k-test')];
-    for(const $test of $tests){
-      await $test.run();
-    }
-  }
-  get shadowTemplate(){
-    return /*html*/`
-      <h3>Test Summary</h3>
-      <button
-        id="runAll"
-        class="primary mb"
-      >Run All Tests</button>
-      <p>Not Ran: <span id="notRan"></span></p>
-      <p>Passed: <span id="passed"></span></p>
-      <p>Failed: <span id="failed"></span></p>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        padding: var(--spacer) var(--spacer) 0;
-        margin-bottom: var(--spacer);
-      }
-    `;
-  }
-}
-window.customElements.define('k-test-summary', TestSummary);

package/test/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Tests</title>
-  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
-  <style>
-    #test {
-      position: fixed;
-      top: 0;
-      right: 0;
-      min-width: 16px;
-      max-width: 640px;
-      min-height: 16px;
-      max-height: 640px;
-      opacity: 0.05;
-      pointer-events: none;
-    }
-    :root {
-      --container_width: 130rem;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="row -mx">
-      <div class="col d-span-3 t-span-4 m-span-12 p">
-        <k-import src="/suites.inc.html"></k-import>
-      </div>
-      <div class="col d-span-9 t-span-8 m-span-12 p">
-        <div id="test"></div>
-        <h1>Kempo  Tests</h1>
-        <k-test-summary></k-test-summary>
-    
-        <h3>Components</h3>
-        <k-test-suite name="components/Component"></k-test-suite>
-    
-        <h3>Utilities</h3>
-        <k-test-suite name="utils/cookie"></k-test-suite>
-        <k-test-suite name="utils/debounce"></k-test-suite>
-      </div>
-    </div>
-  </main>
-  <script src="/kempo/kempo.js" type="module"></script>
-  <script src="/components/Test.js" type="module"></script>
-  <script src="/components/SuiteList.js" type="module"></script>
-</body>
-</html>

package/test/index.js

@@ -1,36 +0,0 @@
-import { Server } from '../src/utils/Server.js';
-import fs from 'fs/promises';
-import cli from '../src/utils/cli.js';
-
-const {
-  port = 8084
-} = cli();
-
-const server = new Server();
-
-server
-  .static('/', './test')
-  .static('/kempo', './kempo')
-  .get('/api/tests', async (req, res) => {
-    try {
-      const tests = {};
-      const categories = await fs.readdir('./test/tests/');
-      for(let i = 0; i < categories.length; i++){
-        tests[categories[i]] = (await fs.readdir(`./test/tests/${categories[i]}/`))
-          .map(t => t.slice(0, t.length - 8));
-      }
-      res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify(tests));
-    } catch (err) {
-      res.writeHead(500, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ error: err.message }));
-    }
-  });
-
-try {
-  await server.listen(port);
-  console.log(`Tests Running on: http://localhost:${port}`);
-} catch (err) {
-  console.error('Failed to start server:', err.message);
-  process.exit(1);
-}

package/test/suite.html

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Tests</title>
-  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
-  <style>
-    #test {
-      position: fixed;
-      top: 0;
-      right: 0;
-      min-width: 16px;
-      max-width: 640px;
-      min-height: 16px;
-      max-height: 640px;
-      opacity: 0.05;
-      pointer-events: none;
-    }
-    :root {
-      --container_width: 130rem;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="row -mx">
-      <div class="col d-span-3 t-span-4 m-span-12 p">
-        <a href="/"><h3>Tests Home</h3></a>
-        <k-import src="/suites.inc.html"></k-import>
-      </div>
-      <div class="col d-span-9 t-span-8 m-span-12 p">
-        <div id="test"></div>
-        <div id="suite"></div>
-      </div>
-    </div>
-  </main>
-  <script src="/kempo/kempo.js" type="module"></script>
-  <script src="/components/Test.js" type="module"></script>
-  <script src="/components/SuiteList.js" type="module"></script>
-  <script>
-    document.getElementById('suite').innerHTML = `<k-test-suite name="${new URLSearchParams(location.search).get('name')}"></k-test-suite>`;
-  </script>
-</body>
-</html>

package/test/suites.inc.html

@@ -1,4 +0,0 @@
-<aside>
-  <h3>Test Suites</h4>
-  <k-suite-list></k-suite-list>
-</aside>

package/test/tests/components/Component.test.js

@@ -1,138 +0,0 @@
-import Component from '../../../kempo/components/Component.js';
-
-const raf = async () => new Promise(r=>requestAnimationFrame(r));
-
-export const name = 'Component Test';
-export const description = 'A set of tests for the core Component class';
-export const tests = [
-  {
-    name: 'Can be instatiated',
-    description: 'An instance of the class can be created',
-    test: ({
-      pass,
-      fail,
-      log
-    }) => {
-      log('Creating an instance of Component');
-      try {
-        new Component();
-        pass('An instance of Component was created');
-      } catch (error) {
-        fail(error.message);
-      }
-    }
-  },
-  {
-    name: 'Is Initiated when created via the tag',
-    description: 'When a <code>&lt;k-component></code> created, is it an instance of <code>Component</code>?',
-    test: ({
-      pass,
-      fail,
-      log
-    }) => {
-      log('Creating k-component');
-      const $comp = document.createElement('k-component');
-      log('Testing if result is an instanceof of Component');
-      if($comp instanceof Component){
-        pass('The result is an instance of Component');
-      } else {
-        fail('The result is not an instance of Component');
-      }
-    }
-  },
-  {
-    name: "Has all required properties",
-    description: "Has all required properties and they are the correct type",
-    test: ({
-      pass,
-      fail,
-      log
-    }) => {
-      log('Creating an instance of Component');
-      const $comp = new Component();
-      const requiredProps = {
-        shadowTemplate: 'string',
-        shadowStyles: 'string',
-        rendered: 'boolean',
-        render: 'function'
-      };
-      if(
-        Object.keys(requiredProps).every( propName => {
-          log(`Testing that ${propName} is a ${requiredProps[propName]}`);  
-          return typeof($comp[propName]) === requiredProps[propName];
-        })
-      ){
-        pass('The component contains all required properties and they are of the correct type');
-      } else {
-        fail('The component does not have all properties, or they are not of the correc type', JSON.stringify(requiredProps));
-      }
-    }
-  },
-  {
-    name: 'Is rendered when connected to a DOM',
-    description: 'The element should have it\'s rendered attribute set to true when it is connected to the DOM',
-    test: async ({
-      pass,
-      fail,
-      log
-    }) => {
-      log('Creating an instance of Component');
-      const $comp = new Component();
-      log('Attaching the component to the DOM');
-      document.getElementById('test').appendChild($comp);
-      log('Waiting 1 frame for render');
-      await raf();
-      log('Checking if the component is rendered');
-      if($comp.rendered){
-        pass('The component was rendered');
-      } else {
-        fail('The component was not rendered');
-      }
-      log('Cleanup: Removing the component from the DOM');
-      $comp.remove();
-    }
-  },
-  {
-    name: 'Contains a Shadow DOM',
-    description: 'The element should contain a Shadow DOM that contains the <code>shadowTemplate</code> and the <code>shadowStyles</code>.',
-    test: async ({
-      pass,
-      fail,
-      log
-    }) => {
-      log('Creating an instance of Component');
-      const $comp = new Component();
-
-      const cleanup = () => {
-        log('Cleanup: Removing the component from the DOM');
-        $comp.remove();
-      }
-
-      log('Attaching the component to the DOM');
-      document.getElementById('test').appendChild($comp);
-      log('Waiting 1 frame for render');
-      await raf();
-
-      log('Verifing if it contains a shadowRoot');
-      if(!$comp.shadowRoot){
-        fail('The component does not have a shadowRoot');
-        cleanup();
-        return;
-      }
-      log('Verifing that the shadowRoot contains the shadowTemplate');
-      if(!$comp.shadowRoot.innerHTML.includes($comp.shadowTemplate)){
-        fail('The component\'s shadowRoot does not contain the shadowTemplate');
-        cleanup();
-        return;
-      }
-      log('Verifing that the shadowRoot contains the shadowStyles');
-      if(!$comp.shadowRoot.innerHTML.includes($comp.shadowStyles)){
-        fail('The component\'s shadowRoot does not contain the shadowStyles');
-        cleanup();
-        return;
-      }
-      pass('The elemnet contains a proper Shadow DOM');
-      cleanup();
-    }
-  }
-];