History: Option to disable hard navigation in favor of BOOMR.page_rea…

…dy()

Gruntfile.js

@@ -642,7 +642,9 @@ module.exports = function() {
 					"tests/unit/**/*",
 					"tests/test-templates/**/*.js",
 					"!tests/page-templates/12-react/support/*.jsx",
-					"!*.#*"
+					"!*.#*",
+					"!*~",
+					"!#*#"
 				],
 				tasks: ["pages-builder"]
 			},

plugins/history.js

@@ -6,7 +6,8 @@
 		hooked: false,
 		routeHooked: false,
 		hadMissedRouteChange: false,
-		routeChangeInProgress: false
+		routeChangeInProgress: false,
+		disableHardNav: false
 	};
 
 	// Checking for Plugins required and if already integrated
@@ -154,6 +155,9 @@
 			return true;
 		},
 		hook: function(history, hadRouteChange, options) {
+			options = options || {};
+			options.disableHardNav = impl.disableHardNav;
+
 			if (impl.hooked) {
 				return this;
 			}
@@ -166,7 +170,7 @@
 			return this;
 		},
 		init: function(config) {
-			BOOMR.utils.pluginConfig(impl, config, "History", ["auto", "enabled"]);
+			BOOMR.utils.pluginConfig(impl, config, "History", ["auto", "enabled", "disableHardNav"]);
 
 			if (impl.auto && impl.enabled) {
 				this.hook(undefined, true, {});

plugins/spa.js

@@ -7,6 +7,7 @@
 	    firstSpaNav = true,
 	    routeFilter = false,
 	    routeChangeWaitFilter = false,
+	    disableHardNav = false,
 	    supported = [],
 	    latestResource,
 	    waitingOnHardMissedComplete = false;
@@ -127,8 +128,13 @@
 			// ensure the beacon is held until this SPA hard beacon is ready
 			waitingOnHardMissedComplete = true;
 
-			// Trigger a route change
-			BOOMR.plugins.SPA.route_change(impl.spaHardMissedOnComplete);
+			if (!disableHardNav) {
+				// Trigger a route change
+				BOOMR.plugins.SPA.route_change(impl.spaHardMissedOnComplete);
+			}
+			else {
+				waitingOnHardMissedComplete = false;
+			}
 		},
 		/**
 		 * Called by a framework when it has hooked into the target SPA
@@ -145,12 +151,6 @@
 				return this;
 			}
 
-			if (hadRouteChange) {
-				// kick off onLoadSpaHardMissed once onload has fired, or immediately
-				// if onload has already fired
-				BOOMR.attach_page_ready(this.onLoadSpaHardMissed);
-			}
-
 			if (typeof options.routeFilter === "function") {
 				routeFilter = options.routeFilter;
 			}
@@ -159,6 +159,16 @@
 				routeChangeWaitFilter = options.routeChangeWaitFilter;
 			}
 
+			if (options.disableHardNav) {
+				disableHardNav = options.disableHardNav;
+			}
+
+			if (hadRouteChange) {
+				// kick off onLoadSpaHardMissed once onload has fired, or immediately
+				// if onload has already fired
+				BOOMR.attach_page_ready(this.onLoadSpaHardMissed);
+			}
+
 			hooked = true;
 
 			return this;
@@ -196,7 +206,7 @@
 				timing: {
 					requestStart: requestStart
 				},
-				initiator: firstSpaNav ? "spa_hard" : "spa",
+				initiator: firstSpaNav && !disableHardNav ? "spa_hard" : "spa",
 				url: url
 			};
 

tests/page-templates/12-react/108-hard-nav-disable.html

@@ -0,0 +1,35 @@
+<%= header %>
+<%= boomerangScript %>
+
+<script src="support/function-bind-polyfill.js" type="text/javascript"></script>
+
+<script>
+window.imgs = [500];
+
+window.html5_mode = false;
+
+window.call_page_ready = true;
+
+// view a widget then come back so debugging (F5) is easier
+window.nav_routes = ["/widgets/1", "/"];
+
+// disable the React hook and use window.history (via auto:true)
+window.reactDisableBoomerangHook = true;
+</script>
+
+<div id="root"></div>
+<script>
+BOOMR_test.init({
+	testAfterOnBeacon: 3,
+	History: {
+		disableHardNav: true,
+		enabled: true,
+		auto: true
+	},
+	autorun: false
+});
+</script>
+<script src="108-hard-nav-disable.js"></script>
+
+<script src="support/app.js"></script>
+<%= footer %>

tests/page-templates/12-react/108-hard-nav-disable.js

@@ -0,0 +1,46 @@
+/*eslint-env mocha*/
+/*global BOOMR_test,describe,it,assert*/
+
+describe("e2e/12-react/108-hard-nav-disable", function() {
+	var tf = BOOMR.plugins.TestFramework;
+	var t = BOOMR_test;
+
+	var pathName = window.location.pathname;
+
+	it("Should pass basic beacon validation", function(done) {
+		t.validateBeaconWasSent(done);
+	});
+
+	it("Should have sent three beacons", function() {
+		assert.equal(tf.beacons.length, 3);
+	});
+
+	it("Should have first beacon be navigation beacon", function() {
+		var b = tf.beacons[0];
+		if (t.isNavigationTimingSupported()) {
+			assert.equal(b["rt.start"], "navigation");
+		}
+		else {
+			assert.equal(b["rt.start"], "none");
+		}
+		assert.isUndefined(b["http.initiator"]);
+	});
+
+	it("Should have a t_done close to 'timestamp - navigationStart'", function() {
+		var b = tf.beacons[0];
+		if (t.isNavigationTimingSupported()) {
+			var navStToBoomrTDoneDelta = window.boomr_t_done - window.performance.timing.navigationStart;
+			assert.closeTo(navStToBoomrTDoneDelta, b.t_done, 100);
+		}
+	});
+
+	it("Second beacon should be soft navigation beacon", function() {
+		var b = tf.beacons[1];
+		assert.equal(b["http.initiator"], "spa");
+	});
+
+	it("Third beacon should be soft navigation beacon", function() {
+		var b = tf.beacons[2];
+		assert.equal(b["http.initiator"], "spa");
+	});
+});

tests/page-templates/12-react/21-constant-mutations.html

@@ -26,5 +26,5 @@
 	document.getElementById("content").appendChild(node);
 }, 100);
 </script>
