Device manager - updated dropdown style in filtered device list (PSG-689) (#9226)

* add FilterDropdown wrapper on Dropdown for filter styles

* test and fix strict errors

* fix comment

test/components/views/elements/FilterDropdown-test.tsx

@@ -0,0 +1,68 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+
+import { FilterDropdown } from '../../../../src/components/views/elements/FilterDropdown';
+import { flushPromises, mockPlatformPeg } from '../../../test-utils';
+
+mockPlatformPeg();
+
+describe('<FilterDropdown />', () => {
+    const options = [
+        { id: 'one', label: 'Option one' },
+        { id: 'two', label: 'Option two', description: 'with description' },
+    ];
+    const defaultProps = {
+        className: 'test',
+        value: 'one',
+        options,
+        id: 'test',
+        label: 'test label',
+        onOptionChange: jest.fn(),
+    };
+    const getComponent = (props = {}): JSX.Element =>
+        (<FilterDropdown {...defaultProps} {...props} />);
+
+    const openDropdown = async (container: HTMLElement): Promise<void> => await act(async () => {
+        const button = container.querySelector('[role="button"]');
+        expect(button).toBeTruthy();
+        fireEvent.click(button as Element);
+        await flushPromises();
+    });
+
+    it('renders selected option', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders when selected option is not in options', () => {
+        const { container } = render(getComponent({ value: 'oops' }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders selected option with selectedLabel', () => {
+        const { container } = render(getComponent({ selectedLabel: 'Show' }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders dropdown options in menu', async () => {
+        const { container } = render(getComponent());
+        await openDropdown(container);
+        expect(container.querySelector('.mx_Dropdown_menu')).toMatchSnapshot();
+    });
+});

test/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
+<div
+  class="mx_Dropdown_menu"
+  id="test_listbox"
+  role="listbox"
+>
+  <div
+    aria-selected="false"
+    class="mx_Dropdown_option"
+    id="test__one"
+    role="option"
+  >
+    <div
+      class="mx_FilterDropdown_option"
+      data-testid="filter-option-one"
+    >
+      <div
+        class="mx_FilterDropdown_optionSelectedIcon"
+      />
+      <span
+        class="mx_FilterDropdown_optionLabel"
+      >
+        Option one
+      </span>
+    </div>
+  </div>
+  <div
+    aria-selected="false"
+    class="mx_Dropdown_option"
+    id="test__two"
+    role="option"
+  >
+    <div
+      class="mx_FilterDropdown_option"
+      data-testid="filter-option-two"
+    >
+      <span
+        class="mx_FilterDropdown_optionLabel"
+      >
+        Option two
+      </span>
+      <span
+        class="mx_FilterDropdown_optionDescription"
+      >
+        with description
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FilterDropdown /> renders selected option 1`] = `
+<div>
+  <div
+    class="mx_Dropdown mx_FilterDropdown test"
+  >
+    <div
+      aria-describedby="test_value"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="test label"
+      aria-owns="test_input"
+      class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Dropdown_option"
+        id="test_value"
+      >
+        Option one
+      </div>
+      <span
+        class="mx_Dropdown_arrow"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FilterDropdown /> renders selected option with selectedLabel 1`] = `
+<div>
+  <div
+    class="mx_Dropdown mx_FilterDropdown test"
+  >
+    <div
+      aria-describedby="test_value"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="test label"
+      aria-owns="test_input"
+      class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Dropdown_option"
+        id="test_value"
+      >
+        Show: Option one
+      </div>
+      <span
+        class="mx_Dropdown_arrow"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FilterDropdown /> renders when selected option is not in options 1`] = `
+<div>
+  <div
+    class="mx_Dropdown mx_FilterDropdown test"
+  >
+    <div
+      aria-describedby="test_value"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="test label"
+      aria-owns="test_input"
+      class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Dropdown_option"
+        id="test_value"
+      />
+      <span
+        class="mx_Dropdown_arrow"
+      />
+    </div>
+  </div>
+</div>
+`;

test/components/views/settings/devices/FilteredDeviceList-test.tsx

@@ -94,11 +94,11 @@ describe('<FilteredDeviceList />', () => {
         ) => await act(async () => {
             const dropdown = container.querySelector('[aria-label="Filter devices"]');
 
-            fireEvent.click(dropdown);
+            fireEvent.click(dropdown as Element);
             // tick to let dropdown render
             await flushPromises();
 
-            fireEvent.click(container.querySelector(`#device-list-filter__${option}`));
+            fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
         });
 
         it('does not display filter description when filter is falsy', () => {
@@ -198,7 +198,7 @@ describe('<FilteredDeviceList />', () => {
             act(() => {
                 const tile = getByTestId(`device-tile-${hundredDaysOld.device_id}`);
                 const toggle = tile.querySelector('[aria-label="Toggle device details"]');
-                fireEvent.click(toggle);
+                fireEvent.click(toggle as Element);
             });
 
             expect(onDeviceExpandToggle).toHaveBeenCalledWith(hundredDaysOld.device_id);