@tanstack/react-table 0.0.1-alpha.6 → 8.0.0-alpha.1

package/src/features/tests/withSorting.notest.tsx

@@ -1,341 +0,0 @@
-import React from 'react'
-import { renderHook, act } from '@testing-library/react-hooks'
-import { getHeaderIds, getRowValues } from '../../test-utils'
-import { useTable } from '../../core/useTable'
-import { noop } from '../../utils'
-import { withSorting } from '../withSorting'
-import type { Column, TableState } from '../../types'
-
-const data = [
-  {
-    firstName: 'tanner',
-    lastName: 'linsley',
-    age: 29,
-    visits: 100,
-    status: 'In Relationship',
-    progress: 80,
-  },
-  {
-    firstName: 'derek',
-    lastName: 'perkins',
-    age: 40,
-    visits: 40,
-    status: 'Single',
-    progress: 80,
-  },
-  {
-    firstName: 'joe',
-    lastName: 'bergevin',
-    age: 45,
-    visits: 20,
-    status: 'Complicated',
-    progress: 10,
-  },
-]
-
-const columns: Column[] = [
-  {
-    Header: 'Name',
-    columns: [
-      {
-        Header: 'First Name',
-        accessor: 'firstName',
-      },
-      {
-        Header: 'Last Name',
-        accessor: 'lastName',
-      },
-    ],
-  },
-  {
-    Header: 'Info',
-    columns: [
-      {
-        Header: 'Age',
-        accessor: 'age',
-      },
-      {
-        Header: 'Visits',
-        accessor: 'visits',
-      },
-      {
-        Header: 'Status',
-        accessor: 'status',
-      },
-      {
-        Header: 'Profile Progress',
-        accessor: 'progress',
-      },
-    ],
-  },
-]
-
-describe('withSorting', () => {
-  it('renders a sortable table', () => {
-    const { result } = renderHook(
-      options => {
-        const instance = useTable(options, [withCore, withSorting])
-
-        return instance
-      },
-      {
-        initialProps: {
-          data,
-          columns,
-        },
-      }
-    )
-
-    expect(getHeaderIds(result.current)).toEqual([
-      ['Name', 'Info'],
-      ['firstName', 'lastName', 'age', 'visits', 'status', 'progress'],
-    ])
-
-    expect(getRowValues(result.current)).toEqual([
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'firstName')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'firstName')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'progress')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'firstName')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-          shiftKey: true,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-    ])
-  })
-
-  it('renders a controlled sorted table', () => {
-    const { result, rerender } = renderHook(
-      options => {
-        const instance = useTable(options, [withSorting])
-
-        return instance
-      },
-      {
-        initialProps: {
-          data,
-          columns,
-          state: {},
-        },
-      }
-    )
-
-    expect(getHeaderIds(result.current)).toEqual([
-      ['Name', 'Info'],
-      ['firstName', 'lastName', 'age', 'visits', 'status', 'progress'],
-    ])
-
-    expect(getRowValues(result.current)).toEqual([
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-    ])
-
-    rerender({
-      data,
-      columns,
-      state: { sorting: [{ id: 'firstName', desc: false }] },
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-    ])
-
-    rerender({
-      data,
-      columns,
-      state: { sorting: [{ id: 'firstName', desc: true }] },
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-    ])
-
-    rerender({
-      data,
-      columns,
-      state: { sorting: [{ id: 'progress', desc: false }] },
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-    ])
-
-    rerender({
-      data,
-      columns,
-      state: {
-        sorting: [
-          { id: 'progress', desc: false },
-          { id: 'firstName', desc: false },
-        ],
-      },
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-    ])
-  })
-
-  it('renders a hoisted state sorted table', () => {
-    const { result } = renderHook(
-      options => {
-        const [sorting, setSorting] = React.useState<TableState['sorting']>([])
-
-        const instance = useTable(
-          {
-            ...options,
-            state: {
-              sorting,
-            },
-            onSortingChange: setSorting,
-          },
-          [withSorting]
-        )
-
-        return instance
-      },
-      {
-        initialProps: {
-          data,
-          columns,
-        },
-      }
-    )
-
-    expect(getHeaderIds(result.current)).toEqual([
-      ['Name', 'Info'],
-      ['firstName', 'lastName', 'age', 'visits', 'status', 'progress'],
-    ])
-
-    expect(getRowValues(result.current)).toEqual([
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'firstName')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'firstName')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'progress')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-    ])
-
-    act(() => {
-      result.current.flatHeaders
-        .find(d => d.id === 'firstName')
-        ?.getToggleSortingProps?.()
-        .onClick({
-          persist: noop,
-          shiftKey: true,
-        })
-    })
-
-    expect(getRowValues(result.current)).toEqual([
-      ['joe', 'bergevin', 45, 20, 'Complicated', 10],
-      ['derek', 'perkins', 40, 40, 'Single', 80],
-      ['tanner', 'linsley', 29, 100, 'In Relationship', 80],
-    ])
-  })
-})

