add simple filter tests and more utilities

cypress/integration/_data.ts

@@ -0,0 +1,85 @@
+import {timeFormat} from 'd3-time-format';
+
+export function rnd(seed = 0) {
+  // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+  if (seed === undefined) {
+    seed = Date.now();
+  }
+  return () => {
+    seed = (seed * 9301 + 49297) % 233280;
+    return seed / 233280;
+  };
+}
+
+export interface IGenerateDataOptions {
+  /**
+   * @default 100
+   */
+  count?: number;
+
+  /**
+   * number of string columns
+   * @default 1
+   */
+  string?: number;
+
+  /**
+   * number of number columns
+   * @default 1
+   */
+  number?: number;
+
+  /**
+   * number of cat columns
+   * @default 1
+   */
+  cat?: number;
+
+  /**
+   * @default ['c1', 'c2', 'c3']
+   */
+  categories?: string[];
+
+  /**
+   * number of date columns
+   * @default 0
+   */
+  date?: number;
+
+  seed?: number;
+}
+
+export const DEFAULT_CATEGORIES = ['c1', 'c2', 'c3'];
+
+export function generateData(options: IGenerateDataOptions = {}) {
+  const o: Required<IGenerateDataOptions> = Object.assign({
+    count: 100,
+    string: 1,
+    number: 1,
+    cat: 1,
+    categories: DEFAULT_CATEGORIES,
+    date: 0,
+    seed: 0,
+  }, options);
+  const arr = [];
+  const s = rnd(o.seed);
+  const f = timeFormat('%x');
+  for (let i = 0; i < o.count; ++i) {
+    let r: any = {};
+    for (let j = 0; j < o.string; ++j) {
+      const suffix = j === 0 ? '' : j;
+      r[`string${suffix}`] = `Row${suffix} ${i}`;
+    }
+    for (let j = 0; j < o.number; ++j) {
+      r[`number${j === 0 ? '' : j}`] = s() * 10;
+    }
+    for (let j = 0; j < o.cat; ++j) {
+      r[`cat${j === 0 ? '' : j}`] = o.categories[Math.floor(s() * o.categories.length)];
+    }
+    for (let j = 0; j < o.date; ++j) {
+      r[`date${j === 0 ? '' : j}`] = f(new Date(Date.now() - Math.floor(s() * 1000000000000)));
+    }
+    arr.push(r);
+  };
+  return arr;
+}

cypress/integration/_lineup.ts

