Adding unit tests

ui/package.json

@@ -31,12 +31,12 @@
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.1.10",
+    "http-proxy-middleware": "^1.2.0",
     "react-scripts": "4.0.3",
-    "sass": "1.32.11",
-    "http-proxy-middleware": "^1.2.0"
+    "sass": "1.32.11"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -48,6 +48,12 @@
     "copy:static": "node ./build",
     "copy": "npm run copy:static && npm run build:static"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!src/test/**/*.*"
+    ]
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

ui/src/app/core/components/FormattedDate.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { format, parseISO } from 'date-fns';
 
-export default function FormattedDate ({ date, time = false }) {
+export function FormattedDate ({ date, time = false }) {
     const formatted = React.useMemo(() => format(parseISO(date), `MMM d, Y${time ? ' HH:mm:ss' : ''}`), [date, time]);
 
     return (<>{ formatted }</>);
-}
+}
+
+export default FormattedDate;

ui/src/app/core/components/FormattedDate.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { FormattedDate } from './FormattedDate';
+
+it('should display a formatted date', () => {
+    render(<FormattedDate date={ '2021-06-10T12:28:52.514342' } />);
+    expect(screen.getByText('Jun 10, 2021')).toBeInTheDocument();
+});

ui/src/app/core/components/VersionInfo.js

@@ -9,7 +9,7 @@ const formatter = v => v && v.build ? `${v.build.version}-${v.git.commit.id}` :
 const year = new Date().getFullYear();
 const params = { year };
 
-export default function VersionInfo () {
+export function VersionInfo () {
 
     const { data = {} } = useFetch('/actuator/info', {}, []);
 
@@ -26,4 +26,6 @@ export default function VersionInfo () {
             <Translate value="brand.footer.copyright" params={params}> Copyright & copy; Internet2</Translate>
         </p>
     );
-}
+}
+
+export default VersionInfo;

ui/src/app/core/components/VersionInfo.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { VersionInfo } from './VersionInfo';
+
+const data = { "git": { "branch": "react", "commit": { "id": "634f1a4", "time": "2021-06-10T19:00:29Z" } }, "build": { "artifact": "shibui", "name": "backend", "time": "2021-06-10T19:26:14.478Z", "version": "2.0.0-SNAPSHOT", "group": "edu.internet2.tier.shibboleth.admin.ui" } };
+
+jest.mock('../../i18n/components/translate', () => {
+    return 'span';
+})
+
+jest.mock('use-http', () => {
+    return () => ({ data });
+});
+
+it('should display formatted version information', () => {
+
+    render(<VersionInfo />);
+    expect(screen.getByText('2.0.0-SNAPSHOT-634f1a4', { exact: false })).toBeInTheDocument();
+});

ui/src/app/dashboard/view/Dashboard.js

@@ -7,7 +7,6 @@ import { NavLink } from 'react-router-dom';
 import Translate from '../../i18n/components/translate';
 import { AdminRoute } from '../../core/components/AdminRoute';
 
-import './Dashboard.scss';
 import { SourcesTab } from './SourcesTab';
 import { ProvidersTab } from './ProvidersTab';
 import { AdminTab } from './AdminTab';

ui/src/app/i18n/hooks.js

@@ -12,14 +12,6 @@ export function getMessage(value, messages) {
     return messages.hasOwnProperty(value) ? messages[value] : (Object.keys(messages).length ? value : '');
 }
 
-export function useCurrentLanguage () {
-
-}
-
-export function useCurrentLocale () {
-
-}
-
 export function useTranslation (value, interpolated = {}) {
     const messages = useContext(I18nContext);
     const val = getMessage(value, messages);

ui/src/app/i18n/hooks.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { translate, getMessage, useTranslation, useTranslator } from './hooks';
+
+const msgs = { foo: 'bar { baz }' };
+
+describe('getMessage', () => {
+    it('should return the expected message based on the key', () => {
+        expect(getMessage('foo', msgs)).toEqual('bar { baz }');
+    });
+})
+
+describe('translate', () => {
+    it('should translate the provided message', () => {
+        const msg = getMessage('foo', msgs);
+        expect(translate(msg, { baz: 'baz' })).toEqual('bar baz');
+    });
+
+    it('should return provided value if no interpolation strings are passed', () => {
+        expect(translate('foo', {})).toEqual('foo');
+    });
+
+    it('should return an empty string if messages are empty', () => {
+        expect(getMessage('foo', {})).toEqual('');
+    });
+});
+
+describe('useTranslation hook', () => {
+    let realUseContext;
+    let useContextMock;
+    beforeEach(() => {
+        realUseContext = React.useContext;
+        useContextMock = React.useContext = jest.fn();
+    });
+    // Cleanup mock
+    afterEach(() => {
+        React.useContext = realUseContext;
+    });
+
+    test("mock hook", () => {
+        useContextMock.mockReturnValue(msgs);
+
+        expect(useTranslation('foo', { baz: 'baz' })).toBe('bar baz');
+    });
+    //jest.mock('useContext')
+
+    it('should translate the provided message', () => {
+        const msg = getMessage('foo', { foo: 'bar { baz }' });
+        expect(translate(msg, { baz: 'baz' })).toEqual('bar baz');
+    });
+});
+
+describe('useTranslator hook', () => {
+    let realUseContext;
+    let useContextMock;
+    beforeEach(() => {
+        realUseContext = React.useContext;
+        useContextMock = React.useContext = jest.fn();
+    });
+    // Cleanup mock
+    afterEach(() => {
+        React.useContext = realUseContext;
+    });
+
+    test("mock hook", () => {
+        useContextMock.mockReturnValue(msgs);
+        const translator = useTranslator();
+
+        expect(translator('foo', { baz: 'baz' })).toBe('bar baz');
+    });
+});

ui/src/app/metadata/domain/index.test.js

@@ -0,0 +1,12 @@
+import { NameIDFilterEditor } from './filter/NameIdFilterDefinition';
+import { getDefinition } from './index';
+import { FileSystemMetadataProviderEditor } from './provider/FileSystemMetadataProviderDefinition';
+import { SourceEditor } from './source/SourceDefinition';
+
+describe('getDefinitions method', () => {
+    it('should retrieve the definition', () => {
+        expect(getDefinition('source')).toBe(SourceEditor);
+        expect(getDefinition('NameIDFormat')).toBe(NameIDFilterEditor);
+        expect(getDefinition('FilesystemMetadataResolver')).toBe(FileSystemMetadataProviderEditor);
+    });
+});

ui/src/app/metadata/editor/MetadataEditorForm.js

@@ -34,6 +34,8 @@ export function MetadataEditorForm({ metadata, definition, schema, current, onCh
         onChange(definition.bindings ? { ...form, formData: definition.bindings(data, form.formData) }: form);
     };
 
+    console.log(uiSchema);
+
     return (
         <>
             {step.locked && <div className="">