From 4698763ce73d61662afa66ab1e5bf6ee3631dc09 Mon Sep 17 00:00:00 2001
From: Tim Lancina <tim@drifty.com>
Date: Mon, 27 Jul 2015 15:48:14 -0500
Subject: [PATCH] basic e2e checkbox test

---
 ionic/components/checkbox/checkbox.scss       | 22 -------------------
 ionic/components/checkbox/checkbox.ts         | 11 +++++-----
 ionic/components/checkbox/extensions/ios.scss |  6 +++++
 .../checkbox/extensions/material.scss         |  5 +++++
 ionic/components/checkbox/test/basic/e2e.ts   |  3 +++
 .../components/checkbox/test/basic/main.html  |  2 +-
 6 files changed, 20 insertions(+), 29 deletions(-)
 create mode 100644 ionic/components/checkbox/test/basic/e2e.ts

diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
index 6dda32e3b4..f133008f5e 100644
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -14,28 +14,6 @@
   left: -9999px;
 }
 
-.checkbox-on {
-  display: none;
-  pointer-events: none;
-}
-
-.checkbox-off {
-  display: block;
-  pointer-events: none;
-}
-
-.checkbox[aria-checked=true] {
-
-  .checkbox-on {
-    display: block;
-  }
-
-  .checkbox-off {
-    display: none;
-  }
-
-}
-
 .checkbox[aria-disabled=true] {
   opacity: 0.5;
   color: gray;
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 98840c9959..0de96ac1a0 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -20,17 +20,16 @@ import {Icon} from '../icon/icon';
   host: {
     '[class.item]': 'item',
     '[attr.aria-checked]': 'input.checked'
-  },
-  defaultProperties: {
-    'iconOff': 'ion-ios-circle-outline',
-    'iconOn': 'ion-ios-checkmark'
   }
+  // defaultProperties: {
+  //   'iconOff': 'ion-ios-circle-outline',
+  //   'iconOn': 'ion-ios-checkmark'
+  // }
 })
 @IonicView({
   template:
   '<div class="item-media media-checkbox">' +
-  '<icon [name]="iconOff" class="checkbox-off"></icon>' +
-    '<icon [name]="iconOn" class="checkbox-on"></icon>' +
+    '<div class="media-checkbox-outline"></div>' +
   '</div>' +
   '<div class="item-content">' +
     '<content></content>' +
diff --git a/ionic/components/checkbox/extensions/ios.scss b/ionic/components/checkbox/extensions/ios.scss
index 708f8e55dd..ccef6decd2 100644
--- a/ionic/components/checkbox/extensions/ios.scss
+++ b/ionic/components/checkbox/extensions/ios.scss
@@ -8,8 +8,14 @@ $checkbox-ios-color:          #007aff;
 .checkbox[mode="ios"] {
 
   .media-checkbox {
+    height: 20px;
     min-width: 20px;
     color: $checkbox-ios-color;
+    background-color: $checkbox-ios-color;
+  }
+
+  &[aria-checked=false] .media-checkbox {
+    background-color: red;
   }
 
 }
diff --git a/ionic/components/checkbox/extensions/material.scss b/ionic/components/checkbox/extensions/material.scss
index 1e71163e9d..650caa88cb 100644
--- a/ionic/components/checkbox/extensions/material.scss
+++ b/ionic/components/checkbox/extensions/material.scss
@@ -19,6 +19,7 @@ $checkbox-md-color:          #007aff;
   .media-checkbox-outline {
     min-width: 20px;
     color: $checkbox-md-color;
+    background-color: $checkbox-md-color;
 
     position: absolute;
     top: 3px;
@@ -35,4 +36,8 @@ $checkbox-md-color:          #007aff;
     z-index: 2;
   }
 
+  &[aria-checked=false] .media-checkbox-outline {
+    background-color: red;
+  }
+
 }
diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts
new file mode 100644
index 0000000000..6616981f96
--- /dev/null
+++ b/ionic/components/checkbox/test/basic/e2e.ts
@@ -0,0 +1,3 @@
+it('should toggle checkbox state with label click', function() {
+  element(by.css('#appleLabel')).click();
+});
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index ec3738cd0a..a95408f556 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -1,7 +1,7 @@
 <ion-content>
   <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
     <ion-list>
-      <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label>Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
+      <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label id="appleLabel">Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
       <ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox>
       <ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox>
       <ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox>