kempo 1.0.0

package/test/components/Test.js

@@ -0,0 +1,357 @@
+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

@@ -0,0 +1,49 @@
+<!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

@@ -0,0 +1,25 @@
+import express from 'express';
+import fs from 'fs/promises';
+import path from 'path';
+import cli from '../kempo/utils/cli.js';
+
+const {
+ port = 8084
+} = cli();
+
+const app = express();
+
+app.use(express.static('test'));
+app.use('/kempo', express.static('kempo'));
+app.get('/api/tests', async (_, res) => {
+  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.json(tests);
+});
+
+app.listen(port, () => {
+  console.log(`Tests Running on: http://localhost:${port}`);
+});

package/test/suite.html

@@ -0,0 +1,45 @@
+<!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

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

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

@@ -0,0 +1,138 @@
+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();
+    }
+  }
+];