LOOM-1540: tsx migration for splitinput and inputField components (#3565

)

decisions/accessibility-tests.md

@@ -5,4 +5,4 @@ We use [`jest-axe`](https://www.npmjs.com/package/jest-axe) to add automated acc
 
 Generally, we only test the public interface of a component to reflect how it would be used in reality. For example, we have an accessibility test for `BpkAccordion` with `BpkAccordionItem` children, but we don't test them separately because they would never be used that way by a consumer.
 
-Each package has it's accessibility tests in `accessibility-test.js`.
+Each package has its accessibility tests in `accessibility-test.js` or `accessibility-test.tsx`.

examples/bpk-component-fieldset/examples.js

@@ -519,7 +519,7 @@ const SplitInputExample = () => (
     name="otpInput"
     id="otpInput"
     label="otp input"
-    onChange={action('On Input Change')}
+    onInputChange={action('On Input Change')}
     onSubmit={action('On Submit')}
     inputLength={4}
   />

examples/bpk-component-split-input/examples.js

@@ -31,7 +31,7 @@ const SplitInputExample = () => (
       name="otpInput"
       id="otpInput"
       label="otp input"
-      onChange={action('On Input Change')}
+      onInputChange={action('On Input Change')}
       onSubmit={action('On Submit')}
       inputLength={4}
     />
@@ -46,7 +46,7 @@ const SplitInputSixDigitExample = () => (
       name="otpInput"
       id="otpInput"
       label="otp input"
-      onChange={action('On Input Change')}
+      onInputChange={action('On Input Change')}
       onSubmit={action('On Submit')}
       inputLength={6}
     />
@@ -62,7 +62,7 @@ const SplitInputWithPlaceholderExample = () => (
       id="otpInput"
       label="otp input"
       placeholder="X"
-      onChange={action('On Input Change')}
+      onInputChange={action('On Input Change')}
       onSubmit={action('On Submit')}
       inputLength={6}
     />
@@ -78,7 +78,7 @@ const SplitInputSmallExample = () => (
       id="otpInput"
       label="otp input"
       large={false}
-      onChange={action('On Input Change')}
+      onInputChange={action('On Input Change')}
       onSubmit={action('On Submit')}
     />
   </form>

packages/bpk-component-input/src/BpkInput.tsx

@@ -146,7 +146,7 @@ class BpkInput extends Component<Props, State> {
     return clearable ? (
       <div className={containerClassNames.join(' ')}>
         {renderedInput}
-        {value.length > 0 && (
+        {`${value}`.length > 0 && (
           <button
             type="button"
             title={clearButtonLabel || ''}

packages/bpk-component-input/src/common-types.ts

@@ -46,7 +46,7 @@ type InputProps = {
   /**
    * **Required:** The value attribute of the input.
    */
-  value: string;
+  value: string | number;
   type?: (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
 };
 

packages/bpk-component-split-input/src/BpkInputField.js → packages/bpk-component-split-input/src/BpkInputField.tsx

@@ -15,10 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
-import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { PureComponent } from 'react';
 
 import BpkInput from '../../bpk-component-input';
 import { cssModules } from '../../bpk-react-utils';
@@ -27,47 +25,53 @@ import STYLES from './BpkInputField.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-class BpkInputField extends Component {
-  componentDidUpdate(prevProps) {
+export type Props = DefaultProps;
+
+type DefaultProps = {
+  id: string;
+  label: string;
+  value: string | number;
+  focus: boolean;
+  index: number;
+  name: string;
+  [key: string]: any;
+}
+
+class BpkInputField extends PureComponent<Props> {
+  static defaultProps = {
+    value: '',
+    name: ''
+  };
+
+  componentDidUpdate(prevProps: Props) {
     const { focus } = this.props;
     if (prevProps.focus !== focus && this.input && focus) {
       this.input.focus();
       this.input.select();
     }
   }
 
+  private input: HTMLInputElement | null = null;
+
   render() {
     const { focus, id, index, label, name, value, ...rest } = this.props;
     return (
       <div key={index} className={getClassName('bpk-input-field')}>
         <BpkInput
           id={id}
           autoComplete="off"
-          maxLength="1"
+          name={name}
+          maxLength={1}
           aria-label={`${label} ${index}`}
-          inputRef={(input) => {
+          inputRef={(input: HTMLInputElement) => {
             this.input = input;
           }}
-          value={value || ''}
-          name={name || ''}
+          value={value}
           {...rest}
         />
       </div>
     );
   }
 }
 
-BpkInputField.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  focus: PropTypes.bool.isRequired,
-  index: PropTypes.number.isRequired,
-  name: PropTypes.string,
-};
-
-BpkInputField.defaultProps = {
-  value: '',
-};
-
 export default BpkInputField;

packages/bpk-component-split-input/src/BpkSplitInput-test.tsx

@@ -0,0 +1,63 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import BpkSplitInput from './BpkSplitInput';
+
+const defaultProps = {
+  name: 'otpInput',
+  id: 'otpInput',
+  label: 'otp input',
+  onInputChange: jest.fn(),
+  onSubmit: jest.fn(),
+};
+
+describe('BpkSplitInput', () => {
+  it('should render without crashing', () => {
+    render(<BpkSplitInput {...defaultProps} />);
+    const inputs = screen.getAllByPlaceholderText('');
+    expect(inputs).toHaveLength(4);
+  });
+
+  it('should render correctly with inputLength param', () => {
+    render(<BpkSplitInput {...defaultProps} inputLength={6} />);
+    const inputs = screen.getAllByPlaceholderText('');
+    expect(inputs).toHaveLength(6);
+  });
+
+  it('should render correctly with large set as true', () => {
+    render(<BpkSplitInput {...defaultProps} />);
+    const inputs = screen.getAllByPlaceholderText('');
+    inputs.forEach((input) => {
+      expect(input).toHaveClass('bpk-input--large');
+    });
+  });
+
+  it('should render correctly with placeholder', () => {
+    const placeholder = 'x';
+    render(<BpkSplitInput {...defaultProps} placeholder={placeholder} />);
+    const inputs = screen.getAllByPlaceholderText('x');
+    inputs.forEach((input) => {
+      expect(input).toHaveAttribute('placeholder', placeholder);
+    });
+  });
+});