DATAP-661 update unit tests, remove snapshot tests, accessibility fix…

…es (#541)

* move stuff

* pill panel test

* fixing pill test

* update test coverage

package.json

@@ -134,10 +134,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 81,
-        "functions": 88,
-        "lines": 89,
-        "statements": 89
+        "branches": 85,
+        "functions": 91,
+        "lines": 93,
+        "statements": 93
       }
     },
     "coverageReporters": [

src/components/Search/Pill.js

@@ -49,9 +49,6 @@ export const Pill = ({ fieldName, value }) => {
           {prefix}
           {trimmed}
         </span>
-        <span className="u-visually-hidden">
-          {`Remove ${trimmed} as a filter`}
-        </span>
         {getIcon('delete')}
       </button>
     </li>

src/components/Search/Pill.spec.js

@@ -51,12 +51,8 @@ describe('component::Pill', () => {
 
     renderComponent(props);
 
-    expect(
-      screen.getByRole('button', { name: /Remove abc as a filter/ }),
-    ).toBeInTheDocument();
-    await user.click(
-      screen.getByRole('button', { name: /Remove abc as a filter/ }),
-    );
+    expect(screen.getByRole('button', { name: /abc/ })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /abc/ }));
     expect(dateRangeToggledFn).toHaveBeenCalledWith('All');
   });
 
@@ -66,12 +62,8 @@ describe('component::Pill', () => {
       value: 'abc',
     };
     renderComponent(props);
-    expect(
-      screen.getByRole('button', { name: /Remove abc as a filter/ }),
-    ).toBeInTheDocument();
-    await user.click(
-      screen.getByRole('button', { name: /Remove abc as a filter/ }),
-    );
+    expect(screen.getByRole('button', { name: /abc/ })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /abc/ }));
 
     expect(replaceFilterFn).toHaveBeenCalledWith('issue', []);
   });
@@ -82,12 +74,8 @@ describe('component::Pill', () => {
       value: 'abc',
     };
     renderComponent(props);
-    expect(
-      screen.getByRole('button', { name: /Remove abc as a filter/ }),
-    ).toBeInTheDocument();
-    await user.click(
-      screen.getByRole('button', { name: /Remove abc as a filter/ }),
-    );
+    expect(screen.getByRole('button', { name: /abc/ })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /abc/ }));
 
     expect(removeFilterFn).toHaveBeenCalledWith('foobar', 'abc');
   });

src/components/Search/PillPanel.js

@@ -9,7 +9,6 @@ import {
 } from '../../reducers/query/selectors';
 
 import { useDispatch, useSelector } from 'react-redux';
-
 import dayjs from 'dayjs';
 import getIcon from '../iconMap';
 import { Pill } from './Pill';

src/components/Search/PillPanel.spec.js

@@ -0,0 +1,55 @@
+import { PillPanel } from './PillPanel';
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import { merge } from '../../testUtils/functionHelpers';
+import { defaultQuery } from '../../reducers/query/query';
+
+const renderComponent = (newQueryState) => {
+  merge(newQueryState, defaultQuery);
+
+  const data = {
+    query: newQueryState,
+  };
+  render(<PillPanel />, {
+    preloadedState: data,
+  });
+};
+describe('component: PillPanel', () => {
+  it('renders without crashing', () => {
+    renderComponent({
+      company: ['Apples', 'Bananas are great'],
+      timely: ['Yes'],
+    });
+    expect(screen.getByText('Filters applied:')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: /Date Received: 5\/5\/2017 - 5\/5\/2020/,
+      }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('button', {
+        name: /Apples/,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: /Bananas are great/,
+      }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('button', {
+        name: /Timely/,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('adds a has narrative pill', () => {
+    renderComponent({ has_narrative: true });
+    expect(
+      screen.getByRole('button', {
+        name: /Has narrative/,
+      }),
+    ).toBeInTheDocument();
+  });
+});

src/components/__tests__/SearchPanel.spec.js → src/components/Search/SearchPanel.spec.js

@@ -1,4 +1,4 @@
-import { SearchPanel } from '../Search/SearchPanel';
+import { SearchPanel } from './SearchPanel';
 import { testRender as render, screen } from '../../testUtils/test-utils';
 
 const renderComponent = () => {

src/components/TabbedNavigation.spec.js

@@ -0,0 +1,81 @@
+import { testRender as render, screen } from '../testUtils/test-utils';
+import { TabbedNavigation } from './TabbedNavigation';
+import { MODE_LIST, MODE_MAP, MODE_TRENDS } from '../constants';
+import { merge } from '../testUtils/functionHelpers';
+import { defaultQuery } from '../reducers/query/query';
+import userEvent from '@testing-library/user-event';
+import * as viewActions from '../actions/view';
+
+const renderComponent = (tab) => {
+  const newQueryState = {
+    tab,
+  };
+
+  merge(newQueryState, defaultQuery);
+
+  const data = {
+    query: newQueryState,
+  };
+  render(<TabbedNavigation />, {
+    preloadedState: data,
+  });
+};
+
+describe('component: TabbedNavigation', () => {
+  const user = userEvent.setup({ delay: null });
+  let tabChangedSpy;
+  beforeEach(() => {
+    tabChangedSpy = jest.spyOn(viewActions, 'tabChanged');
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('shows the List tab', async () => {
+    renderComponent(MODE_LIST);
+    expect(screen.getByRole('button', { name: /Map/ })).not.toHaveClass(
+      'active',
+    );
+    expect(screen.getByRole('button', { name: /List/ })).toHaveClass('active');
+    expect(screen.getByRole('button', { name: /Trends/ })).not.toHaveClass(
+      'active',
+    );
+
+    await user.click(screen.getByRole('button', { name: /Map/ }));
+    await user.click(screen.getByRole('button', { name: /List/ }));
+    expect(tabChangedSpy).toHaveBeenCalledWith('List');
+  });
+
+  it('shows the Map tab', async () => {
+    renderComponent(MODE_MAP);
+    expect(screen.getByRole('button', { name: /Map/ })).toHaveClass('active');
+    expect(screen.getByRole('button', { name: /List/ })).not.toHaveClass(
+      'active',
+    );
+    expect(screen.getByRole('button', { name: /Trends/ })).not.toHaveClass(
+      'active',
+    );
+
+    // this does nothing
+    await user.click(screen.getByRole('button', { name: /List/ }));
+    await user.click(screen.getByRole('button', { name: /Map/ }));
+    expect(tabChangedSpy).toHaveBeenCalledWith('Map');
+  });
+
+  it('shows the Trends tab', async () => {
+    renderComponent(MODE_TRENDS);
+    expect(screen.getByRole('button', { name: /Map/ })).not.toHaveClass(
+      'active',
+    );
+    expect(screen.getByRole('button', { name: /List/ })).not.toHaveClass(
+      'active',
+    );
+    expect(screen.getByRole('button', { name: /Trends/ })).toHaveClass(
+      'active',
+    );
+
+    await user.click(screen.getByRole('button', { name: /Map/ }));
+    await user.click(screen.getByRole('button', { name: /Trends/ }));
+    expect(tabChangedSpy).toHaveBeenCalledWith('Trends');
+  });
+});