@spokane-folio/security-incident 1.0.28

package/src/settings/IncidentTypeEditPane.test.js

@@ -0,0 +1,170 @@
+/**
+ * IncidentTypeEditPane.test.js
+ * Snapshot + smoke + basic behavior tests for the IncidentTypeEditPane.
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createRoot } from 'react-dom/client';
+import IncidentTypeEditPane from './IncidentTypeEditPane';
+
+/* ------------------------------------------------------------------ *
+ * 1) external-library mocks
+ * ------------------------------------------------------------------ */
+jest.mock('react-intl', () => ({
+  useIntl          : () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage : (p) => <span>{p.id}</span>,
+}));
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ id: 't1' }),
+}));
+
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const mk = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  // IMPORTANT: render footer (and renderHeader) so buttons appear in DOM
+  const Pane = (p) => (
+    <div>
+      {typeof p.renderHeader === 'function' ? p.renderHeader({}) : p.renderHeader}
+      {p.children}
+      {p.footer}
+    </div>
+  );
+
+  // PaneFooter needs to render its start/end
+  const PaneFooter = (p) => <div>{p.renderStart}{p.renderEnd}</div>;
+
+  return {
+    Accordion   : mk('div'),
+    AccordionSet: mk('div'),
+    Button      : (p) => <button {...p}>{p.children}</button>,
+    Col         : mk('div'),
+    Pane,
+    PaneHeader  : mk('div'),
+    PaneFooter,
+    Row         : mk('div'),
+    Select      : (p) => <select {...p}>{p.children}</select>,
+    TextArea    : (p) => <textarea {...p}>{p.children}</textarea>,
+    TextField   : (p) => <input {...p} />,
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 2) child-component mocks
+ * ------------------------------------------------------------------ */
+jest.mock('./GetSingleIncidentTypeDetails', () => {
+  const React = require('react');
+  return (props) => {
+    React.useEffect(() => {
+      props.handleFetchedDetails?.({
+        id: 't1',
+        title: 'Type 1 - Disorderly',
+        category_id: 'cat-1',
+        description: 'Initial description',
+      });
+    }, []);
+    return <div>Mock GetSingleIncidentTypeDetails</div>;
+  };
+});
+
+jest.mock('./GetIncidentTypesDetails', () => {
+  const React = require('react');
+  return (props) => {
+    React.useEffect(() => {
+      props.handleIncidentTypes?.([
+        { id: 't1', title: 'Type 1 - Disorderly', category_id: 'cat-1', description: 'Initial description' },
+        { id: 't2', title: 'Type 2 - Theft',       category_id: 'cat-2', description: 'Other' },
+      ]);
+    }, []);
+    return <div>Mock GetIncidentTypesDetails</div>;
+  };
+});
+
+jest.mock('./GetIncidentCategories', () => () => (
+  <div>Mock GetIncidentCategories</div>
+));
+
+jest.mock('./PutIncidentType', () => (p) => (
+  <div>Mock PutIncidentType (context={p?.context})</div>
+));
+
+/* ------------------------------------------------------------------ *
+ * 3) IncidentContext mock
+ * ------------------------------------------------------------------ */
+jest.mock('../contexts/IncidentContext', () => ({
+  useIncidents: () => ({
+    incidentCategories: [
+      { id: 'cat-1', title: 'Behavior' },
+      { id: 'cat-2', title: 'Property' },
+    ],
+  }),
+}));
+
+/* ------------------------------------------------------------------ *
+ * 4) DOM setup / teardown
+ * ------------------------------------------------------------------ */
+let container, root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  root.unmount();
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * 5) helpers
+ * ------------------------------------------------------------------ */
+const findButtonByText = (rootEl, text) => {
+  const btns = Array.from(rootEl.querySelectorAll('button'));
+  return btns.find((b) => (b.textContent || '').includes(text));
+};
+
+/* ------------------------------------------------------------------ *
+ * 6) tests
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeEditPane handleCloseEdit={jest.fn()} />);
+  });
+  // allow effects (details/types) to flush
+  await act(async () => {});
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child components', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeEditPane handleCloseEdit={jest.fn()} />);
+  });
+  await act(async () => {});
+  const txt = container.textContent;
+  expect(txt).toContain('Mock GetSingleIncidentTypeDetails');
+  expect(txt).toContain('Mock GetIncidentCategories');
+  expect(txt).toContain('Mock GetIncidentTypesDetails');
+});
+
+it('enables the Save button once form data is present', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeEditPane handleCloseEdit={jest.fn()} />);
+  });
+  await act(async () => {}); // flush state updates from useEffect
+  const saveBtn = findButtonByText(container, 'save-and-close-button');
+  expect(saveBtn).toBeTruthy();
+  expect(saveBtn.hasAttribute('disabled')).toBe(false);
+});
+
+it('submits and renders PutIncidentType when Save is clicked', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeEditPane handleCloseEdit={jest.fn()} />);
+  });
+  await act(async () => {}); // flush initial effects
+  const saveBtn = findButtonByText(container, 'save-and-close-button');
+  await act(async () => {
+    saveBtn.click();
+  });
+  expect(container.textContent).toContain('Mock PutIncidentType');
+});

package/src/settings/IncidentTypesPaneset.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useHistory, Switch, Route } from 'react-router-dom';
+import {
+  Button,
+  Col,
+  NavList,
+  NavListItem,
+  NavListSection,
+  Pane,
+  PaneHeader,
+  Paneset,
+  Row,
+} from '@folio/stripes/components';
+// import GetIncidentTypesIds from './GetIncidentTypesIds';
+import GetIncidentTypesDetails from './GetIncidentTypesDetails';
+import IncidentTypeDetailsPane from './IncidentTypeDetailsPane';
+import IncidentTypeEditPane from './IncidentTypeEditPane';
+import NewIncidentTypePane from './NewIncidentTypePane';
+import { useIncidents } from '../contexts/IncidentContext';
+
+const IncidentTypesPaneset = () => {
+  const { incidentTypesNamesIdsList } = useIncidents();
+  const history = useHistory();
+  const [typesList, setTypesList] = useState([]);
+
+  const sortTypesList = (responseTypesList) => {
+    const sorted = responseTypesList.sort((a, b) =>  {  
+      // parse 'title' of object into numeric parts
+      const parseTitle = (title) => {
+        // split by any non-numeric character, filter boolean for empty str, map number ensure each part into Number
+        return title.split(/[^\d]+/).filter(Boolean).map(Number);
+      };
+      
+      const aParts = parseTitle(a.title);
+      const bParts = parseTitle(b.title);
+      // itereate parts of both titles
+      for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+        const aValue = aParts[i] || 0; //if fewer parts the treated as 0
+        const bValue = bParts[i] || 0;
+        // if different
+        if (aValue !== bValue) {
+          // determine sort order, if a is less than b, negative value is returned, and a comes before b
+          // if a is greater than b, func returns positive value and a comes after b 
+          return aValue - bValue;
+        };
+      };
+      // if all parts equal or no difference found, return 0, no change in order
+      return 0;
+    });
+    return sorted;
+  };
+
+  // const handleGetTypesList = (list) => {
+  //   const sortedList = sortTypesList(list);
+  //   setTypesList(sortedList);
+  // };
+
+  useEffect(() => {
+    const sortedList = sortTypesList(incidentTypesNamesIdsList);
+    setTypesList(sortedList);
+  }, [incidentTypesNamesIdsList])
+
+  const handleShowDetails = (id) => {
+    history.push(`/settings/incidents/types/${id}`);
+  };
+
+  const handleCloseDetails = () => {
+    history.push(`/settings/incidents/types`);
+  };
+
+  const handleShowEdit = (id) => {
+    history.push(`/settings/incidents/types/${id}/edit`);
+  };
+
+  const handleCloseEdit = () => {
+    history.push(`/settings/incidents/types`);
+  };
+
+  const handleNew = () => {
+    history.push(`/settings/incidents/types/new`);
+  };
+
+  const handleCloseNew = () => {
+    history.push(`/settings/incidents/types`);
+  };
+  // <FormattedMessage id="settings.incident-types-new-button"/>
+  return (
+    <Paneset>
+      <Pane
+        paneTitle={<FormattedMessage id="settings.incident-types.paneTitle" />}
+        defaultWidth="fill"
+        renderHeader={(renderProps) => <PaneHeader {...renderProps} />}
+      >
+        <Row>
+          <Col xs={10}>
+            <Button buttonStyle="primary" onClick={handleNew}>
+              <FormattedMessage id="settings.incident-types-new-button" />
+            </Button>
+          </Col>
+        </Row>
+
+      {
+        typesList.length > 0 ? (
+          <NavList>
+            <NavListSection>
+              {typesList.map((type, index) => (
+                <NavListItem
+                  key={index}
+                  onClick={() => handleShowDetails(type.id)}
+                >
+                  {type.title}
+                </NavListItem>
+              ))}
+            </NavListSection>
+          </NavList>
+        ) : (
+          <p>
+          <FormattedMessage 
+            id="settings.incident-types-default-if-no-list"/>
+          </p>
+        )
+      }
+
+      </Pane>
+      {/* <GetIncidentTypesIds 
+        contextTypeProp="incident-types-paneset"
+        handleGetTypesList={handleGetTypesList} 
+        /> */}
+      <GetIncidentTypesDetails 
+        context='settings'
+      />
+      <Switch>
+        <Route
+          exact
+          path="/settings/incidents/types/new"
+          render={(props) => (
+            <NewIncidentTypePane {...props} handleCloseNew={handleCloseNew} />
+          )}
+        />
+        <Route
+          exact
+          path="/settings/incidents/types/:id"
+          render={(props) => (
+            <IncidentTypeDetailsPane
+              {...props}
+              handleCloseDetails={handleCloseDetails}
+              handleShowEdit={handleShowEdit}
+            />
+          )}
+        />
+        <Route
+          exact
+          path="/settings/incidents/types/:id/edit"
+          render={(props) => (
+            <IncidentTypeEditPane
+              {...props}
+              handleCloseEdit={handleCloseEdit}
+            />
+          )}
+        />
+      </Switch>
+    </Paneset>
+  );
+};
+
+export default IncidentTypesPaneset;

