test(exoflex): test for rich radio button

kodefox · Mar 16, 2020 · bf1b659 · bf1b659
1 parent b06cfe6
commit bf1b659
Show file tree

Hide file tree

Showing 2 changed files with 203 additions and 0 deletions.
diff --git a/packages/exoflex/src/components/__tests__/RichRadioButton.test.native.tsx b/packages/exoflex/src/components/__tests__/RichRadioButton.test.native.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import Provider from '../Provider';
+import { render, fireEvent, act } from 'react-native-testing-library';
+import RichRadioButton from '../RichRadioButton';
+import Text from '../Text';
+
+const SIZES = [
+  { label: 'S', value: 'small' },
+  { label: 'M', value: 'medium' },
+  { label: 'L', value: 'large' },
+];
+
+describe('RichRadioButton', () => {
+  it('should render properly', () => {
+    const App = () => {
+      let [size, setSize] = useState('');
+      return (
+        <Provider>
+          <RichRadioButton
+            data={SIZES}
+            selectedValue={size}
+            onValueChanged={setSize}
+            style={{ marginBottom: 30 }}
+          />
+        </Provider>
+      );
+    };
+    let { getByText } = render(<App />);
+
+    expect(getByText('S')).toBeTruthy();
+    expect(getByText('M')).toBeTruthy();
+    expect(getByText('L')).toBeTruthy();
+  });
+
+  it('should change selected value', () => {
+    let newSize = '';
+
+    const App = () => {
+      let [size, setSize] = useState('');
+      return (
+        <Provider>
+          <RichRadioButton
+            data={SIZES}
+            selectedValue={size}
+            onValueChanged={(value) => {
+              newSize = value;
+              setSize(value);
+            }}
+            style={{ marginBottom: 30 }}
+          />
+        </Provider>
+      );
+    };
+    let { getByText } = render(<App />);
+
+    expect(getByText('S')).toBeTruthy();
+    expect(getByText('M')).toBeTruthy();
+    expect(getByText('L')).toBeTruthy();
+    expect(newSize).toBe('');
+
+    act(() => fireEvent.press(getByText('M')));
+
+    expect(newSize).toBe('medium');
+  });
+
+  it('should render custom item content properly', () => {
+    let newSize = '';
+
+    const App = () => {
+      let [size, setSize] = useState('');
+      return (
+        <Provider>
+          <RichRadioButton
+            data={SIZES}
+            selectedValue={size}
+            onValueChanged={(value) => {
+              newSize = value;
+              setSize(value);
+            }}
+            renderCustomItemContent={(label) => (
+              <Text fontStyle="italic" weight="bold" style={{ marginLeft: 10 }}>
+                {label}
+              </Text>
+            )}
+            style={{ marginBottom: 30 }}
+          />
+        </Provider>
+      );
+    };
+    let { getByText } = render(<App />);
+
+    expect(getByText('S')).toBeTruthy();
+    expect(getByText('M')).toBeTruthy();
+    expect(getByText('L')).toBeTruthy();
+    expect(newSize).toBe('');
+
+    act(() => fireEvent.press(getByText('M')));
+
+    expect(newSize).toBe('medium');
+  });
+});
diff --git a/packages/exoflex/src/components/__tests__/RichRadioButton.test.web.tsx b/packages/exoflex/src/components/__tests__/RichRadioButton.test.web.tsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import Provider from '../Provider';
+import { render, fireEvent, act } from 'react-native-testing-library';
+import '../../../test/customFireEvent.web';
+import RichRadioButton from '../RichRadioButton';
+import Text from '../Text';
+
+const SIZES = [
+  { label: 'S', value: 'small' },
+  { label: 'M', value: 'medium' },
+  { label: 'L', value: 'large' },
+];
+
+describe('RichRadioButton', () => {
+  it('should render properly', () => {
+    const App = () => {
+      let [size, setSize] = useState('');
+      return (
+        <Provider>
+          <RichRadioButton
+            data={SIZES}
+            selectedValue={size}
+            onValueChanged={setSize}
+            style={{ marginBottom: 30 }}
+          />
+        </Provider>
+      );
+    };
+    let { getByText } = render(<App />);
+
+    expect(getByText('S')).toBeTruthy();
+    expect(getByText('M')).toBeTruthy();
+    expect(getByText('L')).toBeTruthy();
+  });
+
+  it('should change selected value', () => {
+    let newSize = '';
+
+    const App = () => {
+      let [size, setSize] = useState('');
+      return (
+        <Provider>
+          <RichRadioButton
+            data={SIZES}
+            selectedValue={size}
+            onValueChanged={(value) => {
+              newSize = value;
+              setSize(value);
+            }}
+            style={{ marginBottom: 30 }}
+          />
+        </Provider>
+      );
+    };
+    let { getByText } = render(<App />);
+
+    expect(getByText('S')).toBeTruthy();
+    expect(getByText('M')).toBeTruthy();
+    expect(getByText('L')).toBeTruthy();
+    expect(newSize).toBe('');
+
+    act(() => fireEvent.press(getByText('M')));
+
+    expect(newSize).toBe('medium');
+  });
+
+  it('should render custom item content properly', () => {
+    let newSize = '';
+
+    const App = () => {
+      let [size, setSize] = useState('');
+      return (
+        <Provider>
+          <RichRadioButton
+            data={SIZES}
+            selectedValue={size}
+            onValueChanged={(value) => {
+              newSize = value;
+              setSize(value);
+            }}
+            renderCustomItemContent={(label) => (
+              <Text fontStyle="italic" weight="bold" style={{ marginLeft: 10 }}>
+                {label}
+              </Text>
+            )}
+            style={{ marginBottom: 30 }}
+          />
+        </Provider>
+      );
+    };
+    let { getByText } = render(<App />);
+
+    expect(getByText('S')).toBeTruthy();
+    expect(getByText('M')).toBeTruthy();
+    expect(getByText('L')).toBeTruthy();
+    expect(newSize).toBe('');
+
+    act(() => fireEvent.press(getByText('M')));
+
+    expect(newSize).toBe('medium');
+  });
+});