Repository: kiwicom/mobile
Pull request #965 (2018-08-07 08:14:20)

Playground: Adding more components to playground


Patch:
diff --git a/packages/playground/src/Playground.js b/packages/playground/src/Playground.js
index fbb7735e..85df9a4d 100644
--- a/packages/playground/src/Playground.js
+++ b/packages/playground/src/Playground.js
@@ -40,7 +40,7 @@ export default class Playground extends React.Component<Props> {
 
     return {
       title: 'Playground',
-      headerLeft: <HeaderBackButton tintColor={Color.white} onPress={goBack} />,
+      headerLeft: <HeaderBackButton tintColor={Color.brand} onPress={goBack} />,
     };
   };
 
diff --git a/packages/playground/src/PlaygroundImports.js b/packages/playground/src/PlaygroundImports.js
index 9174a3bd..d8917864 100644
--- a/packages/playground/src/PlaygroundImports.js
+++ b/packages/playground/src/PlaygroundImports.js
@@ -16,10 +16,18 @@ import '../../../app/MMB/src/scenes/passenger/visa/__tests__/VisaRequired.test.j
 import '../../../app/MMB/src/scenes/passenger/__tests__/Passenger.test.js';
 import '../../../app/MMB/src/components/alert/__tests__/Alert.test.js';
 import '../../../packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js';
+import '../../../packages/shared/src/loaders/__tests__/IconLoading.test.js';
+import '../../../packages/shared/src/loaders/__tests__/FullPageLoading.test.js';
 import '../../../packages/shared/src/forms/datePicker/__tests__/DatePicker.test.js';
+import '../../../packages/shared/src/forms/__tests__/TextInput.test.js';
+import '../../../packages/shared/src/forms/__tests__/Switch.test.js';
 import '../../../packages/shared/src/forms/__tests__/Slider.test.js';
+import '../../../packages/shared/src/forms/__tests__/Checkbox.test.js';
+import '../../../packages/shared/src/forms/__tests__/AgePicker.test.js';
 import '../../../packages/shared/src/buttons/__tests__/TextButton.test.js';
+import '../../../packages/shared/src/buttons/__tests__/LinkButton.test.js';
 import '../../../packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js';
+import '../../../packages/shared/src/buttons/__tests__/Button.test.js';
 import '../../../packages/shared/src/__tests__/Text.test.js';
 import '../../../packages/shared/src/__tests__/SimpleCard.test.js';
 import '../../../packages/shared/src/__tests__/ReadMore.test.js';
diff --git a/packages/shared/index.js b/packages/shared/index.js
index 83a9fca8..f9847d4a 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -22,11 +22,10 @@ export { default as AppleWalletButton } from './src/buttons/AppleWalletButton';
 export { default as AgePicker } from './src/forms/AgePicker';
 export { default as Checkbox } from './src/forms/Checkbox';
 export { default as DatePicker } from './src/forms/datePicker/DatePicker';
-export { default as ErrorMessage } from './src/forms/ErrorMessage';
 export { default as NumberControl } from './src/forms/NumberControl';
 export { default as Slider } from './src/forms/Slider';
 export { default as TextInput } from './src/forms/TextInput';
-export { default as Switch } from './src/forms/Switch.js';
+export { default as Switch } from './src/forms/Switch';
 
 export { default as FullPageLoading } from './src/loaders/FullPageLoading';
 export { default as IconLoading } from './src/loaders/IconLoading';
@@ -64,6 +63,7 @@ export { default as WebView } from './src/WebView';
 export { default as SimpleCard } from './src/SimpleCard';
 
 export { default as GeneralError } from './src/errors/GeneralError';
+export { default as ErrorMessage } from './src/errors/ErrorMessage';
 
 export { default as ReadMore } from './src/ReadMore';
 export { default as BottomSheet } from './src/BottomSheet';


