fix: no more using reactstrap defaultProps

Seems like we were using implementation details of reactstrap that we probably should not have needed.

src/components/Input/CreditCardNumber.spec.js

@@ -1,4 +1,5 @@
 import assert from 'assert';
+import { render, screen } from '@testing-library/react';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import sinon from 'sinon';
@@ -78,8 +79,7 @@ describe('<CreditCardNumber />', () => {
   });
 
   it('should remain type="text"', () => {
-    const component = mount(<CreditCardNumber type="wth" />);
-    const input = component.find('Input');
-    assert.equal(input.prop('type'), 'text');
+    render(<CreditCardNumber type="wth" />);
+    screen.getByRole('textbox', { type: 'text' });
   });
 });

src/components/Input/CreditCardNumber.tsx

@@ -40,18 +40,12 @@ function typeToIconName(type = ''): IconName {
   return ICONS[type.toLowerCase()] || 'credit-card';
 }
 
-function removeTypes(props: InputProps): Omit<InputProps, 'types'> {
-  delete props.types;
-  return props;
-}
-
 function isAllowedCardType(x: string | undefined, allowedTypes: CardType[]): x is CardType {
   // ok to cast here because we are inside the type card that validates the cast
   return allowedTypes.includes(x as CardType);
 }
 
 const defaultProps = {
-  ...removeTypes(Input.defaultProps),
   className: '',
   types: Object.keys(ICONS) as CardType[],
   onChange: () => {},

src/components/Input/StaticInput.tsx

@@ -13,8 +13,4 @@ const StaticInput: FC<StaticInputProps> = ({ children, ...props }) => (
 
 StaticInput.displayName = 'StaticInput';
 
-StaticInput.defaultProps = {
-  ...Input.defaultProps,
-};
-
 export default StaticInput;

src/components/Modal/Modal.js

@@ -1,10 +1,6 @@
+import React from 'react';
 import { Modal } from 'reactstrap';
 
-Modal.defaultProps = {
-  ...Modal.defaultProps,
-  backdrop: false,
-  fade: false,
-  zIndex: 10050,
-};
-
-export default Modal;
+export default ({ backdrop = false, fade = false, zIndex = 10050, ...props }) => (
+  <Modal {...props} backdrop={backdrop} fade={fade} zIndex={zIndex} />
+);

src/components/Modal/Modal.spec.js

@@ -1,5 +1,6 @@
 import assert from 'assert';
 import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import Button from '../Button/Button';
 import Modal from './Modal';
@@ -24,9 +25,14 @@ describe('<Modal />', () => {
     }
   });
 
-  it('should render correctly', () => {
-    component = mount(<Modal toggle={noop} />);
-    assert(component);
+  it('should render without modal backdrop by default', () => {
+    render(<Modal isOpen />);
+    expect(document.querySelector('.modal-backdrop')).not.toBeInTheDocument();
+  });
+
+  it('should render with modal backdrop if backdrop is set to true', () => {
+    render(<Modal isOpen backdrop />);
+    expect(document.querySelector('.modal-backdrop')).toBeInTheDocument();
   });
 
   describe('when autoFocus="true"', () => {

src/components/Progress/Progress.js

@@ -1,8 +1,4 @@
+import React from 'react';
 import { Progress } from 'reactstrap';
 
-Progress.defaultProps = {
-  ...Progress.defaultProps,
-  animated: true,
-};
-
-export default Progress;
+export default ({ animated = true, ...props }) => <Progress {...props} animated={animated} />;

src/components/Progress/Progress.spec.js

@@ -1,17 +1,17 @@
-import assert from 'assert';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import Progress from './Progress';
 
 describe('<Progress />', () => {
-  it('should render correctly', () => {
-    const component = mount(<Progress />);
-    assert(component);
+  it('should render with the correct default props', () => {
+    render(<Progress />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).toHaveClass('progress-bar-animated');
   });
 
   it('should render with the correct default props', () => {
-    const component = mount(<Progress />);
-    const props = component.props();
-    assert.equal(props.animated, true);
+    render(<Progress animated={false} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).not.toHaveClass('progress-bar-animated');
   });
 });

src/components/Spinner/Spinner.tsx

@@ -10,8 +10,6 @@ const SpinnerWrapper = ({ type, label, ...props }: SpinnerProps) =>
   );
 
 SpinnerWrapper.defaultProps = {
-  // TODO: update, Spinner doesn't contain the defaultProps types so we cast as any
-  ...(Spinner as any).defaultProps,
   type: 'spin',
   label: 'loading',
 };

src/components/Tooltip/UncontrolledTooltip.js

@@ -1,7 +1,3 @@
 import { UncontrolledTooltip } from 'reactstrap';
 
-UncontrolledTooltip.defaultProps = {
-  ...UncontrolledTooltip.defaultProps,
-};
-
 export default UncontrolledTooltip;