Configure Jest with Typescript and convert Button to Typescript. (#1797)

Author: recondesigns

.babelrc.js

@@ -20,6 +20,7 @@ module.exports = {
             },
           },
         ],
+        '@babel/preset-typescript',
       ],
     },
   },

components/Buttons/Button/Button.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import classNames from 'classnames';
+import { BUTTON } from 'common/constants/testIDs';
+import { gtag } from 'common/utils/thirdParty/gtag';
+import { getDataAttributes, getAriaAttributes } from 'common/utils/prop-utils';
+import styles from './Button.module.css';
+
+type GoogleAnalyticsEventPropType = {
+  /**
+   * A description of the behaviour. E.g. 'Clicked Delete', 'Added a component', 'Deleted account'
+   */
+  action: string;
+  /**
+   * A top level category for these events. E.g. 'User', 'Navigation', 'App Editing', etc.
+   */
+  category: string;
+  /**
+   * More precise labeling of the related action. E.g. alongside the 'Added a component' action,
+   * we could add the name of a component as the label. E.g. 'Survey', 'Heading', 'Button', etc.
+   */
+  label?: string;
+  /**
+   * A means of recording a numerical value against an event. E.g. a rating, a score, etc.
+   */
+  value?: number;
+  /**
+   * If an event is not triggered by a user interaction, but instead by our code (e.g. on page
+   * load), it should be flagged as a nonInteraction event to avoid skewing bounce rate data.
+   */
+  nonInteraction?: boolean;
+  /**
+   * This specifies the transport mechanism with which hits will be sent. Valid values include
+   * 'beacon', 'xhr', or 'image'.
+   */
+  transport?: 'beacon' | 'xhr' | 'image';
+};
+
+type ButtonProps = {
+  /**
+   * Helps track in-page `event` interactions.
+   */
+  analyticsObject?: GoogleAnalyticsEventPropType;
+  /**
+   * Forces the component's width as wide as its parent container's width.
+   */
+  fullWidth?: boolean;
+  /**
+   * Sets the button color theme.
+   */
+  theme?: 'primary' | 'secondary';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export default function Button({
+  analyticsObject = {
+    action: 'Button Selected',
+    category: 'Interactions',
+  },
+  children,
+  className = undefined,
+  disabled = false,
+  fullWidth = false,
+  onClick = noop,
+  tabIndex = 0,
+  theme = 'primary',
+  type = 'button',
+  ...rest
+}: ButtonProps) {
+  const customDataAttributes = getDataAttributes(rest);
+  const ariaAttributes = getAriaAttributes(rest);
+
+  const eventConfig = {
+    ...analyticsObject,
+    label: typeof children === 'string' ? children : undefined,
+  };
+
+  return (
+    <button
+      className={classNames(styles.Button, className, styles[theme], {
+        [styles.disabled]: disabled,
+        [styles.fullWidth]: fullWidth,
+      })}
+      data-testid={BUTTON}
+      disabled={disabled}
+      onClick={e => {
+        gtag.event(eventConfig);
+        onClick(e);
+      }}
+      tabIndex={tabIndex}
+      type={type}
+      {...customDataAttributes}
+      {...ariaAttributes}
+    >
+      {children}
+    </button>
+  );
+}

components/Buttons/Button/Button.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Button from '../Button';
+
+type ButtonStoryType = StoryObj<typeof Button>;
+
+export const Default: ButtonStoryType = {
+  render: args => <Button {...args} />,
+  args: {
+    children: 'Button',
+  },
+};
+
+const meta: Meta<typeof Button> = {
+  title: 'Buttons/Button',
+  component: Button,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+};
+
+export default meta;

components/Buttons/Button/__stories__/Button.stories.js

@@ -36,7 +36,7 @@ describe('Button', () => {
     const { queryByTestId } = render(<Button onClick={onClickMock}>Testing</Button>);
 
     expect(onClickMock).toHaveBeenCalledTimes(0);
-
+    // @ts-expect-error Argument of type 'HTMLElement | null' is not assignable (delete comment to view full error)
     fireEvent.click(queryByTestId(BUTTON));
 
     expect(onClickMock).toHaveBeenCalledTimes(1);
@@ -46,7 +46,7 @@ describe('Button', () => {
     const { queryByTestId } = render(<Button {...requiredProps} />);
 
     expect(gtag.event).toHaveBeenCalledTimes(0);
-
+    // @ts-expect-error Argument of type 'HTMLElement | null' is not assignable (delete comment to view full error)
     fireEvent.click(queryByTestId(BUTTON));
 
     expect(gtag.event).toHaveBeenCalledTimes(1);

components/Buttons/Button/__stories__/Button.stories.tsx

@@ -84,12 +84,7 @@ module.exports = {
   // ],
 
   // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "json",
-  //   "jsx",
-  //   "node"
-  // ],
+  moduleFileExtensions: ['js', 'json', 'jsx', 'node', 'ts', 'tsx'],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
@@ -160,7 +155,12 @@ module.exports = {
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  testMatch: ['<rootDir>/**/*.test.js'],
+  testMatch: [
+    '<rootDir>/**/*.test.js',
+    '<rootDir>/**/*.test.jsx',
+    '<rootDir>/**/*.test.ts',
+    '<rootDir>/**/*.test.tsx',
+  ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [
@@ -178,7 +178,7 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    '^.+\\.js$': 'babel-jest',
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
     '^(?!.*\\.(js|css|json)$)': '<rootDir>/test-utils/transforms/file.js',
   },
 

components/Buttons/Button/__tests__/Button.test.js renamed to components/Buttons/Button/__tests__/Button.test.tsx

@@ -84,6 +84,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-typescript": "^7.23.3",
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/webpack-preprocessor": "^5.12.0",
     "@operation_code/eslint-plugin-custom-rules": "^1.0.1",