package/src/settings/IncidentTypesPaneset.test.js

@@ -0,0 +1,124 @@
+/**
+ * IncidentTypesPaneset.test.js
+ * Snapshot + smoke tests for the IncidentTypesPaneset settings container.
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createRoot } from 'react-dom/client';
+import IncidentTypesPaneset from './IncidentTypesPaneset';
+
+/* ------------------------------------------------------------------ *
+ * 1. external-library mocks
+ * ------------------------------------------------------------------ */
+jest.mock('react-intl', () => ({
+  useIntl          : () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage : (p) => <span>{p.id}</span>,
+}));
+
+jest.mock('react-router-dom', () => ({
+  useHistory : () => ({ push: jest.fn(), replace: jest.fn() }),
+  useLocation: () => ({ pathname: '/settings/incidents/types', search: '' }),
+  // keep these inert for stable snapshots
+  Switch     : (p) => <div>{p.children}</div>,
+  Route      : () => null,
+}));
+
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const mk = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  // Render NavList as simple UL/LI structure so items are visible in textContent
+  const NavList        = (p) => <ul {...p}>{p.children}</ul>;
+  const NavListSection = (p) => <li {...p}>{p.children}</li>;
+  const NavListItem    = (p) => <li onClick={p.onClick}>{p.children}</li>;
+
+  return {
+    Button       : mk('button'),
+    Col          : mk('div'),
+    Pane         : mk('div'),
+    PaneHeader   : mk('div'),
+    Paneset      : mk('div'),
+    Row          : mk('div'),
+    NavList,
+    NavListItem,
+    NavListSection,
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 2. child-component mocks
+ * ------------------------------------------------------------------ */
+jest
+  .mock('./GetIncidentTypesDetails', () => () => <div>Mock GetIncidentTypesDetails</div>)
+  .mock('./IncidentTypeDetailsPane', () => () => <div>Mock IncidentTypeDetailsPane</div>)
+  .mock('./IncidentTypeEditPane',    () => () => <div>Mock IncidentTypeEditPane</div>)
+  .mock('./NewIncidentTypePane',     () => () => <div>Mock NewIncidentTypePane</div>);
+
+/* ------------------------------------------------------------------ *
+ * 3. IncidentContext mock
+ * ------------------------------------------------------------------ */
+jest.mock('../contexts/IncidentContext', () => {
+  // Unsorted input list exercises the numeric-part sorter in the component
+  const incidentTypesNamesIdsList = [
+    { id: 't10', title: 'Type 10 - Assault' },
+    { id: 't2',  title: 'Type 2 - Theft' },
+    { id: 't1',  title: 'Type 1 - Disorderly' },
+    { id: 't21', title: 'Type 2.1 - Minor' },
+  ];
+  return {
+    useIncidents: () => ({
+      incidentTypesNamesIdsList,
+    }),
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 4. DOM setup / teardown
+ * ------------------------------------------------------------------ */
+let container, root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  root.unmount();
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * 5. tests
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', async () => {
+  await act(async () => { root.render(<IncidentTypesPaneset />); });
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child components', async () => {
+  await act(async () => { root.render(<IncidentTypesPaneset />); });
+  const txt = container.textContent;
+  expect(txt).toContain('Mock GetIncidentTypesDetails');
+
+  // list or fallback text should render
+  expect(
+    txt.includes('Type 1 - Disorderly') ||
+    txt.includes('settings.incident-types-default-if-no-list')
+  ).toBe(true);
+});
+
+it('sorts the incident type list by numeric parts in the title', async () => {
+  await act(async () => { root.render(<IncidentTypesPaneset />); });
+  const txt = container.textContent;
+
+  // ensure 1 < 2 < 2.1 < 10 by index positions in the rendered text
+  const i1  = txt.indexOf('Type 1 - Disorderly');
+  const i2  = txt.indexOf('Type 2 - Theft');
+  const i21 = txt.indexOf('Type 2.1 - Minor');
+  const i10 = txt.indexOf('Type 10 - Assault');
+
+  expect(i1).toBeGreaterThanOrEqual(0);
+  expect(i2).toBeGreaterThan(i1);
+  expect(i21).toBeGreaterThan(i2);
+  expect(i10).toBeGreaterThan(i21);
+});