added tests and detail page

Tobias Bosch · Tobias Bosch · commit 4b8ee9cef1fc · 2011-07-31T21:11:41.000+02:00
diff --git a/README.md b/README.md
@@ -6,6 +6,18 @@ Description
 
 Mobile version of Angulars sample application [phonecat](https://github.com/angular/angular-phonecat).
 
+Technologies
+------------
+
+- jquery-mobile: Mobile Widgets
+- angular: Databinding
+- jasmine: Unit-Tests
+- jasmine-ui: Ui-Tests
+- js-test-driver: Automating Tests
+- requirejs: Modules and optimization
+- Maven: Overall build control
+
+
 Live Versions
 -------------
 
diff --git a/build-gh-pages.sh b/build-gh-pages.sh
@@ -0,0 +1,12 @@
+# Build script to update the branch gh-pages, which
+# contains the live copy of the demo.
+if $M2_HOME/bin/mvn package; then
+    if git checkout gh-pages; then
+      rm -fr *
+      cp -r target/requirejs/output/ .
+      git add .
+      git commit -m "updated pages"
+      git checkout master
+    fi
+fi
+
diff --git a/buildpages.sh b/buildpages.sh
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -37,8 +37,15 @@ <h1>Phones</h1>
 </div>
 
 <div data-role="page" id="phonedetail" ng:controller="PhoneDetailCtrl">
-    <div data-role="header" data-backbtn="false">
-        <h1>{{data.name}}</h1>
+    <div data-role="header">
+        <h1 class="phonename">{{data.name}}</h1>
+        <a href="" data-rel="back" data-role="button">Back</a>
+    </div>
+    <div data-role="content">
+        <div data-role="fieldcontain" class="phonedesc">{{data.description}}</div>
+        <div data-role="fieldcontain" ng:repeat="image in data.images">
+            <img ng:src="{{image}}" width="100%" class="phoneimg">
+        </div>
     </div>
 </div>
 
diff --git a/src/test/webapp/main-ui-html.js b/src/test/webapp/main-ui-html.js
@@ -1,6 +1,7 @@
 require([
     "lib/jasmine-html",
-    "ui/phonelistSpec"
+    "ui/phonelistSpec",
+    "ui/phonedetailSpec"
 ]);
 
 
diff --git a/src/test/webapp/main-ui-jstd.js b/src/test/webapp/main-ui-jstd.js
@@ -1,6 +1,7 @@
 require([
     "lib/jasmine-jstd",
-    "ui/phonelistSpec"
+    "ui/phonelistSpec",
+    "ui/phonedetailSpec"
 ]);
 
 
diff --git a/src/test/webapp/ui/phonedetailSpec.js b/src/test/webapp/ui/phonedetailSpec.js
@@ -1,5 +1,28 @@
-/*
-describe('phonedetail', function() {
-    it('should show the name of the phone with the id given ')
+define(['phonesTestData', 'ui/testutils', 'lib/jasmine', 'lib/jasmine-ui'], function(testData, testutils, jasmine) {
+    describe('phonedetail', function() {
+        var jqueryLoaded = function(window) {
+            return !!window.$;
+        };
+
+        it('should show the name, description and images of the phone with the id', function() {
+            loadHtml('/phonecat-mobile/index.html#phonedetail', function(testwin) {
+                testutils.addXhrMock(testwin, 'phones/10.json', true, testData.onePhoneDetail);
+                testutils.setOnActivateArguments(testwin.PhoneDetailCtrl, {selectedPhone: {id:10}});
+            }, jqueryLoaded);
+            runs(function() {
+                var $ = testframe().$;
+                var page = testutils.getCurrentPage();
+                var name = page.find('.phonename');
+                expect($.trim(name.text())).toEqual(testData.onePhoneDetail.name);
+                var desc = page.find('.phonedesc');
+                expect($.trim(desc.text())).toEqual(testData.onePhoneDetail.description);
+                var imgs = page.find('img.phoneimg');
+                expect(imgs.length).toEqual(testData.onePhoneDetail.images.length);
+                for (var i=0; i<imgs.length; i++) {
+                    expect($(imgs[i]).attr('src')).toEqual(testData.onePhoneDetail.images[i]);
+                }
+            });
+        });
+    });
+
 });
-    */
