List spec - refactor

carloluis · Dec 23, 2017 · c60bcec · c60bcec
1 parent 71bbee7
commit c60bcec
Showing 1 changed file with 84 additions and 103 deletions.
diff --git a/src/suggestor/__tests__/List.spec.js b/src/suggestor/__tests__/List.spec.js
@@ -7,7 +7,7 @@ import { shallow, mount } from 'enzyme';
 jest.mock('../styles');
 
 const PROPS = {
-	filtered: [],
+	filtered: [{ word: 'locellus', index: 0 }, { word: 'Lydian', index: 0 }, { word: 'warray', index: -1 }],
 	index: 0,
 	onItemClick: jest.fn(),
 	onItemMouseEnter: jest.fn(),
@@ -16,143 +16,124 @@ const PROPS = {
 };
 
 describe('<List />', () => {
-	const filtered = [{ word: 'locellus', index: 0 }, { word: 'Lydian', index: 0 }, { word: 'warray', index: -1 }];
-	const propsWithItems = { ...PROPS, filtered };
-
 	it('snapshot', () => {
-		const tree = renderer.create(<List {...PROPS} />).toJSON();
+		const tree = renderer.create(<List {...PROPS} filtered={[]} />).toJSON();
 		expect(tree).toMatchSnapshot();
 	});
 
 	it('snapshot - no suggestion list', () => {
-		const tree = renderer.create(<List {...PROPS} open />).toJSON();
+		const tree = renderer.create(<List {...PROPS} filtered={[]} open />).toJSON();
 		expect(tree).toMatchSnapshot();
 	});
 
 	it('snapshot - suggestion list closed', () => {
-		const tree = renderer.create(<List {...propsWithItems} />).toJSON();
-
+		const tree = renderer.create(<List {...PROPS} />).toJSON();
 		expect(tree).toMatchSnapshot();
 	});
 
 	it('snapshot - suggestion list open', () => {
-		const tree = renderer.create(<List {...propsWithItems} open />).toJSON();
-
+		const tree = renderer.create(<List {...PROPS} open />).toJSON();
 		expect(tree).toMatchSnapshot();
 	});
 
 	it('snapshot - suggestion list open (index 1)', () => {
-		const props = { ...PROPS, filtered, index: 1 };
-
-		const tree = renderer.create(<List {...props} open />).toJSON();
-
+		const tree = renderer.create(<List {...PROPS} index={1} open />).toJSON();
 		expect(tree).toMatchSnapshot();
 	});
 });
 
 describe('List component', () => {
-	const filtered = [{ word: 'locellus', index: 0 }, { word: 'Lydian', index: 0 }, { word: 'warray', index: -1 }];
+	let wrapper;
 
 	beforeEach(() => {
 		getListStyles.mockReset();
 		PROPS.onItemClick.mockClear();
 		PROPS.onItemMouseEnter.mockClear();
-	});
 
-	it('should render nothing when no filtered items', () => {
-		const wrapper = shallow(<List {...PROPS} />);
+		wrapper = shallow(<List {...PROPS} />);
+	});
 
+	it('should render nothing when is closed', () => {
 		expect(wrapper.getElement()).toBeFalsy();
 		expect(wrapper.equals(false)).toBeTruthy();
 		expect(wrapper.find('.dropdown-menu').getElements().length).toBeFalsy();
 	});
 
-	it('should render nothing when filtered items are hidden', () => {
-		const wrapper = shallow(<List {...PROPS} filtered={filtered} />);
-
-		expect(wrapper.getElement()).toBeFalsy();
-	});
-
-	it('should render when open flag and any filtered items', () => {
-		const wrapper = shallow(<List {...PROPS} filtered={filtered} open />);
-
-		expect(wrapper.getElement()).toBeTruthy();
-		expect(wrapper.find('.dropdown-menu').getElement()).toBeTruthy();
-	});
-
-	it('should render each item inside an <li> element', () => {
-		const wrapper = mount(<List {...PROPS} filtered={filtered} open />);
-
-		const lis = wrapper.find('li');
-
-		expect(lis.length).toBe(3);
-	});
-
-	it('should render each item inside an <li> element', () => {
-		const wrapper = mount(<List {...PROPS} filtered={filtered} open />);
-
-		const lis = wrapper.find('li');
-
-		expect(lis.first().text()).toBe(filtered[0].word);
-	});
-
-	it('should call onItemClick prop when <ListItem> is clicked', () => {
-		const wrapper = shallow(<List {...PROPS} filtered={filtered} open />);
-
-		wrapper
-			.find('ListItem')
-			.first()
-			.simulate('itemClick');
-
-		expect(PROPS.onItemClick).toHaveBeenCalledTimes(1);
-	});
-
-	it('should call onItemClick prop when each <ListItem> is clicked', () => {
-		const wrapper = shallow(<List {...PROPS} filtered={filtered} open />);
-
-		wrapper
-			.find('ListItem')
-			.first()
-			.simulate('itemClick');
-		wrapper
-			.find('ListItem')
-			.at(1)
-			.simulate('itemClick');
-		wrapper
-			.find('ListItem')
-			.last(2)
-			.simulate('itemClick');
-
-		expect(PROPS.onItemClick).toHaveBeenCalledTimes(3);
-	});
-
-	it('should call onItemMouseEnter prop when mouse enter into <ListItem> area', () => {
-		const wrapper = shallow(<List {...PROPS} filtered={filtered} open />);
-
-		wrapper
-			.find('ListItem')
-			.first()
-			.simulate('itemMouseEnter');
-
-		expect(PROPS.onItemMouseEnter).toHaveBeenCalledTimes(1);
+	describe('when is open', () => {
+		let component;
+		beforeEach(() => {
+			component = shallow(<List {...PROPS} open />);
+		});
+
+		it('should render when open flag and any filtered items', () => {
+			expect(component.getElement()).toBeTruthy();
+			expect(component.find('.dropdown-menu').getElement()).toBeTruthy();
+		});
+
+		it('should call onItemClick prop when <ListItem> is clicked', () => {
+			component
+				.find('ListItem')
+				.first()
+				.simulate('itemClick');
+
+			expect(PROPS.onItemClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('should call onItemClick prop when each <ListItem> is clicked', () => {
+			const listItems = component.find('ListItem');
+			listItems.first().simulate('itemClick');
+			listItems.at(1).simulate('itemClick');
+			listItems.last().simulate('itemClick');
+
+			expect(PROPS.onItemClick).toHaveBeenCalledTimes(3);
+		});
+
+		it('should call onItemMouseEnter prop when mouse enter into <ListItem> area', () => {
+			component
+				.find('ListItem')
+				.first()
+				.simulate('itemMouseEnter');
+
+			expect(PROPS.onItemMouseEnter).toHaveBeenCalledTimes(1);
+		});
+
+		it('should call onItemMouseEnter prop when mouse enter into each <ListItem> area', () => {
+			const listItems = component.find('ListItem');
+			listItems.first().simulate('itemMouseEnter');
+			listItems.at(1).simulate('itemMouseEnter');
+			listItems.last().simulate('itemMouseEnter');
+
+			expect(PROPS.onItemMouseEnter).toHaveBeenCalledTimes(3);
+		});
 	});
 
-	it('should call onItemMouseEnter prop when mouse enter into each <ListItem> area', () => {
-		const wrapper = shallow(<List {...PROPS} filtered={filtered} open />);
-
-		wrapper
-			.find('ListItem')
-			.first()
-			.simulate('itemMouseEnter');
-		wrapper
-			.find('ListItem')
-			.at(1)
-			.simulate('itemMouseEnter');
-		wrapper
-			.find('ListItem')
-			.last()
-			.simulate('itemMouseEnter');
-
-		expect(PROPS.onItemMouseEnter).toHaveBeenCalledTimes(3);
+	describe('list items', () => {
+		const mounted = mount(<List {...PROPS} open />);
+
+		it('should render all three <li> elements', () => {
+			expect(mounted.find('li').length).toBe(3);
+		});
+
+		it('should render each item inside <li>', () => {
+			const [first, second, third] = PROPS.filtered;
+			expect(
+				mounted
+					.find('li')
+					.first()
+					.text()
+			).toBe(first.word);
+			expect(
+				mounted
+					.find('li')
+					.at(1)
+					.text()
+			).toBe(second.word);
+			expect(
+				mounted
+					.find('li')
+					.last()
+					.text()
+			).toBe(third.word);
+		});
 	});
 });