fix: update of label from pagination (#920)

* fix: update of label from pagination * fix: adding test for b3table
bigcommerce · Jan 22, 2024 · bf58aa3 · bf58aa3
1 parent 5e15fd3
commit bf58aa3
Show file tree

Hide file tree

Showing 11 changed files with 1,045 additions and 10,487 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -10,7 +10,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest --coverage",
-    "start": "http-server ./dist --cors"
+    "start": "http-server ./dist --cors",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@b3/global-b3": "*",
@@ -37,6 +38,7 @@
     "dayjs": "^1.11.10",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
+    "patch-package": "^8.0.0",
     "pdfobject": "^2.2.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -54,8 +56,8 @@
     "@b3/tsconfig": "*",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.5",
-    "@types/js-cookie": "^3.0.6",
     "@types/crypto-js": "^4.2.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.14.190",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -343,7 +343,6 @@ export function B3Table<T>({
               )
             })}
           </Grid>
-
           {showPagination && (
             <TablePagination
               rowsPerPageOptions={
@@ -370,6 +369,7 @@ export function B3Table<T>({
               count={count}
               rowsPerPage={first}
               page={first === 0 ? 0 : offset / first}
+              of={b3Lang('global.pagination.of')}
               onPageChange={handleChangePage}
               onRowsPerPageChange={handleChangeRowsPerPage}
             />
@@ -414,6 +414,7 @@ export function B3Table<T>({
               count={count}
               rowsPerPage={first}
               page={first === 0 ? 0 : offset / first}
+              of={b3Lang('global.pagination.of')}
               onPageChange={handleChangePage}
               onRowsPerPageChange={handleChangeRowsPerPage}
             />
@@ -542,6 +543,7 @@ export function B3Table<T>({
               count={count}
               rowsPerPage={first}
               page={first === 0 ? 0 : offset / first}
+              of={b3Lang('global.pagination.of')}
               onPageChange={handleChangePage}
               onRowsPerPageChange={handleChangeRowsPerPage}
             />

diff --git a/apps/storefront/tests/components/b3table/B3Table.test.tsx b/apps/storefront/tests/components/b3table/B3Table.test.tsx
@@ -0,0 +1,72 @@
+import { LangProvider } from '@b3/lang'
+import { describe, expect, it } from 'vitest'
+
+import { B3Table } from '@/components'
+import { TableColumnItem } from '@/components/table/B3Table'
+import lang from '@/store/slices/lang'
+
+import { renderWithProviders } from '../../test-utils'
+
+const columnItems: TableColumnItem<1> = {
+  key: 'key test1',
+  title: 'title test',
+}
+
+const listItems = [
+  {
+    node: {
+      id: 1,
+    },
+  },
+]
+
+describe('B3Table component', async () => {
+  it('renders correctly', () => {
+    renderWithProviders(
+      <LangProvider customText={{ 'global.pagination.of': 'test-of' }}>
+        <B3Table
+          tableFixed
+          columnItems={[columnItems]}
+          listItems={listItems}
+          pagination={{
+            offset: 0,
+            count: 0,
+            first: 10,
+          }}
+          rowsPerPageOptions={[10, 20, 50]}
+          showPagination
+          labelRowsPerPage="cards per page"
+        />
+      </LangProvider>,
+      {
+        reducers: { lang },
+      }
+    )
+  })
+
+  it('matching b3table with snapshot', () => {
+    const { result } = renderWithProviders(
+      <LangProvider customText={{ 'global.pagination.of': 'test-of' }}>
+        <B3Table
+          tableFixed
+          columnItems={[columnItems]}
+          listItems={listItems}
+          pagination={{
+            offset: 0,
+            count: 0,
+            first: 10,
+          }}
+          rowsPerPageOptions={[10, 20, 50]}
+          showPagination
+          labelRowsPerPage="cards per page"
+          isInfiniteScroll={false}
+          isCustomRender={false}
+        />
+      </LangProvider>,
+      {
+        reducers: { lang },
+      }
+    )
+    expect(result).toMatchSnapshot()
+  })
+})