@transferwise/components 0.0.0-experimental-ae7c18d → 0.0.0-experimental-c29561b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ae7c18d",
+  "version": "0.0.0-experimental-c29561b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/stepper/{Stepper.spec.js → Stepper.spec.tsx}

@@ -1,4 +1,5 @@
 import { render, screen, userEvent } from '../test-utils';
+import * as mockedDeviceDetection from './deviceDetection';
 
 import Stepper from './Stepper';
 
@@ -6,30 +7,28 @@ jest.mock('./deviceDetection', () => ({
   isTouchDevice: jest.fn(() => false),
 }));
 
-const generateSteps = (stepsCount) =>
-  Array.from({ length: stepsCount }, () => ({
-    label: Math.random().toString(),
-    onClick: jest.fn(),
-  }));
-
 describe('Stepper', () => {
-  const defaultProps = {
-    activeStep: 0,
-    steps: generateSteps(3),
-  };
-  let fakeDeviceDetection;
-
   beforeEach(() => {
-    fakeDeviceDetection = require('./deviceDetection');
     jest.clearAllMocks();
   });
 
-  const customRender = (overrides = {}) => {
-    return render(<Stepper {...defaultProps} {...overrides} />);
-  };
+  const generateSteps = (stepsCount: number) =>
+    Array.from({ length: stepsCount }, () => ({
+      label: Math.random().toString(),
+      onClick: jest.fn(),
+    }));
 
   const getSteps = () => screen.getAllByRole('listitem');
 
+  const initialProps = {
+    activeStep: 0,
+    steps: generateSteps(3),
+  };
+
+  const customRender = (overrides = {}) => {
+    return render(<Stepper {...initialProps} {...overrides} />);
+  };
+
   describe('progress bar', () => {
     it('renders nothing when no steps are passed in', () => {
       customRender({ steps: [] });
@@ -48,7 +47,7 @@ describe('Stepper', () => {
     });
 
     describe('step interactive style', () => {
-      const expectStepIsVisuallyInteractive = (stepIndex) => {
+      const expectStepIsVisuallyInteractive = (stepIndex: number) => {
         // eslint-disable-next-line jest/valid-expect
         return expect(getSteps()[stepIndex].classList.contains('tw-stepper__step--clickable'));
       };
@@ -88,7 +87,7 @@ describe('Stepper', () => {
     });
 
     describe('step interactivity', () => {
-      const getStepChild = (stepIndex) => getSteps()[stepIndex].childNodes[0];
+      const getStepChild = (stepIndex: number) => getSteps()[stepIndex].children[0];
 
       it('is not interactive if it is the active step', async () => {
         const steps = [
@@ -138,10 +137,10 @@ describe('Stepper', () => {
       };
       const { rerender } = customRender(initialProps);
 
-      const clickOnStep = async (stepIndex) => {
+      const clickOnStep = async (stepIndex: number) => {
         const step = screen.getByText(initialProps.steps[stepIndex].label).parentElement;
         if (step) {
-          return await userEvent.click(step);
+          return userEvent.click(step);
         }
       };
 
@@ -159,12 +158,12 @@ describe('Stepper', () => {
     it('are active when they are the currently active step', () => {
       const { rerender } = customRender({
         steps: Array(4)
-          .fill()
+          .fill('')
           .map((_, i) => ({ label: i.toString() })),
         activeStep: 1,
       });
 
-      const stepActive = (index) =>
+      const stepActive = (index: number) =>
         getSteps()[index].classList.contains('tw-stepper__step--active');
 
       expect(stepActive(0)).toBe(false);
@@ -172,7 +171,7 @@ describe('Stepper', () => {
       expect(stepActive(2)).toBe(false);
       expect(stepActive(3)).toBe(false);
 
-      rerender(<Stepper {...defaultProps} activeStep={2} />);
+      rerender(<Stepper {...initialProps} activeStep={2} />);
 
       expect(stepActive(1)).toBe(false);
       expect(stepActive(2)).toBe(true);
@@ -181,14 +180,15 @@ describe('Stepper', () => {
     it('are aria-current=step when active', () => {
       const { rerender } = customRender({ steps: Array(4).fill({ label: '' }), activeStep: 1 });
 
-      const stepCurrent = (index) => getSteps()[index].getAttribute('aria-current') === 'step';
+      const stepCurrent = (index: number) =>
+        getSteps()[index].getAttribute('aria-current') === 'step';
 
       expect(stepCurrent(0)).toBe(false);
       expect(stepCurrent(1)).toBe(true);
       expect(stepCurrent(2)).toBe(false);
       expect(stepCurrent(3)).toBe(false);
 
-      rerender(<Stepper {...defaultProps} activeStep={2} />);
+      rerender(<Stepper {...initialProps} activeStep={2} />);
 
       expect(stepCurrent(1)).toBe(false);
       expect(stepCurrent(2)).toBe(true);
@@ -224,7 +224,7 @@ describe('Stepper', () => {
     });
 
     it('will not be rendered if the user is on a touch device', () => {
-      jest.spyOn(fakeDeviceDetection, 'isTouchDevice').mockImplementation(() => true);
+      jest.spyOn(mockedDeviceDetection, 'isTouchDevice').mockImplementation(() => true);
 
       customRender({
         steps: [{ hoverLabel: 'hover label', label: 'label' }, { label: 'label 2' }],

package/src/stepper/{deviceDetection.spec.js → deviceDetection.spec.ts}

@@ -1,14 +1,14 @@
 import { isTouchDevice } from './deviceDetection';
 
 describe('Device detection', () => {
-  function fakeUserAgent(userAgent) {
+  function fakeUserAgent(userAgent: string) {
     Object.defineProperty(navigator, 'userAgent', {
       value: userAgent,
       configurable: true,
     });
   }
 
-  function fakeMaxTouchPoints(maxTouchPoints) {
+  function fakeMaxTouchPoints(maxTouchPoints: number | undefined) {
     Object.defineProperty(navigator, 'maxTouchPoints', {
       value: maxTouchPoints,
       configurable: true,
@@ -24,7 +24,10 @@ describe('Device detection', () => {
 
   it('recognizes touch devices via window events', () => {
     expect(isTouchDevice()).toBe(false);
-    window.ontouchstart = {};
+    Object.defineProperty(window, 'ontouchstart', {
+      value: () => {},
+      writable: true,
+    });
     expect(isTouchDevice()).toBe(true);
   });