test: follow mike request - replace data-testid for querySelector by …

…class on story_search_spec.js file

app/assets/javascripts/components/search/StorySearch.jsx

@@ -31,11 +31,7 @@ export const StorySearch = ({ projectId, search, loading }) => {
       className="StorySearch"
     >
       {loading && (
-        <span
-          className="StorySearch__spinner"
-          data-id="spinner-loading"
-          data-testid="story-search-spinner"
-        >
+        <span className="StorySearch__spinner" data-id="spinner-loading">
           <i className="fa fa-spinner fa-spin"></i>
         </span>
       )}

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('<StorySearch />', () => {
+  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(
-      <StorySearch projectId={1} search={vi.fn()} loading={false} />
-    );
-
-    expect(container).toBeInTheDocument();
-  });
-
   describe('loading', () => {
     describe('when loading is true', () => {
       it('renders the spinner', () => {
-        const { getByTestId } = render(
+        const { container, debug } = render(
           <StorySearch projectId={1} search={vi.fn()} loading={true} />
         );
 
-        expect(getByTestId('story-search-spinner')).toBeInTheDocument();
+        expect(
+          container.querySelector('.StorySearch__spinner')
+        ).toBeInTheDocument();
       });
     });
   });
+
+  it('renders the component', () => {
+    const { container } = render(
+      <StorySearch projectId={1} search={vi.fn()} loading={false} />
+    );
+
+    expect(container).toBeInTheDocument();
+  });
 });