@hero-design/rn 8.22.0 → 8.24.0-alpha.0

package/src/components/Tabs/ScrollableTabsV2/__tests__/ScrollableTabsV2.spec.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, waitFor } from '@testing-library/react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ScrollableTabsV2 from '..';
+import Button from '../../../Button';
+import type { TabType } from '../..';
+
+const CustomScreen = ({ title }: { title: string }) => {
+  const isFocused = ScrollableTabsV2.useIsFocused();
+  // console.error('render ' + title);
+  return (
+    <Text>
+      {title} {isFocused ? 'focused' : 'unfocused'}
+    </Text>
+  );
+};
+const TestTabsComponent = (
+  props: Omit<
+    ComponentProps<typeof ScrollableTabsV2>,
+    'selectedTabKey' | 'onTabPress' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
+  const tabs: TabType[] = [
+    {
+      key: 'work',
+      activeItem: 'Work',
+      component: <CustomScreen title="Work Screen" />,
+    },
+    {
+      key: 'personal',
+      activeItem: 'speaker',
+      inactiveItem: 'speaker-outlined',
+      component: <CustomScreen title="Personal Screen" />,
+    },
+    {
+      key: 'home',
+      activeItem: 'home',
+      inactiveItem: 'home-outlined',
+      component: <CustomScreen title="Home Screen" />,
+      badge: {
+        type: 'status',
+      },
+    },
+    {
+      key: 'calendar',
+      activeItem: 'calendar',
+      inactiveItem: 'calendar-dates-outlined',
+      component: <CustomScreen title="Calendar Screen" />,
+      badge: {
+        type: 'counter',
+        value: 50,
+      },
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <Button.Utility
+        text="Move to Work"
+        onPress={() => setSelectedTabKey('work')}
+        icon="sync"
+      />
+      <ScrollableTabsV2
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('Tabs.ScrollV2', () => {
+  it('renders correctly', async () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    expect(getByText('Work Screen focused')).toBeDefined();
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    await waitFor(() =>
+      expect(getByText('Home Screen unfocused')).toBeDefined()
+    );
+
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+  });
+
+  describe('lazy', () => {
+    it('render all screens when lazy = false', async () => {
+      const { queryByText } = renderWithTheme(
+        <TestTabsComponent lazy={false} />
+      );
+      expect(queryByText('Work Screen focused')).toBeDefined();
+      expect(queryByText('Personal Screen unfocused')).toBeDefined();
+      await waitFor(() =>
+        expect(queryByText('Home Screen unfocused')).toBeDefined()
+      );
+      expect(queryByText('Home Screen unfocused')).toBeDefined();
+      expect(queryByText('Calendar Screen unfocused')).toBeDefined();
+    });
+
+    it('not render lazy screen', async () => {
+      const { toJSON, queryByText } = renderWithTheme(
+        <TestTabsComponent lazyPreloadDistance={1} lazy />
+      );
+      expect(queryByText('Work Screen focused')).toBeDefined();
+      expect(queryByText('Personal Screen unfocused')).toBeDefined();
+      await waitFor(() =>
+        expect(queryByText('Home Screen unfocused')).toBeDefined()
+      );
+      expect(toJSON()).toMatchSnapshot('xxx');
+      expect(queryByText('Home Screen unfocused')).toBeDefined();
+      expect(queryByText('Calendar Screen unfocused')).toBeNull();
+    });
+  });
+});
+
+describe('useIsFocused', () => {
+  it('renders correctly', () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent lazyPreloadDistance={4} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    expect(getByText('Work Screen focused')).toBeDefined();
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(getByText('Personal Screen focused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByTestId('hero-icon-home-outlined'));
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen focused')).toBeDefined();
+    expect(getByText('Calendar Screen unfocused')).toBeDefined();
+
+    fireEvent.press(getByTestId('hero-icon-calendar-dates-outlined'));
+    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Calendar Screen focused')).toBeDefined();
+    expect(getByText('50')).toBeDefined();
+  });
+});

package/src/components/Tabs/ScrollableTabsV2/__tests__/__snapshots__/SceneView.spec.tsx.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScenceView lazy not renders child correctly when the scence is lazy and renders when selectedIndex change to 1 1`] = `
+<View
+  accessibilityElementsHidden={true}
+  importantForAccessibility="no-hide-descendants"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        null,
+      ],
+    ]
+  }
+  testID="scene-view"
+/>
+`;
+
+exports[`ScenceView lazy not renders child correctly when the scence is lazy and renders when selectedIndex change to 1 2`] = `
+<View
+  accessibilityElementsHidden={true}
+  importantForAccessibility="no-hide-descendants"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        null,
+      ],
+    ]
+  }
+  testID="scene-view"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Scene 1
+  </Text>
+</View>
+`;
+
+exports[`ScenceView lazy renders child correctly when the scence is focused and should not unmount if selected index changed to index which is out of lazyPreloadDistance 1`] = `
+<View
+  accessibilityElementsHidden={false}
+  importantForAccessibility="auto"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+      ],
+    ]
+  }
+  testID="scene-view"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Scene 1
+  </Text>
+</View>
+`;
+
+exports[`ScenceView lazy renders child correctly when the scence is focused and should not unmount if selected index changed to index which is out of lazyPreloadDistance 2`] = `
+<View
+  accessibilityElementsHidden={true}
+  importantForAccessibility="no-hide-descendants"
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        null,
+      ],
+    ]
+  }
+  testID="scene-view"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Scene 1
+  </Text>
+</View>
+`;