feat: add pause button

lib/atom-reporter/atom-reporter.js

@@ -146,12 +146,20 @@ export default class AtomReporter {
 
 	suiteDone() {}
 
-	specStarted(spec) {
-		this.specs[spec.id].startedAt = Date.now();
-		this.j3Reporter.update({
-			specs: this.specs,
-			currentSpec: this.specs[spec.id],
-		});
+	specStarted(spec, done) {
+		const startNextSpec = () => {
+			this.specs[spec.id].startedAt = Date.now();
+			this.j3Reporter.update({
+				specs: this.specs,
+				currentSpec: this.specs[spec.id],
+			});
+			done();
+		};
+		if (this.j3Reporter.isPaused()) {
+			this.j3Reporter.onResume(startNextSpec);
+		} else {
+			startNextSpec();
+		}
 	}
 
 	specDone(spec) {

lib/atom-reporter/css/jasmine.less

@@ -105,7 +105,9 @@ body.minimize-specs {
 		list-style: none;
 	}
 
-	.reload-button {
+	.pause-button,
+	.reload-button,
+	.resume-button {
 		color: #333;
 		background-color: #fff;
 		border: 1px solid #ccc;
@@ -116,10 +118,15 @@ body.minimize-specs {
 		}
 	}
 
+	.reload-button {
+		margin-left: 5px;
+	}
+
 	.symbol-header {
 		font-size: 18px;
 		font-weight: bold;
 		padding-bottom: 10px;
+		padding-top: 10px;
 	}
 
 	.symbol-area {

lib/atom-reporter/deprecation-view.js

@@ -9,13 +9,13 @@ const defaultProps = {
 
 export default class DeprecationView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/expectation-view.js

@@ -14,13 +14,13 @@ const defaultProps = {
 
 export default class ExpectationView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/j3-reporter-view.js

@@ -15,18 +15,20 @@ const defaultProps = {
 	endedAt: null,
 	currentSpec: null,
 	topSuite: null,
+	paused: false,
+	timePaused: 0,
 };
 
 export default class J3ReporterView {
 	constructor(props) {
 
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}
@@ -35,6 +37,34 @@ export default class J3ReporterView {
 		return etch.destroy(this);
 	}
 
+	onResume(func) {
+		this.resumeFunc = func;
+	}
+
+	onResumeClick() {
+		if (this.isPaused()) {
+			this.update({
+				paused: false,
+				timePaused: this.props.timePaused + (Date.now() - this.props.paused)
+			});
+			if (this.resumeFunc) {
+				const done = this.resumeFunc;
+				this.resumeFunc = null;
+				done();
+			}
+		}
+	}
+
+	isPaused() {
+		return !!this.props.paused;
+	}
+
+	onPauseClick() {
+		if (!this.isPaused()) {
+			this.update({ paused: Date.now() });
+		}
+	}
+
 	onReloadClick() {
 		atom.reload();
 	}
@@ -171,6 +201,8 @@ export default class J3ReporterView {
 			<div className="j3-spec-reporter-container">
 				<div className="spec-reporter">
 					<div className="padded pull-right">
+						<button className={`btn btn-small resume-button ${this.props.paused ? "" : "hidden"}`} on={{ click: this.onResumeClick }}>Resume</button>
+						<button className={`btn btn-small pause-button ${this.props.paused ? "hidden" : ""}`} on={{ click: this.onPauseClick }}>Pause</button>
 						<button className="btn btn-small reload-button" on={{ click: this.onReloadClick }}>Reload Specs</button>
 					</div>
 					<div className="symbol-area">
@@ -182,7 +214,7 @@ export default class J3ReporterView {
 						</ul>
 					</div>
 					<div className={`status alert ${statusClass}`}>
-						<TimerView startedAt={this.props.startedAt} endedAt={this.props.endedAt} />
+						<TimerView startedAt={this.props.startedAt} endedAt={this.props.endedAt} paused={this.isPaused()} timePaused={this.props.timePaused} />
 						<div className="spec-count">
 							{
 								skippedCount > 0 ?

lib/atom-reporter/results-view.js

@@ -14,13 +14,13 @@ const defaultProps = {
 
 export default class ResultsView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/spec-result-view.js

@@ -15,13 +15,13 @@ const defaultProps = {
 
 export default class SpecResultView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/stack-trace-view.js

@@ -13,13 +13,13 @@ const defaultProps = {
 
 export default class StackTraceView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/suite-result-view.js

@@ -16,13 +16,13 @@ const defaultProps = {
 
 export default class SuiteResultView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/tabs-view.js

@@ -13,13 +13,13 @@ const defaultProps = {
 
 export default class TabsView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}

lib/atom-reporter/timer-view.js

@@ -7,30 +7,27 @@ const defaultProps = {
 	time: 0,
 	startedAt: null,
 	endedAt: null,
+	timePaused: 0,
 };
 
 export default class TimerView {
 	constructor(props) {
 
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		this.tick = this.tick.bind(this);
 
 		etch.initialize(this);
 
-		if (this.props.startedAt && !this.props.endedAt) {
-			requestAnimationFrame(this.tick);
-		}
+		this.tick();
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		const update = etch.update(this);
 
-		if (this.props.startedAt && !this.props.endedAt) {
-			requestAnimationFrame(this.tick);
-		}
+		this.tick();
 
 		return update;
 	}
@@ -40,9 +37,13 @@ export default class TimerView {
 	}
 
 	tick() {
-		this.update({
-			time: ((this.props.endedAt || Date.now()) - this.props.startedAt) / 1000
-		});
+		if (this.props.startedAt && !this.props.endedAt && !this.props.paused) {
+			requestAnimationFrame(() => {
+				this.update({
+					time: ((this.props.endedAt || Date.now()) - this.props.startedAt - this.props.timePaused) / 1000
+				});
+			});
+		}
 	}
 
 	render() {

lib/setup-view.js

@@ -20,7 +20,7 @@ const divStyle = {
 
 export default class SetupView {
 	constructor(props) {
-		this.props = Object.assign({}, defaultProps, props);
+		this.props = { ...defaultProps, ...props };
 
 		etch.initialize(this);
 	}
@@ -33,7 +33,7 @@ export default class SetupView {
 	}
 
 	update(props) {
-		this.props = Object.assign({}, this.props, props);
+		this.props = { ...this.props, ...props };
 
 		return etch.update(this);
 	}