grafana/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts

import { SortColumn } from 'react-data-grid';

import {
  createDataFrame,
  createTheme,
  DataFrame,
  DataFrameWithValue,
  DataLink,
  DisplayValue,
  Field,
  FieldType,
  GrafanaTheme2,
  LinkModel,
  ValueLinkConfig,
} from '@grafana/data';
import { BarGaugeDisplayMode, TableCellBackgroundDisplayMode, TableCellHeight } from '@grafana/schema';

import { TableCellDisplayMode } from '../types';

import { COLUMN, TABLE } from './constants';
import { MeasureCellHeightEntry } from './types';
import {
  extractPixelValue,
  frameToRecords,
  getAlignmentFactor,
  getCellColorInlineStylesFactory,
  getCellLinks,
  getCellOptions,
  getComparator,
  getIsNestedTable,
  getAlignment,
  getJustifyContent,
  migrateTableDisplayModeToCellOptions,
  getColumnTypes,
  computeColWidths,
  getRowHeight,
  buildCellHeightMeasurers,
  buildHeaderHeightMeasurers,
  getTextHeightEstimator,
  createTypographyContext,
  applySort,
  SINGLE_LINE_ESTIMATE_THRESHOLD,
  getTextHeightMeasurerFromUwrapCount,
  getDataLinksHeightMeasurer,
  getPillCellHeightMeasurer,
  getDefaultRowHeight,
  getDisplayName,
  predicateByName,
  parseStyleJson,
  calculateFooterHeight,
  displayJsonValue,
} from './utils';