Test patch:
diff --git a/packages/shared/src/buttons/__tests__/Button.test.js b/packages/shared/src/buttons/__tests__/Button.test.js
new file mode 100644
index 00000000..733d9f01
--- /dev/null
+++ b/packages/shared/src/buttons/__tests__/Button.test.js
@@ -0,0 +1,19 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+
+import Button from '../Button';
+
+const noop = () => {};
+
+describe('Button', () => {
+  it('renders', () => {
+    PlaygroundRenderer.render(
+      <Button onPress={noop}>
+        <Translation passThrough="Button" />
+      </Button>,
+    );
+  });
+});
diff --git a/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js b/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js
index 3ac2408e..4c7de8f6 100644
--- a/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js
+++ b/packages/shared/src/buttons/__tests__/IncrementDecrementButtons.test.js
@@ -31,7 +31,7 @@ describe('IncrementDecrementButtons', () => {
       <IncrementDecrementButtons
         onIncrement={onIncrement}
         onDecrement={onDecrement}
-        number={1}
+        number={2}
         min={1}
         max={3}
       />,
diff --git a/packages/shared/src/buttons/__tests__/LinkButton.test.js b/packages/shared/src/buttons/__tests__/LinkButton.test.js
new file mode 100644
index 00000000..8b0ff582
--- /dev/null
+++ b/packages/shared/src/buttons/__tests__/LinkButton.test.js
@@ -0,0 +1,20 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+
+import LinkButton from '../LinkButton';
+
+const noop = () => {};
+
+describe('Button', () => {
+  it('renders', () => {
+    PlaygroundRenderer.render(
+      <LinkButton
+        onPress={noop}
+        title={<Translation passThrough="Link button" />}
+      />,
+    );
+  });
+});
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
new file mode 100644
index 00000000..5a4bb26b
--- /dev/null
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+<Touchable
+  accessibilityComponentType="button"
+  borderlessRipple={false}
+  disabled={false}
+  onPress={[Function]}
+  rippleColor="rgba(0, 0, 0, .32)"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#00a991",
+        "borderRadius": 6,
+        "flexGrow": 1,
+        "height": 44,
+        "justifyContent": "center",
+        "paddingHorizontal": 11,
+      },
+      undefined,
+    ]
+  }
+>
+  <Translation
+    passThrough="Button"
+  />
+</Touchable>
+`;
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap
index 65e69c6c..d537b537 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/IncrementDecrementButtons.test.js.snap
@@ -32,7 +32,7 @@ exports[`IncrementDecrementButtons renders 1`] = `
         }
       }
       text="–"
