test: add unit tests for user molecule (#69)

* refactor: use normal dash in title to avoid html entities

This might result in ugly titles in some browsers.

* test: add unit tests for user molecule

src/molecules/user/user-meta.js

@@ -5,7 +5,7 @@ import { propTypes, defaultProps } from './prop-type';
 
 export default function UserMoleculeMeta(props) {
 	const title = props.description
-		? `${props.name} (${props.username}) – ${props.description}`
+		? `${props.name} (${props.username}) - ${props.description}`
 		: `${props.name} (${props.username})`;
 
 	const keywords = props.description

src/molecules/user/user-meta.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Helmet from 'react-helmet';
+import UserMeta from './user-meta';
+
+describe('molecules/user/user-meta', () => {
+	it('renders correct title and keywords', () => {
+		mount(
+			<UserMeta
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+			/>
+		);
+
+		const peek = Helmet.peek();
+
+		expect(peek.title).toBe('Cedric van Putten (byCedric)');
+		expect(peek.metaTags)
+			.toContainEqual({ name: 'keywords', content: 'Cedric van Putten, byCedric' })
+			.toContainEqual({ name: 'description', content: '' });
+	});
+
+	it('renders correct title, keywords and description', () => {
+		mount(
+			<UserMeta
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+				description='Lead developer @Peakfijn.'
+			/>
+		);
+
+		const peek = Helmet.peek();
+
+		expect(peek.title).toBe('Cedric van Putten (byCedric) - Lead developer @Peakfijn.');
+		expect(peek.metaTags)
+			.toContainEqual({ name: 'keywords', content: 'Cedric van Putten, byCedric, Peakfijn' })
+			.toContainEqual({ name: 'description', content: 'Lead developer @Peakfijn.' });
+	});
+
+	it('renders correct open graph title, description and image', () => {
+		mount(
+			<UserMeta
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+				description='Lead developer @Peakfijn.'
+			/>
+		);
+
+		expect(Helmet.peek().metaTags)
+			.toContainEqual({ property: 'og:title', content: 'Cedric van Putten (byCedric) - Lead developer @Peakfijn.' })
+			.toContainEqual({ property: 'og:description', content: 'Lead developer @Peakfijn.' })
+			.toContainEqual({ property: 'og:image', content: 'https://github.com/bycedric.png?size=240' });
+	});
+
+	it('renders correct open graph profile username, first and last name', () => {
+		mount(
+			<UserMeta
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+			/>
+		);
+
+		expect(Helmet.peek().metaTags)
+			.toContainEqual({ property: 'profile:username', content: 'byCedric' })
+			.toContainEqual({ property: 'profile:first_name', content: 'Cedric' })
+			.toContainEqual({ property: 'profile:last_name', content: 'van Putten' });
+	});
+});

src/molecules/user/user.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Avatar from 'src/atoms/avatar';
+import Highlight from 'src/atoms/highlight';
+import User from './user';
+import UserMeta from './user-meta';
+
+describe('molecules/user/user', () => {
+	it('renders an avatar component with the avatar url', () => {
+		const component = mount(
+			<User
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+			/>
+		);
+
+		expect(component.find(Avatar))
+			.toHaveProp('url', 'https://github.com/bycedric.png')
+			.toHaveProp('name', 'Cedric van Putten (byCedric)')
+			.toHaveProp('title', 'Cedric van Putten (byCedric)');
+	});
+
+	it('renders a header with the user (full) name', () => {
+		const component = mount(
+			<User
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+			/>
+		);
+
+		expect(component.find('h1'))
+			.toHaveText('Cedric van Putten');
+	});
+
+	it('renders a highlight component with the user description', () => {
+		const highlighters = { '#': () => 'hashtag' };
+		const component = mount(
+			<User
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+				description='Lead developer @Peakfijn.'
+				highlights={highlighters}
+			/>
+		);
+
+		expect(component.find(Highlight))
+			.toHaveText('Lead developer @Peakfijn.')
+			.toHaveProp('decorators', highlighters);
+	});
+
+	it('renders the user meta component', () => {
+		const component = mount(
+			<User
+				name='Cedric van Putten'
+				username='byCedric'
+				avatarUrl='https://github.com/bycedric.png'
+				description='Lead developer @Peakfijn.'
+			/>
+		);
+
+		expect(component.find(UserMeta))
+			.toHaveProp('name', 'Cedric van Putten')
+			.toHaveProp('username', 'byCedric')
+			.toHaveProp('avatarUrl', 'https://github.com/bycedric.png')
+			.toHaveProp('description', 'Lead developer @Peakfijn.');
+	});
+});