test: add Table tests (#1841)

razorpay · Nov 24, 2023 · e8d90c3 · e8d90c3
1 parent 08e2c54
commit e8d90c3
Show file tree

Hide file tree

Showing 10 changed files with 7,904 additions and 7 deletions.
diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js
@@ -14,8 +14,9 @@ const baseConfig = {
   moduleFileExtensions: ['web.ts', 'web.tsx', 'ts', 'tsx', 'js', 'json', 'node'],
   testMatch: ['**/*.test.{ts,tsx}'],
   transform: {
-    '\\.(js|ts|tsx)?$': 'babel-jest',
+    '\\.(js|ts|tsx)?$': './jest-preprocess.js',
   },
+  transformIgnorePatterns: ['/node_modules/(?!(@table-library)/)'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './jest-setup.web.js'],
   moduleNameMapper: {

diff --git a/packages/blade/src/components/Table/Table.native.tsx b/packages/blade/src/components/Table/Table.native.tsx
@@ -3,8 +3,16 @@
 import React from 'react';
 import type { TableProps } from './types';
 import { Text } from '~components/Typography';
+import { logger } from '~utils/logger';
 
 const Table = <Item,>(props: TableProps<Item>): React.ReactElement => {
+  if (__DEV__) {
+    logger({
+      type: 'warn',
+      moduleName: 'Table',
+      message: 'Table Component is not available for Native mobile apps.',
+    });
+  }
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };
 

diff --git a/packages/blade/src/components/Table/TableBody.native.tsx b/packages/blade/src/components/Table/TableBody.native.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react';
+import type { TableBodyProps, TableCellProps, TableRowProps } from './types';
 import { Text } from '~components/Typography';
 
-const TableBody = (props: unknown): React.ReactElement => {
+const TableBody = (props: TableBodyProps): React.ReactElement => {
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };
 
-const TableRow = (props: unknown): React.ReactElement => {
+const TableRow = (props: TableRowProps<unknown>): React.ReactElement => {
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };
 
-const TableCell = (props: unknown): React.ReactElement => {
+const TableCell = (props: TableCellProps): React.ReactElement => {
   return <Text>Table Component is not available for Native mobile apps.</Text>;
 };
 

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -187,6 +187,7 @@ const _TableCell = ({ children }: TableCellProps): React.ReactElement => {
   return (
     <StyledCell
       tabIndex={0}
+      role="cell"
       $surfaceLevel={surfaceLevel}
       {...metaAttribute({ name: MetaConstants.TableCell })}
     >

diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -178,7 +178,7 @@ const _TableHeaderRow = ({ children }: TableHeaderRowProps): React.ReactElement
   const isAllSelected = selectedRows && selectedRows.length === totalItems;
   const isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected;
   return (
-    <HeaderRow role="row" {...metaAttribute({ name: MetaConstants.TableHeaderRow })}>
+    <HeaderRow role="rowheader" {...metaAttribute({ name: MetaConstants.TableHeaderRow })}>
       {isMultiSelect && (
         <TableHeaderCellCheckbox
           isChecked={isAllSelected}

diff --git a/packages/blade/src/components/Table/TablePagination.web.tsx b/packages/blade/src/components/Table/TablePagination.web.tsx
@@ -388,7 +388,6 @@ const _TablePagination = ({
             accessibilityLabel="Next Page"
             onClick={() => {
               handlePageChange(currentPage + 1);
-              console.log('next page');
             }}
             isDisabled={shouldDisableNextPage()}
           />

diff --git a/packages/blade/src/components/Table/TableToolbar.web.tsx b/packages/blade/src/components/Table/TableToolbar.web.tsx
@@ -66,7 +66,7 @@ const _TableToolbar = ({
     ? `Showing ${currentPaginationState.page * currentPaginationState.size + 1}-${
         currentPaginationState.page * currentPaginationState.size + currentPaginationState.size
       } Items`
-    : `Showing 1 to ${totalItems} Items`;
+    : `Showing 1-${totalItems} Items`;
   const selectedItemsCount = selectedRows ? selectedRows.length : 0;
   const selectedTitle = isSelected
     ? controlledSelectedTitle ??

diff --git a/packages/blade/src/components/Table/__tests__/Table.native.test.tsx b/packages/blade/src/components/Table/__tests__/Table.native.test.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { Table } from '../Table';
+import type { TableProps } from '../types';
+import { TableBody, TableRow, TableCell } from '../TableBody';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+
+const data: TableProps<{ name: string; id: string }>['data'] = {
+  nodes: [
+    {
+      name: 'John Doe',
+      id: '1',
+    },
+  ],
+};
+
+describe('Table', () => {
+  it('renders proper information on unavailability of Table on native', () => {
+    const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+
+    const { getByText } = renderWithTheme(
+      <Table data={data}>
+        {(tableData) => (
+          <TableBody>
+            <TableRow item={tableData[0]}>
+              <TableCell>Cell 1</TableCell>
+            </TableRow>
+          </TableBody>
+        )}
+      </Table>,
+    );
+    expect(getByText('Table Component is not available for Native mobile apps.')).toBeTruthy();
+    expect(console.warn).toHaveBeenCalledWith(
+      '[Blade: Table]: Table Component is not available for Native mobile apps.',
+    );
+    mockConsoleWarn.mockRestore();
+  });
+});