From 19d898a5be7b79a31dd36e9d2b949cc07b54a39c Mon Sep 17 00:00:00 2001 From: Jason Laster Date: Thu, 12 Jan 2017 11:40:05 -0500 Subject: [PATCH] Update Mocha runner * remove component unit tests --- bin/dev-server.js | 8 ++++- bin/mocha-server.js | 37 ++++++++------------ docs/local-development.md | 4 +-- mocha-runner.html | 14 +++++--- package.json | 1 - src/actions/tests/sources.js | 2 +- src/components/test-utils.js | 46 ------------------------- src/components/tests/Breakpoints.js | 42 ----------------------- src/components/tests/Editor.js | 18 ---------- src/components/tests/Frames.js | 52 ----------------------------- src/components/tests/Scopes.js | 28 ---------------- src/components/tests/SourceTabs.js | 37 -------------------- src/test/examples/statements.js | 25 -------------- src/test/node-unit-tests.js | 26 ++++++++++----- src/utils/test-head.js | 2 +- 15 files changed, 51 insertions(+), 291 deletions(-) delete mode 100644 src/components/test-utils.js delete mode 100644 src/components/tests/Breakpoints.js delete mode 100644 src/components/tests/Editor.js delete mode 100644 src/components/tests/Frames.js delete mode 100644 src/components/tests/Scopes.js delete mode 100644 src/components/tests/SourceTabs.js delete mode 100644 src/test/examples/statements.js diff --git a/bin/dev-server.js b/bin/dev-server.js index 3050d9cd03..18b4f0e504 100644 --- a/bin/dev-server.js +++ b/bin/dev-server.js @@ -4,11 +4,15 @@ const path = require("path"); const toolbox = require("devtools-launchpad/index"); const feature = require("devtools-config"); const getConfig = require("./getConfig"); +const { mochaWebpackConfig, startMochaServer } = require("./mocha-server") + const envConfig = getConfig(); feature.setConfig(envConfig); -const webpackConfig = require("../webpack.config"); +let webpackConfig = require("../webpack.config"); +webpackConfig = mochaWebpackConfig(webpackConfig); + let { app } = toolbox.startDevServer(envConfig, webpackConfig, __dirname); app.get("/integration", function(req, res) { @@ -19,5 +23,7 @@ app.get("/integration/mocha.css", function(req, res) { res.sendFile(path.join(__dirname, "../node_modules/mocha/mocha.css")); }); +startMochaServer(app) + console.log("View debugger examples here:") console.log("https://github.com/jasonLaster/debugger-examples") diff --git a/bin/mocha-server.js b/bin/mocha-server.js index 145f622ab1..29f614ba88 100755 --- a/bin/mocha-server.js +++ b/bin/mocha-server.js @@ -4,9 +4,9 @@ const path = require("path"); const webpack = require("webpack"); const express = require("express"); -const projectConfig = require("../webpack.config"); const webpackDevMiddleware = require("webpack-dev-middleware"); const fs = require("fs"); +var serveStatic = require('serve-static') function recursiveReaddirSync(dir) { let list = []; @@ -37,31 +37,22 @@ function getTestPaths(dir) { const testPaths = getTestPaths(path.join(__dirname, "../src")); -projectConfig.entry.bundle = projectConfig.entry.bundle.concat(testPaths); -const config = Object.assign({}, projectConfig, {}); +function mochaWebpackConfig(projectConfig) { + projectConfig.entry["debugger-unit-tests"] = + projectConfig.entry.debugger.concat(testPaths); -const app = express(); -const compiler = webpack(config); + return projectConfig; +} -app.use(express.static("public")); -app.use(express.static("node_modules")); +function startMochaServer(app) { + app.use("/examples", express.static("src/test/mochitest/examples")); -app.use(webpackDevMiddleware(compiler, { - publicPath: projectConfig.output.publicPath, - noInfo: true, - stats: { - colors: true - } -})); + app.use(express.static("node_modules")); -app.get("/", function(req, res) { - res.sendFile(path.join(__dirname, "../mocha-runner.html")); -}); + app.get("/mocha", function(req, res) { + res.sendFile(path.join(__dirname, "../mocha-runner.html")); + }); -app.listen(8003, "localhost", function(err, result) { - if (err) { - console.log(err); - } +} - console.log("Listening at http://localhost:8003"); -}); +module.exports = {mochaWebpackConfig, startMochaServer}; diff --git a/docs/local-development.md b/docs/local-development.md index 9db2b55901..6e798463e2 100644 --- a/docs/local-development.md +++ b/docs/local-development.md @@ -363,8 +363,8 @@ $ yarn run test-all * `yarn test` - Run tests headlessly * These are the basic unit tests which must always pass -* `yarn run mocha-server` - Run tests in the browser once you open `http://localhost:8003` - * This runs tests in the browser and is useful for fixing errors in the karma tests +* `localhost:8000/mocha` - Run tests in the browser once you open `http://localhost:8003` [gif](http://g.recordit.co/Go1GOu1Pli.gif)) + #### Integration tests diff --git a/mocha-runner.html b/mocha-runner.html index af0c30c7b1..36367530b2 100644 --- a/mocha-runner.html +++ b/mocha-runner.html @@ -2,20 +2,24 @@ Mocha Tests - +
- - + + - - + + + diff --git a/package.json b/package.json index ed74377875..316d026175 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "lint-fix": "yarn run lint-js -- --fix", "test": "node src/test/node-unit-tests.js", "test-all": "yarn run test; yarn run lint; yarn run flow", - "mocha-server": "node bin/mocha-server.js", "firefox": "./node_modules/.bin/start-firefox --start --location https://devtools-html.github.io/debugger-examples/", "chrome": "./node_modules/.bin/start-chrome", "copy-assets": "node bin/copy-assets", diff --git a/src/actions/tests/sources.js b/src/actions/tests/sources.js index 09475a7c11..d4e63dc3b8 100644 --- a/src/actions/tests/sources.js +++ b/src/actions/tests/sources.js @@ -36,7 +36,7 @@ const threadClient = { process.on("unhandledRejection", (reason, p) => {}); // Create a sourcemapped source that all the sourcemap tests can use. -const bundleSource = makeSource("bundle.js", { +const bundleSource = makeSource("sourcemaps/bundle.js", { sourceMapURL: "bundle.js.map" }); diff --git a/src/components/test-utils.js b/src/components/test-utils.js deleted file mode 100644 index 8a6ad5e816..0000000000 --- a/src/components/test-utils.js +++ /dev/null @@ -1,46 +0,0 @@ -const { createElement, createFactory } = require("react"); -const ReactDOM = require("react-dom"); - -const renderComponentFromFixture = require("../test/utils/renderComponentFromFixture"); - -function createElementWithAttributes(tag, attrs) { - const $el = document.createElement(tag); - Object.keys(attrs).forEach(key => { - const attr = document.createAttribute(key); - attr.value = attrs[key]; - $el.setAttributeNode(attr); - }); - - return $el; -} - -function getSandbox() { - let $el = document.querySelector("#sandbox"); - if ($el) { - $el.remove(); - } - - $el = createElementWithAttributes("div", { - id: "sandbox", - style: "top: 0; position: relative; height: 500px;" - }); - - document.body.appendChild($el); - return $el; -} - -function renderComponent(Component, fixtureName, options = {}) { - const $el = getSandbox(); - - const component = renderComponentFromFixture( - createElement(createFactory(Component)), - fixtureName, - options - ); - - return ReactDOM.render(component, $el); -} - -module.exports = { - renderComponent -}; diff --git a/src/components/tests/Breakpoints.js b/src/components/tests/Breakpoints.js deleted file mode 100644 index 83f40646e8..0000000000 --- a/src/components/tests/Breakpoints.js +++ /dev/null @@ -1,42 +0,0 @@ -const Breakpoints = require("../Breakpoints"); -const { renderComponent } = require("../test-utils"); - -function getBreakpoints($el) { - return $el.querySelector(".breakpoints-list").children; -} - -function getBreakpointLabel($breakpoint) { - return $breakpoint.querySelector(".breakpoint-label").innerText; -} - -function getBreakpointClasses($breakpoint) { - return Array.from($breakpoint.classList); -} - -describe("Breakpoint Component", function() { - it("Not Paused", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Breakpoints, "todomvc"); - expect($el.innerText).to.equal("No Breakpoints"); - }); - - it("3 Breakpoints", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Breakpoints, "todomvcUpdateOnEnter"); - const breakpoints = getBreakpoints($el); - expect(breakpoints.length).to.equal(3); - expect(getBreakpointLabel(breakpoints[0])).to.equal("113 this.close();"); - expect(getBreakpointClasses(breakpoints[0])).to.contain("paused"); - expect(getBreakpointLabel(breakpoints[1])).to - .equal("119 revertOnEscape: function (e) {"); - expect(getBreakpointLabel(breakpoints[2])).to - .equal("121 this.$el.removeClass('editing'..."); - expect(getBreakpointClasses(breakpoints[2])).to.contain("disabled"); - }); -}); diff --git a/src/components/tests/Editor.js b/src/components/tests/Editor.js deleted file mode 100644 index afeb8a3f92..0000000000 --- a/src/components/tests/Editor.js +++ /dev/null @@ -1,18 +0,0 @@ -if (typeof window == "object") { - const Editor = require("../Editor"); - const { renderComponent } = require("../test-utils"); - - function getEditorLines($el) { - return $el.querySelectorAll(".codemirror-line"); - } - - describe("Editor", function() { - // The editor fails to load in the unit tests - xit("todomvc", function() { - const $el = renderComponent(Editor, "todomvc"); - const lines = getEditorLines($el); - expect(lines.length).to.equal(46); - expect(lines[2].innerText).to.equal("var app = app || {};"); - }); - }); -} diff --git a/src/components/tests/Frames.js b/src/components/tests/Frames.js deleted file mode 100644 index 423907253c..0000000000 --- a/src/components/tests/Frames.js +++ /dev/null @@ -1,52 +0,0 @@ -const Frames = require("../Frames"); -const { renderComponent } = require("../test-utils"); - -function getFrames($el) { - return $el.querySelectorAll(".frame"); -} - -function getFrameTitle($frame) { - return $frame.firstChild.innerText.trim(); -} - -function getFrameLocation($frame) { - return $frame.lastChild.innerText.trim(); -} - -describe("Frames", function() { - it("Not Paused", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Frames, "todomvc"); - expect($el.innerText).to.equal("Not Paused"); - }); - - it("Event Handler", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Frames, "todomvcUpdateOnEnter"); - const frames = getFrames($el); - expect(frames.length).to.equal(13); - expect(getFrameTitle(frames[0])).to.equal("app.TodoView<.updateOnEnter"); - expect(getFrameLocation(frames[0])).to.equal("todo-view.js: 113"); - expect(getFrameTitle(frames[3])).to.equal(".save"); - // lastChild is the firstChild, there is no empty div present - expect(getFrameLocation(frames[5])).to.equal("backbone.localStorage.js: 1"); - }); - - it("Nested Closure", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Frames, "pythagorean"); - const frames = getFrames($el); - expect(frames.length).to.equal(3); - expect(getFrameTitle(frames[0])).to.equal("pythagorean"); - expect(getFrameLocation(frames[0])).to.equal("pythagorean.js: 11"); - }); -}); diff --git a/src/components/tests/Scopes.js b/src/components/tests/Scopes.js deleted file mode 100644 index 2c124cb873..0000000000 --- a/src/components/tests/Scopes.js +++ /dev/null @@ -1,28 +0,0 @@ -const Scopes = require("../Scopes"); -const { renderComponent } = require("../test-utils"); - -function getScopes($el) { - return $el.querySelectorAll(".tree-node"); -} - -describe("Scopes", function() { - it("Not Paused", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Scopes, "todomvc"); - expect($el.innerText).to.equal("Scopes Unavailable"); - }); - - it("TodoMVC Event Handler", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(Scopes, "todomvcUpdateOnEnter"); - const scopes = getScopes($el); - expect(scopes.length).to.equal(2); - expect(scopes[0].innerText.trim()).to.match(/app.TodoView<.updateOnEnter/); - }); -}); diff --git a/src/components/tests/SourceTabs.js b/src/components/tests/SourceTabs.js deleted file mode 100644 index c2db705350..0000000000 --- a/src/components/tests/SourceTabs.js +++ /dev/null @@ -1,37 +0,0 @@ -const SourceTabs = require("../SourceTabs"); -const { renderComponent } = require("../test-utils"); -const { setConfig } = require("devtools-config"); - -function getSourceTabs($el) { - return $el.querySelectorAll(".source-tab"); -} - -function getTitle($el) { - return $el.querySelector(".filename").innerText; -} - -describe("SourceTabs", function() { - it("Many Tabs", function() { - if (typeof window != "object") { - return; - } - - const $el = renderComponent(SourceTabs, "todomvc"); - const tabs = getSourceTabs($el); - expect(tabs.length).to.equal(3); - expect(getTitle(tabs[0])).to.equal("todo-view.js"); - }); - - it("Disabled", function() { - if (typeof window != "object") { - return; - } - - const prevConfig = setConfig({ features: { tabs: false }}); - const $el = renderComponent(SourceTabs, "todomvc"); - setConfig(prevConfig); - - const tabs = getSourceTabs($el); - expect(tabs.length).to.equal(0); - }); -}); diff --git a/src/test/examples/statements.js b/src/test/examples/statements.js deleted file mode 100644 index d4cec887f8..0000000000 --- a/src/test/examples/statements.js +++ /dev/null @@ -1,25 +0,0 @@ -debugger; -test(); -test(); -test(); -test(); -test(); -test(); -test(); -test(); -test(); -debugger; - -function test() { - // stepIntoMe(); - console.log("hi") -} - -function stepIntoMe() { - // step in - stepOverMe(); - // step out -} - -function stepOverMe() { -} diff --git a/src/test/node-unit-tests.js b/src/test/node-unit-tests.js index 679945fb88..9813a0d436 100644 --- a/src/test/node-unit-tests.js +++ b/src/test/node-unit-tests.js @@ -3,7 +3,7 @@ require("babel-register"); const mock = require("mock-require"); const glob = require("glob").sync; -const path = require("path"); +let path = require("path"); const Mocha = require("mocha"); const minimist = require("minimist"); @@ -12,8 +12,6 @@ const setConfig = require("devtools-config").setConfig; // Mock various functions. This allows tests to load files from a // local directory easily. -const networkRequest = require("devtools-network-request"); -mock("devtools-network-request", networkRequest.stubNetworkRequest); mock("devtools-modules", { Services: { appinfo: { OS: "darwin" }}}); mock("../utils/prefs", { @@ -39,13 +37,23 @@ const webpack = require("webpack"); const webpackConfig = require("../../webpack.config"); delete webpackConfig.entry.bundle; -// The source map worker is compiled with webpack (and mock-require -// doesn't work in workers) so mock it with an alias, and tweak a few -// things to make the stub fetcher work in node. -webpackConfig.resolve.alias["devtools-network-request"] = - "devtools-network-request/stubNetworkRequest"; +function stubNetworkRequest(url) { + return new Promise((resolve, reject) => { + const fs = require("fs"); + path = require("path"); -webpackConfig.externals = [{ fs: "commonjs fs" }]; + url = url.replace(/http:\/\/localhost:8000/, ""); + const requestUrl = path.join(__dirname, "/../../src/test/mochitest/", url); + const content = fs.readFileSync(requestUrl, "utf8"); + + resolve({ content }); + }); +} + +webpackConfig.externals = [{ + fs: "commonjs fs", + "devtools-network-request": `var (${stubNetworkRequest})` +}]; webpackConfig.node = { __dirname: false }; global.Worker = require("workerjs"); diff --git a/src/utils/test-head.js b/src/utils/test-head.js index e995c27f86..6f26353514 100644 --- a/src/utils/test-head.js +++ b/src/utils/test-head.js @@ -41,7 +41,7 @@ function commonLog(msg: string, data: any = {}) { function makeSource(name: string, props: any = {}) { return Object.assign({ id: name, - url: `http://example.com/test/sourcemaps/${name}` + url: `http://localhost:8000/examples/${name}` }, props); }