From 15df0e93a2f386bbea7acab2ccdb0c53caff0afc Mon Sep 17 00:00:00 2001 From: Christopher Garrett Date: Tue, 26 Apr 2016 20:33:00 -0700 Subject: [PATCH] Adds initial implementation --- .travis.yml | 1 - addon/components/ff-checkbox-base.js | 22 ++++++ addon/components/ff-checkbox.js | 14 ++++ addon/templates/components/ff-checkbox.hbs | 8 +++ app/components/ff-checkbox-base.js | 1 + app/components/ff-checkbox.js | 1 + package.json | 5 +- tests/dummy/app/controllers/application.js | 9 +++ tests/dummy/app/templates/application.hbs | 13 ++-- tests/index.html | 1 + tests/integration/.gitkeep | 0 .../components/ff-checkbox-test.js | 68 +++++++++++++++++++ 12 files changed, 136 insertions(+), 7 deletions(-) create mode 100644 addon/components/ff-checkbox-base.js create mode 100644 addon/components/ff-checkbox.js create mode 100644 addon/templates/components/ff-checkbox.hbs create mode 100644 app/components/ff-checkbox-base.js create mode 100644 app/components/ff-checkbox.js create mode 100644 tests/dummy/app/controllers/application.js delete mode 100644 tests/integration/.gitkeep create mode 100644 tests/integration/components/ff-checkbox-test.js diff --git a/.travis.yml b/.travis.yml index ee67302..a5ce309 100644 --- a/.travis.yml +++ b/.travis.yml @@ -22,7 +22,6 @@ matrix: - env: EMBER_TRY_SCENARIO=ember-canary before_install: - - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH - "npm config set spin false" - "npm install -g npm@^2" diff --git a/addon/components/ff-checkbox-base.js b/addon/components/ff-checkbox-base.js new file mode 100644 index 0000000..7142878 --- /dev/null +++ b/addon/components/ff-checkbox-base.js @@ -0,0 +1,22 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'input', + value: null, + type: 'checkbox', + + attributeBindings: ['type', 'checked', 'disabled', 'indeterminate', 'value'], + + change() { + const checked = this.element.checked; + const indeterminate = this.element.indeterminate; + const value = this.get('value'); + + // Checked and indeterminate state have been changed, but that's not DDAU! + // Reset the change, send the action and wait for it to be changed manually + this.element.checked = this.get('checked'); + this.element.indeterminate = this.get('indeterminate'); + + this.sendAction('on-change', checked, { value, indeterminate }); + }, +}); diff --git a/addon/components/ff-checkbox.js b/addon/components/ff-checkbox.js new file mode 100644 index 0000000..be21bc7 --- /dev/null +++ b/addon/components/ff-checkbox.js @@ -0,0 +1,14 @@ +import Ember from 'ember'; +import layout from '../templates/components/ff-checkbox'; + +export default Ember.Component.extend({ + layout: layout, + value: null, + classNames: ['ff-checkbox'], + + actions: { + sendChecked(checked, value) { + this.sendAction('on-change', checked, value); + } + } +}); diff --git a/addon/templates/components/ff-checkbox.hbs b/addon/templates/components/ff-checkbox.hbs new file mode 100644 index 0000000..cc5014c --- /dev/null +++ b/addon/templates/components/ff-checkbox.hbs @@ -0,0 +1,8 @@ +{{ff-checkbox-base + on-change="sendChecked" + value=value + checked=checked + disabled=disabled + indeterminate=indeterminate +}} +
diff --git a/app/components/ff-checkbox-base.js b/app/components/ff-checkbox-base.js new file mode 100644 index 0000000..ebf6f51 --- /dev/null +++ b/app/components/ff-checkbox-base.js @@ -0,0 +1 @@ +export { default } from 'ff-checkbox/components/ff-checkbox-base'; \ No newline at end of file diff --git a/app/components/ff-checkbox.js b/app/components/ff-checkbox.js new file mode 100644 index 0000000..4be4cf0 --- /dev/null +++ b/app/components/ff-checkbox.js @@ -0,0 +1 @@ +export { default } from 'ff-checkbox/components/ff-checkbox'; \ No newline at end of file diff --git a/package.json b/package.json index c0c590b..354fa25 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ff-checkbox", - "version": "0.1.0", + "version": "1.0.0", "description": "Theme-able checkbox component for Ember 2.0! Supports Foundation and Bootstrap, part of Firefly UI", "directories": { "doc": "doc", @@ -36,7 +36,8 @@ "ember-load-initializers": "^0.5.1", "ember-resolver": "^2.0.3", "ember-try": "^0.2.2", - "loader.js": "^4.0.1" + "loader.js": "^4.0.1", + "phantomjs": "^2.1.7" }, "keywords": [ "ember-addon" diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js new file mode 100644 index 0000000..9cfba90 --- /dev/null +++ b/tests/dummy/app/controllers/application.js @@ -0,0 +1,9 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + actions: { + toggleProperty(property) { + this.toggleProperty(property); + } + } +}); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index c8f377d..34666c2 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1,18 +1,23 @@

Welcome to Ember

{{ff-checkbox - on-change=(action (mut checked)) - on-indeterminate-change=(action (mut indeterminate)) checked=checked indeterminate=indeterminate + disabled=disabled + on-change=(action (mut checked)) }}
- + Checked: {{checked}}
- + Indeterminate: {{indeterminate}}
+ +
+ + Disabled: {{disabled}} +
diff --git a/tests/index.html b/tests/index.html index 64cb47e..65a44ea 100644 --- a/tests/index.html +++ b/tests/index.html @@ -21,6 +21,7 @@ {{content-for "body"}} {{content-for "test-body"}} + diff --git a/tests/integration/.gitkeep b/tests/integration/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/tests/integration/components/ff-checkbox-test.js b/tests/integration/components/ff-checkbox-test.js new file mode 100644 index 0000000..9b18938 --- /dev/null +++ b/tests/integration/components/ff-checkbox-test.js @@ -0,0 +1,68 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ff-checkbox', 'Integration | Component | ff checkbox', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{ff-checkbox}}`); + + assert.equal(this.$('input').length, 1); +}); + + +test('it updates toggles checked property correctly', function(assert) { + assert.expect(4); + + this.render(hbs`{{ff-checkbox checked=checked on-change=(action (mut checked))}}`); + + this.$('input').click(); + + assert.equal(this.$('input').prop('checked'), true, 'it updates input'); + assert.equal(this.get('checked'), true, 'it updates property'); + + this.$('input').click(); + + assert.equal(this.$('input').prop('checked'), false, 'it updates input'); + assert.equal(this.get('checked'), false, 'it updates property'); +}); + +test('when disabled it does not update `checked` property to true when clicked', function(assert) { + assert.expect(0); + + this.set('onChangeAction', () => { + assert.ok('should not happen'); + }); + + this.render(hbs`{{ff-checkbox disabled=true on-change=(action onChangeAction)}}`); + + this.$('input').click(); +}); + +test('does not update indeterminate state when no action is passed', function(assert) { + assert.expect(1); + + this.render(hbs`{{ff-checkbox indeterminate=true}}`); + + this.$('input').click(); + + assert.equal(this.$('input').prop('indeterminate'), true, 'it does not remove indeterminate state'); +}); + +test('it sends the correct values on change', function(assert) { + assert.expect(3); + + this.set('onChangeAction', (checked, { value, indeterminate }) => { + assert.equal(checked, false, 'sent checked value is correct'); + assert.equal(indeterminate, false, 'sent indeterminate value is correct'); + assert.equal(value, 'test', 'sent value is correct'); + }); + + this.render(hbs`{{ff-checkbox checked=true indeterminate=true value="test" on-change=(action onChangeAction)}}`); + + this.$('input').click(); +});