refactor(docs): run e2e tests with and without jquery

Di Peng · IgorMinar · commit f9b4c9da648f · 2011-07-17T22:19:08.000-07:00
- e2e tests will run index.html (without jquery) and with
index-jq.html(with jquery).
- many small changes to make e2e tests work withough JQuery as we
discover problems that were previously hidden by using real JQuery.
diff --git a/docs/src/gen-docs.js b/docs/src/gen-docs.js
@@ -27,6 +27,8 @@ var writes = callback.chain(function(){
   writer.copyDir('img', writes.waitFor());
   writer.copyDir('examples', writes.waitFor());
   writer.copyTpl('index.html', writes.waitFor());
+  writer.copy('docs/src/templates/index.html', 'build/docs/index-jq.html', writes.waitFor(),
+              '<-- jquery place holder -->', '<script src=\"jquery.min.js\"><\/script>');
   writer.copyTpl('offline.html', writes.waitFor());
   writer.output('app-cache.manifest',
                 appCacheTemplate().replace(/%TIMESTAMP%/, (new Date()).toISOString()),
@@ -71,7 +73,6 @@ function appCacheTemplate() {
           "",
           "# cache all of these",
           "CACHE:",
-          "jquery.min.js",
           "syntaxhighlighter/syntaxhighlighter-combined.js",
           "../angular.min.js",
           "docs-combined.js",
diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
@@ -546,22 +546,35 @@ Doc.prototype = {
 //////////////////////////////////////////////////////////
 function scenarios(docs){
   var specs = [];
-  docs.forEach(function(doc){
-    specs.push('describe("' + doc.section + '/' + doc.id + '", function(){');
-    specs.push('  beforeEach(function(){');
-    specs.push('    browser().navigateTo("index.html#!/' + doc.section + '/' + doc.id + '");');
-    specs.push('  });');
-    specs.push('');
-    doc.scenarios.forEach(function(scenario){
-      specs.push(indent(trim(scenario), 2));
+
+  specs.push('describe("angular without jquery", function() {');
+  appendSpecs('index.html');
+  specs.push('});');
+
+  specs.push('');
+  specs.push('');
+
+  specs.push('describe("angular with jquery", function() {');
+  appendSpecs('index-jq.html');
+  specs.push('});');
+
+  return specs.join('\n');
+
+  function appendSpecs(htmlFile) {
+    docs.forEach(function(doc){
+      specs.push('  describe("' + doc.section + '/' + doc.id + '", function(){');
+      specs.push('    beforeEach(function(){');
+      specs.push('      browser().navigateTo("' + htmlFile + '#!/' + doc.section + '/' + doc.id + '");');
+      specs.push('    });');
+      specs.push('  ');
+      doc.scenarios.forEach(function(scenario){
+        specs.push(indent(trim(scenario), 4));
+        specs.push('');
+      });
+      specs.push('});');
       specs.push('');
     });
-    specs.push('});');
-    specs.push('');
-    if (doc.scenario) {
-    }
-  });
-  return specs.join('\n');
+  }
 }
 
 
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
@@ -25,9 +25,11 @@
     this.descend(true); //compile the example code
     element.hide();
 
-    var example = element.find('pre.doc-source').eq(0),
+    //jQuery find() methods in this widget contain primitive selectors on purpose so that we can use
+    //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
+    var example = element.find('pre').eq(0),  //doc-source
         exampleSrc = example.text(),
-        scenario = element.find('pre.doc-scenario').eq(0);
+        scenario = element.find('pre').eq(1); //doc-scenario
 
     var code = indent(exampleSrc);
     var tabHtml =
@@ -47,15 +49,15 @@
       '</ul>';
     var tabs = angular.element(tabHtml);
 
-    tabs.find('li.doc-example-source > pre').text(HTML_TEMPLATE.replace('_HTML_SOURCE_', code.html));
+    tabs.find('li').eq(1).find('pre').text(HTML_TEMPLATE.replace('_HTML_SOURCE_', code.html));
 
     element.html('');
     element.append(tabs);
     element.show();
 
     var script = (exampleSrc.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
     try {
-      eval(script);
+      window.eval(script);
     } catch (e) {
       alert(e);
     }
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
@@ -75,8 +75,8 @@ <h2 ng:bind="partialTitle"></h2>
     <div id="footer">© 2010-2011 AngularJS</div>
   </div>
 
-  <script src="jquery.min.js"></script>
   <script src="syntaxhighlighter/syntaxhighlighter-combined.js"></script>
+  <-- jquery place holder -->
   <script src="../angular.min.js" ng:autobind></script>
   <script src="docs-combined.js"></script>
   <script src="docs-keywords.js"></script>
diff --git a/docs/src/writer.js b/docs/src/writer.js
@@ -59,16 +59,19 @@ exports.makeDir = function (path, callback) {
 };
 
 exports.copyTpl = function(filename, callback) {
-  copy('docs/src/templates/' + filename, OUTPUT_DIR + filename, callback);
+  exports.copy('docs/src/templates/' + filename, OUTPUT_DIR + filename, callback);
 };
 
-function copy(from, to, callback) {
+exports.copy = function(from, to, callback, replacementKey, replacement) {
   //console.log('writing', to, '...');
   fs.readFile(from, function(err, content){
     if (err) return callback.error(err);
+    if(replacementKey && replacement) {
+      content = content.toString().replace(replacementKey, replacement);
+    }
     fs.writeFile(to, content, callback);
   });
-}
+};
 
 exports.copyDir = function copyDir(dir, callback) {
   exports.makeDir(OUTPUT_DIR + '/' + dir, callback.waitFor(function(){
@@ -81,7 +84,7 @@ exports.copyDir = function copyDir(dir, callback) {
           if (stat.isDirectory()) {
             copyDir(dir + '/' + file, callback.waitFor());
           } else {
-            copy(path, OUTPUT_DIR  + '/' + dir + '/' + file, callback.waitFor());
+            exports.copy(path, OUTPUT_DIR  + '/' + dir + '/' + file, callback.waitFor());
           }
         }));
       });
diff --git a/src/directives.js b/src/directives.js
@@ -539,19 +539,14 @@ angularDirective("ng:click", function(expression, element){
       <form ng:submit="list.push(text);text='';" ng:init="list=[]">
         Enter text and hit enter:
         <input type="text" name="text" value="hello"/>
+        <input type="submit" id="submit" value="Submit" />
       </form>
       <pre>list={{list}}</pre>
      </doc:source>
      <doc:scenario>
        it('should check ng:submit', function(){
          expect(binding('list')).toBe('list=[]');
-         element('.doc-example-live form input').click();
-         this.addFutureAction('submit from', function($window, $document, done) {
-           $window.angular.element(
-             $document.elements('.doc-example-live form')).
-               trigger('submit');
-           done();
-         });
+         element('.doc-example-live #submit').click();
          expect(binding('list')).toBe('list=["hello"]');
        });
      </doc:scenario>
