Add more test

client/src/components/AbstractLinkField/AbstractLinkField.js

@@ -17,7 +17,7 @@ const AbstractLinkField = ({
     return <Loading />;
   }
 
-  // When editing is true, wu display a modal to let the user edit the link data
+  // When editing is true, we display a modal to let the user edit the link data
   const [editingId, setEditingId] = useState(false);
   // newTypeKey define what link type we are using for brand new links
   const [newTypeKey, setNewTypeKey] = useState('');

client/src/components/AbstractLinkField/tests/AbstractLinkField-test.js

@@ -0,0 +1,68 @@
+/* global jest, test, expect */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import LinkField from '../AbstractLinkField';
+import { loadComponent } from 'lib/Injector';
+
+const props = {
+  id: 'my-link-field',
+  loading: false,
+  Loading: () => <div>Loading...</div>,
+  data: {
+    Root: null,
+    Main: null,
+    Title: '',
+    OpenInNew: 0,
+    ExternalUrl: 'http://google.com',
+    ID: null,
+    typeKey: 'external'
+  },
+  Picker: ({ id, onEdit, types, onClear, onSelect }) => <div>
+    <span>Picker</span>
+    <span>fieldid:{id}</span>
+    <span>types:{types[0].key}-{types[0].icon}-{types[0].title}</span>
+    <button onClick={() => onEdit(123)}>onEdit</button>
+    <button onClick={(event) => onClear(event, 123)}>onClear</button>
+    <button onClick={(event) => onSelect('sitetree')}>onSelect</button>
+    </div>,
+  onChange: jest.fn(),
+  types: {
+    sitetree: {
+      key: 'sitetree',
+      icon: 'page',
+      title: 'Site tree'
+    }
+  },
+  linkDescriptions: [
+    { title: 'link title', description: 'link description' }
+  ],
+  clearLinkData: jest.fn(),
+  buildLinkProps: jest.fn(),
+  updateLinkData: jest.fn(),
+  selectLinkData: jest.fn(),
+};
+
+
+const LinkModal = () => <div>LinkModal</div>;
+jest.mock('lib/Injector', () => ({
+    loadComponent: () => LinkModal
+  })
+);
+
+
+describe('AbstractLinkField', () => {
+  test('Loading component', () => {
+    render(<LinkField {...props} loading />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('Empty field', () => {
+    render(<LinkField {...props} data={{ }} />);
+    expect(screen.getByText('Picker')).toBeInTheDocument();
+    expect(screen.getByText('fieldid:my-link-field')).toBeInTheDocument();
+    expect(screen.getByText('types:sitetree-page-Site tree')).toBeInTheDocument();
+  });
+});
+
+

package.json

@@ -52,6 +52,7 @@
     "@babel/runtime": "^7.20.0",
     "@silverstripe/eslint-config": "^1.0.0-alpha6",
     "@silverstripe/webpack-config": "^2.0.0-alpha9",
+    "@testing-library/jest-dom": "^5.17.0",
     "autoprefixer": "^10.4.14",
     "babel-jest": "^29.2.2",
     "jest-cli": "^29.2.2",
@@ -69,10 +70,8 @@
     "core-js": "^3.26.0",
     "prop-types": "^15.8.1",
     "qs": "^6.11.0",
-    "react": "^18.2.0",
     "react-dnd": "^5.0.0",
     "react-dnd-html5-backend": "^5.0.1",
-    "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",
     "react-router": "^6.4.2",
     "react-router-dom": "^6.4.2",
@@ -84,6 +83,10 @@
     "uuid": "^8.3.2",
     "webpack-sources": "^3.2.3"
   },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "browserslist": [
     "defaults"
   ]