Repository: adobe/react-spectrum
File: packages/@react-aria/table/test/tableResizingTests.tsx (TypeScript)

Code before:
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83', weight: '220lbs', height: '6\'7"'},
  {id: 4, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'},
  {id: 5, name: 'Charizard', type: 'Fire, Flying', level: '67', weight: '200lbs', height: '5\'7"'},
  {id: 6, name: 'Blastoise', type: 'Water', level: '56', weight: '188lbs', height: '5\'3"'},
  {id: 7, name: 'Venusaur', type: 'Grass, Poison', level: '83', weight: '220lbs', height: '6\'7"'},
  {id: 8, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'},
  {id: 9, name: 'Charizard', type: 'Fire, Flying', level: '67', weight: '200lbs', height: '5\'7"'},
  {id: 10, name: 'Blastoise', type: 'Water', level: '56', weight: '188lbs', height: '5\'3"'},
  {id: 11, name: 'Venusaur', type: 'Grass, Poison', level: '83', weight: '220lbs', height: '6\'7"'},
  {id: 12, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'}
];

function getColumnWidths(tree) {
  let rows = tree.getAllByRole('row') as HTMLElement[];
  return Array.from(rows[0].childNodes).map((cell: HTMLElement) => Number(cell.style.width.replace('px', '')));
}

export let resizingTests = (render, rerender, Table, ControlledTable, resizeCol, resizeTable) => {
// assumption with all these tests
// 1. the controlling values we pass in aren't actually controlling
// the sizes, they are instead more like the default values that the controlling logic uses
// 2. defaultWidth function and minDefaultWidth passed must be the same in any implementation using
// these tests, or the values will be wrong, if those functions were exposed we could generalize, but seems like a lot just for testing
// TODO: many of the resizing tests fail if we provide an infinite content size to ScrollView because they operate off of percentages for column widths
// resulting in NaN or Infinity
  describe.skip('Resizing', () => {
    installPointerEvent();
    let clientWidth, clientHeight;
    let onResize;

    beforeEach(function () {
      clientWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 900);
      clientHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
      jest.useFakeTimers();
      onResize = jest.fn();
    });

    afterEach(function () {
      act(() => {
        jest.runAllTimers();
      });
      clientWidth.mockReset();
      clientHeight.mockReset();
      onResize.mockReset();
      onResize = null;
    });

    describe.each`
      allowsResizing
      ${undefined}
      ${true}

Review comment (suggestion):
A bit unfortunate that providing percent widths make the TableView break in the tests, trying to find a better around this. Might need to just enforce that users mock the width of the scrollview in this case

Code after:
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83', weight: '220lbs', height: '6\'7"'},
  {id: 4, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'},
  {id: 5, name: 'Charizard', type: 'Fire, Flying', level: '67', weight: '200lbs', height: '5\'7"'},
  {id: 6, name: 'Blastoise', type: 'Water', level: '56', weight: '188lbs', height: '5\'3"'},
  {id: 7, name: 'Venusaur', type: 'Grass, Poison', level: '83', weight: '220lbs', height: '6\'7"'},
  {id: 8, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'},
  {id: 9, name: 'Charizard', type: 'Fire, Flying', level: '67', weight: '200lbs', height: '5\'7"'},
  {id: 10, name: 'Blastoise', type: 'Water', level: '56', weight: '188lbs', height: '5\'3"'},
  {id: 11, name: 'Venusaur', type: 'Grass, Poison', level: '83', weight: '220lbs', height: '6\'7"'},
  {id: 12, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'}
];

function getColumnWidths(tree) {
  let rows = tree.getAllByRole('row') as HTMLElement[];
  return Array.from(rows[0].childNodes).map((cell: HTMLElement) => Number(cell.style.width.replace('px', '')));
}

export let resizingTests = (render, rerender, Table, ControlledTable, resizeCol, resizeTable) => {
// assumption with all these tests
// 1. the controlling values we pass in aren't actually controlling
// the sizes, they are instead more like the default values that the controlling logic uses
// 2. defaultWidth function and minDefaultWidth passed must be the same in any implementation using
// these tests, or the values will be wrong, if those functions were exposed we could generalize, but seems like a lot just for testing
  describe('Resizing', () => {
    installPointerEvent();
    let clientWidth, clientHeight;
    let onResize;

    beforeEach(function () {
      clientWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 900);
      clientHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
      jest.useFakeTimers();
      onResize = jest.fn();
    });

    afterEach(function () {
      act(() => {
        jest.runAllTimers();
      });
      clientWidth.mockReset();
      clientHeight.mockReset();
      onResize.mockReset();
      onResize = null;
    });

    describe.each`
      allowsResizing
      ${undefined}
      ${true}
    `('initial column sizes allowsResizing=$allowsResizing', ({allowsResizing}) => {
      it('should handle no value if table was written with default widths', () => {