Merge pull request #53 from bamlab/test/adding-virtualized-list-test

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "*.ts": "${capture}.test.ts, ${capture}.test.ts.snap",
+    "*.tsx": "${capture}.test.tsx, ${capture}.test.tsx.snap",
+    ".eslintrc.js": "*.eslintrc.js"
+  }
+}

package.json

@@ -11,6 +11,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@react-native-community/eslint-config": "^3.2.0",
+    "@testing-library/react-native": "^12.4.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.60.1",

packages/lib/jest.config.js

@@ -7,6 +7,10 @@
  *
  * If encountering a syntax error during tests with a new package, add it to this list
  */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
 const packagesToTransform = [
   'react-native',
   'react-native-(.*)',
@@ -30,7 +34,10 @@ const config = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   testRegex: '\\.test\\.[jt]sx?$',
   transform: {
-    '\\.[jt]sx?$': ['babel-jest', { configFile: './babel.jest.config.js' }],
+    '\\.[jt]sx?$': [
+      'babel-jest',
+      { configFile: path.resolve(__dirname, './babel.jest.config.js') },
+    ],
   },
   transformIgnorePatterns: [`node_modules/(?!(${packagesToTransform.join('|')})/)`],
   cacheDirectory: '.cache/jest',
@@ -40,6 +47,7 @@ const config = {
   // tools
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   reporters: ['default', 'github-actions'], // Remove this line if your CI is not on Github actions
+  snapshotResolver: './jestSnapshotResolver.js',
 };
 
 module.exports = config;

packages/lib/jestSnapshotResolver.js

@@ -0,0 +1,11 @@
+module.exports = {
+  testPathForConsistencyCheck: 'some/__tests__/example.test.js',
+  /** resolves from test to snapshot path */
+  resolveSnapshotPath: (testPath, snapshotExtension) => {
+    return testPath + snapshotExtension;
+  },
+  /** resolves from snapshot to test path */
+  resolveTestPath: (snapshotFilePath, snapshotExtension) => {
+    return snapshotFilePath.slice(0, -snapshotExtension.length);
+  },
+};

packages/lib/package.json

@@ -8,7 +8,6 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^12.3.1",
     "@types/jest": "^29.5.3",

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

@@ -30,7 +30,7 @@ const TestScreen = ({ onDirectionHandledWithoutMovement = () => undefined }) =>
 
 export const expectButtonToHaveFocus = (component: RenderResult, text: string) => {
   const element = component.getByRole('button', { name: text });
-  expect(element).toHaveAccessibilityState({ selected: true });
+  expect(element).toBeSelected();
 };
 
 describe('Spatial Navigation Movement', () => {

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;
 };

packages/lib/src/spatial-navigation/components/virtualizedGrid/SpatialNavigationVirtualizedGrid.test.tsx

@@ -0,0 +1,152 @@
+import { RenderResult, act, render, screen } from '@testing-library/react-native';
+import { ItemWithIndex } from '../virtualizedList/VirtualizedList';
+import { PropsTestButton, TestButton } from '../tests/TestButton';
+import { SpatialNavigationRoot } from '../Root';
+import '../tests/helpers/configureTestRemoteControl';
+
+import { DefaultFocus } from '../../context/DefaultFocusContext';
+import { SpatialNavigationVirtualizedGrid } from '../virtualizedGrid/SpatialNavigationVirtualizedGrid';
+import testRemoteControlManager from '../tests/helpers/testRemoteControlManager';
+
+export const expectButtonToHaveFocus = (component: RenderResult, text: string) => {
+  const element = component.getByRole('button', { name: text });
+  expect(element).toBeSelected();
+};
+
+describe('SpatialNavigationVirtualizedGrid', () => {
+  const renderItem = ({ item }: { item: PropsTestButton & ItemWithIndex }) => (
+    <TestButton title={item.title} onSelect={item.onSelect} />
+  );
+
+  function createDataArray(numberOfItems: number) {
+    const data = [];
+    for (let i = 0; i < numberOfItems; i++) {
+      data.push({
+        title: `button ${i + 1}`,
+        onSelect: () => undefined,
+        index: i,
+      });
+    }
+    return data;
+  }
+
+  const renderGrid = () =>
+    render(
+      <SpatialNavigationRoot>
+        <DefaultFocus>
+          <SpatialNavigationVirtualizedGrid
+            renderItem={renderItem}
+            data={createDataArray(19)}
+            itemHeight={100}
+            numberOfRenderedRows={5}
+            numberOfRowsVisibleOnScreen={3}
+            numberOfColumns={3}
+            testID="test-grid"
+          />
+        </DefaultFocus>
+      </SpatialNavigationRoot>,
+    );
+
+  it('renders the correct number of item', () => {
+    const component = renderGrid();
+    act(() => jest.runAllTimers());
+
+    expect(screen).toMatchSnapshot();
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 1');
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.queryByText('button 16')).toBeFalsy();
+  });
+
+  it('renders the correct number of item', () => {
+    const component = renderGrid();
+    act(() => jest.runAllTimers());
+
+    const listElement = component.getByTestId('test-grid');
+    expect(listElement).toHaveStyle({ transform: [{ translateY: 0 }] });
+
+    testRemoteControlManager.handleRight();
+    act(() => jest.runAllTimers());
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 2');
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.queryByText('button 16')).toBeFalsy();
+
+    testRemoteControlManager.handleDown();
+    act(() => jest.runAllTimers());
+    expect(listElement).toHaveStyle({ transform: [{ translateY: -100 }] });
+
+    expect(screen.getByText('button 1')).toBeTruthy();
+    expect(screen.getByText('button 2')).toBeTruthy();
+    expect(screen.getByText('button 3')).toBeTruthy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 5');
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.queryByText('button 16')).toBeFalsy();
+
+    testRemoteControlManager.handleDown();
+    act(() => jest.runAllTimers());
+    expect(listElement).toHaveStyle({ transform: [{ translateY: -200 }] });
+
+    expect(screen.queryByText('button 1')).toBeFalsy();
+    expect(screen.queryByText('button 2')).toBeFalsy();
+    expect(screen.queryByText('button 3')).toBeFalsy();
+    expect(screen.getByText('button 4')).toBeTruthy();
+    expect(screen.getByText('button 5')).toBeTruthy();
+    expect(screen.getByText('button 6')).toBeTruthy();
+    expect(screen.getByText('button 7')).toBeTruthy();
+    expect(screen.getByText('button 8')).toBeTruthy();
+    expectButtonToHaveFocus(component, 'button 8');
+    expect(screen.getByText('button 9')).toBeTruthy();
+    expect(screen.getByText('button 10')).toBeTruthy();
+    expect(screen.getByText('button 11')).toBeTruthy();
+    expect(screen.getByText('button 12')).toBeTruthy();
+    expect(screen.getByText('button 13')).toBeTruthy();
+    expect(screen.getByText('button 14')).toBeTruthy();
+    expect(screen.getByText('button 15')).toBeTruthy();
+    expect(screen.getByText('button 16')).toBeTruthy();
+    expect(screen.getByText('button 17')).toBeTruthy();
+    expect(screen.getByText('button 18')).toBeTruthy();
+    expect(screen.queryByText('button 19')).toBeFalsy();
+
+    expect(screen).toMatchSnapshot();
+  });
+});