From d4dd5e48d6622815088be7b4837df66f8e5aa015 Mon Sep 17 00:00:00 2001
From: 38elements <mh19820223@gmail.com>
Date: Wed, 10 Jan 2018 16:59:26 +0900
Subject: [PATCH] Browser test

---
 karma.conf.js                               |   1 +
 package.json                                |   1 -
 test/browser-specific/html-reporter.spec.js | 157 ++++++++++++++++++++
 test/reporters/html.spec.js                 | 136 -----------------
 4 files changed, 158 insertions(+), 137 deletions(-)
 create mode 100644 test/browser-specific/html-reporter.spec.js
 delete mode 100644 test/reporters/html.spec.js

diff --git a/karma.conf.js b/karma.conf.js
index 332ba9be0d..1e10bf87f1 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -143,6 +143,7 @@ module.exports = config => {
       if (cfg.sauceLabs) {
         cfg.sauceLabs.testName = 'Unit Tests';
       }
+      cfg.files.push('test/browser-specific/html-reporter.spec.js');
   }
 
   config.set(cfg);
diff --git a/package.json b/package.json
index 2ca429d0d1..7a9ec8d5b5 100644
--- a/package.json
+++ b/package.json
@@ -338,7 +338,6 @@
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
     "expect.js": "^0.3.1",
-    "jsdom": "^9.12.0",
     "karma": "^1.7.1",
     "karma-browserify": "^5.0.5",
     "karma-chrome-launcher": "^2.0.0",
