From e14ad1b8f767cce21e03e0d377fefecd071de0e0 Mon Sep 17 00:00:00 2001
From: Yury Saukou <yury_saukou@epam.com>
Date: Tue, 26 Nov 2024 16:53:34 +0400
Subject: [PATCH] provide keys for arrays items and add tests

---
 .../OrganizationVersion.test.js               |  2 +-
 .../OrganizationVersionView.test.js           | 54 +++++++++++++++++++
 .../OrganizationAccountsVersionView.js        |  5 +-
 .../OrganizationContactInfoVersionView.js     |  2 +-
 .../components/ContactAddressesVersionView.js |  1 +
 .../ContactPersonEmailsVersionView.js         |  1 +
 .../ContactPersonPhonesVersionView.js         |  1 +
 .../ContactPersonURLsVersionView.js           |  1 +
 .../OrganizationVendorTermsVersionView.js     |  2 +-
 9 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.test.js

diff --git a/src/Organizations/OrganizationVersion/OrganizationVersion.test.js b/src/Organizations/OrganizationVersion/OrganizationVersion.test.js
index 2e18d322..594c149e 100644
--- a/src/Organizations/OrganizationVersion/OrganizationVersion.test.js
+++ b/src/Organizations/OrganizationVersion/OrganizationVersion.test.js
@@ -35,7 +35,7 @@ jest.mock('@folio/stripes-acq-components', () => ({
 const { organizationSnapshot, ...auditEvent } = organizationAuditEvent;
 
 const latestSnapshot = {
-  ...organizationSnapshot,
+  ...organizationSnapshot.map,
   edition: 'Second edition',
 };
 const originalSnapshot = { ...organizationSnapshot };
diff --git a/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.test.js b/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.test.js
new file mode 100644
index 00000000..a54824b5
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.test.js
@@ -0,0 +1,54 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import {
+  organization,
+  organizationAuditEvent,
+} from 'fixtures';
+import { ORGANIZATION_VERSIONS_VIEW_ROUTE } from '../../../common/constants';
+import { OrganizationVersionView } from './OrganizationVersionView';
+
+const { organizationSnapshot } = organizationAuditEvent;
+
+const queryClient = new QueryClient();
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter
+      initialEntries={[{
+        pathname: ORGANIZATION_VERSIONS_VIEW_ROUTE.replace(':id', organization.id),
+      }]}
+    >
+      {children}
+    </MemoryRouter>
+  </QueryClientProvider>
+);
+
+const renderOrganizationVersionView = (props = {}) => render(
+  <OrganizationVersionView
+    version={organizationSnapshot.map}
+    {...props}
+  />,
+  { wrapper },
+);
+
+describe('OrganizationVersion', () => {
+  it('should render version history view', async () => {
+    renderOrganizationVersionView();
+
+    expect(screen.getByText('ui-organizations.summary')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.contactInformation')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.contactPeople')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.interface')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.vendorInformation')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.vendorTerms')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.accounts')).toBeInTheDocument();
+  });
+});
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationAccountsVersionView/OrganizationAccountsVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationAccountsVersionView/OrganizationAccountsVersionView.js
index f93ad5a0..b09ebc50 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationAccountsVersionView/OrganizationAccountsVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationAccountsVersionView/OrganizationAccountsVersionView.js
@@ -25,7 +25,10 @@ export const OrganizationAccountsVersionView = ({ name, version }) => {
     <>
       {version?.accounts?.map((account, indx) => {
         return (
-          <Row className={css.organizationAccount}>
+          <Row
+            key={account.id}
+            className={css.organizationAccount}
+          >
             <Col xs={3}>
               <VersionKeyValue
                 name={`${name}[${indx}].name`}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
index 7dc945fe..1e8f8c0f 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
@@ -26,7 +26,7 @@ import {
 
 const setInitialArrayFieldPaths = (obj, paths) => {
   return paths.reduce((result, path) => {
-    const target = get(result, path);
+    const target = get(result, path, []);
 
     target.forEach((item, indx) => {
       item._initialFieldPath = `${path}[${indx}]`;
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
index db641a15..aac1908b 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
@@ -17,6 +17,7 @@ export const ContactAddressesVersionView = ({ addresses }) => {
         {addresses?.map((address) => {
           return (
             <Card
+              key={address.id}
               headerStart={(
                 <ContactCardHeaderVersionView
                   name={`${address?._initialFieldPath}.isPrimary`}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
index 46cf494e..80d17f0e 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
@@ -23,6 +23,7 @@ export const ContactPersonEmailsVersionView = ({ emails }) => {
         {emails?.map((email) => {
           return (
             <Card
+              key={email.id}
               headerStart={(
                 <ContactCardHeaderVersionView
                   name={`${email?._initialFieldPath}.isPrimary`}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
index 177cc97a..826fbc08 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
@@ -24,6 +24,7 @@ export const ContactPersonPhonesVersionView = ({ phones }) => {
           {phones?.map((phone) => {
             return (
               <Card
+                key={phone.id}
                 headerStart={(
                   <ContactCardHeaderVersionView
                     name={`${phone?._initialFieldPath}.isPrimary`}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
index 1577c24e..e4c4e8a7 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
@@ -24,6 +24,7 @@ export const ContactPersonURLsVersionView = ({ urls }) => {
         {urls?.map((url) => {
           return (
             <Card
+              key={url.id}
               headerStart={(
                 <ContactCardHeaderVersionView
                   name={`${url?._initialFieldPath}.isPrimary`}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationVendorTermsVersionView/OrganizationVendorTermsVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationVendorTermsVersionView/OrganizationVendorTermsVersionView.js
index 5c4abddd..87eb069c 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationVendorTermsVersionView/OrganizationVendorTermsVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationVendorTermsVersionView/OrganizationVendorTermsVersionView.js
@@ -21,7 +21,7 @@ export const OrganizationVendorTermsVersionView = ({ name, version }) => {
     <>
       {version?.agreements?.map((agreement, indx) => {
         return (
-          <Row>
+          <Row key={agreement.id}>
             <Col xs={3}>
               <VersionKeyValue
                 name={`${name}[${indx}].name`}