-<%= footer %>
 
+<%= footer %>

tests/page-templates/12-react/support/app.jsx

@@ -71,7 +71,7 @@ const App = React.createClass({
 			if (!subscribed) {
 				BOOMR.subscribe("onbeacon", function(beacon) {
 					// only continue for SPA beacons
-					if (!BOOMR.utils.inArray(beacon["http.initiator"], BOOMR.constants.BEACON_TYPE_SPAS)) {
+					if (!BOOMR.utils.inArray(beacon["http.initiator"], BOOMR.constants.BEACON_TYPE_SPAS) && !window.call_page_ready) {
 						return;
 					}
 
@@ -154,6 +154,12 @@ const Home = React.createClass({
 		}
 		return widgetsElements;
 	},
+	imageOnload() {
+		if (window.call_page_ready && !window.boomr_t_done) {
+			window.boomr_t_done = BOOMR.now();
+			BOOMR.page_ready();
+		}
+	},
 	render() {
 		var widgetsElements = this.renderWidgets();
 
@@ -166,7 +172,7 @@ const Home = React.createClass({
 				};
 				var src = `/delay?delay=${this.state.imgs[delayIndex]}&file=pages/12-react/support/img.jpg&id=home&rnd=${this.state.rnd}`;
 				images.push(<div className="image-home" key={delayIndex}>
-				  <img key={delayIndex} src={src} style={style}/>
+				  <img onLoad={this.imageOnload} key={delayIndex} src={src} style={style}/>
 				</div>);
 			}