feat: persist table columns - fix failing unit test

apps/governance/src/setup-tests.ts

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom';
 import dev from './i18n/translations/dev.json';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import ResizeObserver from 'resize-observer-polyfill';
 
 // Set up i18n instance so that components have the correct default
 // en translations
@@ -22,3 +23,5 @@ i18n.use(initReactI18next).init({
   ns: ['translations'],
   defaultNS: 'translations',
 });
+
+global.ResizeObserver = ResizeObserver;

libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import type { ReactElement, ReactNode } from 'react';
 import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
-import type { ColumnResizedEvent } from 'ag-grid-community';
+import type { ColumnResizedEvent, ColDef } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useColumnSizes } from './use-column-sizes';
@@ -49,9 +49,12 @@ export const AgGridThemed = ({
     id && props?.columnDefs
       ? {
           ...props,
-          columnDefs: props.columnDefs.map((columnDef) => ({
+          columnDefs: props.columnDefs.map((columnDef: ColDef) => ({
             ...columnDef,
-            width: sizes[columnDef.colId || columnDef.field],
+            width:
+              (columnDef.colId && sizes[columnDef.colId]) ||
+              (columnDef.field && sizes[columnDef.field]) ||
+              undefined,
           })),
         }
       : props;

libs/datagrid/src/lib/ag-grid/use-column-sizes.ts

@@ -43,11 +43,12 @@ export const useColumnSizes = ({
 ] => {
   const sizes = useColumnSizesStore((store) => store.sizes[id] || {});
   const valueSetter = useColumnSizesStore((store) => store.valueSetter);
-  const getWidthOfAll = useCallback(() => {
-    return (
-      (container?.current as HTMLDivElement)?.getBoundingClientRect().width ?? 0
-    );
-  }, [container]);
+  const getWidthOfAll = useCallback(
+    () =>
+      (container?.current as HTMLDivElement)?.getBoundingClientRect().width ??
+      0,
+    [container]
+  );
   const recalculateSizes = useCallback(
     (sizes: Record<string, number>) => {
       const width = getWidthOfAll();

libs/fills/src/setup-tests.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

libs/liquidity/src/setup-tests.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

libs/orders/src/setup-tests.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

libs/proposals/src/setup-tests.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

libs/trades/src/setup-tests.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;

libs/withdraws/src/setup-tests.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import ResizeObserver from 'resize-observer-polyfill';
+
+global.ResizeObserver = ResizeObserver;