[KOA-6290]: Bump react-slider to solve snap back issue (#3012)

Skyscanner · Sep 22, 2023 · 0b9d53f · 0b9d53f
1 parent 6f86a3e
commit 0b9d53f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 10 deletions.
diff --git a/packages/bpk-component-slider/src/BpkSlider-test.tsx b/packages/bpk-component-slider/src/BpkSlider-test.tsx
@@ -20,6 +20,15 @@ import { render } from '@testing-library/react';
 
 import BpkSlider from './BpkSlider';
 
+// Mock the ResizeObserver which 'react-slider' uses to handle slider resize programatically 
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
+
 describe('BpkSlider', () => {
   it('should render correctly', () => {
     const { asFragment } = render(<BpkSlider min={0} max={100} value={25} />);
@@ -28,25 +37,29 @@ describe('BpkSlider', () => {
 
   it('should render correctly with a "className" attribute', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={25} className="my-slider" />);
+      <BpkSlider min={0} max={100} value={25} className="my-slider" />,
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a "step" attribute', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={2} step={10} />);
+      <BpkSlider min={0} max={100} value={2} step={10} />,
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a range of values', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={[10, 90]} />);
+      <BpkSlider min={0} max={100} value={[10, 90]} />,
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with a minimum distance between controls', () => {
     const { asFragment } = render(
-      <BpkSlider min={0} max={100} value={[10, 90]} minDistance={20} />);
+      <BpkSlider min={0} max={100} value={[10, 90]} minDistance={20} />,
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/bpk-component-slider/src/__snapshots__/BpkSlider-test.tsx.snap b/packages/bpk-component-slider/src/__snapshots__/BpkSlider-test.tsx.snap
@@ -15,6 +15,7 @@ exports[`BpkSlider should render correctly 1`] = `
       style="position: absolute; left: 0px; right: 0px;"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
@@ -43,6 +44,7 @@ exports[`BpkSlider should render correctly with a "className" attribute 1`] = `
       style="position: absolute; left: 0px; right: 0px;"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
@@ -71,6 +73,7 @@ exports[`BpkSlider should render correctly with a "step" attribute 1`] = `
       style="position: absolute; left: 0px; right: 0px;"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
@@ -103,6 +106,7 @@ exports[`BpkSlider should render correctly with a minimum distance between contr
       style="position: absolute; left: 0px; right: 0px;"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
@@ -113,6 +117,7 @@ exports[`BpkSlider should render correctly with a minimum distance between contr
       tabindex="0"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
@@ -145,6 +150,7 @@ exports[`BpkSlider should render correctly with a range of values 1`] = `
       style="position: absolute; left: 0px; right: 0px;"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
@@ -155,6 +161,7 @@ exports[`BpkSlider should render correctly with a range of values 1`] = `
       tabindex="0"
     />
     <div
+      aria-disabled="false"
       aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"

diff --git a/packages/bpk-component-slider/src/accessibility-test.tsx b/packages/bpk-component-slider/src/accessibility-test.tsx
@@ -21,6 +21,14 @@ import { axe } from 'jest-axe';
 
 import BpkSlider from './BpkSlider';
 
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
+
 describe('BpkSlider accessibility tests', () => {
   /*
   Currently this test fails because the third-party library

diff --git a/packages/package-lock.json b/packages/package-lock.json
diff --git a/packages/package.json b/packages/package.json
@@ -40,7 +40,7 @@
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
     "react-responsive": "^9.0.2",
-    "react-slider": "^1.3.1",
+    "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^2.5.3",
     "react-virtualized-auto-sizer": "^1.0.20",