Moving UI assets to OSS

ui/tests/integration/components/form-field-test.js

@@ -0,0 +1,135 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { create } from 'ember-cli-page-object';
+import Ember from 'ember';
+import sinon from 'sinon';
+import formFields from '../../pages/components/form-field';
+
+const component = create(formFields);
+
+moduleForComponent('form-field', 'Integration | Component | form field', {
+  integration: true,
+  beforeEach() {
+    component.setContext(this);
+  },
+
+  afterEach() {
+    component.removeContext();
+  },
+});
+
+const createAttr = (name, type, options) => {
+  return {
+    name,
+    type,
+    options,
+  };
+};
+
+const setup = function(attr) {
+  let model = Ember.Object.create({});
+  let spy = sinon.spy();
+  this.set('onChange', spy);
+  this.set('model', model);
+  this.set('attr', attr);
+  this.render(hbs`{{form-field attr=attr model=model onChange=onChange}}`);
+  return [model, spy];
+};
+
+test('it renders', function(assert) {
+  let model = Ember.Object.create({});
+  this.set('attr', { name: 'foo' });
+  this.set('model', model);
+  this.render(hbs`{{form-field attr=attr model=model}}`);
+
+  assert.equal(component.field.labelText, 'Foo', 'renders a label');
+  assert.notOk(component.hasInput, 'renders only the label');
+});
+
+test('it renders: string', function(assert) {
+  let [model, spy] = setup.call(this, createAttr('foo', 'string', { defaultValue: 'default' }));
+  assert.equal(component.field.labelText, 'Foo', 'renders a label');
+  assert.equal(component.field.inputValue, 'default', 'renders default value');
+  assert.ok(component.hasInput, 'renders input for string');
+  component.field.input('bar').change();
+
+  assert.equal(model.get('foo'), 'bar');
+  assert.ok(spy.calledWith('foo', 'bar'), 'onChange called with correct args');
+});
+
+test('it renders: boolean', function(assert) {
+  let [model, spy] = setup.call(this, createAttr('foo', 'boolean', { defaultValue: false }));
+  assert.equal(component.field.labelText, 'Foo', 'renders a label');
+  assert.notOk(component.field.inputChecked, 'renders default value');
+  assert.ok(component.hasCheckbox, 'renders a checkbox for boolean');
+  component.field.clickLabel();
+
+  assert.equal(model.get('foo'), true);
+  assert.ok(spy.calledWith('foo', true), 'onChange called with correct args');
+});
+
+test('it renders: number', function(assert) {
+  let [model, spy] = setup.call(this, createAttr('foo', 'number', { defaultValue: 5 }));
+  assert.equal(component.field.labelText, 'Foo', 'renders a label');
+  assert.equal(component.field.inputValue, 5, 'renders default value');
+  assert.ok(component.hasInput, 'renders input for number');
+  component.field.input(8).change();
+
+  assert.equal(model.get('foo'), 8);
+  assert.ok(spy.calledWith('foo', '8'), 'onChange called with correct args');
+});
+
+test('it renders: object', function(assert) {
+  setup.call(this, createAttr('foo', 'object'));
+  assert.equal(component.field.labelText, 'Foo', 'renders a label');
+  assert.ok(component.hasJSONEditor, 'renders the json editor');
+});
+
+test('it renders: editType textarea', function(assert) {
+  let [model, spy] = setup.call(
+    this,
+    createAttr('foo', 'string', { defaultValue: 'goodbye', editType: 'textarea' })
+  );
+  assert.equal(component.field.labelText, 'Foo', 'renders a label');
+  assert.ok(component.hasTextarea, 'renders a textarea');
+  assert.equal(component.field.textareaValue, 'goodbye', 'renders default value');
+  component.field.textarea('hello');
+
+  assert.equal(model.get('foo'), 'hello');
+  assert.ok(spy.calledWith('foo', 'hello'), 'onChange called with correct args');
+});
+
+test('it renders: editType file', function(assert) {
+  setup.call(this, createAttr('foo', 'string', { editType: 'file' }));
+  assert.ok(component.hasTextFile, 'renders the text-file component');
+});
+
+test('it renders: editType ttl', function(assert) {
+  let [model, spy] = setup.call(this, createAttr('foo', null, { editType: 'ttl' }));
+  assert.ok(component.hasTTLPicker, 'renders the ttl-picker component');
+  component.field.input('3');
+  component.field.select('h').change();
+
+  assert.equal(model.get('foo'), '3h');
+  assert.ok(spy.calledWith('foo', '3h'), 'onChange called with correct args');
+});
+
+test('it renders: editType stringArray', function(assert) {
+  let [model, spy] = setup.call(this, createAttr('foo', 'string', { editType: 'stringArray' }));
+  assert.ok(component.hasStringList, 'renders the string-list component');
+
+  component.field.input('array').change();
+  assert.deepEqual(model.get('foo'), ['array'], 'sets the value on the model');
+  assert.deepEqual(spy.args[0], ['foo', ['array']], 'onChange called with correct args');
+});
+
+test('it uses a passed label', function(assert) {
+  setup.call(this, createAttr('foo', 'string', { label: 'Not Foo' }));
+  assert.equal(component.field.labelText, 'Not Foo', 'renders the label from options');
+});
+
+test('it renders a help tooltip', function(assert) {
+  setup.call(this, createAttr('foo', 'string', { helpText: 'Here is some help text' }));
+  assert.ok(component.hasTooltip, 'renders the tooltip component');
+  component.tooltipTrigger();
+});