feat(framework): toggle missing events tests add

akveo · Jan 21, 2019 · 832d27f · 832d27f
1 parent 54ea653
commit 832d27f
Show file tree

Hide file tree

Showing 3 changed files with 900 additions and 257 deletions.
diff --git a/src/framework/ui/toggle/toggle.component.tsx b/src/framework/ui/toggle/toggle.component.tsx
@@ -9,6 +9,7 @@ import {
   PanResponderInstance,
   GestureResponderEvent,
   PanResponderGestureState,
+  TouchableOpacity,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -172,9 +173,9 @@ export class Toggle extends React.Component<Props> {
     this.animateThumb(thumbSize);
   };
 
-  onValueChange = (value: boolean) => {
+  onValueChange = () => {
     if (this.props.onValueChange) {
-      this.props.onValueChange(value);
+      this.props.onValueChange(this.props.value);
     }
   };
 
@@ -258,42 +259,48 @@ export class Toggle extends React.Component<Props> {
     return (
       <View style={[componentStyle.wrapper, styles.wrapper, style]}>
         {!this.props.disabled && <View style={[styles.highlight, componentStyle.highlight]}/>}
-        <Animated.View
-          style={[
-            styles.container,
-            componentStyle.componentContainer,
-            { backgroundColor: interpolatedTintColor },
-          ]}
-          {...this.panResponder.panHandlers}>
-          <Animated.View style={[
-            styles.ellipse,
-            componentStyle.componentEllipse,
-            {
-              transform: [{ scale: value ? returnScale : this.ellipseAnimation }],
-              backgroundColor: interpolatedTintColor,
-            },
-          ]}
-          />
-          <Animated.View style={[
-            componentStyle.componentThumb,
-            styles.thumb,
-            {
-              width: this.thumbAnimation,
-              alignSelf: value ? 'flex-end' : 'flex-start',
-              transform: [{ translateX: this.switchAnimation }],
-              borderColor: interpolatedTintColor,
-              backgroundColor: componentStyle.colors.thumb,
-              elevation: disabled ? 0 : 5,
-            },
-          ]}
-          >
-            <CheckMark
-              size={componentStyle.checkMarkSize}
-              color={interpolatedCheckColor}
-              isAnimated={true}
+        <TouchableOpacity
+          onPressIn={this.onPressIn}
+          onPressOut={this.onPressOut}
+          onPress={this.onValueChange}
+        >
+          <Animated.View
+            style={[
+              styles.container,
+              componentStyle.componentContainer,
+              { backgroundColor: interpolatedTintColor },
+            ]}
+            {...this.panResponder.panHandlers}>
+            <Animated.View style={[
+              styles.ellipse,
+              componentStyle.componentEllipse,
+              {
+                transform: [{ scale: value ? returnScale : this.ellipseAnimation }],
+                backgroundColor: interpolatedTintColor,
+              },
+            ]}
             />
+            <Animated.View style={[
+              componentStyle.componentThumb,
+              styles.thumb,
+              {
+                width: this.thumbAnimation,
+                alignSelf: value ? 'flex-end' : 'flex-start',
+                transform: [{ translateX: this.switchAnimation }],
+                borderColor: interpolatedTintColor,
+                backgroundColor: componentStyle.colors.thumb,
+                elevation: disabled ? 0 : 5,
+              },
+            ]}
+            >
+              <CheckMark
+                size={componentStyle.checkMarkSize}
+                color={interpolatedCheckColor}
+                isAnimated={true}
+              />
+            </Animated.View>
           </Animated.View>
-        </Animated.View>
+        </TouchableOpacity>
       </View>
     );
   }

diff --git a/src/framework/ui/toggle/toggle.spec.tsx b/src/framework/ui/toggle/toggle.spec.tsx
@@ -3,27 +3,30 @@ import {
   render,
   shallow,
   RenderAPI,
+  fireEvent,
+  waitForElement,
 } from 'react-native-testing-library';
+import { TouchableOpacity } from 'react-native';
 import {
   styled,
   StyleProvider,
   StyleProviderProps,
 } from '@kitten/theme';
 import {
   Toggle,
-  ToggleProps,
+  Props,
 } from './toggle.component';
 import * as config from './toggle.spec.config';
 
-const StyledComponent = styled<Toggle, ToggleProps>(Toggle);
+const StyledComponent = styled<Toggle, Props>(Toggle);
 
-const Mock = (props?: ToggleProps): React.ReactElement<StyleProviderProps> => (
+const Mock = (props?: Props): React.ReactElement<StyleProviderProps> => (
   <StyleProvider mapping={config.mapping} theme={config.theme} styles={{}}>
     <StyledComponent {...props} />
   </StyleProvider>
 );
 
-const renderComponent = (props?: ToggleProps): RenderAPI => render(<Mock {...props}/>);
+const renderComponent = (props?: Props): RenderAPI => render(<Mock {...props}/>);
 
 describe('@toggle: matches snapshot', () => {
 
@@ -55,4 +58,49 @@ describe('@toggle: matches snapshot', () => {
     expect(output).toMatchSnapshot();
   });
 
+  it('active', async () => {
+    const component = renderComponent();
+
+    fireEvent(component.getByType(TouchableOpacity), 'pressIn');
+
+    const active = await waitForElement(() => component.getByType(Toggle));
+    const { output: activeOutput } = shallow(active);
+
+    fireEvent(component.getByType(TouchableOpacity), 'pressOut');
+
+    const inactive = await waitForElement(() => component.getByType(Toggle));
+    const { output: inactiveOutput } = shallow(inactive);
+
+    expect(activeOutput).toMatchSnapshot();
+    expect(inactiveOutput).toMatchSnapshot('default');
+  });
+
+  it('active checked', async () => {
+    const component = renderComponent({ value: true });
+
+    fireEvent(component.getByType(TouchableOpacity), 'pressIn');
+    const active = await waitForElement(() => component.getByType(Toggle));
+    const { output: activeOutput } = shallow(active);
+
+    fireEvent(component.getByType(TouchableOpacity), 'pressOut');
+
+    const inactive = await waitForElement(() => component.getByType(Toggle));
+    const { output: inactiveOutput } = shallow(inactive);
+
+    expect(activeOutput).toMatchSnapshot();
+    expect(inactiveOutput).toMatchSnapshot('checked');
+  });
+
+});
+
+describe('@toggle: component checks', () => {
+
+  it('emits onValueChange', () => {
+    const onChange = jest.fn();
+    const component = renderComponent({ onValueChange: onChange });
+    fireEvent.press(component.getByType(TouchableOpacity));
+
+    expect(onChange).toBeCalled();
+  });
+
 });