test: add extra tests to atom components (#67)

* test: add extra assertions in avatar atom

* test: add highlight tests for decorator and component

src/atoms/avatar/avatar.test.js

@@ -1,19 +1,21 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { mount } from 'enzyme';
 import Avatar from './avatar';
 
-describe('atoms/avatar', () => {
-	it('renders without crashing', () => {
-		const div = document.createElement('div');
-		const component = (
+describe('atoms/avatar/avatar', () => {
+	it('renders an image element', () => {
+		const component = mount(
 			<Avatar
-				url="https://avatars2.githubusercontent.com/u/1203991?v=4"
-				name="Cedric van Putten"
-				title="Cedric van Putten - @byCedric"
+				url='https://github.com/bycedric.png'
+				name='Cedric van Putten'
+				title='Cedric van Putten - @byCedric'
 			/>
 		);
 
-		ReactDOM.render(component, div);
-		ReactDOM.unmountComponentAtNode(div);
-	});
+		expect(component.find('img'))
+			.toExist()
+			.toMatchSelector('[src="https://github.com/bycedric.png"]')
+			.toMatchSelector('[alt="Cedric van Putten"]')
+			.toMatchSelector('[title="Cedric van Putten - @byCedric"]')
+	})
 });

src/atoms/highlight/decorator.test.js

@@ -0,0 +1,39 @@
+import decorator from './decorator';
+
+describe('atoms/highlight/decorator', () => {
+	it('decorates string using decorators', () => {
+		const input = 'Something something @mention, something #keyword something.';
+		const decorators = {
+			'@': jest.fn(() => 'decorated-at'),
+			'#': jest.fn(() => 'decorated-hashtag'),
+		};
+
+		const output = decorator(input, decorators);
+
+		expect(decorators['@']).toHaveBeenCalledWith('@mention', 'mention', 1);
+		expect(decorators['#']).toHaveBeenCalledWith('#keyword', 'keyword', 3);
+		expect(output)
+			.toHaveLength(5)
+			.toContain('Something something ')
+			.toContain('decorated-at')
+			.toContain(', something ')
+			.toContain('decorated-hashtag')
+			.toContain(' something.');
+	});
+
+	it('decorates string without decorator matches', () => {
+		const input = 'Something something mention, something keyword something.';
+		const decorators = {
+			'@': jest.fn(() => 'decorated-at'),
+			'#': jest.fn(() => 'decorated-hashtag'),
+		};
+
+		const output = decorator(input, decorators);
+
+		expect(decorators['@']).not.toHaveBeenCalled();
+		expect(decorators['#']).not.toHaveBeenCalled();
+		expect(output)
+			.toHaveLength(1)
+			.toContain(input);
+	});
+});

src/atoms/highlight/highlight.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Highlight from './highlight';
+
+describe('atoms/highlight/highlight', () => {
+	it('renders paragraph without decorator matches', () => {
+		const text = 'This is my text without decorators.';
+		const decorators = {
+			'#': () => 'hashtag',
+			'@': () => 'at',
+		};
+
+		const component = mount(
+			<Highlight decorators={decorators}>
+				{text}
+			</Highlight>
+		);
+
+		expect(component.find('p'))
+			.toExist()
+			.toHaveText(text);
+	});
+
+	it('renders paragraph with decorator matches', () => {
+		const text = 'This is my #text with @decorators.';
+		const decorators = {
+			'#': () => 'hashtag',
+			'@': () => 'at',
+		};
+
+		const component = mount(
+			<Highlight decorators={decorators}>
+				{text}
+			</Highlight>
+		);
+
+		expect(component.find('p'))
+			.toExist()
+			.toHaveText('This is my hashtag with at.');
+	});
+
+	it('renders paragraph with elements with decorator matches', () => {
+		const text = 'This is my #text with @decorators.';
+		const decorators = {
+			'@': (text, _, key) => <a key={key} href='#'>{text}</a>,
+		};
+
+		const component = mount(
+			<Highlight decorators={decorators}>
+				{text}
+			</Highlight>
+		);
+
+		expect(component.find('p'))
+			.toExist()
+			.toHaveText(text);
+
+		expect(component.find('a'))
+			.toExist()
+			.toHaveText('@decorators')
+			.toMatchSelector('[href="#"]');
+	});
+});