fix: pagination分页组件，国际化文档，组件问题修复 (#165)

* fix: 修改国际化文档。修改eslint

* fix: 修复分页组件，自定义翻页按钮文案失效问题。添加单元测试
Co-authored-by: Nlkjh3214 <13121007159@163.com>

src/packages/pagination/__tests__/__snapshots__/pagination.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="nut-pagination "
+  >
+    <div
+      class="nut-pagination__prev   disabled"
+    >
+      上一页
+    </div>
+    <div
+      class="nut-pagination__contain"
+    >
+      <div
+        class="nut-pagination__item active"
+      >
+        1
+      </div>
+      <div
+        class="nut-pagination__item "
+      >
+        2
+      </div>
+      <div
+        class="nut-pagination__item "
+      >
+        3
+      </div>
+      <div
+        class="nut-pagination__item "
+      >
+        4
+      </div>
+      <div
+        class="nut-pagination__item "
+      >
+        5
+      </div>
+    </div>
+    <div
+      class="nut-pagination__next  "
+    >
+      下一页
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/packages/pagination/__tests__/pagination.spec.tsx

+import * as React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Pagination } from '../pagination'
+
+test('should match snapshot', () => {
+  const { asFragment } = render(<Pagination totalItems={25} itemsPerPage={5} />)
+  expect(asFragment()).toMatchSnapshot()
+})
+
+test('should render items', async () => {
+  const { container } = render(<Pagination totalItems={25} itemsPerPage={5} />)
+  expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(5)
+})
+test('should render simple mode', async () => {
+  const { container } = render(<Pagination pageCount={12} mode="simple" />)
+  expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(0)
+  expect(container.querySelectorAll('.nut-pagination__simple')).toHaveLength(1)
+})
+test('should render forceEllipses and should emit change event after clicking forceEllipses option', async () => {
+  const { container, getByText } = render(
+    <Pagination totalItems={125} showPageSize={3} forceEllipses />
+  )
+  expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(4)
+  fireEvent.click(getByText('...'))
+  expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(5)
+  expect(
+    container.querySelectorAll('.nut-pagination__item')[1]
+  ).toHaveTextContent('3')
+})
+
+test('should emit change event after clicking visible option', async () => {
+  const { container, getByText } = render(
+    <Pagination totalItems={25} itemsPerPage={5} defaultValue={1} />
+  )
+  const next = getByText('下一页')
+  fireEvent.click(next)
+
+  expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(5)
+  expect(container.querySelectorAll('.nut-pagination__item')[1]).toHaveClass(
+    'active'
+  )
+})
+
+test('should not emit change event after clicking disable option', async () => {
+  let flag = false
+  const pageChange = (v: number) => {
+    flag = true
+  }
+  const { container, getByText } = render(
+    <Pagination
+      totalItems={25}
+      itemsPerPage={5}
+      defaultValue={1}
+      onChange={pageChange}
+    />
+  )
+  const prev = getByText('上一页')
+  fireEvent.click(prev)
+
+  expect(container.querySelectorAll('.nut-pagination__item')).toHaveLength(5)
+  expect(flag).toBeFalsy()
+})
+
+test('should render custom content correctly', () => {
+  const pageNodeRender = (page: any) => {
+    return <div>{page.number === 3 ? 'hot' : page.text}</div>
+  }
+  const { container, getByText } = render(
+    <Pagination
+      totalItems={25}
+      itemsPerPage={5}
+      defaultValue={1}
+      pageNodeRender={pageNodeRender}
+      prevText="pre"
+      nextText="next"
+    />
+  )
+  expect(getByText('pre')).toHaveTextContent('pre')
+  expect(getByText('next')).toHaveTextContent('next')
+  expect(
+    container.querySelectorAll('.nut-pagination__item')[2]
+  ).toHaveTextContent('hot')
+})

src/packages/pagination/pagination.tsx

@@ -6,8 +6,8 @@ export interface PaginationProps {
   defaultValue: number
   modelValue: number
   mode: 'multi' | 'simple'
-  prevText: React.ReactNode
-  nextText: React.ReactNode
+  prevText?: React.ReactNode
+  nextText?: React.ReactNode
   pageCount: string | number
   totalItems: string | number
   itemsPerPage: string | number
@@ -23,8 +23,8 @@ export interface PaginationProps {
 const defaultProps = {
   defaultValue: 1,
   mode: 'multi',
-  prevText: '上一页',
-  nextText: '下一页',
+  prevText: '',
+  nextText: '',
   pageCount: '',
   totalItems: '0',
   itemsPerPage: '10',
@@ -153,7 +153,7 @@ export const Pagination: FunctionComponent<
         } ${currentPage === 1 ? 'disabled' : ''}`}
         onClick={(e) => selectPage(Number(currentPage) - 1, true)}
       >
-        {locale.pagination.prev || prevText}
+        {prevText || locale.pagination.prev}
       </div>
       {mode === 'multi' ? (
         <div className={`${paginationBem('contain')}`}>
@@ -191,7 +191,7 @@ export const Pagination: FunctionComponent<
         }`}
         onClick={(e) => selectPage(Number(currentPage) + 1, true)}
       >
-        {locale.pagination.next || nextText}
+        {nextText || locale.pagination.next}
       </div>
     </div>
   )