MNT Use React Testing Library

silverstripe · May 1, 2023 · 3cb0995 · 3cb0995
1 parent 707fd3a
commit 3cb0995
Show file tree

Hide file tree

Showing 9 changed files with 717 additions and 809 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/components/IntroScreen/tests/IntroScreen-test.js b/client/src/components/IntroScreen/tests/IntroScreen-test.js
@@ -1,42 +1,27 @@
-/* global jest, describe, it, expect */
+/* global jest, test, describe, it, expect */
 
 import React from 'react';
 import IntroScreen from '../IntroScreen';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16/build/index';
+import { render } from '@testing-library/react';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-const errorSpy = jest.spyOn(global.console, 'error');
-const warnSpy = jest.spyOn(global.console, 'warn');
-
-const props = {
-  show: true,
-  onClose: () => {},
-};
-
-describe('IntroScreen', () => {
-  describe('render()', () => {
-    beforeEach(() => {
-      errorSpy.mockClear();
-      warnSpy.mockClear();
-    });
-
-    it('renders', () => {
-      mount(
-        <IntroScreen {...props} />
-      );
-      expect(errorSpy).not.toHaveBeenCalled();
-      expect(warnSpy).not.toHaveBeenCalled();
-    });
+test('IntroScreen renders when show is true', () => {
+  const { container } = render(
+    <IntroScreen {...{
+      show: true,
+      onClose: () => {},
+    }}
+    />
+  );
+  expect(container.querySelector('.campaign-info')).not.toBeNull();
+});
 
-    it('renders when show is false', () => {
-      const props2 = { ...props, show: false };
-      mount(
-        <IntroScreen {...props2} />
-      );
-      expect(errorSpy).not.toHaveBeenCalled();
-      expect(warnSpy).not.toHaveBeenCalled();
-    });
-  });
+test('IntroScreen does not render when show is false', () => {
+  const { container } = render(
+    <IntroScreen {...{
+      show: false,
+      onClose: () => {},
+    }}
+    />
+  );
+  expect(container.querySelector('.campaign-info')).toBeNull();
 });
diff --git a/client/src/containers/CampaignAdmin/CampaignAdmin.js b/client/src/containers/CampaignAdmin/CampaignAdmin.js
@@ -352,6 +352,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @returns {object}
    */
   renderDetailEditView() {
+    const { FormBuilderLoaderComponent, BreadcrumbComponent } = this.props;
     if (this.props.router.params.id <= 0) {
       return this.renderCreateView();
     }
@@ -361,10 +362,10 @@ By removing this item all linked items will be removed unless used elsewhere.`;
     return (
       <div className="fill-height">
         <Toolbar showBackButton onBackButtonClick={this.handleBackButtonClick}>
-          <Breadcrumb multiline />
+          <BreadcrumbComponent multiline />
         </Toolbar>
 
-        <FormBuilderLoader
+        <FormBuilderLoaderComponent
           fieldHolder={{ className: 'panel panel--padded panel--scrollable flexbox-area-grow form--inline' }}
           actionHolder={{ className: 'toolbar--south' }}
           onAction={this.handleFormAction}
@@ -381,13 +382,14 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @returns {object}
    */
   renderCreateView() {
+    const { FormBuilderLoaderComponent, BreadcrumbComponent } = this.props;
     const { schemaUrl } = this.props.sectionConfig.form.campaignCreateForm;
     return (
       <div className="fill-height">
         <Toolbar showBackButton onBackButtonClick={this.handleBackButtonClick}>
-          <Breadcrumb multiline />
+          <BreadcrumbComponent multiline />
         </Toolbar>
-        <FormBuilderLoader
+        <FormBuilderLoaderComponent
           fieldHolder={{ className: 'panel panel--padded panel--scrollable flexbox-area-grow form--inline' }}
           actionHolder={{ className: 'toolbar--south' }}
           onSubmit={this.handleCreateCampaignSubmit}
@@ -405,7 +407,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
    * @returns {object}
    */
   renderIndexView() {
-    const { showMessage } = this.props;
+    const { showMessage, BreadcrumbComponent, FormBuilderLoaderComponent } = this.props;
     const { schemaUrl } = this.props.sectionConfig.form.EditForm;
     const formActionProps = {
       title: i18n._t('CampaignAdmin.ADDCAMPAIGN', 'Add campaign'),
@@ -422,7 +424,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
     return (
       <div className="fill-height" aria-expanded="true">
         <Toolbar>
-          <Breadcrumb multiline />
+          <BreadcrumbComponent multiline />
         </Toolbar>
         <div className="panel panel--scrollable flexbox-area-grow">
           <IntroScreen show={showMessage} onClose={this.handleHideMessage} />
@@ -443,7 +445,7 @@ By removing this item all linked items will be removed unless used elsewhere.`;
                 </div>
               </div>
             </div>
-            <FormBuilderLoader {...formBuilderProps} />
+            <FormBuilderLoaderComponent {...formBuilderProps} />
           </div>
         </div>
       </div>
@@ -527,6 +529,8 @@ CampaignAdmin.propTypes = {
   showMessage: PropTypes.bool,
   previewState: PropTypes.oneOf(['edit', 'preview', 'split']),
   onResize: PropTypes.func.isRequired,
+  FormBuilderLoaderComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  BreadcrumbComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };
 
 CampaignAdmin.defaultProps = {
@@ -536,6 +540,8 @@ CampaignAdmin.defaultProps = {
   },
   view: 'show',
   breadcrumbs: [],
+  FormBuilderLoaderComponent: FormBuilderLoader,
+  BreadcrumbComponent: Breadcrumb,
 };
 
 function mapStateToProps(state, ownProps) {

diff --git a/client/src/containers/CampaignAdmin/CampaignAdminList.js b/client/src/containers/CampaignAdmin/CampaignAdminList.js
@@ -130,6 +130,7 @@ class CampaignAdminList extends Component {
    * @return {array}
    */
   getMoreActions() {
+    const { DropdownItemComponent } = this.props;
     const selectedItem = this.getSelectedItem();
 
     if (!selectedItem) {
@@ -144,7 +145,7 @@ class CampaignAdminList extends Component {
     );
     const removeAction = selectedItem.Added === 'explicitly'
       ? (
-        <DropdownItem
+        <DropdownItemComponent
           key="remove_action"
           className="btn btn-secondary action"
           onClick={this.handleRemoveItem}
@@ -153,17 +154,17 @@ class CampaignAdminList extends Component {
             'CampaignAdmin.REMOVE',
             'Remove'
           )}
-        </DropdownItem>
+        </DropdownItemComponent>
       )
       : (
-        <DropdownItem
+        <DropdownItemComponent
           tag="p"
           key="unremoveable_info"
           className="alert alert-info campaign-admin__unremoveable-item"
         >
           <span className="font-icon-link" />
           {i18n.inject(unremoveableInfoText, { number: requiredByNum })}
-        </DropdownItem>
+        </DropdownItemComponent>
       );
 
     return [
@@ -402,7 +403,7 @@ class CampaignAdminList extends Component {
    * @return object
    */
   renderCampaignAdminListDetail(body) {
-    const { previewState, onBackButtonClick, newItem } = this.props;
+    const { previewState, onBackButtonClick, newItem, BreadcrumbComponent } = this.props;
 
     const bodyClass = classNames(
       'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow',
@@ -436,7 +437,7 @@ class CampaignAdminList extends Component {
     return (
       <div className={itemClass} aria-expanded="true">
         <Toolbar showBackButton onBackButtonClick={onBackButtonClick}>
-          <Breadcrumb multiline />
+          <BreadcrumbComponent multiline />
         </Toolbar>
         {newItemInfo}
         <div className={bodyClass}>
@@ -581,10 +582,13 @@ CampaignAdminList.propTypes = {
   ViewModeComponent: PropTypes.elementType,
   FormActionComponent: PropTypes.elementType,
   previewState: PropTypes.oneOf(['edit', 'preview', 'split']),
+  BreadcrumbComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  DropdownItemComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };
 
 CampaignAdminList.defaultProps = {
-
+  BreadcrumbComponent: Breadcrumb,
+  DropdownItemComponent: DropdownItem,
 };
 
 function mapStateToProps(state, ownProps) {