test: clean up dirty tests and add app page component test (#71)

* test: refactor github organism test code with `.update()`

This is a better workaround as opposed to comparing html output.

enzymejs/enzyme#1233

* test: change github user highlight tests to `.update()` workaround

* test: add unit tests for app page component

Author: byCedric

src/organisms/github-user/github-user.test.js

@@ -4,33 +4,27 @@ import UserMolecule from 'src/molecules/user';
 import GithubUser from './github-user';
 import highlights from './highlights';
 
-const data = {
-	name: 'Cedric van Putten',
-	login: 'byCedric',
-	avatar_url: 'https://github.com/bycedric.png',
-	bio: 'Lead developer @Peakfijn.',
-};
-
 describe('organisms/github-user/github-user', () => {
 	it('renders the user molecule component', async () => {
+		const data = {
+			name: 'Cedric van Putten',
+			login: 'byCedric',
+			avatar_url: 'https://github.com/bycedric.png',
+			bio: 'Lead developer @Peakfijn.',
+		};
+
 		const promise = Promise.resolve({ json: () => data });
 
 		global.fetch = jest.fn().mockReturnValue(promise);
 
-		const parentComponent = mount(<GithubUser />);
-		const childComponent = mount(
-			<UserMolecule
-				name={data.name}
-				username={data.login}
-				avatarUrl={data.avatar_url}
-				description={data.bio}
-				highlights={highlights}
-			/>
-		);
-
+		const component = mount(<GithubUser />);
 		await promise;
 
-		// because of the inline render function we can't use `.find()`
-		expect(parentComponent.html()).toContain(childComponent.html());
+		expect(component.update().find(UserMolecule))
+			.toHaveProp('name', data.name)
+			.toHaveProp('username', data.login)
+			.toHaveProp('avatarUrl', data.avatar_url)
+			.toHaveProp('description', data.bio)
+			.toHaveProp('highlights', highlights);
 	});
 });

src/organisms/github-user/highlights/keywords.test.js

@@ -13,9 +13,10 @@ describe('organisms/github-user/highlights/keyword', () => {
 
 	it('defines a (partial) decorator for "#" character', () => {
 		const component = mount(
-			HighlightKeyword.decorator['#']('match', 'text', '1337')
+			HighlightKeyword.decorator['#']('match', 'text')
 		);
 
-		expect(component).toHaveText('text');
+		expect(component.update().find(HighlightKeyword))
+			.toHaveProp('label', 'text');
 	});
 });

src/organisms/github-user/highlights/mention.test.js

@@ -19,11 +19,11 @@ describe('organisms/github-user/highlights/mention', () => {
 
 	it('defines a (partial) decorator for "@" character', () => {
 		const component = mount(
-			HighlightMention.decorator['@']('match', 'text', '1337')
+			HighlightMention.decorator['@']('match', 'text')
 		);
 
-		expect(component.find('a'))
-			.toHaveText('match')
-			.toMatchSelector('[href="https://github.com/text"]');
+		expect(component.update().find(HighlightMention))
+			.toHaveProp('label', 'match')
+			.toHaveProp('username', 'text');
 	});
 });

src/pages/app/app.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import GithubUserOrganism from 'src/organisms/github-user';
+import App from './app';
+
+describe('pages/app/app', () => {
+	it('renders github organism component', () => {
+		expect(shallow(<App />).find(GithubUserOrganism))
+			.toExist();
+	});
+});