package/src/test-utils/makeTestData.ts

@@ -1,41 +0,0 @@
-const range = len => {
-  const arr = []
-  for (let i = 0; i < len; i++) {
-    arr.push(i)
-  }
-  return arr
-}
-
-const newPerson = (depth, index, total) => {
-  const age = (depth + 1) * (index + 1)
-  const visits = age * 10
-  const progress = (index + 1) / total
-
-  return {
-    firstName: `${depth} ${index} firstName`,
-    lastName: `${depth} ${index} lastName`,
-    age,
-    visits,
-    progress,
-    status:
-      progress > 0.66
-        ? 'relationship'
-        : progress > 0.33
-        ? 'complicated'
-        : 'single',
-  }
-}
-
-export default function makeTestData(...lens) {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth]
-    return range(len).map(d => {
-      return {
-        ...newPerson(depth, d, len),
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
-      }
-    })
-  }
-
-  return makeDataLevel()
-}

package/src/tests/__snapshots__/core.test.tsx.snap

@@ -1,148 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`core renders a table with markup 1`] = `
-[
-  [
-    [
-      "Name",
-      "2",
-    ],
-    [
-      "Info",
-      "4",
-    ],
-  ],
-  [
-    [
-      "",
-      "1",
-    ],
-    [
-      "",
-      "1",
-    ],
-    [
-      "",
-      "1",
-    ],
-    [
-      "More Info",
-      "3",
-    ],
-  ],
-  [
-    [
-      "firstName",
-      "1",
-    ],
-    [
-      "<span>Last Name</span>",
-      "1",
-    ],
-    [
-      "Age",
-      "1",
-    ],
-    [
-      "<span>Visits</span>",
-      "1",
-    ],
-    [
-      "Status",
-      "1",
-    ],
-    [
-      "Profile Progress",
-      "1",
-    ],
-  ],
-]
-`;
-
-exports[`core renders a table with markup 2`] = `
-[
-  [
-    "tanner",
-    "linsley",
-    "29",
-    "100",
-    "In Relationship",
-    "50",
-  ],
-  [
-    "derek",
-    "perkins",
-    "40",
-    "40",
-    "Single",
-    "80",
-  ],
-  [
-    "joe",
-    "bergevin",
-    "45",
-    "20",
-    "Complicated",
-    "10",
-  ],
-]
-`;
-
-exports[`core renders a table with markup 3`] = `
-[
-  [
-    [
-      "firstName",
-      "1",
-    ],
-    [
-      "lastName",
-      "1",
-    ],
-    [
-      "age",
-      "1",
-    ],
-    [
-      "visits",
-      "1",
-    ],
-    [
-      "status",
-      "1",
-    ],
-    [
-      "progress",
-      "1",
-    ],
-  ],
-  [
-    [
-      "",
-      "1",
-    ],
-    [
-      "",
-      "1",
-    ],
-    [
-      "",
-      "1",
-    ],
-    [
-      "More Info",
-      "3",
-    ],
-  ],
-  [
-    [
-      "Name",
-      "2",
-    ],
-    [
-      "Info",
-      "4",
-    ],
-  ],
-]
-`;