From 35f52f86d4b0ee2918ecec03e1bd2f9c24a55748 Mon Sep 17 00:00:00 2001 From: Alex Le Dinh Date: Tue, 17 Nov 2020 17:08:09 +0100 Subject: [PATCH] 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-lock.json | 92 +++++++++++++++++++++++++++++++++++ ui/package.json | 2 + ui/src/services/utils.test.js | 39 ++++++++++++++- 3 files changed, 132 insertions(+), 1 deletion(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index d2cc134ee7..cc6fdbae0a 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -2894,6 +2894,16 @@ "loader-utils": "^1.2.3" } }, + "@testing-library/react-hooks": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-3.4.2.tgz", + "integrity": "sha512-RfPG0ckOzUIVeIqlOc1YztKgFW+ON8Y5xaSPbiBkfj9nMkkiLhLeBXT5icfPX65oJV/zCZu4z8EVnUc6GY9C5A==", + "dev": true, + "requires": { + "@babel/runtime": "^7.5.4", + "@types/testing-library__react-hooks": "^3.4.0" + } + }, "@types/babel__core": { "version": "7.1.10", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.10.tgz", @@ -3012,11 +3022,44 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, "@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==" }, + "@types/react": { + "version": "16.9.56", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.56.tgz", + "integrity": "sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", + "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==", + "dev": true + } + } + }, + "@types/react-test-renderer": { + "version": "16.9.3", + "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.3.tgz", + "integrity": "sha512-wJ7IlN5NI82XMLOyHSa+cNN4Z0I+8/YaLl04uDgcZ+W+ExWCmCiVTLT/7fRNqzy4OhStZcUwIqLNF7q+AdW43Q==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/request": { "version": "2.48.5", "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.5.tgz", @@ -3039,6 +3082,15 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==" }, + "@types/testing-library__react-hooks": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.4.1.tgz", + "integrity": "sha512-G4JdzEcq61fUyV6wVW9ebHWEiLK2iQvaBuCHHn9eMSbZzVh4Z4wHnUGIvQOYCCYeu5DnUtFyNYuAAgbSaO/43Q==", + "dev": true, + "requires": { + "@types/react-test-renderer": "*" + } + }, "@types/tough-cookie": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.0.tgz", @@ -15027,11 +15079,51 @@ "react-transition-group": "^4.3.0" } }, + "react-shallow-renderer": { + "version": "16.14.1", + "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz", + "integrity": "sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "react-is": "^16.12.0 || ^17.0.0" + } + }, "react-table": { "version": "7.5.1", "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.5.1.tgz", "integrity": "sha512-rprrUElCqvj79lyY2XbUoYLzwA5Mm4CGS8ElQ8OyzocvmkvCcmunvvfbpIg9Jm9HnMBjVZcVyPFPZ1BFelIBKw==" }, + "react-test-renderer": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.1.tgz", + "integrity": "sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "react-is": "^17.0.1", + "react-shallow-renderer": "^16.13.1", + "scheduler": "^0.20.1" + }, + "dependencies": { + "react-is": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", + "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==", + "dev": true + }, + "scheduler": { + "version": "0.20.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", + "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "react-textarea-autosize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz", diff --git a/ui/package.json b/ui/package.json index fc4a41d539..675c099503 100644 --- a/ui/package.json +++ b/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": { diff --git a/ui/src/services/utils.test.js b/ui/src/services/utils.test.js index 389340d800..d923adc7df 100644 --- a/ui/src/services/utils.test.js +++ b/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('?'); + }); +});