diff --git a/test/browser-specific/html-reporter.spec.js b/test/browser-specific/html-reporter.spec.js
new file mode 100644
index 0000000000..d3184db632
--- /dev/null
+++ b/test/browser-specific/html-reporter.spec.js
@@ -0,0 +1,157 @@
+/* global Mocha */
+'use strict';
+
+describe('HTML reporter', function () {
+  var Suite = Mocha.Suite;
+  var Runner = Mocha.Runner;
+  var HTML = Mocha.reporters.HTML;
+
+  function removeMochaElem () {
+    var mochaElem = document.getElementById('mocha');
+    if (mochaElem) {
+      mochaElem.parentNode.removeChild(mochaElem);
+    }
+  }
+
+  function addMochaElem () {
+    var mochaElem = document.createElement('div');
+    mochaElem.id = 'mocha';
+    document.body.appendChild(mochaElem);
+  }
+
+  function sleep (fn, ms) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        fn();
+        resolve();
+      }, ms);
+    });
+  }
+
+  describe('constructor', function () {
+    it('should post error message if #mocha does not exist', function () {
+      removeMochaElem();
+      var suite = new Suite('Suite', 'root');
+      var runner = new Runner(suite);
+      // eslint-disable-next-line no-unused-vars
+      var html = new HTML(runner);
+      var message = document.getElementById('mocha-error').textContent;
+      expect(message).to.eql('#mocha div missing, add it to your document');
+    });
+
+    it('should add #mocha-stats and #mocha-report', function () {
+      removeMochaElem();
+      addMochaElem();
+      var suite = new Suite('Suite', 'root');
+      var runner = new Runner(suite);
+      // eslint-disable-next-line no-unused-vars
+      var html = new HTML(runner);
+      expect(document.getElementById('mocha-stats')).to.not.eql(null);
+      expect(document.getElementById('mocha-report')).to.not.eql(null);
+    });
+  });
+
+  describe('event', function () {
+    var html;
+    var runner;
+
+    beforeEach(function () {
+      removeMochaElem();
+      addMochaElem();
+      var suite = new Suite('Suite', 'root');
+      runner = new Runner(suite);
+      html = new HTML(runner);
+    });
+
+    describe('on suite', function () {
+      it('should do nothing if suite.root is true', function () {
+        runner.emit('suite', {root: true});
+        var report = document.getElementById('mocha-report');
+        expect(report.innerHTML).to.eql('');
+      });
+
+      it('should add elements for suite if suite.root is false', function () {
+        var suite = {
+          root: false,
+          title: 'title',
+          fullTitle: function () {
+            return 'fullTitle';
+          }
+        };
+        runner.emit('suite', suite);
+        return sleep(() => {
+          var report = document.getElementById('mocha-report');
+          expect(report.innerHTML).to.eql('<li class="suite"><h1><a href="/context.html?grep=fullTitle">title</a></h1><ul></ul></li>');
+        }, 50);
+      });
+    });
+
+    describe('on suite end', function () {
+      it('should update #mocha-stats if suite.root is true', function () {
+        html.stats.passes = 1;
+        html.stats.failures = 2;
+        runner.emit('suite end', {root: true});
+        expect(document.querySelector('.passes em').textContent).to.eql('1');
+        expect(document.querySelector('.failures em').textContent).to.eql('2');
+        expect(document.querySelector('.duration em').textContent).to.not.eql('0');
+      });
+    });
+
+    describe('on pass', function () {
+      it('should add elements for pass and update #mocha-stats', function () {
+        var test = {
+          speed: 'fast',
+          title: 'title',
+          fullTitle: function () {
+            return 'fullTitle';
+          },
+          duration: 100,
+          body: 'body',
+          slow: function () {}
+        };
+        runner.emit('pass', test);
+        return sleep(() => {
+          var report = document.getElementById('mocha-report');
+          expect(report.innerHTML).to.eql('<li class="test pass fast"><h2>title<span class="duration">100ms</span> <a href="/context.html?grep=fullTitle" class="replay">‣</a></h2><pre style="display: none;"><code>body</code></pre></li>');
+          expect(document.querySelector('.passes em').textContent).to.eql('1');
+          expect(document.querySelector('.failures em').textContent).to.eql('0');
+          expect(document.querySelector('.duration em').textContent).to.not.eql('0');
+        }, 50);
+      });
+    });
+
+    describe('on fail', function () {
+      it('should add elements for fail and update #mocha-stats', function () {
+        var test = {
+          title: 'title',
+          fullTitle: function () {
+            return 'fullTitle';
+          },
+          duration: 100,
+          body: 'body'
+        };
+        var err = {
+          toString: function () {
+            return 'error message';
+          }
+        };
+        runner.emit('fail', test, err);
+        return sleep(() => {
+          var report = document.getElementById('mocha-report');
+          expect(report.innerHTML).to.eql('<li class="test fail"><h2>title <a href="/context.html?grep=fullTitle" class="replay">‣</a></h2><pre class="error">error message</pre><pre style="display: none;"><code>body</code></pre></li>');
+          expect(document.querySelector('.passes em').textContent).to.eql('0');
+          expect(document.querySelector('.failures em').textContent).to.eql('1');
+          expect(document.querySelector('.duration em').textContent).to.not.eql('0');
+        }, 50);
+      });
+    });
+
+    describe('on pending', function () {
+      it('should add elements for pending', function () {
+        runner.emit('pending', {title: 'title'});
+        var report = document.getElementById('mocha-report');
+        expect(report.innerHTML).to.eql('<li class="test pass pending"><h2>title</h2></li>');
+      });
+    });
+  });
+});
diff --git a/test/reporters/html.spec.js b/test/reporters/html.spec.js
deleted file mode 100644
index 22577325e0..0000000000
--- a/test/reporters/html.spec.js
+++ /dev/null
@@ -1,136 +0,0 @@
-'use strict';
-
-var mocha = require('../../lib/mocha');
-var Suite = mocha.Suite;
-var Runner = mocha.Runner;
-var reporters = require('../../').reporters;
-var HTML = reporters.HTML;
-var jsdom = require('jsdom').jsdom;
-
-describe('HTML reporter', function () {
-  var doc;
-  var html;
-  var runner;
-
-  beforeEach(function () {
-    doc = jsdom('<!DOCTYPE html><html><body><div id="mocha"></div></body></html>');
-    global.window = doc.defaultView;
-    global.document = doc.defaultView.document;
-    window.HTMLCanvasElement.prototype.getContext = function () {
-      return {
-        scale: function () {}
-      };
-    };
-    var suite = new Suite('Suite', 'root');
-    runner = new Runner(suite);
-    html = new HTML(runner);
-  });
-
-  describe('constructor', function () {
-    it('should post error message if #mocha does not exist', function () {
-      doc = jsdom('<!DOCTYPE html><html><body></body></html>');
-      global.window = doc.defaultView;
-      global.document = doc.defaultView.document;
-      window.HTMLCanvasElement.prototype.getContext = function () {
-        return {
-          scale: function () {}
-        };
-      };
-      var suite = new Suite('Suite', 'root');
-      runner = new Runner(suite);
-      html = new HTML(runner);
-      var message = document.getElementById('mocha-error').textContent;
-      expect(message).to.eql('#mocha div missing, add it to your document');
-    });
-
-    it('should add #mocha-stats and #mocha-report', function () {
-      expect(document.getElementById('mocha-stats')).to.not.eql(null);
-      expect(document.getElementById('mocha-report')).to.not.eql(null);
-    });
-  });
-
-  describe('on suite', function () {
-    it('should do nothing if suite.root is true', function () {
-      runner.emit('suite', {root: true});
-      var report = document.getElementById('mocha-report');
-      expect(report.innerHTML).to.eql('');
-    });
-
-    it('should add elements for suite if suite.root is false', function () {
-      var suite = {
-        root: false,
-        title: 'title',
-        fullTitle: function () {
-          return 'fullTitle';
-        }
-      };
-      runner.emit('suite', suite);
-      var report = document.getElementById('mocha-report');
-      expect(report.innerHTML).to.eql('<li class="suite"><h1><a href="blank?grep=fullTitle">title</a></h1><ul></ul></li>');
-    });
-  });
-
-  describe('on suite end', function () {
-    it('should update #mocha-stats if suite.root is true', function () {
-      html.stats.passes = 1;
-      html.stats.failures = 2;
-      runner.emit('suite end', {root: true});
-      expect(document.querySelector('.passes em').textContent).to.eql('1');
-      expect(document.querySelector('.failures em').textContent).to.eql('2');
-      expect(document.querySelector('.duration em').textContent).to.not.eql('0');
-    });
-  });
-
-  describe('on pass', function () {
-    it('should add elements for pass and update #mocha-stats', function () {
-      var test = {
-        speed: 'fast',
-        title: 'title',
-        fullTitle: function () {
-          return 'fullTitle';
-        },
-        duration: 100,
-        body: 'body',
-        slow: function () {}
-      };
-      runner.emit('pass', test);
-      var report = document.getElementById('mocha-report');
-      expect(report.innerHTML).to.eql('<li class="test pass fast"><h2>title<span class="duration">100ms</span> <a href="blank?grep=fullTitle" class="replay">‣</a></h2><pre style="display: none;"><code>body</code></pre></li>');
-      expect(document.querySelector('.passes em').textContent).to.eql('1');
-      expect(document.querySelector('.failures em').textContent).to.eql('0');
-      expect(document.querySelector('.duration em').textContent).to.not.eql('0');
-    });
-  });
-
-  describe('on fail', function () {
-    it('should add elements for fail and update #mocha-stats', function () {
-      var test = {
-        title: 'title',
-        fullTitle: function () {
-          return 'fullTitle';
-        },
-        duration: 100,
-        body: 'body'
-      };
-      var err = {
-        toString: function () {
-          return 'error message';
-        }
-      };
-      runner.emit('fail', test, err);
-      var report = document.getElementById('mocha-report');
-      expect(report.innerHTML).to.eql('<li class="test fail"><h2>title <a href="blank?grep=fullTitle" class="replay">‣</a></h2><pre class="error">error message</pre><pre style="display: none;"><code>body</code></pre></li>');
-      expect(document.querySelector('.passes em').textContent).to.eql('0');
-      expect(document.querySelector('.failures em').textContent).to.eql('1');
-      expect(document.querySelector('.duration em').textContent).to.not.eql('0');
-    });
-  });
-
-  describe('on pending', function () {
-    it('should add elements for pending', function () {
-      runner.emit('pending', {title: 'title'});
-      var report = document.getElementById('mocha-report');
-      expect(report.innerHTML).to.eql('<li class="test pass pending"><h2>title</h2></li>');
-    });
-  });
-});