describe('TableNG utils', () => {
  describe('alignment', () => {
    it.each(['left', 'center', 'right'] as const)('should return "%s" when configured', (align) => {
      expect(getAlignment({ name: 'Value', type: FieldType.string, values: [], config: { custom: { align } } })).toBe(
        align
      );
    });

    it.each([
      { type: FieldType.string, align: 'left' },
      { type: FieldType.number, align: 'right' },
      { type: FieldType.boolean, align: 'left' },
      { type: FieldType.time, align: 'left' },
    ])('should return "$align" for field type $type by default', ({ type, align }) => {
      expect(getAlignment({ name: 'Test', type, values: [], config: { custom: {} } })).toBe(align);
    });

    it.each([
      { cellType: undefined, align: 'right' },
      { cellType: TableCellDisplayMode.Auto, align: 'right' },
      { cellType: TableCellDisplayMode.ColorText, align: 'right' },
      { cellType: TableCellDisplayMode.ColorBackground, align: 'right' },
      { cellType: TableCellDisplayMode.Gauge, align: 'left' },
      { cellType: TableCellDisplayMode.JSONView, align: 'left' },
      { cellType: TableCellDisplayMode.DataLinks, align: 'left' },
    ])('numeric field should return "$align" for cell type "$cellType"', ({ align, cellType }) => {
      expect(
        getAlignment({
          name: 'Test',
          type: FieldType.number,
          values: [],
          config: { custom: { ...(cellType !== undefined ? { cellOptions: { type: cellType } } : {}) } },
        })
      ).toBe(align);
    });

    describe('mapping to getJustifyContent', () => {
      it.each([
        { align: 'left', expected: 'flex-start' },
        { align: 'center', expected: 'center' },
        { align: 'right', expected: 'flex-end' },
      ] as const)(`should map align "$align" to justifyContent "$expected"`, ({ align, expected }) => {
        expect(getJustifyContent(align)).toBe(expected);
      });
    });
  });

  describe('cell display mode', () => {
    const theme = {
      colors: {
        isDark: true,
        mode: 'dark',
        primary: { text: '#FFFFFF', main: '#FF0000' },
        background: { canvas: '#000000', primary: '#111111' },
        text: { primary: '#FFFFFF' },
        action: { hover: '#FF0000' },
      },
    } as unknown as GrafanaTheme2;

    it('should handle color text cell type', () => {
      const cellOptions = {
        type: TableCellDisplayMode.ColorText as const,
      };

      const displayValue = { text: '100', numeric: 100, color: '#ff0000' };

      const getCellColorInlineStyles = getCellColorInlineStylesFactory(theme);
      const colors = getCellColorInlineStyles(cellOptions, displayValue, false);
      expect(colors.color).toBe('#ff0000');
      expect(colors).not.toHaveProperty('background');
    });

    it('should pass thru color background cell type in basic mode', () => {
      const cellOptions = {
        type: TableCellDisplayMode.ColorBackground as const,
        mode: TableCellBackgroundDisplayMode.Basic,
      };

      const displayValue = { text: '100', numeric: 100, color: '#ff0000' };

      const getCellColorInlineStyles = getCellColorInlineStylesFactory(theme);
      const colors = getCellColorInlineStyles(cellOptions, displayValue, false);
      expect(colors.background).toBe('#ff0000');
      expect(colors.color).toBe('rgb(247, 248, 250)');
    });

    it('should handle color background cell type in gradient mode', () => {
      const cellOptions = {
        type: TableCellDisplayMode.ColorBackground as const,
        mode: TableCellBackgroundDisplayMode.Gradient,
      };

      const displayValue = { text: '100', numeric: 100, color: '#ff0000' };

      const getCellColorInlineStyles = getCellColorInlineStylesFactory(theme);
      const colors = getCellColorInlineStyles(cellOptions, displayValue, false);
      expect(colors.background).toBe('linear-gradient(120deg, rgb(255, 54, 36), #ff0000)');
      expect(colors.color).toBe('rgb(247, 248, 250)');
    });

    it('does not set CSSProperties for un-mapped cell types', () => {
      const cellOptions = { type: TableCellDisplayMode.JSONView as const };

      const displayValue = { text: '100', numeric: 100, color: '#ff0000' };

      const getCellColorInlineStyles = getCellColorInlineStylesFactory(theme);
      const colors = getCellColorInlineStyles(cellOptions, displayValue, false);

      expect(colors).toEqual({});
    });

    describe('applyToRow', () => {
      it.each([
        ['hex', '#ffffff00'],
        ['rgba', 'rgba(255,255,255,0)'],
        ['hsla', 'hsla(0,100%,100%,0)'],
      ])(
        'should not apply background color if the display value is transparent (%s) and applyToRow is on',
        (_format, colorDisplayValue) => {
          const cellOptions = {
            type: TableCellDisplayMode.ColorBackground as const,
            mode: TableCellBackgroundDisplayMode.Basic,
          };

          const displayValue = { text: '100', numeric: 100, color: colorDisplayValue };

          const getCellColorInlineStyles = getCellColorInlineStylesFactory(theme);
          const colors = getCellColorInlineStyles(cellOptions, displayValue, true);

          expect(colors).toEqual({});
        }
      );

      it.each([
        ['hex', '#ffffff00'],
        ['rgba', 'rgba(255,255,255,0)'],
        ['hsla', 'hsla(0,100%,100%,0)'],
      ])(
        'should apply background color if the display value is transparent (%s) and applyToRow is off',
        (_format, colorDisplayValue) => {
          const cellOptions = {
            type: TableCellDisplayMode.ColorBackground as const,
            mode: TableCellBackgroundDisplayMode.Basic,
          };

          const displayValue = { text: '100', numeric: 100, color: colorDisplayValue };

          const getCellColorInlineStyles = getCellColorInlineStylesFactory(theme);
          const colors = getCellColorInlineStyles(cellOptions, displayValue, false);

          expect(colors).toEqual({
            background: colorDisplayValue,
            color: 'rgb(32, 34, 38)',
          });
        }
      );
    });
  });

  describe('frame to records conversion', () => {
    it('should convert DataFrame to TableRows', () => {
      const frame = createDataFrame({
        fields: [
          { name: 'time', values: [1, 2] },
          { name: 'value', values: [10, 20] },
        ],
      });

      const records = frameToRecords(frame);
      expect(records).toHaveLength(2);
      expect(records[0]).toEqual({ __depth: 0, __index: 0, time: 1, value: 10 });
    });
  });

  describe('getAlignmentFactor', () => {
    it('should create a new alignment factor when none exists', () => {
      // Create a field with no existing alignment factor
      const field: Field = {
        name: 'test',
        type: FieldType.number,
        config: {},
        values: [1, 22, 333, 4444],
        // No state property initially
        display: (value: unknown) => ({ text: String(value), numeric: Number(value) }),
      };

      // Create a display value
      const displayValue: DisplayValue = { text: '1', numeric: 1 };

      // Call getAlignmentFactor with the first row
      const result = getAlignmentFactor(field, displayValue, 0);

      // Verify the result has the text property
      expect(result).toEqual(expect.objectContaining({ text: '1' }));

      // Verify that field.state was created and contains the alignment factor
      expect(field.state).toBeDefined();
      expect(field.state?.alignmentFactors).toBeDefined();
      expect(field.state?.alignmentFactors).toEqual(expect.objectContaining({ text: '1' }));
    });

    it('should update alignment factor when a longer value is found', () => {
      // Create a field with an existing alignment factor
      const field: Field = {
        name: 'test',
        type: FieldType.number,
        config: {},
        values: [1, 22, 333, 4444],
        state: { alignmentFactors: { text: '1' } },
        display: (value: unknown) => ({ text: String(value), numeric: Number(value) }),
      };

      // Create a display value that is longer than the existing alignment factor
      const displayValue: DisplayValue = { text: '4444', numeric: 4444 };

      // Call getAlignmentFactor
      const result = getAlignmentFactor(field, displayValue, 3);

      // Verify the result is updated to the longer value
      expect(result).toEqual(expect.objectContaining({ text: '4444' }));

      // Verify that field.state.alignmentFactors was updated
      expect(field.state?.alignmentFactors).toEqual(expect.objectContaining({ text: '4444' }));
    });

    it('should not update alignment factor when a shorter value is found', () => {
      // Create a field with an existing alignment factor for a long value
      const field: Field = {
        name: 'test',
        type: FieldType.number,
        config: {},
        values: [1, 22, 333, 4444],
        state: { alignmentFactors: { text: '4444' } },
        display: (value: unknown) => ({ text: String(value), numeric: Number(value) }),
      };

      // Create a display value that is shorter than the existing alignment factor
      const displayValue: DisplayValue = { text: '1', numeric: 1 };

      // Call getAlignmentFactor
      const result = getAlignmentFactor(field, displayValue, 0);

      // Verify the result is still the longer value
      expect(result).toEqual(expect.objectContaining({ text: '4444' }));

      // Verify that field.state.alignmentFactors was not changed
      expect(field.state?.alignmentFactors).toEqual(expect.objectContaining({ text: '4444' }));
    });

    it('should add alignment factor to existing field state', () => {
      // Create a field with existing state but no alignment factors yet
      const field: Field = {
        name: 'test',
        type: FieldType.number,
        config: {},
        values: [1, 22, 333, 4444],
        // Field has state but no alignmentFactors
        state: {
          // Use a valid property for FieldState
          // For example, if calcs is a valid property:
          calcs: { sum: 4460 },
          // Or if noValue is a valid property:
          // noValue: true
        },
        display: (value: unknown) => ({ text: String(value), numeric: Number(value) }),
      };

      // Create a display value
      const displayValue: DisplayValue = { text: '1', numeric: 1 };

      // Call getAlignmentFactor with the first row
      const result = getAlignmentFactor(field, displayValue, 0);

      // Verify the result has the text property
      expect(result).toEqual(expect.objectContaining({ text: '1' }));

      // Verify that field.state was preserved and alignment factor was added
      expect(field.state).toBeDefined();
      // Check for the valid property we used
      expect(field.state?.calcs).toBeDefined();
      expect(field.state?.alignmentFactors).toBeDefined();
      expect(field.state?.alignmentFactors).toEqual(expect.objectContaining({ text: '1' }));
    });

    it.todo('alignmentFactor.text = displayValue.text;');
  });

  describe('getColumnTypes', () => {
    it('builds the expected record with column types', () => {
      const fields: Field[] = [
        {
          name: 'name',
          type: FieldType.string,
          display: (v) => ({ text: v as string, numeric: NaN }),
          config: {},
          values: [],
        },
        {
          name: 'age',
          type: FieldType.number,
          display: (v) => ({ text: (v as number).toString(), numeric: v as number }),
          config: {},
          values: [],
        },
        {
          name: 'active',
          type: FieldType.boolean,
          display: (v) => ({ text: (v as boolean).toString(), numeric: NaN }),
          config: {},
          values: [],
        },
      ];
      const result = getColumnTypes(fields);

      expect(result).toEqual({ name: FieldType.string, age: FieldType.number, active: FieldType.boolean });
    });

    it('should recursively build column types when nested fields are present', () => {
      const frame: DataFrame = {
        fields: [
          { type: FieldType.string, name: 'stringCol', config: {}, values: [] },
          {
            type: FieldType.nestedFrames,
            name: 'nestedCol',
            config: {},
            values: [
              [
                createDataFrame({
                  fields: [
                    { name: 'time', values: [1, 2] },
                    { name: 'value', values: [10, 20] },
                  ],
                }),
              ],
              [
                createDataFrame({
                  fields: [
                    { name: 'time', values: [3, 4] },
                    { name: 'value', values: [30, 40] },
                  ],
                }),
              ],
            ],
          },
        ],
        length: 0,
        name: 'test',
      };

      expect(getColumnTypes(frame.fields)).toEqual({
        stringCol: FieldType.string,
        time: FieldType.time,
        value: FieldType.number,
      });
    });

    it('does not throw if nestedFrames has no values', () => {
      const frame: DataFrame = {
        fields: [
          { type: FieldType.string, name: 'stringCol', config: {}, values: [] },
          { type: FieldType.nestedFrames, name: 'nestedCol', config: {}, values: [] },
        ],
        length: 0,
        name: 'test',
      };

      expect(getColumnTypes(frame.fields)).toEqual({ stringCol: FieldType.string });
    });
  });

  describe('getIsNestedTable', () => {
    it('should detect nested frames', () => {
      const frame: DataFrame = {
        fields: [
          { type: FieldType.string, name: 'stringCol', config: {}, values: [] },
          { type: FieldType.nestedFrames, name: 'nestedCol', config: {}, values: [] },
        ],
        length: 0,
        name: 'test',
      };
      expect(getIsNestedTable(frame.fields)).toBe(true);
    });

    it('should return false for regular frames', () => {
      const frame: DataFrame = {
        fields: [
          { type: FieldType.string, name: 'stringCol', config: {}, values: [] },
          { type: FieldType.number, name: 'numberCol', config: {}, values: [] },
        ],
        length: 0,
        name: 'test',
      };
      expect(getIsNestedTable(frame.fields)).toBe(false);
    });
  });

  describe('getComparator', () => {
    it('should compare numbers correctly', () => {
      const comparator = getComparator(FieldType.number);
      expect(comparator(1, 2)).toBeLessThan(0);
      expect(comparator(2, 1)).toBeGreaterThan(0);
      expect(comparator(1, 1)).toBe(0);
    });

    it('should handle undefined values', () => {
      const comparator = getComparator(FieldType.number);
      expect(comparator(undefined, 1)).toBeLessThan(0);
      expect(comparator(1, undefined)).toBeGreaterThan(0);
      expect(comparator(undefined, undefined)).toBe(0);
    });

    it('should compare strings case-insensitively', () => {
      const comparator = getComparator(FieldType.string);
      expect(comparator('a', 'B')).toBeLessThan(0);
      expect(comparator('B', 'a')).toBeGreaterThan(0);
      expect(comparator('a', 'a')).toBe(0);
    });

    it('should handle time values', () => {
      const comparator = getComparator(FieldType.time);
      const t1 = 1672531200000; // 2023-01-01
      const t2 = 1672617600000; // 2023-01-02

      expect(comparator(t1, t2)).toBeLessThan(0);
      expect(comparator(t2, t1)).toBeGreaterThan(0);
      expect(comparator(t1, t1)).toBe(0);
    });

    it('should handle boolean values', () => {
      const comparator = getComparator(FieldType.boolean);
      expect(comparator(false, true)).toBeLessThan(0);
      expect(comparator(true, false)).toBeGreaterThan(0);
      expect(comparator(true, true)).toBe(0);
    });

    it('should compare frame values', () => {
      const comparator = getComparator(FieldType.frame);

      // simulate using `first`.
      const frame1: DataFrameWithValue = {
        value: 1,
        ...createDataFrame({ fields: [{ name: 'a', values: [1, 2, 3, 4] }] }),
      };
      const frame2: DataFrameWithValue = {
        value: 4,
        ...createDataFrame({ fields: [{ name: 'a', values: [4, 3, 2, 1] }] }),
      };
      const frame3: DataFrameWithValue = {
        value: 4,
        ...createDataFrame({ fields: [{ name: 'a', values: [4, 5, 6, 7] }] }),
      };

      expect(comparator(frame1, frame2)).toBeLessThan(0);
      expect(comparator(frame2, frame1)).toBeGreaterThan(0);
      expect(comparator(frame2, frame2)).toBe(0);
      expect(comparator(frame2, frame3)).toBe(0); // equivalent start values
    });
  });

  describe('migrateTableDisplayModeToCellOptions', () => {
    it('should migrate basic to gauge mode', () => {
      const result = migrateTableDisplayModeToCellOptions(TableCellDisplayMode.BasicGauge);
      expect(result).toEqual({ type: TableCellDisplayMode.Gauge, mode: BarGaugeDisplayMode.Basic });
    });

    it('should migrate gradient-gauge to gauge mode with gradient', () => {
      const result = migrateTableDisplayModeToCellOptions(TableCellDisplayMode.GradientGauge);
      expect(result).toEqual({ type: TableCellDisplayMode.Gauge, mode: BarGaugeDisplayMode.Gradient });
    });

    it('should migrate color-background to color background with gradient', () => {
      const result = migrateTableDisplayModeToCellOptions(TableCellDisplayMode.ColorBackground);
      expect(result).toEqual({
        type: TableCellDisplayMode.ColorBackground,
        mode: TableCellBackgroundDisplayMode.Gradient,
      });
    });

    it('should handle other display modes', () => {
      const result = migrateTableDisplayModeToCellOptions(TableCellDisplayMode.ColorText);
      expect(result).toEqual({ type: TableCellDisplayMode.ColorText });
    });
  });

  describe('getCellOptions', () => {
    it('should return default options when no custom config is provided', () => {
      const field: Field = { name: 'test', type: FieldType.string, config: {}, values: [] };

      const options = getCellOptions(field);

      // Check that default options are returned
      expect(options).toEqual({ type: TableCellDisplayMode.Auto });
    });

    it('should extract cell options from field config', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {
          custom: { cellOptions: { type: TableCellDisplayMode.ColorText, inspectEnabled: false } },
        },
        values: [],
      };

      const options = getCellOptions(field);

      expect(options).toEqual({ type: TableCellDisplayMode.ColorText, inspectEnabled: false });
    });

    it('should handle legacy displayMode property', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: { custom: { displayMode: 'color-background' } },
        values: [],
      };

      const options = getCellOptions(field);

      // The legacy displayMode should be converted to the new format
      expect(options.type).toBe(TableCellDisplayMode.ColorBackground);
    });

    it('should prioritize cellOptions over legacy displayMode', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: { custom: { displayMode: 'color-background', cellOptions: { type: TableCellDisplayMode.ColorText } } },
        values: [],
      };

      const options = getCellOptions(field);

      expect(options.type).toBe(TableCellDisplayMode.ColorBackground);
    });

    it('should handle image display mode', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {
          custom: {
            cellOptions: {
              type: TableCellDisplayMode.Image,
              // Add image-specific options if they exist
            },
          },
        },
        values: [],
      };

      const options = getCellOptions(field);

      expect(options.type).toBe(TableCellDisplayMode.Image);
    });

    it('should handle JSON display mode', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: { custom: { cellOptions: { type: TableCellDisplayMode.JSONView } } },
        values: [],
      };

      const options = getCellOptions(field);

      expect(options.type).toBe(TableCellDisplayMode.JSONView);
    });
  });

  describe('getCellLinks', () => {
    it('should return undefined when field has no getLinks function', () => {
      const field: Field = { name: 'test', type: FieldType.string, config: {}, values: ['value'] };

      const links = getCellLinks(field, 0);
      expect(links).toEqual(undefined);
    });

    it('should return links from field getLinks function', () => {
      const mockLinks: LinkModel[] = [
        { title: 'Link 1', href: 'http://example.com/1', target: '_blank', origin: { datasourceUid: 'test' } },
        { title: 'Link 2', href: 'http://example.com/2', target: '_self', origin: { datasourceUid: 'test' } },
      ];

      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        values: ['value1', 'value2'],
        getLinks: (config: ValueLinkConfig) => {
          return config.valueRowIndex === 0 ? mockLinks : [];
        },
      };

      const links = getCellLinks(field, 0);
      expect(links).toEqual(mockLinks);
    });

    it('should return empty array for out of bounds index', () => {
      const mockLinks: LinkModel[] = [
        { title: 'Link 1', href: 'http://example.com/1', target: '_blank', origin: { datasourceUid: 'test' } },
      ];

      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        values: ['value1'],
        getLinks: (config: ValueLinkConfig) => {
          return config.valueRowIndex === 0 ? mockLinks : [];
        },
      };

      // Index out of bounds
      const links = getCellLinks(field, 1);
      expect(links).toEqual([]);
    });

    it('should handle getLinks returning undefined', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        values: ['value1'],
        getLinks: (config: ValueLinkConfig) => {
          return [];
        },
      };

      const links = getCellLinks(field, 0);
      expect(links).toEqual([]);
    });

    it('should handle different link configurations', () => {
      // Create links with different valid configurations
      const mockLinks: LinkModel[] = [
        // Standard link with href
        {
          title: 'External Link',
          href: 'http://example.com/full',
          target: '_blank',
          origin: { datasourceUid: 'test' },
        },
        // Internal link with onClick handler
        {
          title: 'Internal Link',
          href: '', // Empty href for internal links
          onClick: jest.fn(),
          target: '_self',
          origin: { datasourceUid: 'test' },
        },
      ];

      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        values: ['value1'],
        getLinks: () => mockLinks,
      };

      const links = getCellLinks(field, 0);

      // Verify links are returned unmodified
      expect(links).toEqual(mockLinks);

      // Verify we have both types of links
      expect(links?.find((link) => link.onClick !== undefined)).toBeDefined();
      expect(links?.find((link) => link.href === 'http://example.com/full')).toBeDefined();
    });

    it('should bind the onClick handlers', () => {
      const onClickHandler = jest.fn();
      // Create links with different valid configurations
      const mockLinks: LinkModel[] = [
        // Internal link with onClick handler
        {
          title: 'Internal Link',
          href: '', // Empty href for internal links
          onClick: onClickHandler,
          target: '_self',
          origin: { datasourceUid: 'test' },
        },
      ];

      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        values: ['value1'],
        getLinks: () => mockLinks,
      };

      const links = getCellLinks(field, 0);

      const link = links?.[0];
      const event = new MouseEvent('click', { bubbles: true });
      jest.spyOn(event, 'preventDefault');

      link?.onClick?.(event);

      expect(event.preventDefault).toHaveBeenCalled();
      expect(onClickHandler).toHaveBeenCalledWith(event, { field, rowIndex: 0 });
    });

    it.each([
      { keyName: 'metaKey', eventOverride: { metaKey: true } },
      { keyName: 'ctrlKey', eventOverride: { ctrlKey: true } },
      { keyName: 'shiftKey', eventOverride: { shiftKey: true } },
    ])(
      'should allow open a link in a new tab when $keyName clicked instead of using the handler',
      ({ eventOverride }) => {
        const onClickHandler = jest.fn();
        // Create links with different valid configurations
        const mockLinks: LinkModel[] = [
          // Internal link with onClick handler
          {
            title: 'Internal Link',
            href: '', // Empty href for internal links
            onClick: onClickHandler,
            target: '_self',
            origin: { datasourceUid: 'test' },
          },
        ];

        const field: Field = {
          name: 'test',
          type: FieldType.string,
          config: {},
          values: ['value1'],
          getLinks: () => mockLinks,
        };

        const links = getCellLinks(field, 0);

        const link = links?.[0];
        const event = new MouseEvent('click', { bubbles: true, ...eventOverride });
        jest.spyOn(event, 'preventDefault');

        link?.onClick?.(event);

        expect(event.preventDefault).not.toHaveBeenCalled();
        expect(onClickHandler).not.toHaveBeenCalled();
      }
    );

    it('should filter out links which contain neither href nor onClick', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        values: ['value1'],
        getLinks: (): LinkModel[] => [
          { title: 'Invalid Link', target: '_blank', origin: { datasourceUid: 'test' } } as LinkModel, // No href or onClick
        ],
      };

      const links = getCellLinks(field, 0);
      expect(links).toEqual([]);
    });
  });

  describe('extractPixelValue', () => {
    it('should extract numeric value from pixel string', () => {
      expect(extractPixelValue('100px')).toBe(100);
      expect(extractPixelValue('42px')).toBe(42);
      expect(extractPixelValue('0px')).toBe(0);
    });

    it('should handle numeric input', () => {
      expect(extractPixelValue(100)).toBe(100);
      expect(extractPixelValue(42)).toBe(42);
      expect(extractPixelValue(0)).toBe(0);
    });

    it('should handle string numbers without units', () => {
      expect(extractPixelValue('100')).toBe(100);
      expect(extractPixelValue('42')).toBe(42);
      expect(extractPixelValue('0')).toBe(0);
    });

    it('should handle decimal values', () => {
      expect(extractPixelValue('100.5px')).toBe(100.5);
      expect(extractPixelValue('42.75px')).toBe(42.75);
      expect(extractPixelValue(100.5)).toBe(100.5);
    });

    it('should handle negative values', () => {
      expect(extractPixelValue('-100px')).toBe(-100);
      expect(extractPixelValue('-42px')).toBe(-42);
      expect(extractPixelValue(-100)).toBe(-100);
    });

    it('should handle other CSS units by removing them', () => {
      expect(extractPixelValue('100em')).toBe(100);
      expect(extractPixelValue('42rem')).toBe(42);
      expect(extractPixelValue('10vh')).toBe(10);
      expect(extractPixelValue('20vw')).toBe(20);
    });

    it('should handle whitespace', () => {
      expect(extractPixelValue(' 100px ')).toBe(100);
      expect(extractPixelValue(' 42 px ')).toBe(42);
    });

    it('should return 0 for invalid input when no default is provided', () => {
      expect(extractPixelValue('not-a-number')).toBe(0);
      expect(extractPixelValue('px')).toBe(0);
      expect(extractPixelValue('')).toBe(0);
    });
  });

  describe('getDefaultRowHeight', () => {
    const theme = createTheme();

    it.each([
      { input: TableCellHeight.Sm, expected: 36 },
      { input: TableCellHeight.Md, expected: 42 },
      { input: TableCellHeight.Lg, expected: TABLE.MAX_CELL_HEIGHT },
    ])('returns "$expected" for "$input"', ({ input, expected }) => {
      const result = getDefaultRowHeight(theme, [], input);
      expect(result).toBe(expected);
    });

    it('returns "auto" if a field is present with the dynamicHeight cellOption  is false', () => {
      expect(
        getDefaultRowHeight(
          theme,
          [
            {
              name: 'test1',
              type: FieldType.string,
              config: {},
              values: ['value1'],
            },
            {
              name: 'test2',
              type: FieldType.string,
              config: { custom: { cellOptions: { type: TableCellDisplayMode.Markdown, dynamicHeight: true } } },
              values: ['value1'],
            },
            {
              name: 'test3',
              type: FieldType.number,
              config: { custom: { cellOptions: { type: TableCellDisplayMode.JSONView } } },
              values: [3],
            },
          ],
          TableCellHeight.Sm
        )
      ).toBe('auto');
    });

    it('calculates height based on theme when cellHeight is undefined', () => {
      const result = getDefaultRowHeight(theme, []);

      // Calculate the expected result based on the theme values
      const expected = TABLE.CELL_PADDING * 2 + theme.typography.fontSize * theme.typography.body.lineHeight;

      expect(result).toBe(expected);
    });
  });

  describe('createTypographyCtx', () => {
    // we can't test the effectiveness of this typography context in unit tests, only that it
    // actually executed the JS correctly. If you called `count` with a sensible value and width,
    // it wouldn't give you a very reasonable answer in Jest's DOM environment for some reason.
    it('creates the context using uwrap', () => {
      const field: Field = { name: 'test', type: FieldType.string, config: {}, values: ['foo', 'bar', 'baz'] };
      const ctx = createTypographyContext(14, 'sans-serif', 0.15);

      expect(ctx).toEqual(
        expect.objectContaining({
          ctx: expect.any(CanvasRenderingContext2D),
          fontFamily: 'sans-serif',
          letterSpacing: 0.15,
          measureHeight: expect.any(Function),
          estimateHeight: expect.any(Function),
          avgCharWidth: expect.any(Number),
        })
      );
      expect(ctx.measureHeight('the quick brown fox jumps over the lazy dog', 100, field, 0, 20)).toEqual(
        expect.any(Number)
      );
      expect(ctx.estimateHeight('the quick brown fox jumps over the lazy dog', 100, field, 0, 20)).toEqual(
        expect.any(Number)
      );
    });
  });

  describe('getTextHeightMeasurerFromUwrapCount', () => {
    const field: Field = { name: 'test', type: FieldType.string, config: {}, values: ['foo', 'bar', 'baz'] };

    it('wraps the uwrap count function', () => {
      const measureHeight = getTextHeightMeasurerFromUwrapCount(jest.fn(() => 2));
      expect(measureHeight('test string', 100, field, 0, 20)).toBe(40);
    });

    it("returns a single line's height for null or undefined values", () => {
      const measureHeight = getTextHeightMeasurerFromUwrapCount(jest.fn(() => 2));
      expect(measureHeight(null, 100, field, 0, 20)).toBe(20);
      expect(measureHeight(undefined, 100, field, 0, 20)).toBe(20);
    });
  });

  describe('getTextHeightEstimator', () => {
    const estimator = getTextHeightEstimator(10);
    const field: Field = { name: 'test', type: FieldType.string, config: {}, values: ['foo', 'bar', 'baz'] };

    it('returns -1 if there are no strings or dashes within the string', () => {
      expect(estimator('asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf', 5, field, 0, 22)).toBe(-1);
    });

    it('calculates an approximate rendered height for the text based on the width and avgCharWidth', () => {
      expect(estimator('asdfas dfasdfasdf asdfasdfasdfa sdfasdfasdfasdf 23', 200, field, 0, 20)).toBe(60);
    });
  });

  describe('getDataLinksHeightMeasurer', () => {
    it('counts number of valid links using getCellLinks', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {
          links: [
            { title: 'Link 1', url: 'http://example.com/1' },
            { title: 'Invalid Link' } as DataLink, // No href or onClick
            {
              title: 'Link w',
              url: 'asdf',
              onClick: jest.fn(() => {}),
            },
          ],
        },
        values: ['value1'],
      };

      const measurer = getDataLinksHeightMeasurer();
      expect(measurer('my value', 100, field, 0, 20)).toBe(40);
    });
  });

  describe('getPillCellHeightMeasurer', () => {
    it('counts up the number of lines using the pill measuring method', () => {
      const measurer = getPillCellHeightMeasurer(jest.fn((str) => str.length * 5));
      expect(measurer('tag1,tag2', 100, {} as Field, 0, 20)).toBe(20);
      expect(measurer('tag1,tag2,tag3,tag4,tag5,tag6', 100, {} as Field, 0, 20)).toBe(68);
    });

    it('returns 0 if value is null', () => {
      const measurer = getPillCellHeightMeasurer(jest.fn((str) => str.length * 5));
      expect(measurer(null, 100, {} as Field, 0, 20)).toBe(0);
    });

    it('returns 0 if no pills are inferred', () => {
      const measurer = getPillCellHeightMeasurer(jest.fn((str) => str.length * 5));
      expect(measurer('', 100, {} as Field, 0, 20)).toBe(0);
    });

    it('caches the width measurement for the same value', () => {
      const widthMeasurement = jest.fn((str) => str.length * 5);
      const measurer = getPillCellHeightMeasurer(widthMeasurement);
      measurer('tag1,tag2,tag3,tag4,tag5,tag6', 100, {} as Field, 0, 20);
      measurer('tag1,tag2', 100, {} as Field, 0, 20);
      measurer('tag2', 200, {} as Field, 0, 20);
      measurer('tag2,tag3,tag2,tag4,tag4,tag2,tag5', 300, {} as Field, 0, 20);
      expect(widthMeasurement).toHaveBeenCalledTimes(6); // Should only call for unique values
    });
  });

  describe('buildHeaderHeightMeasurers', () => {
    const ctx = {
      fontFamily: 'sans-serif',
      letterSpacing: 0.15,
      ctx: {} as CanvasRenderingContext2D,
      count: jest.fn(() => 2),
      avgCharWidth: 7,
      measureHeight: jest.fn(() => 2),
      estimateHeight: jest.fn(() => 2),
    };

    it('returns an array of measurers for each column', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: { wrapHeaderText: true } } },
        { name: 'Age', type: FieldType.number, values: [], config: { custom: { wrapHeaderText: true } } },
      ];
      const measurers = buildHeaderHeightMeasurers(fields, ctx);
      expect(measurers![0].measure).toEqual(expect.any(Function));
      expect(measurers![0].fieldIdxs).toEqual([0, 1]);
    });

    it('does not return the index of columns which are not wrapped', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: {} } },
        { name: 'Age', type: FieldType.number, values: [], config: { custom: { wrapHeaderText: true } } },
      ];

      const measurers = buildHeaderHeightMeasurers(fields, ctx);
      expect(measurers![0].fieldIdxs).toEqual([1]);
    });

    it('returns undefined if no columns are wrapped', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: {} } },
        { name: 'Age', type: FieldType.number, values: [], config: { custom: {} } },
      ];

      const measurers = buildHeaderHeightMeasurers(fields, ctx);
      expect(measurers).toBeUndefined();
    });
  });

  describe('buildCellHeightMeasurers', () => {
    const ctx = {
      fontFamily: 'sans-serif',
      letterSpacing: 0.15,
      ctx: {} as CanvasRenderingContext2D,
      measureHeight: jest.fn(() => 2),
      estimateHeight: jest.fn(() => 2),
      avgCharWidth: 7,
    };

    it('sets up text height measurers for each text column if wrapping is on', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: { wrapText: true } } },
        {
          name: 'Address',
          type: FieldType.string,
          values: [],
          config: { custom: { wrapText: true } },
        },
      ];
      const measurers = buildCellHeightMeasurers(fields, ctx);
      expect(measurers![0].measure).toEqual(expect.any(Function));
      expect(measurers![0].fieldIdxs).toEqual([0, 1]);
    });

    it('does not return the index of columns which are not wrapped', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: {} } },
        {
          name: 'Address',
          type: FieldType.string,
          values: [],
          config: { custom: { wrapText: true } },
        },
      ];

      const measurers = buildCellHeightMeasurers(fields, ctx);
      expect(measurers![0].fieldIdxs).toEqual([1]);
    });

    it('sets up line counting for pills if present and wrapping is on', () => {
      const fields: Field[] = [
        {
          name: 'Tags',
          type: FieldType.string,
          values: ['tag1,tag2', 'tag3', '["tag4","tag5","tag6"]'],
          config: { custom: { wrapText: true, cellOptions: { type: TableCellDisplayMode.Pill } } },
        },
      ];
      const measurers = buildCellHeightMeasurers(fields, ctx);
      expect(measurers![0].estimate).toEqual(expect.any(Function));
      expect(measurers![0].estimate!('tag1,tag2', 100, fields[0], 0, 22)).toEqual(expect.any(Number));
      expect(measurers![0].measure).toEqual(expect.any(Function));
      expect(measurers![0].measure('tag1,tag2', 100, fields[0], 0, 22)).toEqual(expect.any(Number));
      expect(measurers![0].fieldIdxs).toEqual([0]);
    });

    it('sets up line counting for datalinks if present and wrapping is on', () => {
      const fields: Field[] = [
        {
          name: 'Links',
          type: FieldType.string,
          values: ['http://example.com/1', 'http://example.com/2'],
          config: { custom: { wrapText: true, cellOptions: { type: TableCellDisplayMode.DataLinks } } },
          getLinks: jest.fn((): LinkModel[] => [
            { title: 'Link 1', href: 'http://example.com/1', target: '_blank', origin: { datasourceUid: 'test' } },
            { title: 'Link 2', href: 'http://example.com/2', target: '_self', origin: { datasourceUid: 'test' } },
          ]),
        },
      ];
      const measurers = buildCellHeightMeasurers(fields, ctx);
      expect(measurers![0].measure).toEqual(expect.any(Function));
      expect(measurers![0].measure('http://example.com/1', 100, fields[0], 0, 22)).toEqual(expect.any(Number));
      expect(measurers![0].fieldIdxs).toEqual([0]);
    });

    it('does not enable text counting for non-string fields', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: {} } },
        { name: 'Age', type: FieldType.number, values: [], config: { custom: { wrapText: true } } },
      ];

      const measurers = buildCellHeightMeasurers(fields, ctx);
      // empty array - we had one column that indicated it wraps, but it was numeric, so we just ignore it
      expect(measurers).toBeUndefined();
    });

    it('returns an undefined if no columns are wrapped', () => {
      const fields: Field[] = [
        { name: 'Name', type: FieldType.string, values: [], config: { custom: {} } },
        { name: 'Age', type: FieldType.number, values: [], config: { custom: {} } },
      ];

      const measurers = buildCellHeightMeasurers(fields, ctx);
      expect(measurers).toBeUndefined();
    });

    it('clamps by maxHeight if set', () => {
      const fields: Field[] = [
        {
          name: 'Tags',
          type: FieldType.string,
          values: ['tag1,tag2', 'tag3', '["tag4","tag5","tag6"]'],
          config: { custom: { wrapText: true, cellOptions: { type: TableCellDisplayMode.Pill } } },
        },
      ];
      const measurers = buildCellHeightMeasurers(fields, ctx);
      expect(measurers![0].measure!(fields[0].values[2], 20, fields[0], 2, 100)).toBeGreaterThan(50);

      fields[0].config!.custom!.maxHeight = 50;
      const measurersWithMax = buildCellHeightMeasurers(fields, ctx, 50);
      expect(measurersWithMax![0].measure!(fields[0].values[2], 20, fields[0], 2, 100)).toBe(50);
    });
  });

  describe('getRowHeight', () => {
    let fields: Field[];
    let measurers: MeasureCellHeightEntry[];

    beforeEach(() => {
      fields = [
        {
          name: 'Name',
          type: FieldType.string,
          values: ['foo', 'bar', 'baz', 'longer one here', 'shorter'],
          config: { custom: { wrapText: true } },
        },
        {
          name: 'Age',
          type: FieldType.number,
          values: [1, 2, 3, 123456, 789122349932],
          config: { custom: { wrapText: true } },
        },
      ];
      measurers = [
        {
          measure: jest.fn(
            (value, _length, _field, _rowIdx, lineHeight) => String(value).split(' ').length * lineHeight
          ),
          fieldIdxs: [0],
        }, // Mocked to count words as lines
        {
          measure: jest.fn(
            (value, _length, _field, _rowIdx, lineHeight) => Math.ceil(String(value).length / 3) * lineHeight
          ),
          fieldIdxs: [1],
        }, // Mocked to return a line for every 3 digits of a number
      ];
    });

    it('should use the default height for single-line rows', () => {
      // 1 line @ 20px, 10px vertical padding = 30, minimum is 36
      expect(getRowHeight(fields, 0, [30, 30], 36, measurers, 20, 10)).toBe(36);
    });

    it('should use the default height for multi-line rows which are shorter than the default height', () => {
      // 3 lines @ 5px, 5px vertical padding = 20, minimum is 36
      expect(getRowHeight(fields, 3, [30, 30], 36, measurers, 5, 5)).toBe(36);
    });

    it('should return the row height using line measurers for multi-line', () => {
      // 3 lines @ 20px ('longer', 'one', 'here'), 10px vertical padding
      expect(getRowHeight(fields, 3, [30, 30], 36, measurers, 20, 10)).toBe(70);

      // 4 lines @ 15px (789 122 349 932), 15px vertical padding
      expect(getRowHeight(fields, 4, [30, 30], 36, measurers, 15, 15)).toBe(75);
    });

    it('should take colWidths into account when calculating max wrap cell', () => {
      getRowHeight(fields, 3, [50, 60], 36, measurers, 20, 10);
      expect(measurers[0].measure).toHaveBeenCalledWith('longer one here', 50, fields[0], 3, 20);
      expect(measurers[1].measure).toHaveBeenCalledWith(123456, 60, fields[1], 3, 20);
    });

    // this is used to calc wrapped header height
    it('should use the display name if the rowIdx is -1', () => {
      getRowHeight(fields, -1, [50, 60], 36, measurers, 20, 10);
      expect(measurers[0].measure).toHaveBeenCalledWith('Name', 50, fields[0], -1, 20);
      expect(measurers[1].measure).toHaveBeenCalledWith('Age', 60, fields[1], -1, 20);
    });

    it('should ignore columns which do not have measurers', () => {
      const height = getRowHeight(fields, 3, [30, 30], 36, [measurers[1]], 20, 10);
      // 2 lines @ 20px, 10px vertical padding (not 3 lines, since we don't line count Name)
      expect(height).toBe(50);
    });

    it('should return the default height if there are no measurers to apply', () => {
      const height = getRowHeight(fields, 3, [30, 30], 36, [], 20, 10);
      expect(height).toBe(36);
    });

    describe('estimations vs. precise counts', () => {
      beforeEach(() => {
        measurers = [
          {
            measure: jest.fn(
              (value, _length, _field, _rowIdx, lineHeight) => String(value).split(' ').length * lineHeight
            ),
            fieldIdxs: [0],
          }, // Mocked to count words as lines
          {
            measure: jest.fn(
              (value, _length, _field, _rowIdx, lineHeight) => Math.ceil(String(value).length / 3) * lineHeight
            ),
            estimate: jest.fn((value, _length, _field, _rowIdx, lineHeight) => String(value).length * lineHeight), // Mocked to return a line for every digits of a number
            fieldIdxs: [1],
          }, // Mocked to return a line for every 3 digits of a number
        ];
      });

      // 2 lines @ 20px (123,456), 10px vertical padding. when we did this before, 'longer one here' would win, making it 70px.
      // the `estimate` function is picking `123456` as the longer one now (6 lines), then the `measure` function is used
      // to calculate the height (2 lines). this is a very forced case, but we just want to prove that it actually works.
      it('uses the estimate value rather than the precise value to select the row height', () => {
        expect(getRowHeight(fields, 3, [30, 30], 36, measurers, 20, 10)).toBe(50);
      });

      it('returns doesnt bother getting the precise count if the estimates are all below the threshold', () => {
        jest.mocked(measurers[0].measure).mockReturnValue(SINGLE_LINE_ESTIMATE_THRESHOLD - 0.3);
        jest.mocked(measurers[1].estimate!).mockReturnValue(SINGLE_LINE_ESTIMATE_THRESHOLD - 0.1);

        expect(getRowHeight(fields, 3, [30, 30], 36, measurers, 20, 10)).toBe(36);

        // this is what we really care about - we want to save on performance by not calling the measure in this case.
        expect(measurers[1].measure).not.toHaveBeenCalled();
      });

      it('uses the precise count if the estimate is above the threshold, even if its below 1', () => {
        // NOTE: if this fails, just change the test to use a different value besides 1
        const thresholdOffset = 1;
        expect(SINGLE_LINE_ESTIMATE_THRESHOLD + thresholdOffset).toBeLessThan(TABLE.LINE_HEIGHT);

        jest.mocked(measurers[0].measure).mockReturnValue(SINGLE_LINE_ESTIMATE_THRESHOLD - thresholdOffset);
        jest.mocked(measurers[1].estimate!).mockReturnValue(SINGLE_LINE_ESTIMATE_THRESHOLD + thresholdOffset);

        expect(getRowHeight(fields, 3, [30, 30], 36, measurers, 20, 10)).toBe(50);
      });
    });
  });

  describe('computeColWidths', () => {
    it('returns the configured widths if all columns set them', () => {
      expect(
        computeColWidths(
          [
            { name: 'A', type: FieldType.string, values: [], config: { custom: { width: 100 } } },
            { name: 'B', type: FieldType.string, values: [], config: { custom: { width: 200 } } },
          ],
          500
        )
      ).toEqual([100, 200]);
    });

    it('fills the available space if a column has no width set', () => {
      expect(
        computeColWidths(
          [
            { name: 'A', type: FieldType.string, values: [], config: {} },
            { name: 'B', type: FieldType.string, values: [], config: { custom: { width: 200 } } },
          ],
          500
        )
      ).toEqual([300, 200]);
    });

    it('applies minimum width when auto width would dip below it', () => {
      expect(
        computeColWidths(
          [
            { name: 'A', type: FieldType.string, values: [], config: { custom: { minWidth: 100 } } },
            { name: 'B', type: FieldType.string, values: [], config: { custom: { minWidth: 100 } } },
          ],
          100
        )
      ).toEqual([100, 100]);
    });

    it('should use the global column default width when nothing is set', () => {
      expect(
        computeColWidths(
          [
            { name: 'A', type: FieldType.string, values: [], config: {} },
            { name: 'B', type: FieldType.string, values: [], config: {} },
          ],
          // we have two columns but have set the table to the width of one default column.
          COLUMN.DEFAULT_WIDTH
        )
      ).toEqual([COLUMN.DEFAULT_WIDTH, COLUMN.DEFAULT_WIDTH]);
    });
  });

  describe('displayJsonValue', () => {
    let field: Field;
    beforeEach(() => {
      field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        state: { displayName: 'Test Display Name' },
        values: [],
        display: (val: unknown) => ({ text: String(val), numeric: NaN }),
      };
    });

    it('should parse and then stringify string values', () => {
      expect(displayJsonValue(field)('{"valid": "json"}').text).toBe('{\n "valid": "json"\n}');
    });

    it('should not throw for non-serializable string values', () => {
      expect(displayJsonValue(field)('{"invalid": "json').text).toBe('{"invalid": "json');
    });

    it('should stringify non-string values', () => {
      expect(displayJsonValue(field)(42).text).toBe('42');
    });

    it('should use the underlying field.display method to format values and return numeric values', () => {
      field.display = (val: unknown) => ({ text: `**${val}**`, numeric: Number(val), suffix: 'ms' });
      expect(displayJsonValue(field)(42).text).toBe('**42**ms');
      expect(displayJsonValue(field)(42).numeric).toBe(42);
    });
  });

  describe('applySort', () => {
    it('sorts by nanos', () => {
      const frame = createDataFrame({
        fields: [
          { name: 'time', values: [1, 1, 2], nanos: [100, 99, 0] },
          { name: 'value', values: [10, 20, 30] },
        ],
      });

      const sortColumns: SortColumn[] = [{ columnKey: 'time', direction: 'ASC' }];

      const records = applySort(frameToRecords(frame), frame.fields, sortColumns);

      expect(records).toMatchObject([
        { time: 1, value: 20 },
        { time: 1, value: 10 },
        { time: 2, value: 30 },
      ]);
    });
  });

  describe('calculateFooterHeight', () => {
    it('should return 0 if no footer is present', () => {
      const frame = createDataFrame({
        fields: [
          { name: 'time', values: [1, 1, 2], nanos: [100, 99, 0] },
          { name: 'value', values: [10, 20, 30] },
        ],
      });

      expect(calculateFooterHeight(frame.fields)).toBe(0);
    });

    it('should return the height in pixels for the max reducers on a given field', () => {
      const frame = createDataFrame({
        fields: [
          {
            name: 'time',
            values: [1, 1, 2],
            nanos: [100, 99, 0],
            config: { custom: { footer: { reducers: ['min', 'max', 'count'] } } },
          },
          { name: 'value', values: [10, 20, 30], config: { custom: { footer: { reducers: ['min'] } } } },
        ],
      });

      expect(calculateFooterHeight(frame.fields)).toBe(78); // 3 reducers * 22px line height + 12px padding
    });
  });

  describe('getDisplayName', () => {
    it('should return the display name if set', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        state: { displayName: 'Test Display Name' },
        values: [],
      };
      expect(getDisplayName(field)).toBe('Test Display Name');
    });

    it('should return the field name if no display name is set', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        state: {},
        config: {},
        values: [],
      };
      expect(getDisplayName(field)).toBe('test');
    });
  });

  describe('predicateByName', () => {
    it('should return true for matching field names', () => {
      const field: Field = { name: 'test', type: FieldType.string, config: {}, values: [] };
      const predicate = predicateByName('test');
      expect(predicate(field)).toBe(true);
    });

    it('should return true for a matching display name', () => {
      const field: Field = {
        name: 'test',
        type: FieldType.string,
        config: {},
        state: { displayName: 'Test Display Name' },
        values: [],
      };
      const predicate = predicateByName('Test Display Name');
      expect(predicate(field)).toBe(true);
    });

    it('should return false for non-matching field names', () => {
      const field: Field = { name: 'test', type: FieldType.string, config: {}, values: [] };
      const predicate = predicateByName('other');
      expect(predicate(field)).toBe(false);
    });
  });

  describe('parseStyleJson', () => {
    it('parses the contents of the styleField for this row and returns a style object', () => {
      expect(parseStyleJson('{"color":"red"}')).toEqual({ color: 'red' });
    });

    it.each([
      { type: 'number', value: 12345 },
      { type: 'boolean', value: true },
      { type: 'null', value: null },
      { type: 'undefined', value: undefined },
      { type: 'object', value: { color: 'red' } },
      { type: 'array', value: ['not', 'a', 'string'] },
    ])('returns void if input is a $type', ({ value }) => {
      expect(parseStyleJson(value)).toBeUndefined();
    });

    it.each([
      { type: 'array', value: '["not","an","object"]' },
      { type: 'string', value: '"just a string"' },
      { type: 'number', value: '12345' },
      { type: 'boolean', value: 'true' },
      { type: 'null', value: 'null' },
    ])('returns void and does not throw if the parsed JSON is a $type', ({ value }) => {
      expect(parseStyleJson(value)).toBeUndefined();
    });

    it('returns void and does not throw if this is invalid JSON (but it does console.error)', () => {
      jest.spyOn(console, 'error').mockImplementation();
      expect(parseStyleJson('{"mal": "formed}')).toBeUndefined();
      expect(console.error).toHaveBeenCalled();
    });

    it('only calls console.error once for a given malformed style', () => {
      jest.spyOn(console, 'error').mockImplementation();
      for (let i = 0; i < 100; i++) {
        parseStyleJson('{"mal": "formed-in-a-new-way}');
      }
      expect(console.error).toHaveBeenCalledTimes(1);
    });

    it('returns an object with invalid style properties, because we do not validate the style properties', () => {
      expect(parseStyleJson('{"notARealStyle": "someValue"}')).toEqual({ notARealStyle: 'someValue' });
    });
  });
});