diff --git a/README.md b/README.md index 7a239e5..8b0e3bb 100755 --- a/README.md +++ b/README.md @@ -1,37 +1,124 @@ -Master Branch: [![Build Status](https://travis-ci.org/gerard2p/ember-cli-crudtable.svg?branch=master)](https://travis-ci.org/gerard2p/ember-cli-crudtable) +# CRUD Table [![Build Status](https://img.shields.io/travis/gerard2p/ember-cli-crudtable.svg?branch=master&style=flat-square)](https://travis-ci.org/gerard2p/ember-cli-crudtable) [![NPM Version](http://img.shields.io/npm/v/ember-cli-crudtable.svg?style=flat-square)](https://www.npmjs.org/package/ember-cli-crudtable) [![NPM Downlaads](http://img.shields.io/npm/dm/ember-cli-crudtable.svg?style=flat-square)](https://www.npmjs.org/package/ember-cli-crudtable) +This addon allows you to easly create a CRUD Table, it will take you only 5s!. +___ -Development Branch: [![Build Status](https://travis-ci.org/gerard2p/ember-cli-crudtable.svg?branch=development)](https://travis-ci.org/gerard2p/ember-cli-crudtable) -# Hello Every One -I've didn't notice that people was watching this proyect, so i'm sorry for the lack of documentation. -Today (24 March, 2015) I just finished one version wich is working, so hang on a second and tomorrow I'll update the docuemntation. +##Development [![Build Status](https://img.shields.io/travis/gerard2p/ember-cli-crudtable.svg?style=flat-square&branch=development)](https://travis-ci.org/gerard2p/ember-cli-crudtable) +___ -If you could support me by following me, or maybe by letting any comment on the issue section It'll be great. +##Installation +``` +ember install:addon ember-cli-crudtable +``` -Thank You :) +##How to use it +You can use the helper **{{crud-table}}** there are some minimun variables you must specify and these are: +###Minimun Configuration +1. class **The class name you want the component to have** +2. fields **The field names you want the component to render separated by ","** -# Ember-cli-crudtable +###Action Configuration +These variables are completed optional, if you're using the integrated mixin for the controller. -This README outlines the details of collaborating on this Ember addon. +1. createRecord: [default: '*create*'] +1. updateRecord: [default: '*update*'] +1. deleteRecord: [default: '*delete*'] +1. cancelRecord: [default: '*cancel*'] + 2. This actions is triggered when click on **"cancel"**, the default configuration makes a rollback on the record or deletes it if new. +1. getRecord: [default: '*getRecord*'] + 2. This action creates a new empty record. +1. searchRecord: [default: '*FetchData*'] + 2. This actions if the one witch searches for your records. -## Installation +###Style Configuration +1. stripped: [ true| **false** ] - Makes the table to render stripped. +1. hover: [ true | **false** ] - Allows to hover the table. -* `git clone` this repository -* `npm install` -* `bower install` +##Controller Configuration +You can use this very same code when creating your controller and the only thing you have to worry about is to indicate the model. -## Running +``` +import CTABLE from 'ember-cli-crudtable/mixins/crud-controller'; +import Ember from 'ember' -* `ember server` -* Visit your app at http://localhost:4200. +var CrudTable = CTABLE('school'); +export default Ember.ObjectController.extend(CrudTable); +``` -## Running Tests -* `ember test` -* `ember test --server` +##Full Example +``` +//app/router.js +import Ember from 'ember'; +import config from './config/environment'; -## Building +var Router = Ember.Router.extend({ + location: config.locationType, + rootURL: config.baseURL +}); -* `ember build` +Router.map(function () { + this.resource('schools'); +}); -For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/). +export default Router; + +``` + +``` +//app/models/school.js +import DS from 'ember-data'; + +var attr = DS.attr; + +export default DS.Model.extend({ + Name: attr('string'), + City: attr('string'), + Adress: attr('string'), + CP: attr('string'), + Responsable:attr('string'), + AmountStudents:attr('number') +}); + +``` + +``` +//app/controllers/schools/index.js +import CTABLE from 'ember-cli-crudtable/mixins/crud-controller'; +import Ember from 'ember' + +var CrudTable = CTABLE('school'); +export default Ember.ObjectController.extend(CrudTable); +``` + + +``` +//app/templates/schools/index.hbs +{{crud-table +fields="Name,City,Adress" +deleteRecord='delete' +updateRecord='update' +createRecord='create'}} +``` + +Thats All you can have now a fully CRUD table that communicates with your server and allows pagination. + + +##Pagination +The pagination data must be included in the meta response of your server so ember-data can use it and crudtable has access to it. + +This is a sample meta: + +``` +{ + "meta":{ + "next":2, + "previous"":null, + "count":20 + } +} +``` + +##Upcoming +I'm in a little hurry but as soon as posible i'll be adding more features and also providing a more detailed doc about the functions. +But try it, is quite simple to have your fully functional CRUD application. \ No newline at end of file diff --git a/addon/components/crud-table.js b/addon/components/crud-table.js index b6cc09e..b96f36e 100755 --- a/addon/components/crud-table.js +++ b/addon/components/crud-table.js @@ -8,7 +8,57 @@ var CustomField = Ember.Object.extend({ Type: null, listener: function () {}.observes('Value') }); +var recalculatePagination = function (that, meta) { + var arr = []; + var tpages = Math.ceil(meta.total / meta.showing); + var neightboor = 3; + var slots = 1; + var max = neightboor * 2 + slots * 2 + 3; + var de1 = slots; + var de2 = meta.current - neightboor; + var df2 = tpages - slots + 1; + var df1 = meta.current + neightboor; + var compress = tpages > max; + var preadd = true; + var postadd = true; + for (var i = 1; i <= tpages; i++) { + if (compress) { + var TP = max - ((tpages - meta.current) + neightboor + 1 + slots + 1); + var TP2 = max - (meta.current + neightboor + 1 + slots); + if ((de1 < i && i < de2) && i < de2 - TP) { + if (preadd) { + preadd = false; + arr.push({ + page: "..", + current: false + }); + } + } else if ((df1 < i && i < df2) && i > df1 + TP2) { + if (postadd) { + postadd = false; + arr.push({ + page: "..", + current: false + }); + } + } else { + arr.push({ + page: i, + current: meta.current === i + }); + } + } else { + arr.push({ + page: i, + current: meta.current === i + }); + } + } + + meta.links = arr; + that.set('pagination', meta); +}; var regenerateView = function (cmp) { var ComplexModel = []; if (cmp.value) { @@ -36,29 +86,88 @@ var regenerateView = function (cmp) { var showmodal = function () { $("#CrudTableDeleteRecordModal").modal('show'); }; +var metadata = function (records, that) { + var inflector = new Ember.Inflector(Ember.Inflector.defaultRules); + var meta = records.get("meta"); + meta = { + total: meta.count, + previous: meta.previous, + current: meta.previous ? (meta.next ? meta.next - 1 : meta.previous + 1) : 1, + next: meta.next, + showing: that.page_size, + name: inflector.pluralize(records.type.typeKey) + }; + meta.from = (meta.current - 1) * meta.showing + 1; + meta.to = meta.current * meta.showing; + meta.to = meta.to > meta.total ? meta.total : meta.to; + recalculatePagination(that, meta); +}; var hidemodal = function () { $("#CrudTableDeleteRecordModal").modal('hide'); }; +var lastquery = { + page: null +}; -export default Ember.Component.extend({ - attributeBindings: ['style'], - style: function () { - return 'color: ' + this.get('name') + ';'; - }.property('name'), +export default Ember.Component.extend({ stripped: false, hover: false, - createRecord: '', - updateRecord: '', - deleteRecord: '', + createRecord: 'create', + updateRecord: 'update', + deleteRecord: 'delete', cancelRecord: 'cancel', + searchRecord: 'FetchData', currentRecord: null, getRecord: 'getRecord', + isLoading: true, + SearchTerm: "", + SearchField: "", + value: [], + layout: layout, + class: "", + fields: "id", actions: { + goto: function (page) { + var that = this; + var deferred = Ember.RSVP.defer('crud-table#goto'); + lastquery.page = page; + that.set('isLoading', true); + this.sendAction('searchRecord', lastquery, deferred); + deferred.promise.then(function (records) { + metadata(records, that); + that.set('value', records); + regenerateView(that); + that.set('isLoading', false); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); + }, + internal_search: function () { + var field = $("#SearchField").val(); + var query = {}; + var that = this; + query[field] = this.get('SearchTerm'); + lastquery = query; + var deferred = Ember.RSVP.defer('crud-table#createRecord'); + that.set('isLoading', true); + this.sendAction('searchRecord', query, deferred); + deferred.promise.then(function (records) { + metadata(records, that); + that.set('value', records); + regenerateView(that); + that.set('isLoading', false); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); + }, confirm: function () { var that = this; var deferred; + this.set('isLoading', true); if (this.get('newRecord')) { deferred = Ember.RSVP.defer('crud-table#createRecord'); this.sendAction('createRecord', this.get('currentRecord').RoutedRecord, deferred); @@ -71,19 +180,36 @@ export default Ember.Component.extend({ this.sendAction('updateRecord', this.get('currentRecord').RoutedRecord, deferred); } } + + var updateview = Ember.RSVP.defer('crud-table#pagination'); deferred.promise.then(function () { + lastquery.page = that.get('pagination').current; + that.sendAction('searchRecord', lastquery, updateview); + //regenerateView(that); + //recalculatePagination(that,that.get('pagination')); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); + + updateview.promise.then(function (records) { + metadata(records, that); + that.set('value', records); regenerateView(that); hidemodal(); + that.set('isLoading', false); }, function (data) { alert(data.message); + that.set('isLoading', false); }); }, internal_create: function () { var that = this; that.set('newRecord', true); var deferred = Ember.RSVP.defer('crud-table#newRecord'); - this.sendAction('getRecord', deferred); - deferred.promise.then(function ( /*record*/ ) { + that.sendAction('getRecord', deferred); + deferred.promise.then(function (record) { + that.get('value').pushObject(record); regenerateView(that); that.set('currentRecord', that.get('ComplexModel').get('lastObject')); showmodal(); @@ -105,10 +231,6 @@ export default Ember.Component.extend({ //this.get('delete')(); } }, - layout: layout, - class: "", - value: [], - fields: "id", init: function () { var that = this; this._super(); @@ -120,19 +242,33 @@ export default Ember.Component.extend({ }.on('willInsertElement'), setup: function () { var that = this; - regenerateView(that); - //Ember.addObserver('value',that,function(){ - // regenerateView(that); - //}); + var deferred = Ember.RSVP.defer('crud-table#createRecord'); + that.set('isLoading', true); + this.sendAction('searchRecord', {}, deferred); + + $(this).addClass(this.get('class')); + + deferred.promise.then(function (records) { + that.page_size = records.get('content.length'); + metadata(records, that); + that.set('value', records); + regenerateView(that); + that.set('isLoading', false); + }, function (data) { + alert(data.message); + that.set('isLoading', false); + }); $("#CrudTableDeleteRecordModal").modal('hide'); $('#CrudTableDeleteRecordModal').on('hidden.bs.modal', function () { var deferred = Ember.RSVP.defer('crud-table#cancelRecord'); + var template = Ember.RSVP.defer('crud-table#RenderTemplate'); that.sendAction('cancelRecord', that.get('currentRecord').RoutedRecord, deferred); deferred.promise.then(function () { regenerateView(that); that.set('newRecord', false); that.set('isDeleting', false); that.set('currentRecord', null); + template.resolve(true); }, function (data) { alert(data); }); @@ -141,6 +277,6 @@ export default Ember.Component.extend({ }.on('didInsertElement'), teardown: function () { - //this._drop.destroy(); + }.on('willDestroyElement'), }); diff --git a/addon/mixins/route.js b/addon/mixins/crud-controller.js similarity index 69% rename from addon/mixins/route.js rename to addon/mixins/crud-controller.js index 69c41fb..0f6a65b 100644 --- a/addon/mixins/route.js +++ b/addon/mixins/crud-controller.js @@ -1,11 +1,12 @@ import Ember from 'ember'; -//import App from '../app'; -//import EmberValidations from 'ember-validations'; export default function (model /*settings*/) { - return Ember.ObjectController.extend({ + return Ember.Mixin.create({ isEditing: false, actions: { + FetchData:function(query,deferred){ + this.store.find(model,query).then(deferred.resolve,deferred.reject); + }, getRecord: function (deferred) { deferred.resolve(this.store.createRecord(model)); }, @@ -18,21 +19,20 @@ export default function (model /*settings*/) { }, update: function (record, deferred) { - record.save().then(deferred.resolve, deferred.reject); - //var self = this; - //var promises = []; + var that = this; + var promises = []; //if(self.model.get('isDirty')){ - //promises.push(record.save()); + promises.push(record.save()); //}else{ // self.set('isEditing',false); //} - /*Ember.A(Ember.keys(record._dependentRelations)).any(function (key) { - var value = Ember.get(self.model, key); + Ember.A(Ember.keys(record._relationships)).any(function (key) { + var value = Ember.get(that.model, key); if (value.get('isDirty')) { promises.push(value.get('content').save()); } - });*/ - //Ember.RSVP.Promise.all(promises).then(deferred.resolve, deferred.reject); + }); + Ember.RSVP.Promise.all(promises).then(deferred.resolve, deferred.reject); }, delete: function (record, deferred) { diff --git a/addon/templates/components/crud-table.hbs b/addon/templates/components/crud-table.hbs index f7de793..690edbd 100755 --- a/addon/templates/components/crud-table.hbs +++ b/addon/templates/components/crud-table.hbs @@ -5,52 +5,52 @@
-
- {{#each field in this.fields}} - + {{/each}}
- - + {{input value=this.SearchTerm placeholder="Search" class="input-sm form-control" name="SearchTerm" }} + + +
+ {{#unless isLoading}} {{#each field in this.fields}} {{/each}} {{#if this.editdelete}} - + {{/if}} {{#each row in this.ComplexModel}} - {{#if row}} - {{render 'crud-table-row' row}} - {{/if}} - {{#if this.editdelete}} + {{#if row}} {{render 'crud-table-row' row}} {{/if}} {{#if this.editdelete}} @@ -59,6 +59,22 @@ {{/each}} + + Showing {{this.pagination.from}} to {{this.pagination.to}} of {{this.pagination.total}} {{this.pagination.name}} +
{{field}}ActionsActions
{{#if this.updateRecord}} - {{/if}} {{#if this.deleteRecord}} - {{/if}}
+ {{else}} -{{render 'spinner' this.newRecord}}- {{/unless}} +
+ +
+
+ + {{#each page in this.pagination.links}} + + {{/each}} + +
{{yield}} {{render 'crud-table-modal' this}} diff --git a/app/templates/crud-table-modal.hbs b/app/templates/crud-table-modal.hbs index e2b981f..732844d 100755 --- a/app/templates/crud-table-modal.hbs +++ b/app/templates/crud-table-modal.hbs @@ -17,7 +17,6 @@
- {{this}} {{#if newRecord}} {{render 'crud-table-update' this.currentRecord}} {{else}} @@ -29,6 +28,7 @@ {{/if}}
+ {{#unless isLoading}} + {{else}} + {{render 'spinner' this.isLoading}} + {{/unless}}
diff --git a/app/templates/spinner.hbs b/app/templates/spinner.hbs new file mode 100644 index 0000000..20d5fad --- /dev/null +++ b/app/templates/spinner.hbs @@ -0,0 +1,68 @@ + diff --git a/bower.json b/bower.json index 45a61f4..5b1b9d4 100755 --- a/bower.json +++ b/bower.json @@ -1,19 +1,19 @@ { - "name": "ember-cli-crudtable", - "dependencies": { - "jquery": "^1.11.1", - "ember": "1.10.0", - "ember-data": "1.0.0-beta.15", - "ember-resolver": "~0.1.12", - "loader.js": "ember-cli/loader.js#3.2.0", - "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", - "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", - "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2", - "ember-qunit": "0.2.8", - "ember-qunit-notifications": "0.0.7", - "qunit": "~1.17.1" - }, - "devDependencies": { - "bootstrap": "~3.3.4" - } + "name": "ember-cli-crudtable", + "dependencies": { + "bootstrap": "~3.3.4" + }, + "devDependencies": { + "jquery": "^1.11.1", + "ember": "1.10.0", + "ember-data": "1.0.0-beta.15", + "ember-resolver": "~0.1.12", + "loader.js": "ember-cli/loader.js#3.2.0", + "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", + "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", + "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2", + "ember-qunit": "0.2.8", + "ember-qunit-notifications": "0.0.7", + "qunit": "~1.17.1" + } } diff --git a/index.js b/index.js index 5703710..cbdae3d 100755 --- a/index.js +++ b/index.js @@ -2,5 +2,8 @@ 'use strict'; module.exports = { - name: 'ember-cli-crudtable' + name: 'ember-cli-crudtable', + afterInstall: function () { + return this.addBowerPackageToProject('bootstrap'); // is a promise + } }; diff --git a/package.json b/package.json index dcf70d1..040219d 100755 --- a/package.json +++ b/package.json @@ -1,43 +1,47 @@ { - "name": "ember-cli-crudtable", - "version": "0.0.1", - "description": "The default blueprint for ember-cli addons.", - "directories": { - "doc": "doc", - "test": "tests" - }, - "scripts": { - "start": "ember server", - "build": "ember build", - "test": "ember test" - }, - "repository": "https://github.com/gerard2p/ember-cli-crudtable.git", - "engines": { - "node": ">= 0.10.0" - }, - "dependencies": { - "ember-cli-htmlbars": "0.7.4" - }, - "author": "", - "license": "MIT", - "devDependencies": { - "broccoli-asset-rev": "^2.0.0", - "ember-cli": "0.2.0", - "ember-cli-app-version": "0.3.2", - "ember-cli-babel": "^4.0.0", - "ember-cli-content-security-policy": "0.3.0", - "ember-cli-dependency-checker": "0.0.8", - "ember-cli-ic-ajax": "0.1.1", - "ember-cli-inject-live-reload": "^1.3.0", - "ember-cli-qunit": "0.3.9", - "ember-cli-uglify": "1.0.1", - "ember-data": "1.0.0-beta.15", - "ember-export-application-global": "^1.0.2" - }, - "keywords": [ - "ember-addon" + "name": "ember-cli-crudtable", + "version": "0.3.27", + "description": "This addon allows you to easly create a CRUD Table, it will take you only 5s!.", + "directories": { + "doc": "doc", + "test": "tests" + }, + "scripts": { + "start": "ember server", + "build": "ember build", + "test": "ember test" + }, + "repository": "https://github.com/gerard2p/ember-cli-crudtable.git", + "engines": { + "node": ">= 0.12.0" + }, + "dependencies": { + "ember-cli-htmlbars": "0.7.4" + }, + "author": "Gerardo Pérez Pérez", + "license": "MPL-2.0", + "devDependencies": { + "ember-data": "1.0.0-beta.15", + "broccoli-asset-rev": "^2.0.0", + "ember-cli": "0.2.1", + "ember-cli-app-version": "0.3.2", + "ember-cli-babel": "^4.0.0", + "ember-cli-content-security-policy": "0.3.0", + "ember-cli-dependency-checker": "0.0.8", + "ember-cli-ic-ajax": "0.1.1", + "ember-cli-inject-live-reload": "^1.3.0", + "ember-cli-qunit": "0.3.9", + "ember-cli-uglify": "1.0.1", + "ember-export-application-global": "^1.0.2" + }, + "keywords": [ + "ember-addon", + "crudtable", + "crud", + "table", + "ember-cli" ], - "ember-addon": { - "configPath": "tests/dummy/config" - } + "ember-addon": { + "configPath": "tests/dummy/config" + } } diff --git a/reload b/reload deleted file mode 100644 index e69de29..0000000 diff --git a/tests/unit/components/crud-table-test.js b/tests/unit/components/crud-table-test.js index 5a9d8c3..c70b7ad 100755 --- a/tests/unit/components/crud-table-test.js +++ b/tests/unit/components/crud-table-test.js @@ -11,13 +11,7 @@ import DS from "ember-data"; var component; var App; var ArrField = 'Field1,Field2,Field3'; -var Generic = DS.Model.extend({ - id: DS.attr('number'), - Field1: DS.attr('string'), - Field2: DS.attr('string'), - Field3: DS.attr('string') -}); - +var tricky = 0; var FakeModel = Ember.Component.extend({ id: null, Field1: null, @@ -41,23 +35,58 @@ var emberdatafix = DS.RecordArray.create({ }) ] }); + +var searchResult = DS.RecordArray.create({ + type: { + typeKey: "Dummy" + }, + meta: { + count: 2, + previous: null, + next: 2 + }, + content: [ + FakeModel.create({ + id: 2, + Field1: 'Data5', + Field2: 'Data7', + Field3: 'Data11' + }), + FakeModel.create({ + id: 12, + Field1: 'Data17', + Field2: 'Data19', + Field3: 'Data23' + }), + ] +}); + var targetObject = { + FetchData: function (query, deferred) { + var page = query.page ? query.page : 1; + ok(query); + searchResult.get('meta').count = searchResult.get('content').length + tricky; + deferred.resolve(searchResult); + }, getRecord: function (deferred) { var newobject = FakeModel.create({ id: '3', - Field1: 'Data7', - Field2: 'Data8', - Field3: 'Data9' + Field1: 'Data77', + Field2: 'Data88', + Field3: 'Data99' }); - component.get('value').pushObject(newobject); + //searchResult.pushObject(newobject); deferred.resolve(newobject); }, delete: function (record, deferred) { component.get('value').removeAt(0); + searchResult.removeAt(0); + deferred.resolve(record); }, - update: function () { + update: function (record, deferred) { ok(true, 'external Action was called!'); + deferred.resolve(record); }, create: function (record, deferred) { deferred.resolve(record); @@ -67,12 +96,11 @@ var targetObject = { moduleForComponent('crud-table', { // specify the other units that are required for this test // needs: ['component:foo', 'helper:bar'] - needs: ['template:crud-table-row', 'template:crud-table-modal', 'template:crud-table-update'], + needs: ['template:crud-table-row', 'template:crud-table-modal', 'template:crud-table-update', 'template:spinner'], setup: function () { App = startApp(); component = this.subject({ fields: 'Field1,Field2,Field3', - value: emberdatafix, stripped: true, hover: false, deleteRecord: 'delete', @@ -88,37 +116,33 @@ moduleForComponent('crud-table', { }); test('Can set init variables', function () { - - equal(emberdatafix.get('lastObject').get('id'), 2); - equal(component.get('ComplexModel').get('lastObject').get('lastObject').get('Value'), 'Data6'); - var oldvalue = component.get('value'); + equal(component.get('ComplexModel').get('lastObject').get('lastObject').get('Value'), 'Data23'); ArrField = ArrField.split(','); equal(component.get('fields').length, ArrField.length); equal(component.get('fields')[2], ArrField[2]); - equal(emberdatafix, oldvalue); equal(find('table.table>tbody>tr').children().length, (ArrField.length + 1) * find('table.table>tbody').children().length); }); test('User Create a Record', function () { - var rows = this.$('table.table>tbody>tr').length; + var rows = parseInt(this.$('[name=total_records]').text()); click('[data-action=create]'); andThen(function () { equal(find('.modal-title').text().trim(), 'Add a New Record'); click('[data-action=confirm]'); andThen(function () { - equal(find('table.table>tbody>tr').length, rows + 1); + equal(find('[name=total_records]').text(), rows + 1); }); }); }); test('User Edits a Record', function () { - var rows = this.$('table.table>tbody>tr').length; + var rows = parseInt(this.$('[name=total_records]').text()); click('[data-action=edit]:eq(0)'); andThen(function () { equal(find('.modal-title').text().trim(), 'Updating'); click('[data-action=confirm]'); andThen(function () { - equal(find('table.table>tbody>tr').length, rows); + equal(find('[name=total_records]').text(), rows); }); }); }); @@ -152,3 +176,36 @@ test('User deletes a Record', function () { }); }); }); + +test('User pushes a search', function () { + Ember.run(function () { + component.set('SearchTerm', 'Data2'); + component.set('SearchField', 'Field1'); + click('[data-action=search]'); + }); + andThen(function () { + equal(component.get('SearchTerm'), 'Data2'); + equal(component.get('SearchField'), 'Field1'); + equal(component.get('ComplexModel').get('lastObject').get('lastObject').get('Value'), 'Data99', 'Complex Model not Updated'); + equal(component.get('value').get('lastObject').get('Field1'), 'Data77'); + }); +}); + +test('User interacts with pagination', function () { + + tricky = 2; + Ember.run(function () { + click('[data-action=search]'); + }); + + andThen(function () { + equal(find('[data-page]').length, 3); + click('[data-page=2]'); + andThen(function () { + click('[data-page=3]'); + andThen(function () { + equal(find('[name=total_records]').text(), 3); + }); + }); + }); +});