ui/volumes/nodes: Test for useTableSortURLSync hook

Add react-hooks-testing-library to render hooks within a test component

Test useTableSortURLSync to check if URL params are handled properly

Refs: #2919

ui/package.json

@@ -69,6 +69,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@redux-saga/testing-utils": "^1.0.2",
+    "@testing-library/react-hooks": "^3.4.2",
     "babel-eslint": "10.1.0",
     "compression-webpack-plugin": "^6.0.0",
     "customize-cra": "^0.4.1",
@@ -79,6 +80,7 @@
     "flow-bin": "^0.107.0",
     "jest-junit": "^7.0.0",
     "react-app-rewired": "^2.1.3",
+    "react-test-renderer": "^17.0.1",
     "source-map-explorer": "^2.0.1"
   },
   "cypress-cucumber-preprocessor": {

ui/src/services/utils.test.js

@@ -1,4 +1,10 @@
-import { sortCapacity, addMissingDataPoint, fromMilliSectoAge } from './utils';
+import {
+  sortCapacity,
+  addMissingDataPoint,
+  fromMilliSectoAge,
+  useTableSortURLSync,
+} from './utils';
+import { renderHook } from '@testing-library/react-hooks';
 
 const testcases = [
   { storageCapacity: '1Ki' },
@@ -235,3 +241,34 @@ it('should return 1d1m instead of 1d1m1s or 1d1s', () => {
   const result = fromMilliSectoAge(86461000);
   expect(result).toEqual('1d1m');
 });
+
+// Mocking history from react-router to test the URL sync hook
+const mockHistoryReplace = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    replace: mockHistoryReplace,
+  }),
+}));
+
+describe('useTableSortURLSync hook', () => {
+  it('should not set anything in the URL if data is not ready', () => {
+    renderHook(() => useTableSortURLSync('name', false, []));
+    expect(mockHistoryReplace).not.toHaveBeenCalled();
+  });
+
+  it('should set a name sorting in the URL', () => {
+    renderHook(() => useTableSortURLSync('name', false, ['foo']));
+    expect(mockHistoryReplace).toHaveBeenCalledWith('?sort=name');
+  });
+
+  it('should set a status sorting in the URL with a desc parameter', () => {
+    renderHook(() => useTableSortURLSync('status', true, ['foo']));
+    expect(mockHistoryReplace).toHaveBeenCalledWith('?sort=status&desc=true');
+  });
+
+  it('should clear the URL params if status goes back to default (health)', () => {
+    renderHook(() => useTableSortURLSync('health', false, ['foo']));
+    expect(mockHistoryReplace).toHaveBeenCalledWith('?');
+  });
+});