-      touchable={false}
+      touchable={true}
     />
   </Component>
   <Button
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
new file mode 100644
index 00000000..f291ba82
--- /dev/null
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+<Button
+  disabled={false}
+  onPress={[Function]}
+  style={
+    Object {
+      "backgroundColor": "transparent",
+    }
+  }
+>
+  <ButtonTitle
+    style={
+      Array [
+        Object {
+          "color": "#00a991",
+        },
+        undefined,
+      ]
+    }
+    text={
+      <Translation
+        passThrough="Link button"
+      />
+    }
+  />
+</Button>
+`;
diff --git a/packages/shared/src/forms/ErrorMessage.js b/packages/shared/src/errors/ErrorMessage.js
similarity index 100%
rename from packages/shared/src/forms/ErrorMessage.js
rename to packages/shared/src/errors/ErrorMessage.js
diff --git a/packages/shared/src/forms/__tests__/AgePicker.test.js b/packages/shared/src/forms/__tests__/AgePicker.test.js
new file mode 100644
index 00000000..612bb4ec
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/AgePicker.test.js
@@ -0,0 +1,50 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+
+import TextButton from '../../buttons/TextButton';
+import AgePicker from '../AgePicker';
+
+type State = {|
+  isVisible: boolean,
+  number: number,
+|};
+
+class Wrapper extends React.Component<{||}, State> {
+  state = {
+    isVisible: false,
+    number: 0,
+  };
+
+  toggle = () => {
+    this.setState(state => ({
+      isVisible: !state.isVisible,
+    }));
+  };
+
+  onChange = (number: number) => {
+    this.setState({ number });
+  };
+
+  render = () => (
+    <React.Fragment>
+      <TextButton
+        title={<Translation passThrough="Show age picker" />}
+        onPress={this.toggle}
+      />
+      <AgePicker
+        isVisible={this.state.isVisible}
+        onClose={this.toggle}
+        max={3}
+        min={1}
+        onChange={this.onChange}
+      />
+    </React.Fragment>
+  );
+}
+
+it('renders', () => {
+  PlaygroundRenderer.render(<Wrapper />, false, 'AgePicker');
+});
diff --git a/packages/shared/src/forms/__tests__/Checkbox.test.js b/packages/shared/src/forms/__tests__/Checkbox.test.js
new file mode 100644
index 00000000..be2231ea
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/Checkbox.test.js
@@ -0,0 +1,25 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+
+import Checkbox from '../Checkbox';
+
+const noop = () => {};
+
+it('not checked', () => {
+  PlaygroundRenderer.render(
+    <Checkbox onPress={noop} isChecked={false}>
+      <Translation passThrough="Unchecked" />
+    </Checkbox>,
+  );
+});
+
+it('checked', () => {
+  PlaygroundRenderer.render(
+    <Checkbox onPress={noop} isChecked={true}>
+      <Translation passThrough="Checked" />
+    </Checkbox>,
+  );
+});
diff --git a/packages/shared/src/forms/__tests__/Switch.test.js b/packages/shared/src/forms/__tests__/Switch.test.js
new file mode 100644
index 00000000..120bd2f5
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/Switch.test.js
@@ -0,0 +1,14 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+
+import Switch from '../Switch';
+
+it('renders with false', () => {
+  PlaygroundRenderer.render(<Switch value={false} onValueChange={jest.fn()} />);
+});
+
+it('renders with true', () => {
+  PlaygroundRenderer.render(<Switch value={true} onValueChange={jest.fn()} />);
+});
diff --git a/packages/shared/src/forms/__tests__/TextInput.test.js b/packages/shared/src/forms/__tests__/TextInput.test.js
new file mode 100644
index 00000000..f95231e7
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/TextInput.test.js
@@ -0,0 +1,21 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+
+import TextInput from '../TextInput';
+
+it('renders', () => {
+  PlaygroundRenderer.render(<TextInput />);
+});
+
+it('renders with default value', () => {
+  PlaygroundRenderer.render(<TextInput defaultValue="Default value" />);
+});
+
+it('renders with placeholder', () => {
+  PlaygroundRenderer.render(
+    <TextInput placeholder={<Translation passThrough="Placeholder" />} />,
+  );
+});
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
new file mode 100644
index 00000000..b6b622c1
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<React.Fragment>
+  <TextButton
+    disabled={false}
+    onPress={[Function]}
+    title={
+      <Translation
+        passThrough="Show age picker"
+      />
+    }
+  />
+  <AgePicker
+    isVisible={false}
+    max={3}
+    min={1}
+    onChange={[Function]}
+    onClose={[Function]}
+  />
+</React.Fragment>
+`;
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
new file mode 100644
index 00000000..cb41f2cc
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`checked 1`] = `
+<TouchableWithoutFeedback
+  onPress={[Function]}
+>
+  <Component
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Component
+      style={
+        Object {
+          "flex": 3,
+          "height": 26,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Translation
+        passThrough="Checked"
+      />
+    </Component>
+    <Component
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "flex": 1,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Icon
+        color="#00a991"
+        name="check"
+        size={26}
+      />
+    </Component>
+  </Component>
+</TouchableWithoutFeedback>
+`;
+
+exports[`not checked 1`] = `
+<TouchableWithoutFeedback
+  onPress={[Function]}
+>
+  <Component
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Component
+      style={
+        Object {
+          "flex": 3,
+          "height": 26,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Translation
+        passThrough="Unchecked"
+      />
+    </Component>
+  </Component>
+</TouchableWithoutFeedback>
+`;
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Switch.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Switch.test.js.snap
new file mode 100644
index 00000000..bb6a9da6
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Switch.test.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders with false 1`] = `
+<Switch
+  disabled={false}
+  onTintColor="#00a991"
+  onValueChange={[MockFunction]}
+  value={false}
+/>
+`;
+
+exports[`renders with true 1`] = `
+<Switch
+  disabled={false}
+  onTintColor="#00a991"
+  onValueChange={[MockFunction]}
+  value={true}
+/>
+`;
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap
new file mode 100644
index 00000000..14b8fc44
--- /dev/null
+++ b/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<Component
+  style={
+    Object {
+      "flexDirection": "row",
+      "height": 47,
+    }
+  }
+>
+  <TextInput
+    allowFontScaling={true}
+    autoCorrect={false}
+    onChangeText={[Function]}
+    placeholder={null}
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+        },
+        Object {
+          "backgroundColor": "#e8edf1",
+          "borderRadius": 6,
+          "color": "#171b1e",
+          "flex": 1,
+          "padding": 10,
+        },
+      ]
+    }
+    underlineColorAndroid="transparent"
+  />
+</Component>
+`;
+
+exports[`renders with default value 1`] = `
+<Component
+  style={
+    Object {
+      "flexDirection": "row",
+      "height": 47,
+    }
+  }
+>
+  <TextInput
+    allowFontScaling={true}
+    autoCorrect={false}
+    defaultValue="Default value"
+    onChangeText={[Function]}
+    placeholder={null}
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+        },
+        Object {
+          "backgroundColor": "#e8edf1",
+          "borderRadius": 6,
+          "color": "#171b1e",
+          "flex": 1,
+          "padding": 10,
+        },
+      ]
+    }
+    underlineColorAndroid="transparent"
+  />
+</Component>
+`;
+
+exports[`renders with placeholder 1`] = `
+<Component
+  style={
+    Object {
+      "flexDirection": "row",
+      "height": 47,
+    }
+  }
+>
+  <TextInput
+    allowFontScaling={true}
+    autoCorrect={false}
+    onChangeText={[Function]}
+    placeholder={null}
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+        },
+        Object {
+          "backgroundColor": "#e8edf1",
+          "borderRadius": 6,
+          "color": "#171b1e",
+          "flex": 1,
+          "padding": 10,
+        },
+      ]
+    }
+    underlineColorAndroid="transparent"
+  />
+  <Text
+    pointerEvents="none"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+        },
+        Object {
+          "color": "#7f91a8",
+          "padding": 10,
+          "paddingVertical": 15,
+          "position": "absolute",
+        },
+      ]
+    }
+  >
+    <Translation
+      passThrough="Placeholder"
+    />
+  </Text>
+</Component>
+`;
diff --git a/packages/shared/src/loaders/__tests__/FullPageLoading.test.js b/packages/shared/src/loaders/__tests__/FullPageLoading.test.js
new file mode 100644
index 00000000..3b3d5689
--- /dev/null
+++ b/packages/shared/src/loaders/__tests__/FullPageLoading.test.js
@@ -0,0 +1,10 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+
+import FullPageLoading from '../FullPageLoading';
+
+it('renders', () => {
+  PlaygroundRenderer.render(<FullPageLoading />);
+});
diff --git a/packages/shared/src/loaders/__tests__/IconLoading.test.js b/packages/shared/src/loaders/__tests__/IconLoading.test.js
new file mode 100644
index 00000000..465c748a
--- /dev/null
+++ b/packages/shared/src/loaders/__tests__/IconLoading.test.js
@@ -0,0 +1,10 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+
+import IconLoading from '../IconLoading';
+
+it('renders', () => {
+  PlaygroundRenderer.render(<IconLoading />);
+});
diff --git a/packages/shared/src/loaders/__tests__/__snapshots__/FullPageLoading.test.js.snap b/packages/shared/src/loaders/__tests__/__snapshots__/FullPageLoading.test.js.snap
new file mode 100644
index 00000000..816884d9
--- /dev/null
+++ b/packages/shared/src/loaders/__tests__/__snapshots__/FullPageLoading.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<CenteredView>
+  <IconLoading
+    size="small"
+  />
+</CenteredView>
+`;
diff --git a/packages/shared/src/loaders/__tests__/__snapshots__/IconLoading.test.js.snap b/packages/shared/src/loaders/__tests__/__snapshots__/IconLoading.test.js.snap
new file mode 100644
index 00000000..d6abe0b9
--- /dev/null
+++ b/packages/shared/src/loaders/__tests__/__snapshots__/IconLoading.test.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<ActivityIndicator
+  animating={true}
+  color="#00a991"
+  hidesWhenStopped={true}
+  size="small"
+/>
+`;