@hero-design/rn 8.56.0 → 8.56.1

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 1m 2.4s
+created lib/index.js, es/index.js in 43.9s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.56.1
+
+### Patch Changes
+
+- [#2673](https://github.com/Thinkei/hero-design/pull/2673) [`4ced86d15`](https://github.com/Thinkei/hero-design/commit/4ced86d15b3c4baf62fb44154eebc1cdd92130e3) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [ScrollViewWithFAB][flatlistwithfab][SectionListWithFAB] Add unit tests and visual tests
+
 ## 8.56.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.56.0",
+  "version": "8.56.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { FlatListWithFAB, ScrollViewWithFAB, SectionListWithFAB } from '..';
+import Box from '../../Box';
+import { ActionGroupProps } from '../../FAB/ActionGroup';
+import { FABProps } from '../../FAB/FAB';
+import Typography from '../../Typography';
+import { ScrollViewWithFABProps } from '../ScrollViewWithFAB';
+import { FlatListWithFABProps } from '../FlatListWithFAB';
+import SectionHeading from '../../SectionHeading';
+
+const ExampleScrollViewWithFAB = ({ fabProps }: ScrollViewWithFABProps) => (
+  <ScrollViewWithFAB fabProps={fabProps} testID="scrollable-with-fab">
+    <Box style={{ height: 2000 }} justifyContent="space-between">
+      <Typography.Body>Content 1</Typography.Body>
+      <Typography.Body>Content 2</Typography.Body>
+      <Typography.Body>Content 3</Typography.Body>
+    </Box>
+  </ScrollViewWithFAB>
+);
+
+function ExampleFlatListWithFAB<T>({ fabProps }: FlatListWithFABProps<T>) {
+  return (
+    <FlatListWithFAB
+      testID="scrollable-with-fab"
+      fabProps={fabProps}
+      data={Array.from({ length: 30 }, (_, i) => ({
+        id: i,
+        title: `Content ${i}`,
+      }))}
+      renderItem={({ item }) => (
+        <Box marginBottom="xxxxlarge">
+          <Typography.Title level="h5">{item.title}</Typography.Title>
+          <Typography.Body>Item {item.id}</Typography.Body>
+        </Box>
+      )}
+    />
+  );
+}
+
+function ExampleSectionListWithFAB<T>({ fabProps }: FlatListWithFABProps<T>) {
+  const theme = useTheme();
+
+  return (
+    <SectionListWithFAB
+      testID="scrollable-with-fab"
+      fabProps={fabProps}
+      sections={[
+        {
+          title: 'Title 1',
+          data: ['Content 1', 'Content 2', 'Content 3', 'Content 4'],
+        },
+        {
+          title: 'Title 2',
+          data: ['Content 5', 'Content 6', 'Content 7'],
+        },
+      ]}
+      renderSectionHeader={({ section: { title } }) => (
+        <SectionHeading text={title} />
+      )}
+      renderItem={({ item }) => (
+        <Typography.Title style={{ marginBottom: theme.space.xxxxlarge }}>
+          {item}
+        </Typography.Title>
+      )}
+    />
+  );
+}
+
+const defaultFabProps: FABProps = {
+  icon: 'speaker',
+  title: 'Shout out',
+  animated: true,
+};
+
+const defaultActionGroupProps: ActionGroupProps = {
+  fabTitle: 'Shout out',
+  items: [
+    { icon: 'speaker', title: 'Announcements' },
+    { icon: 'target', title: 'Goal' },
+  ],
+  active: false,
+};
+
+describe('Scrollables With FAB', () => {
+  it.each`
+    fabComponent     | ScrollComponent
+    ${'FAB'}         | ${ExampleScrollViewWithFAB}
+    ${'ActionGroup'} | ${ExampleScrollViewWithFAB}
+    ${'FAB'}         | ${ExampleFlatListWithFAB}
+    ${'ActionGroup'} | ${ExampleFlatListWithFAB}
+    ${'FAB'}         | ${ExampleSectionListWithFAB}
+    ${'ActionGroup'} | ${ExampleSectionListWithFAB}
+  `(
+    '$ScrollComponent renders $fabComponent correctly',
+    ({ fabComponent, ScrollComponent }) => {
+      const fabProps =
+        fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
+
+      const { getByText, toJSON } = renderWithTheme(
+        <ScrollComponent fabProps={fabProps} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText('Content 1')).toBeDefined();
+      expect(getByText('Content 2')).toBeDefined();
+      expect(getByText('Content 3')).toBeDefined();
+      expect(getByText('Shout out')).toBeDefined();
+    }
+  );
+
+  it.each`
+    fabComponent     | ScrollComponent
+    ${'FAB'}         | ${ExampleScrollViewWithFAB}
+    ${'ActionGroup'} | ${ExampleScrollViewWithFAB}
+    ${'FAB'}         | ${ExampleFlatListWithFAB}
+    ${'ActionGroup'} | ${ExampleFlatListWithFAB}
+    ${'FAB'}         | ${ExampleSectionListWithFAB}
+    ${'ActionGroup'} | ${ExampleSectionListWithFAB}
+  `(
+    '$ScrollComponent animates $fabComponent correctly',
+    ({ fabComponent, ScrollComponent }) => {
+      const fabProps =
+        fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
+
+      const { getByText, queryByText, getByTestId, queryByTestId } =
+        renderWithTheme(<ScrollComponent fabProps={fabProps} />);
+
+      // Scrolling down
+      expect(getByText('Shout out')).toBeDefined();
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          contentSize: { height: 1000 },
+          contentOffset: { y: 10 },
+          layoutMeasurement: { height: 2000, width: 400 },
+        },
+      });
+
+      // Collapsed
+      expect(queryByText('Shout out')).toBeNull();
+      expect(getByTestId('animated-fab-icon')).toBeDefined();
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          contentSize: { height: 1000 },
+          contentOffset: { y: 400 },
+          layoutMeasurement: { height: 2000, width: 400 },
+        },
+      });
+
+      // Hidden
+      expect(queryByText('Shout out')).toBeNull();
+      expect(queryByTestId('styled-fab-icon')).toBeNull();
+
+      // Scrolling up
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          contentSize: { height: 1000 },
+          contentOffset: { y: -10 },
+          layoutMeasurement: { height: 2000, width: 400 },
+        },
+      });
+
+      // Collapsed
+      expect(queryByText('Shout out')).toBeNull();
+      expect(getByTestId('animated-fab-icon')).toBeDefined();
+    }
+  );
+});