[RFC][UN-14077] Add autocomplete option to uni-form (#255)

* Add autocomplete option to uni-form

* Remove unused import

* Remove unused import and add fail safe call to set variable

addon/components/uni-form.js

@@ -2,21 +2,27 @@ import Component from '@ember/component';
 import layout from '../templates/components/uni-form';
 
 export default Component.extend({
-  classNames: ['uni-form'],
   layout,
+  classNames: ['uni-form'],
+  classNameBindings: ['isValid:uni-form--valid:uni-form--invalid'],
+
   isLoading: false,
   isValid: true,
 
-  onSubmit() {},
+  autocomplete: 'on',
 
-  isFormDestroyed() {
-    return this.get('isDestroyed') || this.get('isDestroying');
-  },
+  onSubmit() {},
 
   setIsLoading(value) {
-    if (!this.isFormDestroyed()) {
-      this.set('isLoading', value);
+    if (this._isComponentDestroyed()) {
+      return;
     }
+
+    this.set('isLoading', value);
+  },
+
+  _isComponentDestroyed() {
+    return this.get('isDestroyed') || this.get('isDestroying');
   },
 
   actions: {
@@ -25,7 +31,7 @@ export default Component.extend({
         return;
       }
 
-      this.set('isLoading', true);
+      this.setIsLoading(true);
 
       let promise = this.get('onSubmit')();
       if (promise && typeof promise.then === 'function') {

addon/templates/components/uni-form.hbs

@@ -1,6 +1,12 @@
-<form {{action "submit" on="submit"}}>
+<form {{action "submit" on="submit"}} autocomplete="{{autocomplete}}">
   {{yield}}
 
-  {{uni-button isPrimary=true isLoading=isLoading isDisabled=(not isValid) click=(action "submit") label=label}}
+  {{uni-button
+    isPrimary=true
+    isLoading=isLoading
+    isDisabled=(not isValid)
+    click=(action "submit")
+    label=label}}
+
   {{input type="submit"}}
 </form>

package.json

@@ -58,8 +58,7 @@
     "ember-moment": "~7.7.0",
     "ember-native-dom-helpers": "0.5.4",
     "ember-resolver": "^4.1.0",
-    "ember-responsive": "^2.0.5",
-    "ember-route-action-helper": "2.0.3",
+    "ember-responsive": "~2.0.8",
     "ember-source": "~2.16.0",
     "ember-truth-helpers": "1.3.0",
     "ember-uuid": "^1.0.0",

tests/integration/components/uni-datepicker-range-day-test.js

@@ -1,8 +1,7 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import getOwner from 'ember-owner/get';
-import { findAll, find } from 'ember-native-dom-helpers';
 import moment from 'moment';
+import { getOwner } from '@ember/application';
 
 let calendarService, calendar;
 
@@ -25,8 +24,12 @@ moduleForComponent('uni-datepicker-range-day', 'Integration | Component | uni da
 });
 
 test('it renders', function(assert) {
+  assert.expect(2);
+
   this.render(hbs`{{uni-datepicker-range-day calendar=calendar}}`);
 
-  assert.ok(find('.ember-power-calendar-row'));
-  assert.equal(findAll('.ember-power-calendar-day--current-month').length, 31, 'It rendered all days in center\'s month');
+  assert.dom('.ember-power-calendar-row').exists();
+  assert
+    .dom('.ember-power-calendar-day--current-month')
+    .exists({ count: 31 }, 'It rendered all days in center\'s month');
 });

tests/integration/components/uni-form-test.js

@@ -1,26 +1,30 @@
 import RSVP from 'rsvp';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { find, click } from 'ember-native-dom-helpers';
+import { click } from 'ember-native-dom-helpers';
 
 moduleForComponent('uni-form', 'Integration | Component | uni form', {
   integration: true
 });
 
-test('it renders the yielded content', function(assert) {
-  assert.expect(2);
+test('it renders', function(assert) {
+  assert.expect(4);
+
+  this.set('label', 'This is a button label');
 
   this.render(hbs`
-    {{#uni-form}}
+    {{#uni-form label=label}}
       This is a form content
     {{/uni-form}}
   `);
 
-  assert.ok(find('.uni-form'));
-  assert.equal(find('.uni-form').textContent.trim(), 'This is a form content');
+  assert.dom('.uni-form').exists();
+  assert.dom('.uni-form').containsText('This is a form content');
+  assert.dom('.uni-button--primary').exists();
+  assert.dom('.uni-button--primary').hasText('This is a button label');
 });
 
-test('it renders the button label', function(assert) {
+test('it sets the autocomplete as "on" by default', function(assert) {
   assert.expect(2);
 
   this.set('label', 'This is a button label');
@@ -31,8 +35,24 @@ test('it renders the button label', function(assert) {
     {{/uni-form}}
   `);
 
-  assert.ok(find('.uni-button--primary'));
-  assert.equal(find('.uni-button--primary').textContent.trim(), 'This is a button label');
+  assert.dom('form').exists();
+  assert.dom('form').hasAttribute('autocomplete', 'on');
+});
+
+test('it sets the autocomplete to custom value', function(assert) {
+  assert.expect(2);
+
+  this.set('label', 'This is a button label');
+  this.set('autocomplete', 'off');
+
+  this.render(hbs`
+    {{#uni-form label=label autocomplete=autocomplete}}
+      This is a form content
+    {{/uni-form}}
+  `);
+
+  assert.dom('form').exists();
+  assert.dom('form').hasAttribute('autocomplete', 'off');
 });
 
 test('it calls onSubmit and stops the loading after promise', async function(assert) {
@@ -47,7 +67,7 @@ test('it calls onSubmit and stops the loading after promise', async function(ass
 
   this.render(hbs`{{uni-form isLoading=isLoading onSubmit=submit}}`);
 
-  click('.uni-button');
+  await click('.uni-button');
 
   assert.equal(this.get('isLoading'), false, 'it ends the loading');
 });
@@ -60,7 +80,7 @@ test('it calls onSubmit and works without it returning a promise', async functio
 
   this.render(hbs`{{uni-form isLoading=isLoading onSubmit=submit}}`);
 
-  click('.uni-button');
+  await click('.uni-button');
 
   assert.equal(this.get('isLoading'), false, 'it ends the loading');
 });

tests/test-helper.js

@@ -1,7 +1,5 @@
 import resolver from './helpers/resolver';
-import {
-  setResolver
-} from 'ember-qunit';
+import { setResolver } from '@ember/test-helpers';
 import { start } from 'ember-cli-qunit';
 
 setResolver(resolver);