@transferwise/components 0.0.0-experimental-12689ca → 0.0.0-experimental-b002e6f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-12689ca",
+  "version": "0.0.0-experimental-b002e6f",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "14.20.1"
+    "@transferwise/neptune-css": "14.20.1",
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/slidingPanel/SlidingPanel.spec.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '../test-utils';
+import SlidingPanel, { SlidingPanelProps } from './SlidingPanel';
+
+describe('SlidingPanel', () => {
+  const initialProps: SlidingPanelProps = {
+    open: true,
+    children: <div data-testid="content">Content</div>,
+    testId: 'wrapper',
+  };
+
+  const customRender = (overrides: Partial<SlidingPanelProps> = {}) =>
+    render(<SlidingPanel {...initialProps} {...overrides} />);
+
+  describe('open', () => {
+    it('should respect open=false', () => {
+      customRender({ open: false });
+      expect(screen.queryByTestId('wrapper')).not.toBeInTheDocument();
+    });
+
+    it('should respect open=true', () => {
+      customRender();
+      expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+  });
+
+  describe('position', () => {
+    it(`should default to 'left'`, () => {
+      customRender();
+      expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-left`);
+    });
+
+    (['left', 'right', 'top', 'bottom'] as const).forEach((position) => {
+      describe(position, () => {
+        it(`should add the classname`, () => {
+          customRender({ position });
+          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-${position}`);
+        });
+
+        it(`should add the classname for 'showSlidingPanelBorder'`, () => {
+          customRender({ position, showSlidingPanelBorder: true });
+          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--border-${position}`);
+        });
+      });
+    });
+  });
+
+  it('should render children', () => {
+    customRender();
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('should respect className', () => {
+    const className = 'customClass';
+    customRender({ className });
+    expect(screen.getByTestId('wrapper')).toHaveClass(className);
+  });
+
+  describe('slidingPanelPositionFixed', () => {
+    it('should not be fixed by default', () => {
+      customRender();
+      expect(screen.getByTestId('wrapper')).not.toHaveClass('sliding-panel--fixed');
+    });
+
+    it('should respect slidingPanelPositionFixed=true', () => {
+      customRender({ slidingPanelPositionFixed: true });
+      expect(screen.getByTestId('wrapper')).toHaveClass('sliding-panel--fixed');
+    });
+  });
+});

package/src/slidingPanel/SlidingPanel.spec.js

@@ -1,56 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import SlidingPanel from './SlidingPanel';
-
-describe('SlidingPanel', () => {
-  let component;
-  const props = {
-    open: true,
-    position: 'left',
-    children: null,
-    className: undefined,
-    slidingPanelPositionFixed: false,
-    showSlidingPanelBorder: false,
-    testId: undefined,
-  };
-
-  it('renders with right props', () => {
-    component = mount(<SlidingPanel {...props} />);
-    expect(component.find(SlidingPanel)).toHaveLength(1);
-    expect(component.find(SlidingPanel).props()).toStrictEqual({ ...props });
-  });
-
-  it('renders CSSTransition with right props', () => {
-    component = shallow(<SlidingPanel {...props} />);
-
-    expect(cssTransition()).toHaveLength(1);
-
-    expect(cssTransition().props()).toEqual({
-      className: 'sliding-panel sliding-panel--open-left',
-      children: null,
-    });
-  });
-
-  it('adds fixed class', () => {
-    component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
-    );
-  });
-
-  it('adds border classes if showSlidingPanelBorder is set to true', () => {
-    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
-    );
-    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
-    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
-
-    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
-    );
-  });
-
-  const cssTransition = () => component.find('div');
-});