provide keys for arrays items and add tests

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 };

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();
+  });
+});

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`}

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}]`;

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`}

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`}

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`}

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`}

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`}