test: add unit tests for github user organism (#70)

* fix: render label instead of children in github user keyword highlight

* test: add unit tests for github user highlights

* test: add unit test for github user organism

Because of inline render functions being used, we have to compare the actual HTML instead of validating the component with `.find()`...

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+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 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}
+			/>
+		);
+
+		await promise;
+
+		// because of the inline render function we can't use `.find()`
+		expect(parentComponent.html()).toContain(childComponent.html());
+	});
+});

src/organisms/github-user/highlights/keyword.js

@@ -5,7 +5,7 @@ import { GithubUserKeywordHighlight } from '../elements';
 export default function GithubUserOrganismKeyword(props) {
 	return (
 		<GithubUserKeywordHighlight>
-			{props.children}
+			{props.label}
 		</GithubUserKeywordHighlight>
 	);
 }

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import HighlightKeyword from './keyword';
+
+describe('organisms/github-user/highlights/keyword', () => {
+	it('renders a simple element with keyword', () => {
+		const component = mount(
+			<HighlightKeyword label='#repo' />
+		);
+
+		expect(component).toHaveText('#repo');
+	});
+
+	it('defines a (partial) decorator for "#" character', () => {
+		const component = mount(
+			HighlightKeyword.decorator['#']('match', 'text', '1337')
+		);
+
+		expect(component).toHaveText('text');
+	});
+});

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import HighlightMention from './mention';
+
+describe('organisms/github-user/highlights/mention', () => {
+	it('renders a link element with github link', () => {
+		const component = mount(
+			<HighlightMention
+				label='@byCedric'
+				username='byCedric'
+			/>
+		);
+
+		expect(component.find('a'))
+			.toHaveText('@byCedric')
+			.toMatchSelector('[href="https://github.com/byCedric"]')
+			.toMatchSelector('[target="_blank"]');
+	});
+
+	it('defines a (partial) decorator for "@" character', () => {
+		const component = mount(
+			HighlightMention.decorator['@']('match', 'text', '1337')
+		);
+
+		expect(component.find('a'))
+			.toHaveText('match')
+			.toMatchSelector('[href="https://github.com/text"]');
+	});
+});