Extracted short URLs table into reusable component to use both on list section and overview section

test/short-urls/ShortUrlsList.test.tsx

@@ -1,19 +1,30 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
 import { Mock } from 'ts-mockery';
 import shortUrlsListCreator, { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
 import { ShortUrl } from '../../src/short-urls/data';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
-import { SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams';
+import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
+import SortingDropdown from '../../src/utils/SortingDropdown';
 
 describe('<ShortUrlsList />', () => {
   let wrapper: ShallowWrapper;
-  const ShortUrlsRow = () => null;
+  const ShortUrlsTable = () => null;
   const listShortUrlsMock = jest.fn();
   const resetShortUrlParamsMock = jest.fn();
+  const shortUrlsList = Mock.of<ShortUrlsListModel>({
+    shortUrls: {
+      data: [
+        Mock.of<ShortUrl>({
+          shortCode: 'testShortCode',
+          shortUrl: 'https://www.example.com/testShortUrl',
+          longUrl: 'https://www.example.com/testLongUrl',
+          tags: [ 'test tag' ],
+        }),
+      ],
+    },
+  });
 
-  const ShortUrlsList = shortUrlsListCreator(ShortUrlsRow);
+  const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable);
 
   beforeEach(() => {
     wrapper = shallow(
@@ -29,18 +40,7 @@ describe('<ShortUrlsList />', () => {
         }}
         match={{ params: {} } as any}
         location={{} as any}
-        loading={false}
-        error={false}
-        shortUrlsList={
-          [
-            Mock.of<ShortUrl>({
-              shortCode: 'testShortCode',
-              shortUrl: 'https://www.example.com/testShortUrl',
-              longUrl: 'https://www.example.com/testLongUrl',
-              tags: [ 'test tag' ],
-            }),
-          ]
-        }
+        shortUrlsList={shortUrlsList}
       />,
     ).dive(); // Dive is needed as this component is wrapped in a HOC
   });
@@ -48,50 +48,11 @@ describe('<ShortUrlsList />', () => {
   afterEach(jest.resetAllMocks);
   afterEach(() => wrapper?.unmount());
 
-  it('wraps a ShortUrlsList with 1 ShortUrlsRow', () => {
-    expect(wrapper.find(ShortUrlsRow)).toHaveLength(1);
+  it('wraps a ShortUrlsTable', () => {
+    expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
   });
 
-  it('should render inner table by default', () => {
-    expect(wrapper.find('table')).toHaveLength(1);
-  });
-
-  it('should render table header by default', () => {
-    expect(wrapper.find('table').find('thead')).toHaveLength(1);
-  });
-
-  it('should render 6 table header cells by default', () => {
-    expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6);
-  });
-
-  it('should render 6 table header cells without order by icon by default', () => {
-    const thElements = wrapper.find('table').find('thead').find('tr').find('th');
-
-    thElements.forEach((thElement) => {
-      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
-    });
-  });
-
-  it('should render 6 table header cells with conditional order by icon', () => {
-    const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
-      .find('thead')
-      .find('tr')
-      .find('th')
-      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[sortableField as keyof typeof SORTABLE_FIELDS]));
-
-    Object.keys(SORTABLE_FIELDS).forEach((sortableField) => {
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(0);
-
-      getThElementForSortableField(sortableField).simulate('click');
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(1);
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon).prop('icon')).toEqual(caretUpIcon);
-
-      getThElementForSortableField(sortableField).simulate('click');
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(1);
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon).prop('icon')).toEqual(caretDownIcon);
-
-      getThElementForSortableField(sortableField).simulate('click');
-      expect(getThElementForSortableField(sortableField).find(FontAwesomeIcon)).toHaveLength(0);
-    });
+  it('wraps a SortingDropdown', () => {
+    expect(wrapper.find(SortingDropdown)).toHaveLength(1);
   });
 });

test/short-urls/ShortUrlsTable.test.tsx

@@ -0,0 +1,59 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable';
+import { SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams';
+import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
+
+describe('<ShortUrlsTable />', () => {
+  let wrapper: ShallowWrapper;
+  const shortUrlsList = Mock.all<ShortUrlsList>();
+  const orderByColumn = jest.fn();
+  const ShortUrlsRow = () => null;
+
+  const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow);
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={null} orderByColumn={() => orderByColumn} />,
+    );
+  });
+
+  afterEach(jest.resetAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it('should render inner table by default', () => {
+    expect(wrapper.find('table')).toHaveLength(1);
+  });
+
+  it('should render table header by default', () => {
+    expect(wrapper.find('table').find('thead')).toHaveLength(1);
+  });
+
+  it('should render 6 table header cells by default', () => {
+    expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6);
+  });
+
+  it('should render 6 table header cells without order by icon by default', () => {
+    const thElements = wrapper.find('table').find('thead').find('tr').find('th');
+
+    thElements.forEach((thElement) => {
+      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
+    });
+  });
+
+  it('should render 6 table header cells with conditional order by icon', () => {
+    const getThElementForSortableField = (sortableField: string) => wrapper.find('table')
+      .find('thead')
+      .find('tr')
+      .find('th')
+      .filterWhere((e) => e.text().includes(SORTABLE_FIELDS[sortableField as keyof typeof SORTABLE_FIELDS]));
+    const sortableFields = Object.keys(SORTABLE_FIELDS);
+
+    expect.assertions(sortableFields.length);
+    sortableFields.forEach((sortableField) => {
+      getThElementForSortableField(sortableField).simulate('click');
+      expect(orderByColumn).toHaveBeenCalled();
+    });
+  });
+});