infra-sk/modules/sort-sk/sort-sk_test.js

import './index.js'
import { $ } from 'common-sk/modules/dom'

let container = document.createElement('div');
document.body.appendChild(container);

afterEach(function() {
  container.innerHTML = "";
});

describe('sort-sk', function() {
  it('sorts numerically by default', function() {
    return window.customElements.whenDefined('sort-sk').then(() => {
      container.innerHTML = `
  <sort-sk target=stuffToBeSorted>
    <button id=cluster data-key=clustersize data-default=up>Cluster Size</button>
    <button id=size data-key=stepsize>Step Size</button>
  </sort-sk>

  <div id=stuffToBeSorted>
    <pre data-clustersize=10  data-stepsize=1.2>Size=10   Step=1.2</pre>
    <pre data-clustersize=50  data-stepsize=0.5>Size=50   Step=0.5</pre>
    <pre data-clustersize=100 data-stepsize=0.6>Size=100  Step=0.6</pre>
  </div>`;
      const getValues = (name) => $('#stuffToBeSorted pre', container).map((ele) => +ele.dataset[name]);

      const clusterButton = container.querySelector('#cluster');
      const stepButton = container.querySelector('#size');

      clusterButton.click();
      assert.deepEqual([100, 50, 10], getValues('clustersize'), 'Defaults to up, so sort down on first click.');
      clusterButton.click();
      assert.deepEqual([10, 50, 100], getValues('clustersize'), 'Switch to up.');

      stepButton.click();
      assert.deepEqual([1.2, 0.6, 0.5], getValues('stepsize'), 'No default, so start sorting down.');
      stepButton.click();
      assert.deepEqual([0.5, 0.6, 1.2], getValues('stepsize'), 'Switch to up.');
    })
  });

  it('sorts alphabetically with alpha attribute', function() {
    return window.customElements.whenDefined('sort-sk').then(() => {
      container.innerHTML = `
  <sort-sk target=stuffToBeSorted2>
    <button id=name  data-key=name data-default=down data-sort-type=alpha>Name</button>
    <button id=level data-key=level                  data-sort-type=alpha>Level</button>
  </sort-sk>

  <div id=stuffToBeSorted2>
    <pre data-name=foo data-level=alpha>foo alpha</pre>
    <pre data-name=baz data-level=beta >baz beta</pre>
    <pre data-name=bar data-level=gamma>bar gamma</pre>
  </div>
  `;
      const getValues = (name) => $('#stuffToBeSorted2 pre', container).map((ele) => ele.dataset[name]);

      const nameButton = container.querySelector('#name');
      const levelButton = container.querySelector('#level');

      nameButton.click();
      assert.deepEqual(['bar', 'baz', 'foo'], getValues('name'), 'Defaults to down, so sort up.');
      nameButton.click();
      assert.deepEqual(['foo', 'baz', 'bar'], getValues('name'), 'Now switch to down.');

      levelButton.click();
      assert.deepEqual(['gamma', 'beta', 'alpha'], getValues('level'), 'No default, so sort down.');
      levelButton.click();
      assert.deepEqual(['alpha', 'beta', 'gamma'], getValues('level'), 'Now switch to up.');
    })
  });
});