@@ -1,5 +1,8 @@
-declare type LineUpJSType = typeof import('../..');
-import {LineUp, Taggle} from '../../';
+export declare type LineUpJSType = typeof import('../..');
+import {LineUp as L, Taggle as T} from '../../';
+
+export declare type LineUp = L;
+export declare type Taggle = T;
 
 export function setupLineUp() {
   // LineUpJS
@@ -20,14 +23,22 @@ export function withLineUp(test: (LineUpJS: LineUpJSType, document: Document) =>
 }
 
 export function waitReady(lineup: LineUp | Taggle) {
-  lineup.data.on('busy', (busy) => {
-    setTimeout(() => {
-      if (!busy) {
+  return cy.get('.lu').then(() => {
+    delete lineup.node.dataset.ready;
+
+    const fallback = setTimeout(markReady, 500);
+
+    function markReady() {
+      clearTimeout(fallback);
+      setTimeout(() => {
         lineup.node.dataset.ready = '';
-      } else {
-        delete lineup.node.dataset.ready;
-      }
-    });
-  })
-  cy.get('.lu[data-ready]').should('have.class', 'lu');
+      }, 100);
+    }
+    // ready when order changed
+    lineup.data.on('orderChanged', () => {
+      markReady();
+      lineup.data.on('orderChanged', null);
+    })
+    return cy.get('.lu[data-ready]').should('have.class', 'lu');
+  });
 }

cypress/integration/big.spec.ts

@@ -1,26 +1,18 @@
 import {withLineUp, waitReady} from "./_lineup";
+import {generateData, DEFAULT_CATEGORIES} from './_data';
 
 it('builder2', withLineUp((LineUpJS, document) => {
-  const arr = [];
-  const cats = ['c1', 'c2', 'c3'];
-  const cat2 = ['a1', 'a2'];
-  const size = 10000;
-  for (let i = 0; i < size; ++i) {
-    arr.push({
-      label: 'Row ' + i,
-      number: Math.random() * 10,
-      number2: Math.random() * 10,
-      cat: cats[Math.floor(Math.random() * cats.length)],
-      cat2: cat2[Math.floor(Math.random() * cat2.length)],
-      date: new Date(Date.now() - Math.floor(Math.random() * 1000000000000))
-    })
-  }
+  const arr = generateData({
+    count: 10000,
+    number: 2,
+    cat: 1
+  });
   cy.log('generated');
 
   const desc = [{
     label: 'Label',
     type: 'string',
-    column: 'label'
+    column: 'string'
   },
   {
     label: 'Number',
@@ -29,30 +21,16 @@ it('builder2', withLineUp((LineUpJS, document) => {
     domain: [0, 10]
   },
   {
-    label: 'Number2',
+    label: 'Number1',
     type: 'number',
-    column: 'number2',
+    column: 'number1',
     domain: [0, 10]
   },
   {
     label: 'Cat',
     type: 'categorical',
     column: 'cat',
-    categories: ['c1', 'c2', 'c3']
-  },
-  {
-    label: 'Cat2',
-    type: 'categorical',
-    column: 'cat2',
-    categories: [{
-      name: 'a1',
-      label: 'A1',
-      color: 'green'
-    }, {
-      name: 'a2',
-      label: 'A2',
-      color: 'blue'
-    }]
+    categories: DEFAULT_CATEGORIES
   },
   {
     label: 'Date',
@@ -71,7 +49,10 @@ it('builder2', withLineUp((LineUpJS, document) => {
   const instance = new LineUpJS.Taggle(document.body, p, {
     animated: false
   });
-  waitReady(instance);
-
+  waitReady(instance).then(() => {
+    expect(instance.data.getFirstRanking().getOrderLength()).to.eq(10000);
+    expect(instance.data.getTotalNumberOfRows()).to.eq(10000);
+  });
   cy.get('.lu-stats strong').should('contain', '10,000');
+  cy.get('.lu-stats').should('contain', 'of 10,000 item');
 }));

cypress/integration/builder.spec.ts

@@ -1,19 +1,31 @@
-import {withLineUp, waitReady} from "./_lineup";
+import {withLineUp, waitReady, LineUpJSType, Taggle} from './_lineup';
+import {generateData} from './_data';
 
-it('builder', withLineUp((LineUpJS, document) => {
-  const arr = [];
-  const cats = ['c1', 'c2', 'c3'];
-  for (let i = 0; i < 100; ++i) {
-    arr.push({
-      s: 'Row ' + i,
-      a: Math.random() * 10,
-      cat: cats[Math.floor(Math.random() * 3)],
-      // d: new Date(Date.now() - Math.floor(Math.random() * 1000000000000))
-    });
-  }
-  // just JSON serializable?
-  const lineup = LineUpJS.asTaggle(document.body, arr);
-  waitReady(lineup);
+describe('builder', () => {
+  let lineup: Taggle;
+  let LineUpJS: LineUpJSType;
+  before(withLineUp((l, document) => {
+    LineUpJS = l;
+    const arr = generateData();
+
+    lineup = LineUpJS.asTaggle(document.body, arr);
+    waitReady(lineup);
+  }));
+
+  it('default', () => {
+    cy.get('.lu-stats strong').should('contain', '100');
+  });
 
-  cy.get('.lu-stats strong').should('contain', '100');
-}))
+  it('filter', () => {
+    cy.get('.lu-histogram-bin[data-cat=c1]').first().click();
+    waitReady(lineup).then(() => {
+      expect(lineup.data.getFirstRanking().getOrderLength()).to.eq(59);
+    });
+    cy.get('.lu-stats strong').should('contain', '59');
+    cy.get('.lu-stats-reset').click();
+    waitReady(lineup).then(() => {
+      expect(lineup.data.getFirstRanking().getOrderLength()).to.eq(100);
+    });
+    cy.get('.lu-stats strong').should('contain', '100');
+  });
+});

cypress/integration/builder2.spec.ts

@@ -1,27 +1,21 @@
 import {setupLineUp, waitReady} from "./_lineup";
+import {generateData, DEFAULT_CATEGORIES} from './_data';
 
 it('builder2', async () => {
   // LineUpJS
   const {LineUpJS, document} = await setupLineUp();
 
-  const arr = [];
-  const cats = ['c1', 'c2', 'c3'];
-  for (let i = 0; i < 100; ++i) {
-    arr.push({
-      a: Math.random() * 10,
-      d: 'Row ' + i,
-      cat: cats[Math.floor(Math.random() * 3)],
-      cat2: cats[Math.floor(Math.random() * 3)]
-    })
-  }
+  const arr = generateData({
+    cat: 2
+  });
   const builder = LineUpJS.builder(arr);
 
   // manually define columns
   builder
     .sidePanel(true, true)
     .column(LineUpJS.buildStringColumn('d').label('Label').alignment(LineUpJS.EAlignment.right).width(100))
-    .column(LineUpJS.buildCategoricalColumn('cat', cats).color('green'))
-    .column(LineUpJS.buildCategoricalColumn('cat2', cats).color('blue'))
+    .column(LineUpJS.buildCategoricalColumn('cat', DEFAULT_CATEGORIES).color('green'))
+    .column(LineUpJS.buildCategoricalColumn('cat2', DEFAULT_CATEGORIES).color('blue'))
     .column(LineUpJS.buildNumberColumn('a', [0, 10]).color('blue'));
 
   // and two rankings