@deskpro/react-forms/lib/reactive/__tests__/Value-test.js

Forms library for React

'use strict';

var _Schema = require('../../Schema');

var _Value = require('../Value');

/**
 * @copyright 2016-present, Prometheus Research, LLC
 */

describe('react-forms/reactive', function () {

  describe('Value', function () {
    describe('create()', function () {

      it('initializes value with {} if no init value is provided', function () {
        var formValue = (0, _Value.create)();
        assert.deepEqual(formValue.value, {});
      });
    });

    describe('select()', function () {

      var schema = (0, _Schema.object)({
        scalar: (0, _Schema.string)(),
        object: (0, _Schema.object)({
          scalar: (0, _Schema.string)()
        }),
        array: (0, _Schema.array)((0, _Schema.string)())
      });

      it('allows to select parts of the value', function () {
        var formValue = (0, _Value.create)({
          schema: schema,
          value: {
            scalar: 'scalar',
            object: { scalar: 'object.scalar' },
            array: ['array.0', 'array.1']
          }
        });

        assert.deepEqual((0, _Value.select)(formValue, 'scalar').value, 'scalar');
        assert.deepEqual((0, _Value.select)(formValue, 'object').value, { scalar: 'object.scalar' });
        assert.deepEqual((0, _Value.select)(formValue, 'object', 'scalar').value, 'object.scalar');
        assert.deepEqual((0, _Value.select)((0, _Value.select)(formValue, 'object'), 'scalar').value, 'object.scalar');
        assert.deepEqual((0, _Value.select)(formValue, 'array').value, ['array.0', 'array.1']);
        assert.deepEqual((0, _Value.select)(formValue, 'array', 0).value, 'array.0');
        assert.deepEqual((0, _Value.select)(formValue, 'array', 1).value, 'array.1');
        assert.deepEqual((0, _Value.select)((0, _Value.select)(formValue, 'array'), 0).value, 'array.0');
      });

      it('propagates error list', function () {
        var schema = (0, _Schema.object)({
          object: (0, _Schema.object)({
            number: (0, _Schema.number)()
          })
        });

        var value = (0, _Value.create)({ schema: schema, value: { object: { number: 'oops' } } });

        assert(value.completeErrorList.length === 1);
        assert(value.completeErrorList[0].field === 'data.object.number');
        assert(value.completeErrorList[0].message === 'is the wrong type');

        assert(value.errorList.length === 0);

        var valueObject = value.select('object');

        assert(valueObject.completeErrorList.length === 1);
        assert(valueObject.completeErrorList[0].field === 'data.object.number');
        assert(valueObject.completeErrorList[0].message === 'is the wrong type');

        assert(valueObject.errorList.length === 0);

        var valueObjectNumber = valueObject.select('number');

        assert(valueObjectNumber.completeErrorList.length === 1);
        assert(valueObjectNumber.completeErrorList[0].field === 'data.object.number');
        assert(valueObjectNumber.completeErrorList[0].message === 'is the wrong type');

        assert(valueObjectNumber.errorList.length === 1);
        assert(valueObjectNumber.errorList[0].field === 'data.object.number');
        assert(valueObjectNumber.errorList[0].message === 'is the wrong type');
      });

      it('propagates external error list', function () {
        var schema = (0, _Schema.object)({
          object: (0, _Schema.object)({
            number: (0, _Schema.number)()
          })
        });

        var value = (0, _Value.create)({
          schema: schema,
          value: { object: { number: 42 } },
          externalErrorList: [{ field: 'data.object.number', message: 'not ok' }]
        });

        assert(value.completeErrorList.length === 1);
        assert(value.completeErrorList[0].field === 'data.object.number');
        assert(value.completeErrorList[0].message === 'not ok');

        assert(value.errorList.length === 0);

        var valueObject = value.select('object');

        assert(valueObject.completeErrorList.length === 1);
        assert(valueObject.completeErrorList[0].field === 'data.object.number');
        assert(valueObject.completeErrorList[0].message === 'not ok');

        assert(valueObject.errorList.length === 0);

        var valueObjectNumber = valueObject.select('number');

        assert(valueObjectNumber.completeErrorList.length === 1);
        assert(valueObjectNumber.completeErrorList[0].field === 'data.object.number');
        assert(valueObjectNumber.completeErrorList[0].message === 'not ok');

        assert(valueObjectNumber.errorList.length === 1);
        assert(valueObjectNumber.errorList[0].field === 'data.object.number');
        assert(valueObjectNumber.errorList[0].message === 'not ok');
      });

      it('reacts on error lists changes', function () {
        var schema = (0, _Schema.object)({
          object: (0, _Schema.object)({
            number: (0, _Schema.number)(),
            string: (0, _Schema.string)()
          })
        });

        var value = (0, _Value.create)({
          schema: schema,
          value: {
            object: {
              number: 'oops',
              string: 'ok'
            }
          }
        });
        var valueObject = value.select('object');
        var valueObjectNumber = valueObject.select('number');
        var valueObjectString = valueObject.select('string');

        var effects = [];

        value._completeErrorList.react(function (completeErrorList) {
          effects.push({ keyPath: value.keyPath, completeErrorList: completeErrorList });
        }, { skipFirst: true });
        value._errorList.react(function (errorList) {
          effects.push({ keyPath: value.keyPath, errorList: errorList });
        }, { skipFirst: true });

        valueObject._completeErrorList.react(function (completeErrorList) {
          effects.push({ keyPath: valueObject.keyPath, completeErrorList: completeErrorList });
        }, { skipFirst: true });
        valueObject._errorList.react(function (errorList) {
          effects.push({ keyPath: valueObject.keyPath, errorList: errorList });
        }, { skipFirst: true });

        valueObjectNumber._completeErrorList.react(function (completeErrorList) {
          effects.push({ keyPath: valueObjectNumber.keyPath, completeErrorList: completeErrorList });
        }, { skipFirst: true });
        valueObjectNumber._errorList.react(function (errorList) {
          effects.push({ keyPath: valueObjectNumber.keyPath, errorList: errorList });
        }, { skipFirst: true });

        valueObjectString._completeErrorList.react(function (completeErrorList) {
          effects.push({ keyPath: valueObjectString.keyPath, completeErrorList: completeErrorList });
        }, { skipFirst: true });
        valueObjectString._errorList.react(function (errorList) {
          effects.push({ keyPath: valueObjectString.keyPath, errorList: errorList });
        }, { skipFirst: true });

        assert(effects.length === 0);

        assert(valueObjectNumber.completeErrorList.length === 1);
        assert(valueObjectString.completeErrorList.length === 0);

        value.update({ object: { number: 42 } });

        assert(effects.length === 4);

        assert(valueObjectNumber.completeErrorList.length === 0);
        assert(valueObjectString.completeErrorList.length === 0);

        assert.deepEqual(effects[0].keyPath, []);
        assert.deepEqual(effects[0].completeErrorList, []);
        assert.deepEqual(effects[0].errorList, undefined);

        assert.deepEqual(effects[1].keyPath, ['object']);
        assert.deepEqual(effects[1].completeErrorList, []);
        assert.deepEqual(effects[1].errorList, undefined);

        assert.deepEqual(effects[2].keyPath, ['object', 'number']);
        assert.deepEqual(effects[2].completeErrorList, []);
        assert.deepEqual(effects[2].errorList, undefined);
      });
    });

    describe('update()', function () {

      var schema = (0, _Schema.object)({
        scalar: (0, _Schema.string)(),
        object: (0, _Schema.object)({
          scalar: (0, _Schema.string)()
        }),
        array: (0, _Schema.array)((0, _Schema.string)())
      });

      it('updates value', function () {
        var formValue = (0, _Value.create)({
          schema: schema,
          value: {
            scalar: 'scalar',
            object: { scalar: 'object.scalar' },
            array: ['array.0', 'array.1']
          }
        });

        var scalar = (0, _Value.select)(formValue, 'scalar');
        var object = (0, _Value.select)(formValue, 'object');
        var objectScalar = (0, _Value.select)(formValue, 'object', 'scalar');
        var array = (0, _Value.select)(formValue, 'array');
        var arrayFirst = (0, _Value.select)(formValue, 'array', 0);

        var effects = void 0;

        formValue._value.react(function (value) {
          effects.push({ value: value, tag: 'root' });
        }, { skipFirst: true });

        scalar._value.react(function (value) {
          effects.push({ value: value, tag: 'scalar' });
        }, { skipFirst: true });

        object._value.react(function (value) {
          effects.push({ value: value, tag: 'object' });
        }, { skipFirst: true });

        objectScalar._value.react(function (value) {
          effects.push({ value: value, tag: 'objectScalar' });
        }, { skipFirst: true });

        array._value.react(function (value) {
          effects.push({ value: value, tag: 'array' });
        }, { skipFirst: true });

        arrayFirst._value.react(function (value) {
          effects.push({ value: value, tag: 'arrayFirst' });
        }, { skipFirst: true });

        effects = [];
        (0, _Value.update)(scalar, 'UPDATED');

        assert.deepEqual(effects.length, 2);
        assert.deepEqual(effects.map(function (e) {
          return e.tag;
        }), ['root', 'scalar']);
        assert.deepEqual(effects.map(function (e) {
          return e.value;
        }), [{
          scalar: 'UPDATED',
          object: { scalar: 'object.scalar' },
          array: ['array.0', 'array.1']
        }, 'UPDATED']);

        effects = [];
        (0, _Value.update)(objectScalar, 'UPDATED');

        assert.deepEqual(effects.length, 3);
        assert.deepEqual(effects.map(function (e) {
          return e.tag;
        }), ['root', 'object', 'objectScalar']);
        assert.deepEqual(effects.map(function (e) {
          return e.value;
        }), [{
          scalar: 'UPDATED',
          object: { scalar: 'UPDATED' },
          array: ['array.0', 'array.1']
        }, { scalar: 'UPDATED' }, 'UPDATED']);

        effects = [];
        (0, _Value.update)(arrayFirst, 'UPDATED');

        assert.deepEqual(effects.length, 3);
        assert.deepEqual(effects.map(function (e) {
          return e.tag;
        }), ['root', 'array', 'arrayFirst']);
        assert.deepEqual(effects.map(function (e) {
          return e.value;
        }), [{
          scalar: 'UPDATED',
          object: { scalar: 'UPDATED' },
          array: ['UPDATED', 'array.1']
        }, ['UPDATED', 'array.1'], 'UPDATED']);
      });
    });
  });
});