Migrate to react-ocean-forms 3.0.0

CHANGELOG.MD

@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [Unreleased]
+- Updated to `react-ocean-forms` 3.0.0
+- Added `containerClass` prop to `FieldLine` and thus to all input components
+
 ## [3.2.0] # 2019-08-20
 - Improved `FormButton` props to include all reactstrap props
 - Added `fieldErrorComponent` to `ValidationSummary`

config/jest/testingLibrary.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

jest.config.js

@@ -1,8 +1,10 @@
 module.exports = {
   setupFiles: [
-    '<rootDir>/config/jest/enzyme.ts',
     '<rootDir>/src/utils/registerCustomMessages.ts',
   ],
+  setupFilesAfterEnv: [
+    '<rootDir>/config/jest/testingLibrary.ts',
+  ],
   collectCoverageFrom: [
     '<rootDir>/src/**/*.{ts,tsx}',
     '!<rootDir>/src/test-utils/**',
@@ -11,7 +13,4 @@ module.exports = {
     '^.+\\.tsx?$': 'ts-jest',
     '^.+\\.s?css$': '<rootDir>/config/jest/cssTransform.ts',
   },
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ocean-forms-bootstrap",
-  "version": "3.2.0",
+  "version": "4.0.0-alpha.1",
   "description": "Forms components for react based on the context api.",
   "main": "build/index.js",
   "module": "build/index.es.js",
@@ -33,45 +33,42 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
-    "@types/enzyme": "^3.10.4",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.23",
-    "@types/react": "^16.9.16",
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
+    "@testing-library/jest-dom": "^5.0.0",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^24.9.0",
+    "@types/react": "^16.9.18",
+    "@types/testing-library__jest-dom": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.17.0",
+    "@typescript-eslint/parser": "^2.17.0",
     "babel-eslint": "^10.0.3",
     "coveralls": "^3.0.6",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.1.0",
-    "eslint-plugin-flowtype": "^4.5.2",
-    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-flowtype": "^4.6.0",
+    "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react": "^7.18.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "jest": "^24.9.0",
     "moment": "^2.24.0",
     "react": "^16.12.0",
     "react-datetime": "^2.16.3",
     "react-dom": "^16.12.0",
-    "react-ocean-forms": "^2.2.0",
+    "react-ocean-forms": "^3.0.0-beta.5",
     "react-select": "^2.4.4",
     "reactstrap": "^7.1.0",
-    "rollup": "^1.27.10",
+    "rollup": "^1.29.1",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-filesize": "^6.2.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-typescript2": "^0.25.3",
-    "ts-jest": "24.2.0",
+    "ts-jest": "24.3.0",
     "ts-loader": "^6.2.1",
-    "typescript": "^3.7.3"
+    "typescript": "^3.7.5"
   },
   "resolutions": {
-    "@types/react": "16.9.16",
-    "@types/enzyme": "3.10.4"
+    "@types/react": "16.9.18"
   },
   "files": [
     "build/"

src/components/Check/Check.test.tsx

@@ -1,86 +1,74 @@
-import * as React from 'react';
+import React from 'react';
 
-import { shallow, ShallowWrapper } from 'enzyme';
-import { IFieldComponentFieldProps, IFieldComponentMeta } from 'react-ocean-forms';
+import { render, fireEvent, waitForElement } from '@testing-library/react'
+import { Form } from 'react-ocean-forms';
 
-import { checkInfoToggling } from '../../test-utils/checkInfoToggling';
-import { createMockField, createMockFieldMeta } from '../../test-utils/enzymeFormContext';
-import { BaseCheck } from './Check';
-import { ICheckProps } from './Check.types';
+import { Check } from './Check';
 
 describe('<Check />', () => {
-  interface ISetupArgs {
-    props?: Partial<ICheckProps>;
-    metaOverrides?: Partial<IFieldComponentMeta>;
-  }
-
-  interface ISetupResult {
-    wrapper: ShallowWrapper;
-    meta: IFieldComponentMeta;
-    field: IFieldComponentFieldProps;
-  }
-
-  const setup = ({
-    props,
-    metaOverrides,
-  }: ISetupArgs = {}): ISetupResult => {
-    const fieldLabel = 'field0';
-    const meta = {
-      ...createMockFieldMeta(),
-      ...metaOverrides,
-    };
-    const field = createMockField();
-
-    const wrapper = shallow((
-      <BaseCheck
-        label={fieldLabel}
-        meta={meta}
-        field={field}
-        {...props}
-      />
-    ));
-
-    return {
-      wrapper,
-      meta,
-      field,
-    };
-  };
-
-  it('should render correctly', () => {
-    const { wrapper } = setup();
-
-    expect(wrapper.find('Input').exists()).toBeTruthy();
-    expect(wrapper).toMatchSnapshot();
+  it('should render without crashing', () => {
+    const { asFragment, getByRole } = render(
+      <Form>
+        <Check name="mock" label="mock" />
+      </Form>
+    );
+
+    expect(getByRole('checkbox')).toBeInTheDocument();
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should call field.onChange when the input changes', () => {
-    const { wrapper, field } = setup();
-    const event = { target: { name: field.name, checked: false } };
+  it('should call field.onChange when the input changes', async () => {
+    const handleChange = jest.fn();
+    const { getByRole } = render(
+      <Form>
+        <Check name="mock" label="mock" onChange={handleChange} />
+      </Form>
+    );
 
-    wrapper.find('Input').simulate('click', event);
-    expect(field.onChange).toHaveBeenCalledWith({
-      target: {
-        value: false,
-      },
-    });
-  });
+    fireEvent.click(getByRole('checkbox'));
+    expect(handleChange).toHaveBeenCalledWith(true);
 
-  ((): void => {
-    const { wrapper } = setup();
-    checkInfoToggling(wrapper);
-  })();
+    let checkbox = await waitForElement(() => getByRole('checkbox'));
+    expect(checkbox).toBeChecked();
+
+    fireEvent.click(getByRole('checkbox'));
+    expect(handleChange).toHaveBeenCalledWith(false);
+
+    checkbox = await waitForElement(() => getByRole('checkbox'));
+    expect(checkbox).not.toBeChecked();
+  });
 
   it('should add the has-info class to InputGroup if info is present', () => {
-    const { wrapper } = setup({ props: { info: 'mock-info' } });
-    expect(wrapper.find('InputGroup').prop('className')).toEqual(expect.stringContaining('has-info'));
+    const { asFragment } = render(
+      <Form>
+        <Check name="mock" label="mock" info="info text" />
+      </Form>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should display an info message if the info button has been clicked', async () => {
+    const { getByRole, getByText } = render(
+      <Form>
+        <Check name="mock" label="mock" info="info text" />
+      </Form>
+    );
+
+    fireEvent.click(getByRole('button'));
+
+    const infoText = await waitForElement(() => getByText('info text'));
+    expect(infoText).toBeVisible();
   });
 
-  it('should not render the checkbox in plaintext mode', () => {
-    const { wrapper } = setup(
-      { metaOverrides: { plaintext: true } },
+  it('should react correctly to plaintext mode', () => {
+    const { asFragment, getByRole } = render(
+      <Form plaintext>
+        <Check name="mock" label="mock" info="info text" />
+      </Form>
     );
 
-    expect(wrapper.find('Input').exists()).toBeTruthy();
+    expect(getByRole('checkbox')).toBeDisabled();
+    expect(asFragment()).toMatchSnapshot();
   });
 });