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

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

@@ -1,16 +1,25 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { fireEvent } from '@testing-library/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 Tabs from '..';
+import ScrollableTabs from '../ScrollableTabs';
 import Button from '../../Button';
 import type { TabType } from '..';
+import { useIsFocused } from '../useIsFocused';
 
+const CustomScreen = ({ title }: { title: string }) => {
+  const isFocused = useIsFocused();
+  return (
+    <Text>
+      {title} {isFocused ? 'focused' : 'unfocused'}
+    </Text>
+  );
+};
 const TestTabsComponent = (
   props: Omit<
-    ComponentProps<typeof Tabs>,
+    ComponentProps<typeof ScrollableTabs>,
     'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
@@ -19,19 +28,19 @@ const TestTabsComponent = (
     {
       key: 'work',
       activeItem: 'Work',
-      component: <Text>Work Screen</Text>,
+      component: <CustomScreen title="Work Screen" />,
     },
     {
       key: 'personal',
       activeItem: 'speaker',
       inactiveItem: 'speaker-outlined',
-      component: <Text>Personal Screen</Text>,
+      component: <CustomScreen title="Personal Screen" />,
     },
     {
       key: 'home',
       activeItem: 'home',
       inactiveItem: 'home-outlined',
-      component: <Text>Home Screen</Text>,
+      component: <CustomScreen title="Home Screen" />,
       badge: {
         type: 'status',
       },
@@ -40,7 +49,7 @@ const TestTabsComponent = (
       key: 'calendar',
       activeItem: 'calendar',
       inactiveItem: 'calendar-dates-outlined',
-      component: <Text>Calendar Screen</Text>,
+      component: <CustomScreen title="Calendar Screen" />,
       badge: {
         type: 'counter',
         value: 50,
@@ -60,7 +69,7 @@ const TestTabsComponent = (
         onPress={() => setSelectedTabKey('work')}
         icon="sync"
       />
-      <Tabs.Scroll
+      <ScrollableTabs
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
@@ -71,7 +80,7 @@ const TestTabsComponent = (
 };
 
 describe('Tabs.Scroll', () => {
-  it('renders correctly', () => {
+  it('renders correctly', async () => {
     const { getByTestId, getByText, toJSON } = renderWithTheme(
       <TestTabsComponent />
     );
@@ -80,30 +89,79 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Work')).toBeDefined();
     expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
     expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
-    expect(getByText('Work Screen')).toBeDefined();
-    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
-    expect(getByText('Personal Screen')).toBeDefined();
-    fireEvent.press(getByTestId('hero-icon-home-outlined'));
-    expect(getByText('Home Screen')).toBeDefined();
-    fireEvent.press(getByTestId('hero-icon-calendar-dates-outlined'));
-    expect(getByText('Calendar Screen')).toBeDefined();
-    expect(getByText('50')).toBeDefined();
-    fireEvent.press(getByText('Move to Work'));
-    expect(getByText('Work Screen')).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();
+    });
   });
+});
 
-  it('renders correctly with lazy preloaded', () => {
-    const { getByText, queryByText, getByTestId } = renderWithTheme(
-      <TestTabsComponent lazy lazyPreloadDistance={1} swipeEnabled={false} />
+describe('useIsFocused', () => {
+  it('renders correctly', async () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent />
     );
 
-    expect(getByText('Work Screen')).toBeDefined();
-    expect(getByText('Personal Screen')).toBeDefined();
-    // Preload distance is 1, so Home Screen is not rendered.
-    expect(queryByText('Home Screen')).toBeNull();
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    await waitFor(() => expect(getByText('Work Screen focused')).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('Home Screen')).toBeDefined();
-    expect(queryByText('Work Screen')).toBeNull();
+    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();
   });
 });