trooperandz

describe("UserTest", () => {
  it("Handles the shipment card press event", () => {
    const { getByTestId } = renderComponent();

    fireEvent.press(getByTestId(SHIPMENT_CARD));

    expect(mockPressHandler).toHaveBeenCalled();
  });

  it("Renders the shipment number", async () => {

trooperandz

describe("EngineerTest", () => {
  it("Creates the touchable area for the shipment card", () => {
    const renderedView = renderComponent();

    expect(renderedView.type).toBe(TouchableOpacity);
    expect(renderedView.props.activeOpacity).toBe(0.6);
    expect(renderedView.props.accessibilityRole).toBe("button");
  });

  it("Calls useState", () => {

trooperandz

// storybook/stories/index.js
import './Button/index.stories';

trooperandz

// Main project root index.js file, adjusted to run storybook
// import { AppRegistry } from 'react-native';
// import App from './App';
// import { name as appName } from './app.json';

// AppRegistry.registerComponent(appName, () => App);

export { default } from './src/storybook';

trooperandz

{
  "scripts": {
    "prestorybook": "rnstl"
  },
  "config": {
    "react-native-storybook-loader": {
      "searchDir": [
        "./src"
      ],
      "pattern": "**/*.stories.js",

trooperandz

import { AppRegistry } from 'react-native';
import {
  getStorybookUI,
  configure,
  addDecorator,
} from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import { loadStories } from './storyLoader';

import './rn-addons';

trooperandz

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <path fill-rule="evenodd" d="M16.006 14.592C17.244 13.255 18 11.466 18 9.5 18 5.358 14.642 2 10.5 2 6.358 2 3 5.358 3 9.5c0 4.142 3.358 7.5 7.5 7.5 1.453 0 2.809-.413 3.958-1.128l5.835 5.835 1.414-1.414-5.7-5.7zM16 9.5c0 3.038-2.462 5.5-5.5 5.5S5 12.538 5 9.5 7.462 4 10.5 4 16 6.462 16 9.5z" clip-rule="evenodd"/>
</svg>

trooperandz

// storybook/CenterView/index.js

import React from 'react';
import { StyleSheet, View } from 'react-native';

export const CenterView = ({ children }) => {
  return <View style={styles.container}>{children}</View>;
};

const styles = StyleSheet.create({

trooperandz

// storybook/Button/index.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { text, select, boolean } from '@storybook/addon-knobs';

import { CenterView } from '../CenterView';
import { Button } from '.';

const typeOptions = ['primary', 'secondary', 'tertiary'];

trooperandz

// storybook/Button/index.js
import React from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';