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

package/package.json

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

package/src/radioOption/RadioOption.spec.tsx

@@ -0,0 +1,73 @@
+import { render, screen, userEvent } from '../test-utils';
+import RadioOption, { type RadioOptionProps } from '.';
+
+describe('Radio option', () => {
+  const initialProps = {
+    id: 'componentId',
+    name: 'componentName',
+    title: 'Component Title',
+    content: <img alt="contentImage" />,
+    onChange: jest.fn(),
+  };
+
+  const customRender = (overrides: Partial<RadioOptionProps> = {}) =>
+    render(<RadioOption {...initialProps} {...overrides} />);
+
+  it('should render `media`', () => {
+    const Icon = <img alt="media" />;
+    customRender({ media: Icon });
+    expect(screen.getByRole('img', { name: 'media' })).toBeInTheDocument();
+  });
+
+  it('passes props to radio button', () => {
+    customRender();
+    expect(screen.getByRole('radio')).toHaveAttribute('id', initialProps.id);
+  });
+
+  it('passes name to radio button', () => {
+    customRender();
+    expect(screen.getByRole('radio')).toHaveAttribute('name', initialProps.name);
+  });
+
+  describe('checked', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ checked: true });
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+  });
+
+  it('passes change handler to radio button', async () => {
+    customRender();
+    await userEvent.click(screen.getByRole('radio'));
+    expect(initialProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  describe('disabled', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('radio')).toBeEnabled();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ disabled: true });
+      expect(screen.getByRole('radio')).toBeDisabled();
+    });
+  });
+
+  describe('isContainerAligned', () => {
+    it('should not be aligned by default', () => {
+      const { container } = customRender();
+      expect(container.querySelector('.np-option')).not.toHaveClass('np-option__container-aligned');
+    });
+
+    it('renders aligned with container content', () => {
+      const { container } = customRender({ isContainerAligned: true });
+      expect(container.querySelector('.np-option')).toHaveClass('np-option__container-aligned');
+    });
+  });
+});

package/src/radioOption/RadioOption.spec.js

@@ -1,67 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Option from '../common/Option';
-
-import RadioOption from '.';
-
-describe('Radio option', () => {
-  let component;
-  beforeEach(() => {
-    component = shallow(
-      <RadioOption media={<span />} id="" name="" title="" content="" onChange={jest.fn()} />,
-    );
-  });
-
-  it('passes shared props to option', () => {
-    const Icon = () => <svg />;
-    const sharedProps = {
-      media: <Icon />,
-      title: 'A title',
-      content: 'A content',
-      name: 'a-name',
-      complex: true,
-      disabled: true,
-    };
-    component.setProps(sharedProps);
-
-    expect(option().props()).toStrictEqual(expect.objectContaining(sharedProps));
-  });
-
-  it('passes id to radio button passed as button', () => {
-    component.setProps({ id: 'some-id' });
-    expect(buttonProperty('id')).toBe('some-id');
-  });
-
-  it('passes name to radio button passed as button', () => {
-    component.setProps({ name: 'a-name' });
-    expect(buttonProperty('name')).toBe('a-name');
-  });
-
-  it('passes checked to radio button passed as button', () => {
-    expect(buttonProperty('checked')).toBeFalsy();
-    component.setProps({ checked: true });
-    expect(buttonProperty('checked')).toBeTruthy();
-  });
-
-  it('passes change handler to radio button passed as button', () => {
-    const onChange = jest.fn();
-    component.setProps({ onChange });
-    expect(buttonProperty('onChange')).toBe(onChange);
-  });
-
-  it('passes disabled to radio button passed as button', () => {
-    expect(buttonProperty('disabled')).toBeFalsy();
-    component.setProps({ disabled: true });
-    expect(buttonProperty('disabled')).toBeTruthy();
-  });
-
-  it('renders aligned with container content', () => {
-    component.setProps({ isContainerAligned: true });
-    expect(component.find(Option).shallow().prop('className')).toContain(
-      'np-option__container-aligned',
-    );
-  });
-
-  const option = () => component.find(Option);
-  const buttonProperty = (name) => option().prop('button').props[name];
-});