diff --git a/app/assets/javascripts/components/search/StorySearch.jsx b/app/assets/javascripts/components/search/StorySearch.jsx index a54fa059f..9a552d467 100644 --- a/app/assets/javascripts/components/search/StorySearch.jsx +++ b/app/assets/javascripts/components/search/StorySearch.jsx @@ -31,11 +31,7 @@ export const StorySearch = ({ projectId, search, loading }) => { className="StorySearch" > {loading && ( - + )} diff --git a/spec/javascripts/components/search/story_search_spec.js b/spec/javascripts/components/search/story_search_spec.js index f8b5635b7..02afc6d5f 100644 --- a/spec/javascripts/components/search/story_search_spec.js +++ b/spec/javascripts/components/search/story_search_spec.js @@ -1,32 +1,41 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import ReactDOM from 'react-dom'; +import { render, screen } from '@testing-library/react'; import { StorySearch } from 'components/search/StorySearch'; describe('', () => { + beforeAll(() => { + ReactDOM.createPortal = vi.fn(element => { + return element; + }); + }); + beforeEach(() => { - const divPortal = global.document.createElement('div'); + const divPortal = document.createElement('div'); divPortal.setAttribute('data-portal', 'search'); - const body = global.document.querySelector('body'); + const body = document.querySelector('body'); body.appendChild(divPortal); }); - it('renders the component', () => { - const { container } = render( - - ); - - expect(container).toBeInTheDocument(); - }); - describe('loading', () => { describe('when loading is true', () => { it('renders the spinner', () => { - const { getByTestId } = render( + const { container, debug } = render( ); - expect(getByTestId('story-search-spinner')).toBeInTheDocument(); + expect( + container.querySelector('.StorySearch__spinner') + ).toBeInTheDocument(); }); }); }); + + it('renders the component', () => { + const { container } = render( + + ); + + expect(container).toBeInTheDocument(); + }); });