@hero-design/rn 8.2.3 → 8.3.1

package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,600 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousel renders basic carousel 1`] = `
+<View
+  testID="carousel"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ece8ef",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeSlideBackground="#ece8ef"
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "flexGrow": 2,
+          "justifyContent": "space-between",
+        },
+        undefined,
+      ]
+    }
+  >
+    <RCTScrollView
+      bounces={false}
+      data={
+        Array [
+          Object {
+            "background": "#ece8ef",
+            "body": "Access your Work, Money and Benefits in the palm of your hand.",
+            "heading": "Welcome to the new Employment Hero app",
+            "image": "https://picsum.photos/800/1200",
+          },
+          Object {
+            "background": "#ccd2d3",
+            "body": "Our app now has a new bright clean modern look and feel with the same great features.",
+            "content": <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/30",
+                }
+              }
+            />,
+            "heading": "Same app with a new look!",
+            "image": "https://picsum.photos/800/1200",
+          },
+          Object {
+            "background": "#ccd2d3",
+            "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
+            "heading": "Easier to get around",
+            "image": "https://picsum.photos/800/1200",
+          },
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      stickyHeaderIndices={Array []}
+      viewabilityConfig={
+        Object {
+          "viewAreaCoveragePercentThreshold": 50,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        Array [
+          Object {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": Object {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/800/1200",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 36,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Welcome to the new Employment Hero app
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Access your Work, Money and Benefits in the palm of your hand.
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/800/1200",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Image
+                source={
+                  Object {
+                    "uri": "https://picsum.photos/30",
+                  }
+                }
+                style={
+                  Array [
+                    Object {
+                      "borderRadius": 0,
+                      "height": 72,
+                      "width": 72,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 36,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Same app with a new look!
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Our app now has a new bright clean modern look and feel with the same great features.
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/800/1200",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 36,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Easier to get around
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "marginBottom": 24,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "backgroundColor": "#401960",
+            "borderRadius": 32,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "opacity": 1,
+            "padding": 16,
+          }
+        }
+      >
+        <Text
+          disabled={false}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flexShrink": 1,
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="filled-primary"
+        >
+          Skip
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "marginStart": "auto",
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.9993342210386151,
+              "width": 23.978695073235684,
+            }
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5006666666666667,
+              "width": 8.021333333333333,
+            }
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Carousel from '..';
+import Image from '../../Image';
+import { theme } from '../../..';
+import Button from '../../Button/Button';
+
+const carouselData = [
+  {
+    image: 'https://picsum.photos/800/1200',
+    heading: 'Welcome to the new Employment Hero app',
+    body: 'Access your Work, Money and Benefits in the palm of your hand.',
+    background: theme.colors.highlightedSurface,
+  },
+  {
+    image: 'https://picsum.photos/800/1200',
+    content: <Image source={{ uri: 'https://picsum.photos/30' }} />,
+    heading: 'Same app with a new look!',
+    body: 'Our app now has a new bright clean modern look and feel with the same great features.',
+    background: theme.colors.decorativePrimarySurface,
+  },
+  {
+    image: 'https://picsum.photos/800/1200',
+    heading: 'Easier to get around',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.',
+    background: theme.colors.decorativePrimarySurface,
+  },
+];
+
+describe('Carousel', () => {
+  it('renders basic carousel', async () => {
+    const onPress = jest.fn();
+    const { getByTestId, queryByText, toJSON } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onPress} />;
+        }}
+      />
+    );
+
+    expect(getByTestId('carousel')).toBeTruthy();
+
+    expect(queryByText('Skip')).toBeTruthy();
+
+    // Slide 1
+    expect(queryByText('Welcome to the new Employment Hero app')).toBeTruthy();
+    expect(
+      queryByText(
+        'Access your Work, Money and Benefits in the palm of your hand.'
+      )
+    ).toBeTruthy();
+
+    // Slide 2
+    expect(queryByText('Same app with a new look!')).toBeTruthy();
+    expect(
+      queryByText(
+        'Our app now has a new bright clean modern look and feel with the same great features.'
+      )
+    ).toBeTruthy();
+
+    // Slide 3
+    expect(queryByText('Easier to get around')).toBeTruthy();
+    expect(
+      queryByText(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
+      )
+    ).toBeTruthy();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should call skip call back when press skip', () => {
+    const onSkip = jest.fn();
+
+    const { queryByText } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onSkip} />;
+        }}
+      />
+    );
+
+    expect(queryByText('Skip')).toBeTruthy();
+
+    fireEvent.press(queryByText('Skip'));
+    expect(onSkip).toBeCalled();
+  });
+});