From f4dde14092c3a0e18e92f0bf26a2dd9398dca2b4 Mon Sep 17 00:00:00 2001 From: rowanbeentje Date: Wed, 24 Nov 2021 09:50:04 +0000 Subject: [PATCH] Update x-topic-search test setup so that fetchMock is set up in the beforeEach() blocks, to allow afterEach() to tear it down after each use instead of the at-init setup in each describe() block --- .../__tests__/x-topic-search.test.jsx | 151 +++++++++--------- 1 file changed, 76 insertions(+), 75 deletions(-) diff --git a/components/x-topic-search/__tests__/x-topic-search.test.jsx b/components/x-topic-search/__tests__/x-topic-search.test.jsx index 1bbf87aea..fe233cba6 100644 --- a/components/x-topic-search/__tests__/x-topic-search.test.jsx +++ b/components/x-topic-search/__tests__/x-topic-search.test.jsx @@ -1,127 +1,128 @@ -const fetchMock = require('fetch-mock'); -const { h } = require('@financial-times/x-engine'); -const { mount } = require('@financial-times/x-test-utils/enzyme'); -const { TopicSearch } = require('../'); - -const minSearchLength = 3; -const maxSuggestions = 3; -const apiUrl = 'api-url'; -const FOLLOWED_TOPIC_ID1 = 'Cat-House-id'; -const FOLLOWED_TOPIC_ID2 = 'Cat-Food-id'; -const UNFOLLOWED_TOPIC_ID1 = 'Cat-Toys-id'; +const fetchMock = require('fetch-mock') +const { h } = require('@financial-times/x-engine') +const { mount } = require('@financial-times/x-test-utils/enzyme') +const { TopicSearch } = require('../') + +const minSearchLength = 3 +const maxSuggestions = 3 +const apiUrl = 'api-url' +const FOLLOWED_TOPIC_ID1 = 'Cat-House-id' +const FOLLOWED_TOPIC_ID2 = 'Cat-Food-id' +const UNFOLLOWED_TOPIC_ID1 = 'Cat-Toys-id' describe('x-topic-search', () => { - const buildSearchUrl = term => `${apiUrl}?count=${maxSuggestions}&partial=${term}`; - const enterSearchTerm = searchTerm => { - target.find('input').simulate('input', { target: { value: searchTerm }}); + const buildSearchUrl = (term) => `${apiUrl}?count=${maxSuggestions}&partial=${term}` + const enterSearchTerm = (searchTerm) => { + target.find('input').simulate('input', { target: { value: searchTerm } }) - return new Promise(resolve => { setTimeout(resolve, 400); }); - }; - let target; + return new Promise((resolve) => { + setTimeout(resolve, 400) + }) + } + let target beforeEach(() => { const props = { minSearchLength, maxSuggestions, apiUrl, - followedTopicIds: [FOLLOWED_TOPIC_ID1, FOLLOWED_TOPIC_ID2], - }; - target = mount(); - }); + followedTopicIds: [FOLLOWED_TOPIC_ID1, FOLLOWED_TOPIC_ID2] + } + target = mount() + }) afterEach(() => { - fetchMock.reset(); - }); + fetchMock.reset() + }) describe('initial rendering', () => { it('should render with input box', () => { - expect(target.find('input').exists()).toBe(true); - }); + expect(target.find('input').exists()).toBe(true) + }) it('should not display result container', () => { - expect(target.render().children('div')).toHaveLength(1); - }); - }); + expect(target.render().children('div')).toHaveLength(1) + }) + }) describe('when input receives focus', () => { it('selects the text in the input', () => { - const selectMock = jest.fn(); - const inputBox = target.find('input'); + const selectMock = jest.fn() + const inputBox = target.find('input') - inputBox.simulate('blur'); - inputBox.simulate('focus', { target: { select: selectMock }}); + inputBox.simulate('blur') + inputBox.simulate('focus', { target: { select: selectMock } }) - expect(selectMock).toHaveBeenCalledTimes(1); - }); - }); + expect(selectMock).toHaveBeenCalledTimes(1) + }) + }) describe('given inputted text is shorter than minSearchLength', () => { - const apiUrlWithResults = buildSearchUrl('a'); - - fetchMock.get(apiUrlWithResults, []); + const apiUrlWithResults = buildSearchUrl('a') beforeEach(() => { - return enterSearchTerm('a'); - }); + fetchMock.get(apiUrlWithResults, []) + return enterSearchTerm('a') + }) it('does not make a request to the api or render any result', () => { - expect(fetchMock.called(apiUrlWithResults)).toBe(false); - expect(target.render().children('div')).toHaveLength(1); - }); - }); + expect(fetchMock.called(apiUrlWithResults)).toBe(false) + expect(target.render().children('div')).toHaveLength(1) + }) + }) describe('given searchTerm which has some topic suggestions to follow', () => { - const apiUrlWithResults = buildSearchUrl('Cat'); + const apiUrlWithResults = buildSearchUrl('Cat') const results = [ { id: FOLLOWED_TOPIC_ID1, prefLabel: 'Cat House', url: 'Cat-House-url' }, { id: FOLLOWED_TOPIC_ID2, prefLabel: 'Cat Food', url: 'Cat-Food-url' }, { id: UNFOLLOWED_TOPIC_ID1, prefLabel: 'Cat Toys', url: 'Cat-Toys-url' } - ]; - - fetchMock.get(apiUrlWithResults, results); + ] beforeEach(() => { - return enterSearchTerm('Cat'); - }); + fetchMock.get(apiUrlWithResults, results) + return enterSearchTerm('Cat') + }) it('requests the topic suggestions with count set to maxSuggestions', () => { - expect(fetchMock.called(apiUrlWithResults)).toBe(true); - }); + expect(fetchMock.called(apiUrlWithResults)).toBe(true) + }) it('renders no more than the max number of suggestions', () => { - expect(target.render().children('div')).toHaveLength(2); - expect(target.render().find('li')).toHaveLength(maxSuggestions); - }); + expect(target.render().children('div')).toHaveLength(2) + expect(target.render().find('li')).toHaveLength(maxSuggestions) + }) it('renders links and follow buttons for each suggestion', () => { - const suggestionsList = target.render().find('li'); + const suggestionsList = target.render().find('li') results.forEach((topic, index) => { - const suggestion = suggestionsList.eq(index); - - expect(suggestion.find('a').text()).toEqual(topic.prefLabel); - expect(suggestion.find('a').attr('href')).toEqual(topic.url); - expect(suggestion.find('button').text()).toEqual(topic.id === UNFOLLOWED_TOPIC_ID1 ? 'Add to myFT' : 'Added'); - }); + const suggestion = suggestionsList.eq(index) + + expect(suggestion.find('a').text()).toEqual(topic.prefLabel) + expect(suggestion.find('a').attr('href')).toEqual(topic.url) + expect(suggestion.find('button').text()).toEqual( + topic.id === UNFOLLOWED_TOPIC_ID1 ? 'Add to myFT' : 'Added' + ) + }) }) - }); + }) describe('given searchTerm which has no topic suggestions to follow', () => { - const apiUrlNoResults = buildSearchUrl('Dog'); - - fetchMock.get(apiUrlNoResults, []); + const apiUrlNoResults = buildSearchUrl('Dog') beforeEach(() => { - return enterSearchTerm('Dog'); - }); + fetchMock.get(apiUrlNoResults, []) + return enterSearchTerm('Dog') + }) it('requests from the api and renders the no matching topics message', () => { - expect(fetchMock.called(apiUrlNoResults)).toBe(true); + expect(fetchMock.called(apiUrlNoResults)).toBe(true) - const resultContainer = target.render().children('div').eq(1); + const resultContainer = target.render().children('div').eq(1) - expect(resultContainer).toHaveLength(1); - expect(resultContainer.find('h2').text()).toMatch('No topics matching'); - }); - }); -}); + expect(resultContainer).toHaveLength(1) + expect(resultContainer.find('h2').text()).toMatch('No topics matching') + }) + }) +})