fix: makes Add filter button's display conditional (#1677)

* hides Add filter button in dashboard control bar if no allowed filters
* adds related unit tests

Co-authored-by: Jen Jones Arnesen <[email protected]>

src/components/ItemFilter/FilterSelector.js

@@ -46,7 +46,7 @@ const FilterSelector = props => {
         }
     }
 
-    return props.restrictFilters && !props.allowedFilters ? null : (
+    return props.restrictFilters && !props.allowedFilters?.length ? null : (
         <>
             <span className={classes.buttonContainer} ref={ref}>
                 <Button onClick={() => setShowPopover(true)}>

src/components/ItemFilter/__tests__/FilterSelector.spec.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
+
+import FilterSelector from '../FilterSelector'
+import useDimensions from '../../../modules/useDimensions'
+
+const mockStore = configureMockStore()
+
+jest.mock('../../../modules/useDimensions', () => jest.fn())
+useDimensions.mockImplementation(() => ['Moomin', 'Snorkmaiden'])
+
+test('is null when no filters are restricted and no filters are allowed', () => {
+    const store = {}
+
+    const props = {
+        allowedFilters: [],
+        restrictFilters: true,
+    }
+
+    const { container } = render(
+        <Provider store={mockStore(store)}>
+            <FilterSelector {...props} />
+        </Provider>
+    )
+    expect(container.firstChild).toBeNull()
+})
+
+test('is null when no filters are restricted and allowedFilters undefined', () => {
+    const store = {}
+
+    const props = {
+        restrictFilters: true,
+    }
+
+    const { container } = render(
+        <Provider store={mockStore(store)}>
+            <FilterSelector {...props} />
+        </Provider>
+    )
+    expect(container.firstChild).toBeNull()
+})
+
+test('shows button when filters are restricted and at least one filter is allowed', () => {
+    const store = {}
+
+    const props = {
+        allowedFilters: ['Moomin'],
+        restrictFilters: true,
+    }
+
+    render(
+        <Provider store={mockStore(store)}>
+            <FilterSelector {...props} />
+        </Provider>
+    )
+    expect(screen.getByRole('button')).toBeTruthy()
+})
+
+test('shows button when filters are not restricted', () => {
+    const store = {}
+
+    const props = {
+        allowedFilters: [],
+        restrictFilters: false,
+    }
+
+    render(
+        <Provider store={mockStore(store)}>
+            <FilterSelector {...props} />
+        </Provider>
+    )
+    expect(screen.getByRole('button')).toBeTruthy()
+})