src/contrib/edittable/EditTable.spec.js

import { expect } from 'chai';
import Harness from '../../../test/harness';
import EditTable from './EditTable';
import Webform from '../../Webform';
import { basic } from './fixtures/index';

const { testCreate: create } = Harness;

describe('EditTable Component', () => {
  it('should create component', done => {
    create(EditTable, basic).then(() => done(), done);
  });

  it('should add row groups to form metadata', done => {
    const domRoot = document.createElement('div');
    const form = new Webform(domRoot);
    form
      .setForm({
        title: 'Simple Form',
        components: [{
          type: 'edittable',
          key:  'questions',
          rowGroups: [
            {
              label: 'A',
              numberOfRows: 1
            },
            {
              label: 'B',
              numberOfRows: 1
            },
            {
              label: 'Header',
              numberOfRows: 4
            }
          ],
          input: true
        }]
      })
      .then(() => {
        expect(form._submission.metadata['questions']).to.deep.equal({
          A: 1,
          B: 1,
          Header: 4
        });
        done();
      }, done)
      .catch(done);
  });

  describe('hasColumns', () => {
    it('should false if there no columns', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.hasColumns()).to.be.false;
        done();
      }, done).catch(done);
    });

    it('should true if there columns', done => {
      const schema = Object.assign({}, basic, {
        columns: [{ key: 'name', label: 'Name' }]
      });

      create(EditTable, schema).then(edittable => {
        expect(edittable.hasColumns()).to.be.true;
        done();
      }, done).catch(done);
    });
  });

  describe('componentSchema', () => {
    it('should return valid schema', done => {
      create(EditTable, basic).then(edittable => {
        const schema = edittable.componentSchema();
        expect(schema).to.have.property('key');
        expect(schema).to.have.property('type');
        expect(schema).to.have.property('label');
        expect(schema).to.have.property('input');
        done();
      }, done).catch(done);
    });

    it('should return Modal Edit schema', done => {
      create(EditTable, basic).then(edittable => {
        const schema = edittable.componentSchema();
        expect(schema).to.have.property('key', 'modalEdit');
        expect(schema).to.have.property('type', 'modaledit');
        expect(schema).to.have.property('label', 'Modal Edit');
        expect(schema).to.have.property('input', true);
        done();
      }, done).catch(done);
    });
  });

  describe('getColumns', () => {
    it('should return empty array if no columns', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.getColumns()).to.be.empty;
        done();
      }, done).catch(done);
    });
    it('should return array of columns', done => {
      const columns = [
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age' }
      ];

      const schema = Object.assign({}, basic, {
        columns: [...columns],
      });

      create(EditTable, schema).then(edittable => {
        expect(edittable.getColumns()).to.deep.equal(columns);
        done();
      }, done).catch(done);
    });
    it('should return non-empty columns', done => {
      const columns = [
        { key: '', label: '' },
        { key: 'name', label: 'Name' },
        { key: '', label: '' },
        { key: 'age', label: 'Age' },
        { key: '', label: '' },
      ];

      const schema = Object.assign({}, basic, {
        columns: [...columns],
      });

      create(EditTable, schema).then(edittable => {
        expect(edittable.getColumns()).to.deep.equal([
          { key: 'name', label: 'Name' },
          { key: 'age', label: 'Age' }
        ]);
        done();
      }, done).catch(done);
    });
  });

  describe('getGroups', () => {
    it('should return empty array if no row groups', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.getGroups()).to.be.an('array').empty;
        done();
      }, done).catch(done);
    });

    it('should return row groups', done => {
      const groups = [
        {
          label: 'A',
          numberOfRows: 1
        },
        {
          label: 'B',
          numberOfRows: 1
        }
      ];

      const schema = Object.assign({}, basic, {
        rowGroups: [...groups]
      });

      create(EditTable, schema).then(edittable => {
        expect(edittable.getGroups()).to.deep.equal(groups);
        done();
      }, done).catch(done);
    });
  });

  describe('totalRowsNumber', () => {
    it('should return the total count of rows in the provided groups', () => {
      const groups = [
        {
          label: 'A',
          numberOfRows: 1
        },
        {
          label: 'B',
          numberOfRows: 2
        },
        {
          label: 'C',
          numberOfRows: 4
        },
        {
          label: 'D',
          numberOfRows: 9
        }
      ];

      const { totalRowsNumber } = EditTable.prototype;

      expect(totalRowsNumber(groups)).to.equal(16);
      expect(totalRowsNumber(groups.slice(1))).to.equal(15);
      expect(totalRowsNumber(groups.slice(2))).to.equal(13);
      expect(totalRowsNumber(groups.slice(3))).to.equal(9);
      expect(totalRowsNumber(groups.slice(0, 2))).to.equal(3);
    });
  });

  describe('addEmptyRows', () => {
    it('should create an array of n empty rows and set it to dataValue', done => {
      create(EditTable, basic).then(edittable => {
        edittable.addEmptyRows(1);
        expect(edittable.dataValue).to.deep.equal([{}]);
        edittable.addEmptyRows(2);
        expect(edittable.dataValue).to.deep.equal([{}, {}]);
        edittable.addEmptyRows(2);
        expect(edittable.dataValue).to.deep.equal([{}, {}]);
        edittable.addEmptyRows(3);
        expect(edittable.dataValue).to.deep.equal([{}, {}, {}]);
        done();
      }, done).catch(done);
    });
  });

  describe('get emptyColumn', () => {
    it('should return object that represents empty column', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.emptyColumn).to.deep.equal({ label: '', key: '' });
        done();
      }, done).catch(done);
    });
  });

  describe('get tableClass', () => {
    it('should return table class string', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.tableClass).to.equal(
          'table table-bordered table-edittable form-group formio-edittable-table'
        );
        done();
      }, done).catch(done);
    });
  });

  describe('getRowChunks', () => {
    it('should return rows split by chunks according to group size', () => {
      const { getRowChunks } = EditTable.prototype;
      let chunks = getRowChunks([2, 2], [0, 0, 0, 0]);
      expect(chunks[0]).to.be.an('array').lengthOf(2);
      expect(chunks[1]).to.be.an('array').lengthOf(2);

      chunks = getRowChunks([1, 3], [1, 2, 3, 4]);
      expect(chunks[0]).to.deep.equal([1]);
      expect(chunks[1]).to.deep.equal([2, 3, 4]);

      chunks = getRowChunks([2, 2, 5, 1], [1, 2, 3, 4, 5, 6, 7]);
      expect(chunks[0]).to.deep.equal([1, 2]);
      expect(chunks[1]).to.deep.equal([3, 4]);
      expect(chunks[2]).to.deep.equal([5, 6, 7]);
      expect(chunks[3]).to.deep.equal([]);

      chunks = getRowChunks([0, 0, 0, 0], [1, 2, 3, 4, 5, 6, 7]);
      expect(chunks[0]).to.deep.equal([]);
      expect(chunks[1]).to.deep.equal([]);
      expect(chunks[2]).to.deep.equal([]);
      expect(chunks[3]).to.deep.equal([]);

      chunks = getRowChunks([0, 0, 2, 2], [1, 2, 3, 4, 5, 6, 7]);
      expect(chunks[0]).to.deep.equal([]);
      expect(chunks[1]).to.deep.equal([]);
      expect(chunks[2]).to.deep.equal([1, 2]);
      expect(chunks[3]).to.deep.equal([3, 4]);
    });
  });

  describe('componentComponents', () => {
    it('should return array of component scehmas', done => {
      const schema = Object.assign({}, basic, {
        columns: [
          { key: 'name', label: 'Name' },
          { key: 'age', label: 'Age' }
        ],
      });

      create(EditTable, schema).then(edittable => {
        const comps = edittable.componentComponents;

        comps.forEach(c => {
          expect(c).to.have.property('type');
          expect(c).to.have.property('input');
          expect(c).to.have.property('key');
          expect(c).to.have.property('label');
        });

        expect(comps[0].label).to.equal('Name');
        expect(comps[0].key).to.equal('name');
        expect(comps[1].label).to.equal('Age');
        expect(comps[1].key).to.equal('age');

        done();
      }, done).catch(done);
    });
  });

  describe('build', () => {
    it('in builder, whit no columns, should build placeholder', done => {
      create(EditTable, basic, { builder: true }).then(edittable => {
        expect(edittable.element.querySelector('.edittable-placeholder')).to.not.be.null;
        done();
      }, done).catch(done);
    });

    it('should build table', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.element.querySelector('table')).to.not.be.null;
        expect(edittable.element.querySelector('table > tbody')).to.not.be.null;
        expect(edittable.element.querySelectorAll('table > tbody > tr')).to.have.lengthOf(1);
        done();
      }, done).catch(done);
    });

    it('should build without add button, if ther no columns', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.element.querySelector('.btn btn-primary formio-button-add-row')).to.be.null;
        done();
      }, done).catch(done);
    });
  });

  describe('getMeta', () => {
    it('should return null if no row groups', done => {
      create(EditTable, basic).then(edittable => {
        expect(edittable.getMeta()).to.be.null;
        done();
      }, done).catch(done);
    });

    it('should return meta data when row groups present', done => {
      const groups = [
        {
          label: 'A',
          numberOfRows: 1
        },
        {
          label: 'B',
          numberOfRows: 1
        },
        {
          label: 'Header',
          numberOfRows: 4
        }
      ];

      const schema = Object.assign({}, basic, {
        rowGroups: [...groups]
      });

      create(EditTable, schema).then(edittable => {
        expect(edittable.getMeta()).to.deep.equal({ A: 1, B: 1, Header: 4 });
        done();
      }, done).catch(done);
    });
  });

  describe('setMeta', () => {
    it('should save row groups data to submission metadata', done => {
      const groups = [
        {
          label: 'A',
          numberOfRows: 1
        },
        {
          label: 'B',
          numberOfRows: 1
        },
        {
          label: 'Header',
          numberOfRows: 4
        }
      ];

      const schema = Object.assign({}, basic, {
        rowGroups: [...groups]
      });

      create(EditTable, schema).then(edittable => {
        const metadata = edittable.getMeta();
        edittable.setMeta();
        expect(edittable.root._submission.metadata[schema.key]).to.deep.equal(metadata);
        done();
      }, done).catch(done);
    });
  });
});