Что (если что-то) я должен проверить при написании стороннего компонента оболочки? - PullRequest
Новая
       6

Что (если что-то) я должен проверить при написании стороннего компонента оболочки?

0 голосов
/ 05 февраля 2020

Я думаю, что заголовок довольно понятен, но на всякий случай:

Допустим, я упаковываю таблицу материалов, чтобы я мог упростить API и стандартизировать некоторые вещи, которые имеют смысл для моего применение.

Какие тесты (если таковые имеются) я должен написать для этой оболочки?

Стоит ли мне даже беспокоиться о тестировании оболочки или просто сосредоточиться на написании тестов для фактической реализации (например, таблицы пользователей)?

Вот пример кода моей оболочки, просто чтобы предоставить некоторый контекст: 

import ArrowDownward from '@material-ui/icons/ArrowDownward'
import Clear from '@material-ui/icons/Clear'
import Search from '@material-ui/icons/Search'
import MaterialTable from 'material-table'
import React, { forwardRef, ReactElement } from 'react'

export type Column<TData extends object> = {
  title: string
  field: string
  render?: (row: TData) => ReactElement
  searchable?: boolean
  sortable?: boolean
  defaultSort?: 'asc' | 'desc'
}

export type TableProps<TData extends object> = {
  columns: Array<Column<TData>>
  data: Array<TData>
  searchable?: boolean
}

export const Table: <TData extends object>(
  p: TableProps<TData>
) => ReactElement<TableProps<TData>> = ({ columns, data, searchable }) => {
  const materialTableColumns = columns.map((column) => ({
    ...column,
    sorting: column.sortable
  }))
  const isToolbarVisible = searchable || false

  return (
    <MaterialTable
      columns={materialTableColumns}
      data={data}
      icons={{
        ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
        Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
        SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />)
      }}
      localization={{
        body: {
          emptyDataSourceMessage: 'No records found'
        },
        toolbar: {
          searchTooltip: 'Quick Find',
          searchPlaceholder: 'Quick Find'
        }
      }}
      options={{
        draggable: false,
        headerStyle: {
          backgroundColor: '#E9E9E9'
        },
        paging: false,
        search: searchable || false,
        searchFieldAlignment: 'left',
        showTitle: false,
        toolbar: isToolbarVisible
      }}
    />
  )
}
...