@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/DataGrid/DataGrid.test.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGrid, Props } from './DataGrid';
-import { getAllByRole, render, queryAllByRole, getByRole } from '@testing-library/react';
-import { DataGridRow } from './DataGridBody/DataGridRow';
-import { DataGridCell } from './DataGridBody/DataGridCell';
-import { ContextMenu } from '../ContextMenu/ContextMenu';
-import { IconButton } from '../Button/IconButton';
-import { Icon, Icons } from '../Icon/Icon';
-import { ContextMenuItem } from '../ContextMenu/ContextMenuItem';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { DataGrid, Props } from "./DataGrid";
+import { getAllByRole, render, queryAllByRole, getByRole } from "@testing-library/react";
+import { DataGridRow } from "./DataGridBody/DataGridRow";
+import { DataGridCell } from "./DataGridBody/DataGridCell";
+import { ContextMenu } from "../ContextMenu/ContextMenu";
+import { IconButton } from "../Button/IconButton";
+import { Icon, Icons } from "../Icon/Icon";
+import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
+import userEvent from "@testing-library/user-event";
 
 type DataType = { firstName: string; lastName: string; date: string };
 
@@ -32,17 +32,17 @@ const defaultParams: Props<DataType> = {
     </DataGridRow>
   ),
   headers: [
-    { name: 'firstName', headline: 'First name' },
-    { name: 'lastName', headline: 'Last name' },
-    { name: 'date', headline: 'Date' },
+    { name: "firstName", headline: "First name" },
+    { name: "lastName", headline: "Last name" },
+    { name: "date", headline: "Date" }
   ],
   enableMultiSorting: true,
   data: [
-    { firstName: 'Paweł', lastName: 'Napieracz', date: '12.12.1990' },
-    { firstName: 'Michał', lastName: 'Górski', date: '12.12.1994' },
-    { firstName: 'Daniel', lastName: 'Velden', date: '12.12.199x' },
-    { firstName: 'Jasha', lastName: 'Joachimsthal', date: '12.12.198x' },
-  ],
+    { firstName: "Paweł", lastName: "Napieracz", date: "12.12.1990" },
+    { firstName: "Michał", lastName: "Górski", date: "12.12.1994" },
+    { firstName: "Daniel", lastName: "Velden", date: "12.12.199x" },
+    { firstName: "Jasha", lastName: "Joachimsthal", date: "12.12.198x" }
+  ]
 };
 
 const createDataGrid = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
@@ -51,16 +51,16 @@ const createDataGrid = (params?: (defaultParams: Props<DataType>) => Props<DataT
     parameters = params(defaultParams);
   }
   const queries = render(<DataGrid {...parameters} data-testid="dataGrid" />);
-  const dataGrid = queries.getByTestId('dataGrid');
+  const dataGrid = queries.getByTestId("dataGrid");
 
   return {
     ...queries,
-    dataGrid,
+    dataGrid
   };
 };
 
