add native and ssr tests

packages/blade/src/components/Table/Table.native.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { Text } from '~components/Typography';
 import type { SurfaceLevels } from '~tokens/theme/theme';
+import { logger } from '~utils/logger';
 
 export type TableNode<Item> = Item & {
   id: string;
@@ -41,6 +42,14 @@ export type TableProps<Item> = {
 } & StyledPropsBlade;
 
 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>;
 };
 

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 '../Table';
+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();
+  });
+});

packages/blade/src/components/Table/__tests__/Table.ssr.test.tsx

@@ -0,0 +1,249 @@
+import { Table } from '../Table';
+import type { TableProps } from '../Table';
+import { TableBody, TableCell, TableRow } from '../TableBody';
+import { TableFooter, TableFooterCell, TableFooterRow } from '../TableFooter';
+import { TableHeader, TableHeaderCell, TableHeaderRow } from '../TableHeader';
+import renderWithSSR from '~utils/testing/renderWithSSR.web';
+
+type Item = {
+  id: string;
+  paymentId: string;
+  amount: number;
+  status: string;
+  type: string;
+  method: string;
+  name: string;
+};
+
+const nodes: Item[] = [
+  {
+    id: '1',
+    paymentId: 'rzp01',
+    amount: 100,
+    status: 'success',
+    type: 'credit',
+    method: 'Netbanking',
+    name: 'John Doe',
+  },
+  {
+    id: '2',
+    paymentId: 'rzp02',
+    amount: 240,
+    status: 'pending',
+    type: 'credit',
+    method: 'UPI',
+    name: 'Jane Doe',
+  },
+  {
+    id: '3',
+    paymentId: 'rzp03',
+    amount: 120,
+    status: 'failed',
+    type: 'debit',
+    method: 'Debit Card',
+    name: 'Alice Smith',
+  },
+  {
+    id: '4',
+    paymentId: 'rzp04',
+    amount: 300,
+    status: 'success',
+    type: 'credit',
+    method: 'Credit Card',
+    name: 'Bob Smith',
+  },
+  {
+    id: '5',
+    paymentId: 'rzp05',
+    amount: 200,
+    status: 'success',
+    type: 'credit',
+    method: 'Netbanking',
+    name: 'John Doe',
+  },
+  {
+    id: '6',
+    paymentId: 'rzp06',
+    amount: 240,
+    status: 'pending',
+    type: 'credit',
+    method: 'UPI',
+    name: 'Jane Doe',
+  },
+  {
+    id: '7',
+    paymentId: 'rzp07',
+    amount: 120,
+    status: 'failed',
+    type: 'debit',
+    method: 'Debit Card',
+    name: 'Alice Smith',
+  },
+  {
+    id: '8',
+    paymentId: 'rzp08',
+    amount: 300,
+    status: 'success',
+    type: 'credit',
+    method: 'Credit Card',
+    name: 'Bob Smith',
+  },
+  {
+    id: '9',
+    paymentId: 'rzp09',
+    amount: 200,
+    status: 'success',
+    type: 'credit',
+    method: 'Netbanking',
+    name: 'John Doe',
+  },
+  {
+    id: '10',
+    paymentId: 'rzp10',
+    amount: 240,
+    status: 'pending',
+    type: 'credit',
+    method: 'UPI',
+    name: 'Jane Doe',
+  },
+  {
+    id: '11',
+    paymentId: 'rzp11',
+    amount: 120,
+    status: 'failed',
+    type: 'debit',
+    method: 'Debit Card',
+    name: 'Alice Smith',
+  },
+  {
+    id: '12',
+    paymentId: 'rzp12',
+    amount: 300,
+    status: 'success',
+    type: 'credit',
+    method: 'Credit Card',
+    name: 'Bob Smith',
+  },
+  {
+    id: '13',
+    paymentId: 'rzp13',
+    amount: 200,
+    status: 'success',
+    type: 'credit',
+    method: 'Netbanking',
+    name: 'John Doe',
+  },
+  {
+    id: '14',
+    paymentId: 'rzp14',
+    amount: 240,
+    status: 'pending',
+    type: 'credit',
+    method: 'UPI',
+    name: 'Jane Doe',
+  },
+  {
+    id: '15',
+    paymentId: 'rzp15',
+    amount: 120,
+    status: 'failed',
+    type: 'debit',
+    method: 'Debit Card',
+    name: 'Alice Smith',
+  },
+  {
+    id: '16',
+    paymentId: 'rzp16',
+    amount: 300,
+    status: 'success',
+    type: 'credit',
+    method: 'Credit Card',
+    name: 'Bob Smith',
+  },
+  {
+    id: '17',
+    paymentId: 'rzp17',
+    amount: 200,
+    status: 'success',
+    type: 'credit',
+    method: 'Netbanking',
+    name: 'John Doe',
+  },
+  {
+    id: '18',
+    paymentId: 'rzp18',
+    amount: 240,
+    status: 'pending',
+    type: 'credit',
+    method: 'UPI',
+    name: 'Jane Doe',
+  },
+  {
+    id: '19',
+    paymentId: 'rzp19',
+    amount: 120,
+    status: 'failed',
+    type: 'debit',
+    method: 'Debit Card',
+    name: 'Alice Smith',
+  },
+  {
+    id: '20',
+    paymentId: 'rzp20',
+    amount: 300,
+    status: 'success',
+    type: 'credit',
+    method: 'Credit Card',
+    name: 'Bob Smith',
+  },
+];
+
+const data: TableProps<Item>['data'] = {
+  nodes,
+};
+
+describe('<Table />', () => {
+  it('should render table', () => {
+    const { container } = renderWithSSR(
+      <Table data={data}>
+        {(tableData) => (
+          <>
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell>Payment ID</TableHeaderCell>
+                <TableHeaderCell>Amount</TableHeaderCell>
+                <TableHeaderCell>Status</TableHeaderCell>
+                <TableHeaderCell>Type</TableHeaderCell>
+                <TableHeaderCell>Method</TableHeaderCell>
+                <TableHeaderCell>Name</TableHeaderCell>
+              </TableHeaderRow>
+            </TableHeader>
+            <TableBody>
+              {tableData.map((tableItem, index) => (
+                <TableRow item={tableItem} key={index}>
+                  <TableCell>{tableItem.paymentId}</TableCell>
+                  <TableCell>{tableItem.amount}</TableCell>
+                  <TableCell>{tableItem.status}</TableCell>
+                  <TableCell>{tableItem.type}</TableCell>
+                  <TableCell>{tableItem.method}</TableCell>
+                  <TableCell>{tableItem.name}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableFooterRow>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+              </TableFooterRow>
+            </TableFooter>
+          </>
+        )}
+      </Table>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});