From 4937d9b27bd077d3fb8ee2d273300c161729f802 Mon Sep 17 00:00:00 2001 From: jelhan Date: Fri, 22 Jan 2016 00:19:46 +0100 Subject: [PATCH] create-options-datetime is reimplemented; add / delete of options also works main work seems to be done --- app/components/create-options-datetime.js | 29 +++- app/components/create-options-text.js | 10 +- app/components/create-options.js | 3 +- app/components/fm-input-group.js | 10 +- app/controllers/create.js | 5 +- app/controllers/create/index.js | 2 +- .../components/create-options-datetime.hbs | 3 +- .../create-options-datetime-test.js | 149 ++++++++++++++++-- .../components/create-options-text-test.js | 70 ++++++++ .../components/fm-input-group-test.js | 12 ++ 10 files changed, 258 insertions(+), 35 deletions(-) create mode 100644 tests/integration/components/fm-input-group-test.js diff --git a/app/components/create-options-datetime.js b/app/components/create-options-datetime.js index 81a042e..7944c05 100644 --- a/app/components/create-options-datetime.js +++ b/app/components/create-options-datetime.js @@ -21,6 +21,11 @@ let datetimeObject = Ember.Object.extend({ } }, set(key, value) { + // check if it's a valid time + if (!moment(value, 'HH:mm', true).isValid()) { + return value; + } + let [ hours, minutes ] = value.split(':'); this.set( 'option.title', @@ -33,6 +38,27 @@ let datetimeObject = Ember.Object.extend({ }); export default Ember.Component.extend({ + actions: { + addOption(element) { + let options = this.get('options'); + let elementOption = element.get('option'); + let dateString = moment( + elementOption.get('title') + ).format('YYYY-MM-DD'); + let fragment = this.get('store').createFragment('option', { + title: dateString + }); + let position = options.indexOf(elementOption) + 1; + options.insertAt( + position, + fragment + ); + }, + delOption(element) { + let position = this.get('options').indexOf(element.get('option')); + this.get('options').removeAt(position); + } + }, datetimes: Ember.computed('options.[]', 'options.@each.title', function() { let options = this.get('options'); if (Ember.isEmpty(options)) { @@ -52,5 +78,6 @@ export default Ember.Component.extend({ } }), // datetimes grouped by date - groupedDatetimes: groupBy('datetimes', 'dateString') + groupedDatetimes: groupBy('datetimes', 'dateString'), + store: Ember.inject.service('store') }); diff --git a/app/components/create-options-text.js b/app/components/create-options-text.js index 7090a0f..61855a8 100644 --- a/app/components/create-options-text.js +++ b/app/components/create-options-text.js @@ -2,15 +2,17 @@ import Ember from 'ember'; export default Ember.Component.extend({ actions: { - addOption(position) { - let fragment = this.get('store').createFragment('option'), - options = this.get('options'); + addOption(element) { + let fragment = this.get('store').createFragment('option'); + let options = this.get('options'); + let position = this.get('options').indexOf(element) + 1; options.insertAt( position, fragment ); }, - deleteOption(position) { + deleteOption(element) { + let position = this.get('options').indexOf(element); this.get('options').removeAt(position); } }, diff --git a/app/components/create-options.js b/app/components/create-options.js index 1ae84f2..4013412 100644 --- a/app/components/create-options.js +++ b/app/components/create-options.js @@ -12,8 +12,7 @@ let Validations = buildValidations({ min() { if (this.get('isFindADate') && this.get('isDateTime')) { return 1; - } - else { + } else { return 2; } } diff --git a/app/components/fm-input-group.js b/app/components/fm-input-group.js index 9315aa2..29290df 100644 --- a/app/components/fm-input-group.js +++ b/app/components/fm-input-group.js @@ -3,17 +3,12 @@ import Ember from 'ember'; export default Ember.Component.extend({ actions: { add(element) { - let content = this.get('content'); - let index = content.indexOf(element); - - this.sendAction('addElement', index + 1); + this.sendAction('addElement', element); }, del(element) { if (this.get('canDeleteInputFields')) { - let content = this.get('content'); - let index = content.indexOf(element); - this.sendAction('deleteElement', index); + this.sendAction('deleteElement', element); } }, @@ -36,6 +31,7 @@ export default Ember.Component.extend({ return !this.get('canDeleteInputFields'); }), + classNames: ['grouped-input'], classNameBindings: ['errorClass'], errors: [], diff --git a/app/controllers/create.js b/app/controllers/create.js index a355974..d606374 100644 --- a/app/controllers/create.js +++ b/app/controllers/create.js @@ -8,13 +8,12 @@ export default Ember.Controller.extend({ * otherwise we don't need to store timezone of user created the poll */ setTimezone: function() { - if( + if ( this.get('model.isFindADate') && this.get('model.isDateTime') ) { this.set('model.timezone', jstz.determine().name()); - } - else { + } else { this.set('model.timezone', ''); } }.observes('model.isDateTime', 'model.isFindADate') diff --git a/app/controllers/create/index.js b/app/controllers/create/index.js index 6bfc6de..73dee0c 100644 --- a/app/controllers/create/index.js +++ b/app/controllers/create/index.js @@ -1,4 +1,4 @@ -import Ember from "ember"; +import Ember from 'ember'; import { validator, buildValidations } diff --git a/app/templates/components/create-options-datetime.hbs b/app/templates/components/create-options-datetime.hbs index 568e380..3117c08 100644 --- a/app/templates/components/create-options-datetime.hbs +++ b/app/templates/components/create-options-datetime.hbs @@ -4,7 +4,8 @@ step=900 label=groupedDatetime.value content=groupedDatetime.items - elementObject=optionsDateTimesTimeObject + addElement='addOption' + deleteElement='delOption' }} {{/each}} diff --git a/tests/integration/components/create-options-datetime-test.js b/tests/integration/components/create-options-datetime-test.js index 4caa94d..438629d 100644 --- a/tests/integration/components/create-options-datetime-test.js +++ b/tests/integration/components/create-options-datetime-test.js @@ -1,25 +1,142 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; +import Ember from 'ember'; +import moment from 'moment'; moduleForComponent('create-options-datetime', 'Integration | Component | create options datetime', { integration: true }); -test('it renders', function(assert) { - - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL + +test('it generates inpute field for options iso 8601 date string (without time)', function(assert) { + this.set('options', [ + Ember.Object.create({ title: '2015-01-01' }) + ]); + this.render(hbs`{{create-options-datetime options=options}}`); - this.render(hbs`{{create-options-datetime}}`); - - assert.equal(this.$().text().trim(), ''); - - // Template block usage:" + EOL + - this.render(hbs` - {{#create-options-datetime}} - template block text - {{/create-options-datetime}} - `); - - assert.equal(this.$().text().trim(), 'template block text'); + assert.equal( + this.$('.form-group input').length, + 1, + 'there is one input field' + ); + assert.equal( + this.$('.form-group input').val(), + '', + 'value is an empty string' + ); +}); + +test('it generates inpute field for options iso 8601 date string (without time)', function(assert) { + this.set('options', [ + Ember.Object.create({ title: '2015-01-01T11:11:00.000Z' }) + ]); + this.render(hbs`{{create-options-datetime options=options}}`); + + assert.equal( + this.$('.form-group input').length, + 1, + 'there is one input field' + ); + assert.equal( + this.$('.form-group input').val(), + moment('2015-01-01T11:11:00.000Z').format('HH:mm'), + 'it has time in option as value' + ); +}); + +test('it groups input fields per date', function(assert) { + this.set('options', [ + Ember.Object.create({ title: moment('2015-01-01T10:11').toISOString() }), + Ember.Object.create({ title: moment('2015-01-01T22:22').toISOString() }), + Ember.Object.create({ title: '2015-02-02' }) + ]); + this.render(hbs`{{create-options-datetime options=options}}`); + + assert.equal( + this.$('.grouped-input').length, + 2, + 'there are two form groups for the two different dates' + ); + assert.equal( + this.$('.grouped-input').eq(0).find('input').length, + 2, + 'the first form group has two input fields for two different times' + ); + assert.equal( + this.$('.grouped-input').eq(0).find('input').length, + 2, + 'the first form group with two differnt times for one day has two input fields' + ); + assert.equal( + this.$('.grouped-input').eq(1).find('input').length, + 1, + 'the second form group without time has only one input field' + ); +}); + +test('allows to add another option', function(assert) { + this.set('options', [ + Ember.Object.create({ title: '2015-01-01' }), + Ember.Object.create({ title: '2015-02-02' }) + ]); + this.render(hbs`{{create-options-datetime options=options}}`); + + assert.equal( + this.$('input').length, + 2, + 'there are two input fields before' + ); + this.$('.grouped-input').eq(0).find('.add').click(); + assert.equal( + this.$('input').length, + 3, + 'another input field is added' + ); + assert.equal( + this.$('.grouped-input').eq(0).find('input').length, + 2, + 'it is added in correct date input' + ); +}); + +test('allows to delete an option', function(assert) { + this.set('options', [ + Ember.Object.create({ title: moment('2015-01-01T11:11').toISOString() }), + Ember.Object.create({ title: moment('2015-01-01T22:22').toISOString() }) + ]); + this.render(hbs`{{create-options-datetime options=options}}`); + + assert.equal( + this.$('.grouped-input input').length, + 2, + 'there are two input fields before' + ); + assert.ok( + this.$('.delete').get().every((el) => { + return el.disabled === false; + }), + 'options are deleteable' + ); + this.$('.form-group').eq(0).find('.delete').click(); + Ember.run(() => { + assert.equal( + this.$('input').length, + 1, + 'one input field is removed after deletion' + ); + assert.equal( + this.$('.grouped-input input').val(), + '22:22', + 'correct input field is deleted' + ); + assert.equal( + this.get('options.length'), + 1, + 'is also delete from option' + ); + assert.equal( + this.get('options.firstObject.title'), + moment('2015-01-01T22:22').toISOString(), + 'correct option is deleted' + ); + }); }); diff --git a/tests/integration/components/create-options-text-test.js b/tests/integration/components/create-options-text-test.js index 94aeb09..99125b5 100644 --- a/tests/integration/components/create-options-text-test.js +++ b/tests/integration/components/create-options-text-test.js @@ -78,3 +78,73 @@ test('changes to value updates option', function(assert) { 'option was updated' ); }); + +test('allows to add another option', function(assert) { + this.set('options', [ + Ember.Object.create({ title: 'foo' }), + Ember.Object.create({ title: 'bar' }) + ]); + this.render(hbs`{{create-options-text options=options}}`); + + assert.equal( + this.$('.form-group input').length, + 2, + 'there are two input fields before' + ); + this.$('.form-group .add').eq(0).click(); + assert.equal( + this.$('.form-group input').length, + 3, + 'another input field is added' + ); + assert.deepEqual( + this.$('input').map(function() { return $(this).val(); }).get(), + ['foo', '', 'bar'], + 'it is added at correct position' + ); + this.$('.form-group input').eq(1).val('baz').trigger('change'); + assert.equal( + this.get('options')[1].get('title'), + 'baz', + 'options are observed for new input field' + ); +}); + +test('allows to delete an option', function(assert) { + this.set('options', [ + Ember.Object.create({ title: 'foo' }), + Ember.Object.create({ title: 'bar' }), + Ember.Object.create({ title: 'baz' }) + ]); + this.render(hbs`{{create-options-text options=options}}`); + + assert.equal( + this.$('.form-group input').length, + 3, + 'there are three input fields before' + ); + assert.ok( + this.$('.delete').get().every((el) => { + return el.disabled === false; + }), + 'options are deleteable' + ); + this.$('.form-group .delete').eq(1).click(); + Ember.run(() => { + assert.equal( + this.$('.form-group input').length, + 2, + 'one input field is deleted' + ); + assert.deepEqual( + this.$('input').map(function() { return $(this).val(); }).get(), + ['foo', 'baz'], + 'correct input field is deleted' + ); + assert.deepEqual( + this.get('options').map((option) => option.get('title')), + ['foo', 'baz'], + 'option is updated' + ); + }); +}); diff --git a/tests/integration/components/fm-input-group-test.js b/tests/integration/components/fm-input-group-test.js new file mode 100644 index 0000000..29acc04 --- /dev/null +++ b/tests/integration/components/fm-input-group-test.js @@ -0,0 +1,12 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('fm-input-group', 'Integration | Component | fm input group', { + integration: true +}); + +test('has class input-group', function(assert) { + this.render(hbs`{{fm-input-group}}`); + + assert.ok(this.$('div').hasClass('grouped-input')); +});