test: Progress, though still incomplete

Author: rschristian

test/router.test.js

@@ -66,7 +66,8 @@ describe('Router', () => {
 			scratch
 		);
 
-		loc.route('/a/');
+		navigation.navigate('/a/');
+
 		await sleep(1);
 
 		expect(loc).to.deep.include({
@@ -195,7 +196,7 @@ describe('Router', () => {
 		});
 
 		Home.resetHistory();
-		loc.route('/profiles');
+		navigation.navigate('/profiles');
 		await sleep(1);
 
 		expect(scratch).to.have.property('textContent', 'Profiles');
@@ -211,7 +212,7 @@ describe('Router', () => {
 		});
 
 		Profiles.resetHistory();
-		loc.route('/profiles/bob');
+		navigation.navigate('/profiles/bob');
 		await sleep(1);
 
 		expect(scratch).to.have.property('textContent', 'Profile: bob');
@@ -229,7 +230,7 @@ describe('Router', () => {
 		});
 
 		Profile.resetHistory();
-		loc.route('/other?a=b&c=d');
+		navigation.navigate('/other?a=b&c=d');
 		await sleep(1);
 
 		expect(scratch).to.have.property('textContent', 'Fallback');
@@ -283,7 +284,7 @@ describe('Router', () => {
 		expect(A).to.have.been.calledWith({ path: '/', searchParams: {}, pathParams: {} });
 
 		A.resetHistory();
-		loc.route('/b');
+		navigation.navigate('/b');
 
 		expect(scratch).to.have.property('innerHTML', '<h1>A</h1><p>hello</p>');
 		expect(A).not.to.have.been.called;
@@ -303,18 +304,18 @@ describe('Router', () => {
 		expect(B).to.have.been.calledWith({ path: '/b', searchParams: {}, pathParams: {} });
 
 		B.resetHistory();
-		loc.route('/c');
-		loc.route('/c?1');
-		loc.route('/c');
+		navigation.navigate('/c');
+		navigation.navigate('/c?1');
+		navigation.navigate('/c');
 
 		expect(scratch).to.have.property('innerHTML', '<h1>B</h1><p>hello</p>');
 		expect(B).not.to.have.been.called;
 
 		await sleep(1);
 
-		loc.route('/c');
-		loc.route('/c?2');
-		loc.route('/c');
+		navigation.navigate('/c');
+		navigation.navigate('/c?2');
+		navigation.navigate('/c');
 
 		expect(scratch).to.have.property('innerHTML', '<h1>B</h1><p>hello</p>');
 		// We should never re-invoke <B /> while loading <C /> (that would be a remount of the old route):
@@ -332,7 +333,7 @@ describe('Router', () => {
 
 		C.resetHistory();
 		B.resetHistory();
-		loc.route('/b');
+		navigation.navigate('/b');
 		await sleep(1);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>B</h1><p>hello</p>');
@@ -342,7 +343,7 @@ describe('Router', () => {
 
 		A.resetHistory();
 		B.resetHistory();
-		loc.route('/');
+		navigation.navigate('/');
 		await sleep(1);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>A</h1><p>hello</p>');
@@ -386,21 +387,21 @@ describe('Router', () => {
 		expect(renderRefCount).to.equal(2);
 
 		renderRefCount = 0;
-		loc.route('/b/a');
+		navigation.navigate('/b/a');
 		await sleep(10);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>b/a</h1>');
 		expect(renderRefCount).to.equal(4);
 
 		renderRefCount = 0;
-		loc.route('/b/b');
+		navigation.navigate('/b/b');
 		await sleep(10);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>b/b</h1>');
 		expect(renderRefCount).to.equal(1);
 
 		renderRefCount = 0;
-		loc.route('/');
+		navigation.navigate('/');
 		await sleep(10);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>a</h1>');
@@ -490,7 +491,8 @@ describe('Router', () => {
 		loadEnd.resetHistory();
 		routeChange.resetHistory();
 
-		loc.route('/b');
+		navigation.navigate('/b');
+
 		await sleep(1);
 
 		expect(loadStart).to.have.been.calledWith('/b');
@@ -547,7 +549,7 @@ describe('Router', () => {
 		expect(loadEnd).not.to.have.been.called;
 	});
 
-	describe('intercepted VS external links', () => {
+	describe.only('intercepted VS external links', () => {
 		const shouldIntercept = [null, '', '_self', 'self', '_SELF'];
 		const shouldNavigate = ['_top', '_parent', '_blank', 'custom', '_BLANK'];
 
@@ -627,8 +629,6 @@ describe('Router', () => {
 		const shouldIntercept = ['/app', '/app/deeper'];
 		const shouldNavigate = ['/site', '/site/deeper'];
 
-		const clickHandler = sinon.fake(e => e.preventDefault());
-
 		const Links = () => (
 			<>
 				<a href="/app">Internal Link</a>
@@ -638,23 +638,6 @@ describe('Router', () => {
 			</>
 		);
 
-		let pushState;
-
-		before(() => {
-			pushState = sinon.spy(history, 'pushState');
-			addEventListener('click', clickHandler);
-		});
-
-		after(() => {
-			pushState.restore();
-			removeEventListener('click', clickHandler);
-		});
-
-		beforeEach(async () => {
-			clickHandler.resetHistory();
-			pushState.resetHistory();
-		});
-
 		it('should intercept clicks on links matching the `scope` props (string)', async () => {
 			render(
 				<LocationProvider scope="/app">
@@ -668,15 +651,10 @@ describe('Router', () => {
 				scratch.querySelector(`a[href="${url}"]`).click();
 				await sleep(1);
 				expect(loc).to.deep.include({ url });
-				expect(pushState).to.have.been.calledWith(null, '', url);
-				expect(clickHandler).to.have.been.called;
-
-				pushState.resetHistory();
-				clickHandler.resetHistory();
 			}
 		});
 
-		it('should allow default browser navigation for links not matching the `scope` props (string)', async () => {
+		it.skip('should allow default browser navigation for links not matching the `scope` props (string)', async () => {
 			render(
 				<LocationProvider scope="app">
 					<Links />
@@ -688,11 +666,8 @@ describe('Router', () => {
 			for (const url of shouldNavigate) {
 				scratch.querySelector(`a[href="${url}"]`).click();
 				await sleep(1);
-				expect(pushState).not.to.have.been.called;
-				expect(clickHandler).to.have.been.called;
 
-				pushState.resetHistory();
-				clickHandler.resetHistory();
+				// TODO: How to test this?
 			}
 		});
 
@@ -709,15 +684,10 @@ describe('Router', () => {
 				scratch.querySelector(`a[href="${url}"]`).click();
 				await sleep(1);
 				expect(loc).to.deep.include({ url });
-				expect(pushState).to.have.been.calledWith(null, '', url);
-				expect(clickHandler).to.have.been.called;
-
-				pushState.resetHistory();
-				clickHandler.resetHistory();
 			}
 		});
 
-		it('should allow default browser navigation for links not matching the `scope` props (regex)', async () => {
+		it.skip('should allow default browser navigation for links not matching the `scope` props (regex)', async () => {
 			render(
 				<LocationProvider scope={/^\/app/}>
 					<Links />
@@ -729,19 +699,23 @@ describe('Router', () => {
 			for (const url of shouldNavigate) {
 				scratch.querySelector(`a[href="${url}"]`).click();
 				await sleep(1);
-				expect(pushState).not.to.have.been.called;
-				expect(clickHandler).to.have.been.called;
 
-				pushState.resetHistory();
-				clickHandler.resetHistory();
+				// TODO: How to test this?
 			}
 		});
 	});
 
 	it('should scroll to top when navigating forward', async () => {
 		const scrollTo = sinon.spy(window, 'scrollTo');
 
-		const Route = sinon.fake(() => <div style={{ height: '1000px' }}><a href="/link">link</a></div>);
+		const Route = sinon.fake(
+			() => (
+				<div style={{ height: '1000px' }}>
+					<a href="/link">link</a>
+				</div>
+			)
+		);
+
 		render(
 			<LocationProvider>
 				<Router>
@@ -756,7 +730,7 @@ describe('Router', () => {
 		expect(Route).to.have.been.calledOnce;
 		Route.resetHistory();
 
-		loc.route('/programmatic');
+		navigation.navigate('/programmatic');
 		await sleep(1);
 
 		expect(loc).to.deep.include({ url: '/programmatic' });
@@ -779,14 +753,13 @@ describe('Router', () => {
 	});
 
 	it('should ignore clicks on document fragment links', async () => {
-		const pushState = sinon.spy(history, 'pushState');
-
 		const Route = sinon.fake(
 			() => <div>
 				<a href="#foo">just #foo</a>
 				<a href="/other#bar">other #bar</a>
 			</div>
 		);
+
 		render(
 			<LocationProvider>
 				<Router>
@@ -799,7 +772,6 @@ describe('Router', () => {
 			scratch
 		);
 
-		expect(Route).to.have.been.calledOnce;
 		Route.resetHistory();
 
 		scratch.querySelector('a[href="#foo"]').click();
@@ -808,22 +780,17 @@ describe('Router', () => {
 		// NOTE: we don't (currently) propagate in-page anchor navigations into context, to avoid useless renders.
 		expect(loc).to.deep.include({ url: '/' });
 		expect(Route).not.to.have.been.called;
-		expect(pushState).not.to.have.been.called;
 		expect(location.hash).to.equal('#foo');
 
 		scratch.querySelector('a[href="/other#bar"]').click();
 		await sleep(1);
 
 		expect(Route).to.have.been.calledOnce;
 		expect(loc).to.deep.include({ url: '/other#bar', path: '/other' });
-		expect(pushState).to.have.been.called;
 		expect(location.hash).to.equal('#bar');
-
-		pushState.restore();
 	});
 
 	it('should normalize children', async () => {
-		const pushState = sinon.spy(history, 'pushState');
 		const Route = sinon.fake(() => <a href="/foo#foo">foo</a>);
 
 		const routes = ['/foo', '/bar'];
@@ -846,9 +813,6 @@ describe('Router', () => {
 
 		expect(Route).to.have.been.calledOnce;
 		expect(loc).to.deep.include({ url: '/foo#foo', path: '/foo' });
-		expect(pushState).to.have.been.called;
-
-		pushState.restore();
 	});
 
 	it('should match nested routes', async () => {
@@ -905,25 +869,30 @@ describe('Router', () => {
 	});
 
 	it('should replace the current URL', async () => {
-		const pushState = sinon.spy(history, 'pushState');
-		const replaceState = sinon.spy(history, 'replaceState');
-
 		render(
 			<LocationProvider>
 				<Router>
+					<Route path="/" component={() => null} />
 					<Route path="/foo" component={() => null} />
+					<Route path="/bar" component={() => null} />
 				</Router>
 				<ShallowLocation />
 			</LocationProvider>,
 			scratch
 		);
 
-		loc.route("/foo", true);
-		expect(pushState).not.to.have.been.called;
-		expect(replaceState).to.have.been.calledWith(null, "", "/foo");
+		navigation.navigate('/foo');
+		navigation.navigate('/bar', { history: 'replace' });
+
+		const entries = navigation.entries();
+
+		// Top of the stack
+		const last = new URL(entries[entries.length - 1].url);
+		expect(last.pathname).to.equal('/bar');
 
-		pushState.restore();
-		replaceState.restore();
+		// Entry before
+		const secondLast = new URL(entries[entries.length - 2].url);
+		expect(secondLast.pathname).to.equal('/');
 	});
 
 	it('should support using `Router` as an implicit suspense boundary', async () => {