-describe('DataGrid should render', () => {
-  it('renders without crashing', () => {
+describe("DataGrid should render", () => {
+  it("renders without crashing", () => {
     const rowsCount = defaultParams.data?.length!;
     const colsCount = defaultParams.headers?.length!;
     const contextMenuCellCount = 1;
@@ -68,57 +68,57 @@ describe('DataGrid should render', () => {
 
     expect(dataGrid).toBeDefined();
 
-    expect(dataGrid.querySelector('.actions')).toBeNull();
+    expect(dataGrid.querySelector(".actions")).toBeNull();
 
-    const [thead, tbody] = queries.getAllByRole('rowgroup');
+    const [thead, tbody] = queries.getAllByRole("rowgroup");
 
-    expect(queryAllByRole(thead, 'columnheader')).toHaveLength(3);
-    expect(queryAllByRole(thead, 'cell')).toHaveLength(contextMenuCellCount);
-    expect(queryAllByRole(thead, 'button')).toHaveLength(0); //sorting should be disabled by default
+    expect(queryAllByRole(thead, "columnheader")).toHaveLength(3);
+    expect(queryAllByRole(thead, "cell")).toHaveLength(contextMenuCellCount);
+    expect(queryAllByRole(thead, "button")).toHaveLength(0); //sorting should be disabled by default
 
-    expect(queryAllByRole(tbody, 'cell')).toHaveLength(
+    expect(queryAllByRole(tbody, "cell")).toHaveLength(
       rowsCount * (colsCount + contextMenuCellCount)
     );
   });
 
-  it('renders actions buttons', () => {
-    const { dataGrid } = createDataGrid((params) => ({
+  it("renders actions buttons", () => {
+    const { dataGrid } = createDataGrid(params => ({
       ...params,
       actions: {
         enableAddBtn: true,
         enableColumnsBtn: true,
-        enableSearchBtn: true,
-      },
+        enableSearchBtn: true
+      }
     }));
     const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
-      getAllByRole(dataGrid.querySelector('.actions')!, 'button');
-    expect(addBtn).toHaveTextContent('Add item');
-    expect(desktopColumnsBtn).toHaveTextContent('Columns');
-    expect(mobileColumnsBtn).toHaveTextContent('Show/hide columns');
-    expect(desktopSearchBtn).toHaveTextContent('Search');
-    expect(mobileSearchBtn).toHaveTextContent('Search');
+      getAllByRole(dataGrid.querySelector(".actions")!, "button");
+    expect(addBtn).toHaveTextContent("Add item");
+    expect(desktopColumnsBtn).toHaveTextContent("Columns");
+    expect(mobileColumnsBtn).toHaveTextContent("Show/hide columns");
+    expect(desktopSearchBtn).toHaveTextContent("Search");
+    expect(mobileSearchBtn).toHaveTextContent("Search");
   });
 
-  it('renders table with initialized sorting indicators', () => {
-    const { getAllByRole } = createDataGrid((params) => ({
+  it("renders table with initialized sorting indicators", () => {
+    const { getAllByRole } = createDataGrid(params => ({
       ...params,
       onSort: jest.fn(),
       initialSort: [
-        { name: defaultParams.headers[0].name, direction: 'DESC' },
-        { name: defaultParams.headers[2].name, direction: 'ASC' },
-      ],
+        { name: defaultParams.headers[0].name, direction: "DESC" },
+        { name: defaultParams.headers[2].name, direction: "ASC" }
+      ]
     }));
 
-    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole('columnheader');
-    expect(firstNameHeader).toHaveAttribute('aria-sort', 'descending');
-    expect(lastNameHeader).not.toHaveAttribute('aria-sort');
-    expect(dateHeader).toHaveAttribute('aria-sort', 'ascending');
+    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole("columnheader");
+    expect(firstNameHeader).toHaveAttribute("aria-sort", "descending");
+    expect(lastNameHeader).not.toHaveAttribute("aria-sort");
+    expect(dateHeader).toHaveAttribute("aria-sort", "ascending");
   });
 
-  it('renders table without context menu', () => {
+  it("renders table without context menu", () => {
     const rowsCount = defaultParams.data?.length!;
     const colsCount = defaultParams.headers?.length!;
-    const { getAllByRole } = createDataGrid((params) => ({
+    const { getAllByRole } = createDataGrid(params => ({
       ...params,
       disableContextMenuColumn: true,
       children: ({ item }) => (
@@ -127,115 +127,115 @@ describe('DataGrid should render', () => {
           <DataGridCell>{item.lastName}</DataGridCell>
           <DataGridCell>{item.date}</DataGridCell>
         </DataGridRow>
-      ),
+      )
     }));
 
-    expect(getAllByRole('columnheader')).toHaveLength(3);
-    expect(getAllByRole('cell')).toHaveLength(rowsCount * colsCount);
+    expect(getAllByRole("columnheader")).toHaveLength(3);
+    expect(getAllByRole("cell")).toHaveLength(rowsCount * colsCount);
   });
 
-  it('renders loading state with skeleton loading animation on data cells and empty row on content menu cells', () => {
-    const { ...queries } = createDataGrid((params) => ({ ...params, isLoading: true }));
+  it("renders loading state with skeleton loading animation on data cells and empty row on content menu cells", () => {
+    const { ...queries } = createDataGrid(params => ({ ...params, isLoading: true }));
 
-    const [_thead, tbody] = queries.getAllByRole('rowgroup');
+    const [_thead, tbody] = queries.getAllByRole("rowgroup");
     expect(
-      getAllByRole(tbody, 'cell').find((cell, index) => {
+      getAllByRole(tbody, "cell").find((cell, index) => {
         const contextMenuCell = index % 4 === 3;
         return (
-          !contextMenuCell && (cell.firstChild as HTMLElement).getAttribute('class') !== 'loading'
+          !contextMenuCell && (cell.firstChild as HTMLElement).getAttribute("class") !== "loading"
         );
       })
     ).toBeUndefined();
   });
 
-  it('renders empty state', () => {
-    const emptyLabel = 'emptyLabel';
-    const { ...queries } = createDataGrid((params) => ({ ...params, emptyLabel, data: [] }));
+  it("renders empty state", () => {
+    const emptyLabel = "emptyLabel";
+    const { ...queries } = createDataGrid(params => ({ ...params, emptyLabel, data: [] }));
 
-    const [_thead, tbody] = queries.getAllByRole('rowgroup');
-    const rows = getAllByRole(tbody, 'row');
-    const firstRowCells = getAllByRole(rows[0], 'cell');
+    const [_thead, tbody] = queries.getAllByRole("rowgroup");
+    const rows = getAllByRole(tbody, "row");
+    const firstRowCells = getAllByRole(rows[0], "cell");
     expect(firstRowCells).toHaveLength(1);
-    expect(firstRowCells[0]).toHaveAttribute('colspan', `${defaultParams.headers.length + 1}`);
+    expect(firstRowCells[0]).toHaveAttribute("colspan", `${defaultParams.headers.length + 1}`);
     expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
   });
 
-  it('renders pagination', () => {
-    const { getByRole } = createDataGrid((params) => ({
+  it("renders pagination", () => {
+    const { getByRole } = createDataGrid(params => ({
       ...params,
       paginationProps: {
         totalElements: 105,
         pageSize: 10,
         currentPage: 2,
         onPageChange: jest.fn(),
-        onPageSizeChange: jest.fn(),
-      },
+        onPageSizeChange: jest.fn()
+      }
     }));
 
-    expect(getByRole('button', { name: 'previous' })).toBeDefined();
-    expect(getByRole('button', { name: 'next' })).toBeDefined();
-    expect(getByRole('button', { name: 'last' })).toBeDefined();
+    expect(getByRole("button", { name: "previous" })).toBeDefined();
+    expect(getByRole("button", { name: "next" })).toBeDefined();
+    expect(getByRole("button", { name: "last" })).toBeDefined();
   });
 });
 
-describe('DataGrid should have interactive table header', () => {
-  it('clicking table headers should call sort callback', () => {
+describe("DataGrid should have interactive table header", () => {
+  it("clicking table headers should call sort callback", () => {
     const onSort = jest.fn();
-    const { getAllByRole } = createDataGrid((params) => ({
+    const { getAllByRole } = createDataGrid(params => ({
       ...params,
-      onSort,
+      onSort
     }));
 
-    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole('columnheader');
+    const [firstNameHeader, lastNameHeader, dateHeader] = getAllByRole("columnheader");
 
-    userEvent.click(getByRole(firstNameHeader, 'button'));
-    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[0].name, direction: 'ASC' }]);
+    userEvent.click(getByRole(firstNameHeader, "button"));
+    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[0].name, direction: "ASC" }]);
 
-    userEvent.click(getByRole(lastNameHeader, 'button'));
-    userEvent.click(getByRole(dateHeader, 'button'));
+    userEvent.click(getByRole(lastNameHeader, "button"));
+    userEvent.click(getByRole(dateHeader, "button"));
     expect(onSort).toBeCalledWith([
-      { name: defaultParams.headers[2].name, direction: 'ASC' },
-      { name: defaultParams.headers[1].name, direction: 'ASC' },
-      { name: defaultParams.headers[0].name, direction: 'ASC' },
+      { name: defaultParams.headers[2].name, direction: "ASC" },
+      { name: defaultParams.headers[1].name, direction: "ASC" },
+      { name: defaultParams.headers[0].name, direction: "ASC" }
     ]);
 
-    userEvent.click(getByRole(firstNameHeader, 'button'));
+    userEvent.click(getByRole(firstNameHeader, "button"));
     expect(onSort).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: 'DESC' },
-      { name: defaultParams.headers[2].name, direction: 'ASC' },
-      { name: defaultParams.headers[1].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: "DESC" },
+      { name: defaultParams.headers[2].name, direction: "ASC" },
+      { name: defaultParams.headers[1].name, direction: "ASC" }
     ]);
 
-    userEvent.click(getByRole(dateHeader, 'button'));
+    userEvent.click(getByRole(dateHeader, "button"));
     expect(onSort).toBeCalledWith([
-      { name: defaultParams.headers[2].name, direction: 'DESC' },
-      { name: defaultParams.headers[0].name, direction: 'DESC' },
-      { name: defaultParams.headers[1].name, direction: 'ASC' },
+      { name: defaultParams.headers[2].name, direction: "DESC" },
+      { name: defaultParams.headers[0].name, direction: "DESC" },
+      { name: defaultParams.headers[1].name, direction: "ASC" }
     ]);
 
-    userEvent.click(getByRole(dateHeader, 'button'));
-    userEvent.click(getByRole(firstNameHeader, 'button'));
-    userEvent.click(getByRole(lastNameHeader, 'button'));
-    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[1].name, direction: 'DESC' }]);
+    userEvent.click(getByRole(dateHeader, "button"));
+    userEvent.click(getByRole(firstNameHeader, "button"));
+    userEvent.click(getByRole(lastNameHeader, "button"));
+    expect(onSort).toBeCalledWith([{ name: defaultParams.headers[1].name, direction: "DESC" }]);
     expect(onSort).toBeCalledTimes(8);
   });
 
-  it('clicking on show/hide columns popover should show/hide columns', async () => {
-    const { getByRole, findByLabelText, ...queries } = createDataGrid((params) => ({
+  it("clicking on show/hide columns popover should show/hide columns", async () => {
+    const { getByRole, findByLabelText, ...queries } = createDataGrid(params => ({
       ...params,
-      actions: { enableColumnsBtn: true },
+      actions: { enableColumnsBtn: true }
     }));
-    expect(queries.getAllByRole('columnheader')).toHaveLength(3);
+    expect(queries.getAllByRole("columnheader")).toHaveLength(3);
 
-    userEvent.click(getByRole('button', { name: 'Columns' }));
+    userEvent.click(getByRole("button", { name: "Columns" }));
 
     const nameToggle = await findByLabelText(defaultParams.headers[1].headline);
     expect(nameToggle).toBeChecked();
     userEvent.click(nameToggle);
     expect(nameToggle).not.toBeChecked();
-    expect(getByRole('button', { name: 'Close show columns dialog' })).toBeDefined();
+    expect(getByRole("button", { name: "Close show columns dialog" })).toBeDefined();
 
-    const columns = queries.getAllByRole('columnheader');
+    const columns = queries.getAllByRole("columnheader");
     expect(columns).toHaveLength(2);
     expect(columns[0]).toHaveTextContent(defaultParams.headers[0].headline);
     expect(columns[1]).toHaveTextContent(defaultParams.headers[2].headline);
@@ -244,17 +244,17 @@ describe('DataGrid should have interactive table header', () => {
     const colsCount = defaultParams.headers.length;
     const hiddenColsCount = defaultParams.headers.length;
     const contextMenuColsCount = defaultParams.headers.length;
-    const [_thead, tbody] = queries.getAllByRole('rowgroup');
-    expect(getAllByRole(tbody, 'cell')).toHaveLength(
+    const [_thead, tbody] = queries.getAllByRole("rowgroup");
+    expect(getAllByRole(tbody, "cell")).toHaveLength(
       rowsCount * (colsCount - hiddenColsCount + contextMenuColsCount)
     );
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -268,16 +268,16 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('spacing should work correctly', () => {
-  it('gives the proper paddings to the right elements', () => {
-    const { dataGrid } = createDataGrid((defaultParams) => ({
+describe("spacing should work correctly", () => {
+  it("gives the proper paddings to the right elements", () => {
+    const { dataGrid } = createDataGrid(defaultParams => ({
       ...defaultParams,
       spacing: { padding: 4 },
       paginationProps: {
@@ -285,116 +285,116 @@ describe('spacing should work correctly', () => {
         pageSize: 10,
         currentPage: 2,
         onPageChange: jest.fn(),
-        onPageSizeChange: jest.fn(),
-      },
+        onPageSizeChange: jest.fn()
+      }
     }));
 
-    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
-    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
-    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
-    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
-    const pagination = dataGrid.querySelector('.pagination-wrapper');
-
-    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '1rem' });
-    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1rem' });
-    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
-    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1rem' });
-    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
-    expect(pagination).toHaveStyle({ 'padding-left': '1rem', 'padding-right': '1rem' });
+    const firstHeaderCell = dataGrid.querySelector(".table .thead .row .header-cell");
+    const lastHeaderCell = dataGrid.querySelector(".table .thead .row td");
+    const firstBodyCell = dataGrid.querySelector(".table tbody .row .cell");
+    const lastBodyCell = dataGrid.querySelector(".table tbody .row td:last-of-type");
+    const pagination = dataGrid.querySelector(".pagination-wrapper");
+
+    expect(dataGrid).toHaveStyle({ "padding-top": "1rem", "padding-bottom": "1rem" });
+    expect(firstHeaderCell).toHaveStyle({ "padding-left": "1rem" });
+    expect(lastHeaderCell).toHaveStyle({ "padding-right": "1rem" });
+    expect(firstBodyCell).toHaveStyle({ "padding-left": "1rem" });
+    expect(lastBodyCell).toHaveStyle({ "padding-right": "1rem" });
+    expect(pagination).toHaveStyle({ "padding-left": "1rem", "padding-right": "1rem" });
   });
 
-  it('gives the proper paddings to the right elements', () => {
-    const { dataGrid } = createDataGrid((defaultParams) => ({
+  it("gives the proper paddings to the right elements", () => {
+    const { dataGrid } = createDataGrid(defaultParams => ({
       ...defaultParams,
-      spacing: { padding: '4 5' },
+      spacing: { padding: "4 5" },
       paginationProps: {
         totalElements: 105,
         pageSize: 10,
         currentPage: 2,
         onPageChange: jest.fn(),
-        onPageSizeChange: jest.fn(),
-      },
+        onPageSizeChange: jest.fn()
+      }
     }));
 
-    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
-    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
-    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
-    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
-    const pagination = dataGrid.querySelector('.pagination-wrapper');
-
-    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '1rem' });
-    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1.25rem' });
-    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1.25rem' });
-    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1.25rem' });
-    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1.25rem' });
-    expect(pagination).toHaveStyle({ 'padding-left': '1.25rem', 'padding-right': '1.25rem' });
+    const firstHeaderCell = dataGrid.querySelector(".table .thead .row .header-cell");
+    const lastHeaderCell = dataGrid.querySelector(".table .thead .row td");
+    const firstBodyCell = dataGrid.querySelector(".table tbody .row .cell");
+    const lastBodyCell = dataGrid.querySelector(".table tbody .row td:last-of-type");
+    const pagination = dataGrid.querySelector(".pagination-wrapper");
+
+    expect(dataGrid).toHaveStyle({ "padding-top": "1rem", "padding-bottom": "1rem" });
+    expect(firstHeaderCell).toHaveStyle({ "padding-left": "1.25rem" });
+    expect(lastHeaderCell).toHaveStyle({ "padding-right": "1.25rem" });
+    expect(firstBodyCell).toHaveStyle({ "padding-left": "1.25rem" });
+    expect(lastBodyCell).toHaveStyle({ "padding-right": "1.25rem" });
+    expect(pagination).toHaveStyle({ "padding-left": "1.25rem", "padding-right": "1.25rem" });
   });
 
-  it('gives the proper paddings to the right elements', () => {
-    const { dataGrid } = createDataGrid((defaultParams) => ({
+  it("gives the proper paddings to the right elements", () => {
+    const { dataGrid } = createDataGrid(defaultParams => ({
       ...defaultParams,
-      spacing: { padding: '4 5 8' },
+      spacing: { padding: "4 5 8" },
       paginationProps: {
         totalElements: 105,
         pageSize: 10,
         currentPage: 2,
         onPageChange: jest.fn(),
-        onPageSizeChange: jest.fn(),
-      },
+        onPageSizeChange: jest.fn()
+      }
     }));
 
-    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
-    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
-    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
-    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
-    const pagination = dataGrid.querySelector('.pagination-wrapper');
-
-    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '2rem' });
-    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1.25rem' });
-    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1.25rem' });
-    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1.25rem' });
-    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1.25rem' });
-    expect(pagination).toHaveStyle({ 'padding-left': '1.25rem', 'padding-right': '1.25rem' });
+    const firstHeaderCell = dataGrid.querySelector(".table .thead .row .header-cell");
+    const lastHeaderCell = dataGrid.querySelector(".table .thead .row td");
+    const firstBodyCell = dataGrid.querySelector(".table tbody .row .cell");
+    const lastBodyCell = dataGrid.querySelector(".table tbody .row td:last-of-type");
+    const pagination = dataGrid.querySelector(".pagination-wrapper");
+
+    expect(dataGrid).toHaveStyle({ "padding-top": "1rem", "padding-bottom": "2rem" });
+    expect(firstHeaderCell).toHaveStyle({ "padding-left": "1.25rem" });
+    expect(lastHeaderCell).toHaveStyle({ "padding-right": "1.25rem" });
+    expect(firstBodyCell).toHaveStyle({ "padding-left": "1.25rem" });
+    expect(lastBodyCell).toHaveStyle({ "padding-right": "1.25rem" });
+    expect(pagination).toHaveStyle({ "padding-left": "1.25rem", "padding-right": "1.25rem" });
   });
 
-  it('gives the proper paddings to the right elements', () => {
-    const { dataGrid } = createDataGrid((defaultParams) => ({
+  it("gives the proper paddings to the right elements", () => {
+    const { dataGrid } = createDataGrid(defaultParams => ({
       ...defaultParams,
-      spacing: { padding: '6 4 8 8' },
+      spacing: { padding: "6 4 8 8" },
       paginationProps: {
         totalElements: 105,
         pageSize: 10,
         currentPage: 2,
         onPageChange: jest.fn(),
-        onPageSizeChange: jest.fn(),
-      },
+        onPageSizeChange: jest.fn()
+      }
     }));
 
-    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
-    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
-    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
-    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
-    const pagination = dataGrid.querySelector('.pagination-wrapper');
-
-    expect(dataGrid).toHaveStyle({ 'padding-top': '1.5rem', 'padding-bottom': '2rem' });
-    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '2rem' });
-    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
-    expect(firstBodyCell).toHaveStyle({ 'padding-left': '2rem' });
-    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
-    expect(pagination).toHaveStyle({ 'padding-left': '2rem', 'padding-right': '1rem' });
+    const firstHeaderCell = dataGrid.querySelector(".table .thead .row .header-cell");
+    const lastHeaderCell = dataGrid.querySelector(".table .thead .row td");
+    const firstBodyCell = dataGrid.querySelector(".table tbody .row .cell");
+    const lastBodyCell = dataGrid.querySelector(".table tbody .row td:last-of-type");
+    const pagination = dataGrid.querySelector(".pagination-wrapper");
+
+    expect(dataGrid).toHaveStyle({ "padding-top": "1.5rem", "padding-bottom": "2rem" });
+    expect(firstHeaderCell).toHaveStyle({ "padding-left": "2rem" });
+    expect(lastHeaderCell).toHaveStyle({ "padding-right": "1rem" });
+    expect(firstBodyCell).toHaveStyle({ "padding-left": "2rem" });
+    expect(lastBodyCell).toHaveStyle({ "padding-right": "1rem" });
+    expect(pagination).toHaveStyle({ "padding-left": "2rem", "padding-right": "1rem" });
   });
 
-  it('gives the proper paddings to the right elements, also with contextmenu disabled', () => {
-    const { dataGrid } = createDataGrid((defaultParams) => ({
+  it("gives the proper paddings to the right elements, also with contextmenu disabled", () => {
+    const { dataGrid } = createDataGrid(defaultParams => ({
       ...defaultParams,
-      spacing: { padding: '6 4 8 8' },
+      spacing: { padding: "6 4 8 8" },
       disableContextMenuColumn: true,
       paginationProps: {
         totalElements: 105,
         pageSize: 10,
         currentPage: 2,
         onPageChange: jest.fn(),
-        onPageSizeChange: jest.fn(),
+        onPageSizeChange: jest.fn()
       },
       children: ({ item }) => (
         <DataGridRow key={item.firstName}>
@@ -402,20 +402,20 @@ describe('spacing should work correctly', () => {
           <DataGridCell>{item.lastName}</DataGridCell>
           <DataGridCell>{item.date}</DataGridCell>
         </DataGridRow>
-      ),
+      )
     }));
 
-    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
-    const lastHeaderCell = dataGrid.querySelector('.table .thead .row th:last-of-type');
-    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
-    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
-    const pagination = dataGrid.querySelector('.pagination-wrapper');
-
-    expect(dataGrid).toHaveStyle({ 'padding-top': '1.5rem', 'padding-bottom': '2rem' });
-    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '2rem' });
-    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
-    expect(firstBodyCell).toHaveStyle({ 'padding-left': '2rem' });
-    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
-    expect(pagination).toHaveStyle({ 'padding-left': '2rem', 'padding-right': '1rem' });
+    const firstHeaderCell = dataGrid.querySelector(".table .thead .row .header-cell");
+    const lastHeaderCell = dataGrid.querySelector(".table .thead .row th:last-of-type");
+    const firstBodyCell = dataGrid.querySelector(".table tbody .row .cell");
+    const lastBodyCell = dataGrid.querySelector(".table tbody .row td:last-of-type");
+    const pagination = dataGrid.querySelector(".pagination-wrapper");
+
+    expect(dataGrid).toHaveStyle({ "padding-top": "1.5rem", "padding-bottom": "2rem" });
+    expect(firstHeaderCell).toHaveStyle({ "padding-left": "2rem" });
+    expect(lastHeaderCell).toHaveStyle({ "padding-right": "1rem" });
+    expect(firstBodyCell).toHaveStyle({ "padding-left": "2rem" });
+    expect(lastBodyCell).toHaveStyle({ "padding-right": "1rem" });
+    expect(pagination).toHaveStyle({ "padding-left": "2rem", "padding-right": "1rem" });
   });
 });