UIFPU-78 - create jest environment and setup initial mocks

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 7.2.0 IN PROGRESS
 
+* Create Jest test environment and setup initial mocks. Refs UIPFU-78.
+
 ## [7.1.1](https://github.com/folio-org/ui-plugin-find-user/tree/v7.1.1) (2024-05-03)
 [Full Changelog](https://github.com/folio-org/ui-plugin-find-user/compare/v7.1.0...v7.1.1)
 

test/jest/__mock__/index.js

@@ -0,0 +1,6 @@
+import './stripesConfig.mock';
+import './stripesCore.mock';
+import './stripes.mock';
+import './intl.mock';
+import './stripesComponents.mock';
+import './stripesSmartComponents.mock';

test/jest/__mock__/intl.mock.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+jest.mock('react-intl', () => {
+  const intl = {
+    formatMessage: ({ id }) => id,
+    formatNumber: (value) => value,
+    formatDisplayName: (value) => value,
+  };
+
+  return {
+    ...jest.requireActual('react-intl'),
+    FormattedMessage: jest.fn(({ id, children }) => {
+      if (children) {
+        return children([id]);
+      }
+
+      return id;
+    }),
+    FormattedTime: jest.fn(({ value, children }) => {
+      if (children) {
+        return children([value]);
+      }
+
+      return value;
+    }),
+    FormattedDate: jest.fn(({ value, children }) => {
+      if (children) {
+        return children([value]);
+      }
+
+      return value;
+    }),
+    useIntl: () => intl,
+    injectIntl: (Component) => (props) => <Component {...props} intl={intl} />,
+  };
+});

test/jest/__mock__/stripes.mock.js

@@ -0,0 +1,26 @@
+import { noop } from 'lodash';
+
+const buildStripes = (otherProperties = {}) => ({
+  hasPerm: noop,
+  hasInterface: noop,
+  clone: noop,
+  logger: { log: noop },
+  config: {},
+  okapi: {
+    url: '',
+    tenant: '',
+  },
+  locale: 'en-US',
+  withOkapi: true,
+  setToken: noop,
+  actionNames: [],
+  setLocale: noop,
+  setTimezone: noop,
+  setCurrency: noop,
+  setSinglePlugin: noop,
+  setBindings: noop,
+  connect: noop,
+  ...otherProperties,
+});
+
+export default buildStripes;

test/jest/__mock__/stripesComponents.mock.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+jest.mock('@folio/stripes/components', () => ({
+  Button: jest.fn(({
+    children,
+    onClick = jest.fn(),
+    // eslint-disable-next-line no-unused-vars
+    buttonStyle, buttonRef,
+    ...rest
+  }) => (
+    <button data-test-button type="button" {...rest} onClick={onClick}>
+      <span>
+        {children}
+      </span>
+    </button>
+  )),
+  Checkbox: jest.fn((props) => (
+    <input
+      type="checkbox"
+      {...props}
+    />
+  )),
+  FilterGroups: jest.fn(({ config, filters, onChangeFilter, onClearFilter }) => (
+    <div>
+      {JSON.stringify(config)}
+      {JSON.stringify(filters)}
+      {JSON.stringify(onChangeFilter)}
+      {JSON.stringify(onClearFilter)}
+    </div>
+  )),
+  Icon: jest.fn((props) => (props && props.children ? props.children : <span />)),
+  Modal: jest.fn(({ children, label, dismissible, footer, ...rest }) => {
+    return (
+      <div
+        data-test={dismissible ? '' : ''}
+        {...rest}
+      >
+        <h1>{label}</h1>
+        {children}
+        {footer}
+      </div>
+    );
+  }),
+  MultiColumnList: jest.fn((props) => (
+    <div data-testid={props['data-testid']} />
+  )),
+  // destructure appIcon and dismissible so they aren't incorrectly
+  // applied as DOM attributes via ...rest.
+  // eslint-disable-next-line no-unused-vars
+  Pane: jest.fn(({ children, className, defaultWidth, paneTitle, firstMenu, lastMenu, actionMenu, appIcon, dismissible, ...rest }) => {
+    return (
+      <div className={className} {...rest} style={{ width: defaultWidth }}>
+        <div>
+          {firstMenu ?? null}
+          {paneTitle}
+          {actionMenu ? actionMenu({ onToggle: jest.fn() }) : null}
+          {lastMenu ?? null}
+        </div>
+        {children}
+      </div>
+    );
+  }),
+  PaneMenu: jest.fn((props) => <div>{props.children}</div>),
+  Paneset: jest.fn((props) => <div>{props.children}</div>),
+  SearchField: jest.fn((props) => (
+    <input
+      {...props}
+    />
+  )),
+}));

test/jest/__mock__/stripesConfig.mock.js

@@ -0,0 +1 @@
+jest.mock('stripes-config', () => ({ modules: [] }), { virtual: true });

test/jest/__mock__/stripesCore.mock.js

@@ -0,0 +1,139 @@
+import React from 'react';
+
+jest.mock('@folio/stripes/core', () => {
+  const STRIPES = {
+    actionNames: [],
+    bindings: {},
+    clone: jest.fn(),
+    connect: (Component) => Component,
+    config: {
+      logCategories: '',
+      logPrefix: '',
+      logTimestamp: true,
+      showPerms: true,
+      showHomeLink: true,
+      listInvisiblePerms: true,
+      disableAuth: false,
+      hasAllPerms: false,
+    },
+    currency: 'USD',
+    discovery: {
+      interfaces: {},
+      isFinished: true,
+      modules: {},
+      okapi: '',
+    },
+    epics: {
+      add: jest.fn(),
+      middleware: jest.fn(),
+    },
+    hasInterface: () => true,
+    hasPerm: jest.fn().mockReturnValue(true),
+    icons: {},
+    locale: 'en-US',
+    logger: {
+      log: jest.fn(),
+    },
+    metadata: {},
+    okapi: {
+      authFailure: false,
+      okapiReady: true,
+      tenant: 'diku',
+      token: 'c0ffee',
+      translations: {
+        'stripes-components.Datepicker.calendar': 'calendar',
+        'stripes-components.Datepicker.calendarDaysList': 'calendar days list.',
+        'stripes-core.button.cancel': [{ type: 0, value: 'Cancel' }],
+        'ui-users.permission.modal.list.pane.header': 'Permissions',
+        'ui-users.permission.modal.list.pane.header.array': [{ type: 0, value: 'Permissions' }],
+        default: false,
+      },
+      url: 'https://folio-testing-okapi.dev.folio.org',
+      withoutOkapi: false,
+    },
+    plugins: {},
+    setBindings: jest.fn(),
+    setCurrency: jest.fn(),
+    setLocale: jest.fn(),
+    setSinglePlugin: jest.fn(),
+    setTimezone: jest.fn(),
+    setToken: jest.fn(),
+    store: {
+      getState: () => ({
+        okapi: {
+          token: 'abc',
+        },
+      }),
+      dispatch: jest.fn(),
+      subscribe: jest.fn(),
+      replaceReducer: jest.fn(),
+    },
+    timezone: 'UTC',
+    user: {
+      perms: {},
+      user: {
+        addresses: [],
+        firstName: 'Testy',
+        lastName: 'McTesterson',
+        email: '[email protected]',
+        id: 'b1add99d-530b-5912-94f3-4091b4d87e2c',
+        username: 'diku_admin',
+      },
+    },
+    withOkapi: true,
+  };
+
+  // eslint-disable-next-line react/prop-types
+  const stripesConnect = Component => ({ mutator, resources, stripes, ...rest }) => {
+    const fakeMutator = mutator || Object.keys(Component.manifest || {}).reduce((acc, mutatorName) => {
+      const returnValue = Component.manifest[mutatorName].records ? [] : {};
+
+      acc[mutatorName] = {
+        GET: jest.fn().mockReturnValue(Promise.resolve(returnValue)),
+        PUT: jest.fn().mockReturnValue(Promise.resolve()),
+        POST: jest.fn().mockReturnValue(Promise.resolve()),
+        DELETE: jest.fn().mockReturnValue(Promise.resolve()),
+        reset: jest.fn(),
+        update: jest.fn(),
+        replace: jest.fn(),
+      };
+
+      return acc;
+    }, {});
+
+    const fakeResources = resources || Object.keys(Component.manifest || {}).reduce((acc, resourceName) => {
+      acc[resourceName] = {
+        records: [],
+      };
+
+      return acc;
+    }, {});
+
+    const fakeStripes = stripes || STRIPES;
+
+    return (<Component
+      {...rest}
+      mutator={fakeMutator}
+      refreshRemote={jest.fn()}
+      resources={fakeResources}
+      stripes={fakeStripes}
+    />);
+  };
+
+  return {
+    ...jest.requireActual('@folio/stripes/core'),
+    AppIcon: jest.fn(({ ariaLabel }) => <span>{ariaLabel}</span>),
+    connect: stripesConnect,
+    IntlConsumer: jest.fn(({ children }) => {
+      const intl = {
+        formatMessage: jest.fn(({ id }) => id),
+      };
+      return (
+        <div>
+          {children(intl)}
+        </div>
+      );
+    }),
+    stripesConnect,
+  };
+});

test/jest/__mock__/stripesSmartComponents.mock.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+jest.mock('@folio/stripes/smart-components', () => ({
+  makeQueryFunction: jest.fn((value) => value),
+  SearchAndSortQuery: jest.fn(({ children, ...rest }) => <div {...rest}>{children}</div>),
+  SearchAndSortSearchButton: jest.fn(({
+    label,
+    id,
+    onClick = jest.fn(),
+    disabled,
+    ...restProps
+  }) => (
+    <div>
+      <button
+        type="button"
+        buttonStyle="none"
+        id={id}
+        onClick={onClick}
+        disabled={disabled}
+        {...restProps}
+      >
+        <span size="small" icon="times-circle-solid">
+          {label}
+        </span>
+      </button>
+    </div>
+  )),
+  SearchAndSortNoResultsMessage: jest.fn(({
+    label,
+    filterPaneIsVisible = true,
+    toggleFilterPane = jest.fn(),
+    ...rest
+  }) => (
+    <div {...rest}>
+      <div>
+        <span>{label}</span>
+      </div>
+      {!filterPaneIsVisible &&
+        <button
+          type="submit"
+          onClick={toggleFilterPane}
+        >
+          Show filters
+        </button>
+      }
+    </div>
+  )),
+  StripesConnectedSource: jest.fn(),
+}));