New Angular Scenario runner and DSL system with redesigned HTML UI.

Uses the Jasmine syntax for tests, ex:

describe('widgets', function() {
  it('should verify that basic widgets work', function(){
    navigateTo('widgets.html');
    input('text.basic').enter('Carlos');
    expect(binding('text.basic')).toEqual('Carlos');
    input('text.basic').enter('Carlos Santana');
    expect(binding('text.basic')).not().toEqual('Carlos Boozer');
    input('text.password').enter('secret');
    expect(binding('text.password')).toEqual('secret');
    expect(binding('text.hidden')).toEqual('hiddenValue');
    expect(binding('gender')).toEqual('male');
    input('gender').select('female');
    expect(binding('gender')).toEqual('female');
  });
});

Note: To create new UI's implement the interface shown in angular.scenario.ui.Html.

1 files changed, 167 insertions, 44 deletions

diff --git a/css/angular-scenario.css b/css/angular-scenario.css
index 3960c357..2cf24b19 100644
--- a/css/angular-scenario.css
+++ b/css/angular-scenario.css
@@ -1,76 +1,199 @@
 @charset "UTF-8";
 /* CSS Document */
 
-#runner {
-  position: absolute;
-  top:5px;
-  left:10px;
-  right:10px;
-  height: 200px;
+/** Structure */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  font-size: 14px;
 }
 
-.console {
-  display: block;
-  overflow: scroll;
-  height: 200px;
-  border: 1px solid black;
+#header {
+  position: fixed;
+  width: 100%;
+}
+
+#specs {
+  padding-top: 50px;
+}
+
+#header .angular {
+  font-family: Courier New, monospace;
+  font-weight: bold;
+}
+
+#header h1 {
+  font-weight: normal;
+  float: left;
+  font-size: 30px;
+  line-height: 30px;
+  margin: 0;
+  padding: 10px 10px;
+  height: 30px;
+}
+
+#frame h2,
+#specs h2 {
+  margin: 0;
+  padding: 0.5em;
+  font-size: 1.1em;
+}
+      
+#status-legend {
+  margin-top: 10px;
+  margin-right: 10px;
+}
+
+#header, 
+#frame,
+.test-info, 
+.test-actions li {
+  overflow: hidden;
 }
 
-#testView {
-  position: absolute;
-  bottom:10px;
-  top:230px;
-  left:10px;
-  right:10px;
+#frame {
+  margin: 10px;
 }
 
-#testView iframe {
+#frame iframe {
   width: 100%;
-  height: 100%;
+  height: 758px;
+}
+
+#frame .popout {
+  float: right;
 }
 
-li.running > span {
-  background-color: yellow;
+#frame iframe {
+  border: none;
+}
+      
+.tests li, 
+.test-actions li,
+.test-it li, 
+.test-it ol,
+.status-display {
+  list-style-type: none;
 }
 
-#runner span {
-  background-color: green;
+.tests,
+.test-it ol,
+.status-display {
+  margin: 0;
+  padding: 0;
 }
 
-#runner .fail > span {
-  background-color: red;
+.test-info { 
+  margin-left: 1em;
+  margin-top: 0.5em;
+  border-radius: 8px 0 0 8px;
+  -webkit-border-radius: 8px 0 0 8px;
+  -moz-border-radius: 8px 0 0 8px;
+}
+                  
+.test-it ol {
+  margin-left: 2.5em;
 }
 
-.collapsed > ul {
-  display: none;
+.status-display,
+.status-display li {
+  float: right;
 }
 
-//////
+.status-display li {
+  padding: 5px 10px;
+}
 
-.run, .info, .error {
-  display: block;
-  padding: 0 1em;
+.timer-result, 
+.test-title {
+  display: inline-block;
+  margin: 0;
+  padding: 4px;
+}
+
+.timer-result {
+  width: 4em;
+  padding: 0 10px;
+  text-align: right;
   font-family: monospace;
-  white-space: pre;
 }
 
-.run {
-  background-color: lightgrey;
-  padding: 0 .2em;
+.test-it pre,
+.test-actions pre {
+  clear: left;
+  margin-left: 6em;
 }
 
-.run.pass {
-  background-color: lightgreen;
+.test-describe .test-describe {
+  margin: 5px 5px 10px 2em;
 }
 
-.run.fail {
-  background-color: lightred;
+.test-actions .status-pending .test-title:before {
+  content: '» ';
+}
+
+/** Colors */
+
+#header {
+  background-color: #F2C200;
 }
 
-.name, .time, .state {
-  padding-right: 2em;
+#specs h2 {
+  border-top: 2px solid #BABAD1;
 }
 
-error {
-  color: red;
-}
\ No newline at end of file
+#specs h2,
+#frame h2 {
+  background-color: #efefef;
+}
+
+#frame {
+  border: 1px solid #BABAD1;
+}
+      
+.test-describe .test-describe {
+  border-left: 1px solid #BABAD1;
+  border-right: 1px solid #BABAD1;
+  border-bottom: 1px solid #BABAD1;
+}
+
+.status-display {
+  border: 1px solid #777;
+}
+
+.status-display .status-pending,
+.status-pending .test-info {
+  background-color: #F9EEBC;
+}
+
+.status-display .status-success,
+.status-success .test-info {
+  background-color: #B1D7A1; 
+}
+      
+.status-display .status-failure,
+.status-failure .test-info { 
+  background-color: #FF8286; 
+}
+
+.status-display .status-error,
+.status-error .test-info { 
+  background-color: black;
+  color: white;
+}
+
+.test-actions .status-success .test-title { 
+  color: #30B30A; 
+}
+
+.test-actions .status-failure .test-title { 
+  color: #DF0000;
+}
+
+.test-actions .status-error .test-title { 
+  color: black;
+}
+
+.test-actions .timer-result {
+  color: #888;
+}