test: testing virtualized list

packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedList.test.tsx

@@ -0,0 +1,102 @@
+import { RenderResult, cleanup, render, screen } from '@testing-library/react-native';
+import { ItemWithIndex } from '../virtualizedList/VirtualizedList';
+import { PropsTestButton, TestButton } from './TestButton';
+import { SpatialNavigationRoot } from '../Root';
+import './helpers/configureTestRemoteControl';
+import { SpatialNavigationVirtualizedList } from '../virtualizedList/SpatialNavigationVirtualizedList';
+import { DefaultFocus } from '../../context/DefaultFocusContext';
+import testRemoteControlManager from './helpers/testRemoteControlManager';
+
+export const expectButtonToHaveFocus = (component: RenderResult, text: string) => {
+  const element = component.getByRole('button', { name: text });
+  expect(element).toHaveAccessibilityState({ selected: true });
+};
+
+describe('SpatialNavigationVirtualizedList', () => {
+  afterEach(cleanup);
+
+  const renderItem = ({ item }: { item: PropsTestButton & ItemWithIndex }) => (
+    <TestButton title={item.title} onSelect={item.onSelect} />
+  );
+
+  const data = [
+    { title: 'button 1', onSelect: () => undefined, index: 0 },
+    { title: 'button 2', onSelect: () => undefined, index: 1 },
+    { title: 'button 3', onSelect: () => undefined, index: 2 },
+    { title: 'button 4', onSelect: () => undefined, index: 3 },
+    { title: 'button 5', onSelect: () => undefined, index: 4 },
+    { title: 'button 6', onSelect: () => undefined, index: 5 },
+    { title: 'button 7', onSelect: () => undefined, index: 6 },
+    { title: 'button 8', onSelect: () => undefined, index: 7 },
+    { title: 'button 9', onSelect: () => undefined, index: 8 },
+    { title: 'button 10', onSelect: () => undefined, index: 9 },
+  ];
+
+  const renderList = () =>
+    render(
+      <SpatialNavigationRoot>
+        <DefaultFocus>
+          <SpatialNavigationVirtualizedList
+            renderItem={renderItem}
+            data={data}
+            itemSize={100}
+            width={300}
+            numberOfRenderedItems={5}
+            numberOfItemsVisibleOnScreen={3}
+          />
+        </DefaultFocus>
+      </SpatialNavigationRoot>,
+    );
+
+  it('renders the correct number of item', () => {
+    const component = renderList();
+
+    expect(screen).toMatchSnapshot();
+
+    const button1 = screen.getByText('button 1');
+    expect(button1).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 1');
+
+    const button2 = screen.getByText('button 2');
+    expect(button2).toBeTruthy();
+
+    const button3 = screen.getByText('button 3');
+    expect(button3).toBeTruthy();
+
+    const button4 = screen.getByText('button 4');
+    expect(button4).toBeTruthy();
+
+    const button5 = screen.getByText('button 5');
+    expect(button5).toBeTruthy();
+
+    const button6 = screen.queryByText('button 6');
+    expect(button6).toBeFalsy();
+  });
+
+  it('handles correctly RIGHT and RENDERS new elements accordingly while deleting elements that are too far from scroll', () => {
+    const component = renderList();
+
+    testRemoteControlManager.handleRight();
+    expectButtonToHaveFocus(component, 'button 2');
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.queryByText('button 6')).toBeFalsy();
+
+    testRemoteControlManager.handleRight();
+    expectButtonToHaveFocus(component, 'button 3');
+
+    expect(screen.queryByText('button 1')).toBeFalsy();
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.queryByText('button 7')).toBeFalsy();
+
+    testRemoteControlManager.handleRight();
+    expectButtonToHaveFocus(component, 'button 4');
+
+    expect(screen.queryByText('button 2')).toBeFalsy();
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.queryByText('button 8')).toBeFalsy();
+  });
+});

packages/lib/src/spatial-navigation/components/tests/SpatialNavigationVirtualizedList.test.tsx.snap

@@ -0,0 +1,222 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpatialNavigationVirtualizedList renders the correct number of item 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "flex": 1,
+      "flexDirection": "row",
+      "transform": [
+        {
+          "translateX": 0,
+        },
+      ],
+      "width": 300,
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateX": 0,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        accessibilityHint="button 1"
+        accessibilityLabel="button 1"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        accessible={true}
+        isFocused={true}
+        style={
+          [
+            {
+              "backgroundColor": "red",
+              "borderRadius": 100,
+              "padding": 6,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          button 1
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateX": 100,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        accessibilityHint="button 2"
+        accessibilityLabel="button 2"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        accessible={true}
+        isFocused={false}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderRadius": 100,
+              "padding": 6,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          button 2
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateX": 200,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        accessibilityHint="button 3"
+        accessibilityLabel="button 3"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        accessible={true}
+        isFocused={false}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderRadius": 100,
+              "padding": 6,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          button 3
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateX": 300,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        accessibilityHint="button 4"
+        accessibilityLabel="button 4"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        accessible={true}
+        isFocused={false}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderRadius": 100,
+              "padding": 6,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          button 4
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "left": 0,
+          "position": "absolute",
+          "transform": [
+            {
+              "translateX": 400,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        accessibilityHint="button 5"
+        accessibilityLabel="button 5"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        accessible={true}
+        isFocused={false}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderRadius": 100,
+              "padding": 6,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text>
+          button 5
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

packages/lib/src/spatial-navigation/components/tests/TestButton.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { Text } from 'react-native';
 import { SpatialNavigationNode } from '../Node';
 
-type PropsTestButton = {
+export type PropsTestButton = {
   onSelect: () => void;
   title: string;
 };