diff --git a/app/css/app.css b/app/css/app.css index 8d3eae692..e8d83bcb5 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1 +1,6 @@ /* app css stylesheet */ + +body { + padding-top: 20px; +} + diff --git a/app/index.html b/app/index.html index f4c7d5c4d..414443d2c 100644 --- a/app/index.html +++ b/app/index.html @@ -1,12 +1,41 @@ - + - My HTML File + Google Phone Gallery + - + + +
+
+
+ + + Search: + Sort by: + + +
+
+ + +
    +
  • + {{phone.name}} +

    {{phone.snippet}}

    +
    • +
+ +
+
+
+ - \ No newline at end of file + diff --git a/app/js/controllers.js b/app/js/controllers.js index d314a3331..3ec6eaf0d 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -1,3 +1,14 @@ 'use strict'; /* Controllers */ + +var phonecatApp = angular.module('phonecatApp', []); + +phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', + function($scope, $http) { + $http.get('phones/phones.json').success(function(data) { + $scope.phones = data; + }); + + $scope.orderProp = 'age'; + }]); diff --git a/test/e2e/scenarios.js b/test/e2e/scenarios.js index ed4b2c3e7..f85934853 100644 --- a/test/e2e/scenarios.js +++ b/test/e2e/scenarios.js @@ -2,10 +2,55 @@ /* http://docs.angularjs.org/guide/dev_guide.e2e-testing */ -describe('my app', function() { +describe('PhoneCat App', function() { - beforeEach(function() { - browser.get('app/index.html'); - }); + describe('Phone list view', function() { + + beforeEach(function() { + browser.get('app/index.html'); + }); + + + it('should filter the phone list as a user types into the search box', function() { + + var phoneList = element.all(by.repeater('phone in phones')); + var query = element(by.model('query')); + + expect(phoneList.count()).toBe(20); + + query.sendKeys('nexus'); + expect(phoneList.count()).toBe(1); + + query.clear(); + query.sendKeys('motorola'); + expect(phoneList.count()).toBe(8); + }); + + it('should be possible to control phone order via the drop down select box', function() { + + var phoneNameColumn = element.all(by.repeater('phone in phones').column('{{phone.name}}')); + var query = element(by.model('query')); + + function getNames() { + return phoneNameColumn.map(function(elm) { + return elm.getText(); + }); + } + + query.sendKeys('tablet'); //let's narrow the dataset to make the test assertions shorter + + expect(getNames()).toEqual([ + "Motorola XOOM\u2122 with Wi-Fi", + "MOTOROLA XOOM\u2122" + ]); + + element(by.model('orderProp')).element(by.css('option[value="name"]')).click(); + + expect(getNames()).toEqual([ + "MOTOROLA XOOM\u2122", + "Motorola XOOM\u2122 with Wi-Fi" + ]); + }); + }); }); diff --git a/test/unit/controllersSpec.js b/test/unit/controllersSpec.js index 63d80c3c3..2e4e78028 100644 --- a/test/unit/controllersSpec.js +++ b/test/unit/controllersSpec.js @@ -1,11 +1,33 @@ 'use strict'; /* jasmine specs for controllers go here */ +describe('PhoneCat controllers', function() { -describe('controllers', function() { + describe('PhoneListCtrl', function(){ + var scope, ctrl, $httpBackend; - it("should do something", function() { + beforeEach(module('phonecatApp')); + beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { + $httpBackend = _$httpBackend_; + $httpBackend.expectGET('phones/phones.json'). + respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); - }); + scope = $rootScope.$new(); + ctrl = $controller('PhoneListCtrl', {$scope: scope}); + })); + + + it('should create "phones" model with 2 phones fetched from xhr', function() { + expect(scope.phones).toBeUndefined(); + $httpBackend.flush(); + expect(scope.phones).toEqual([{name: 'Nexus S'}, + {name: 'Motorola DROID'}]); + }); + + + it('should set the default value of orderProp model', function() { + expect(scope.orderProp).toBe('age'); + }); + }); });