@instructure/ui-table 9.5.0 → 9.5.1-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.5.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v9.5.0...v9.5.1-snapshot-0) (2024-07-26)
+
+**Note:** Version bump only for package @instructure/ui-table
+
+
+
+
+
 # [9.5.0](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.5.0) (2024-07-26)
 
 **Note:** Version bump only for package @instructure/ui-table

package/es/Table/__new-tests__/Table.test.js

@@ -0,0 +1,219 @@
+var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _Table$Body2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Table } from '../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+describe('<Table />', async () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  const renderTable = props => render( /*#__PURE__*/React.createElement(Table, Object.assign({
+    caption: "Test table"
+  }, props), _Table$Head || (_Table$Head = /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+    id: "foo"
+  }, "ColHeader"), /*#__PURE__*/React.createElement(Table.ColHeader, {
+    id: "bar"
+  }, "Bar-header")))), _Table$Body || (_Table$Body = /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.RowHeader, null, "RowHeader"), /*#__PURE__*/React.createElement(Table.Cell, null, "Cell"))))));
+  it('should render a caption', async () => {
+    const _renderTable = renderTable(),
+      container = _renderTable.container;
+    const caption = container.querySelector('caption');
+    expect(caption).toBeInTheDocument();
+    expect(caption).toHaveTextContent('Test table');
+  });
+  it('should meet a11y standards', async () => {
+    const _renderTable2 = renderTable(),
+      container = _renderTable2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('applies a fixed column layout', async () => {
+    await renderTable({
+      layout: 'fixed'
+    });
+    const table = screen.getByRole('table');
+    expect(table).toHaveStyle({
+      tableLayout: 'fixed'
+    });
+  });
+  it('passes hover to table row', async () => {
+    renderTable({
+      hover: true
+    });
+    const tableRows = screen.getAllByRole('row');
+    tableRows.forEach(tableRow => {
+      expect(tableRow).not.toHaveAttribute('border-left', 'none');
+      expect(tableRow).not.toHaveAttribute('border-right', 'none');
+    });
+  });
+  it('sets the scope of column header to col', async () => {
+    await renderTable();
+    const columnHeaders = screen.getAllByRole('columnheader');
+    columnHeaders.forEach(columnHeader => {
+      expect(columnHeader).toHaveAttribute('scope', 'col');
+    });
+  });
+  it('sets the scope of row header to row', async () => {
+    renderTable();
+    const rowHeaders = screen.getAllByRole('rowheader');
+    rowHeaders.forEach(rowHeader => {
+      expect(rowHeader).toHaveAttribute('scope', 'row');
+    });
+  });
+  it('can render table in stacked layout', async () => {
+    renderTable({
+      layout: 'stacked'
+    });
+    const stackedTable = screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+    expect(stackedTable).toHaveTextContent('RowHeader');
+    expect(stackedTable).toHaveTextContent('Cell');
+    expect(stackedTable).not.toHaveTextContent('ColHeader');
+  });
+  it('can handle non-existent head in stacked layout', async () => {
+    render(_Table || (_Table = /*#__PURE__*/React.createElement(Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Body, null))));
+    const stackedTable = screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+  });
+  it('can handle empty head in stacked layout', async () => {
+    render(_Table2 || (_Table2 = /*#__PURE__*/React.createElement(Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Head, null))));
+    const stackedTable = screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+  });
+  it('can handle invalid header in stacked layout', async () => {
+    render(_Table3 || (_Table3 = /*#__PURE__*/React.createElement(Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"))))));
+    const stackedTable = screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+    expect(stackedTable).not.toHaveTextContent('Foo');
+  });
+  describe('when table is sortable', async () => {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render( /*#__PURE__*/React.createElement(Table, {
+      caption: "Sortable table",
+      layout: layout
+    }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, Object.assign({
+      id: "foo"
+    }, props, handlers), "Foo"), /*#__PURE__*/React.createElement(Table.ColHeader, Object.assign({
+      id: "bar"
+    }, handlers), "Bar"))), _Table$Body2 || (_Table$Body2 = /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null), /*#__PURE__*/React.createElement(Table.Row, null)))));
+    it('can render up arrow for ascending order', async () => {
+      const _renderSortableTable = renderSortableTable({
+          id: 'id',
+          sortDirection: 'ascending'
+        }),
+        container = _renderSortableTable.container;
+      const arrow = container.querySelector('svg');
+      expect(arrow).toHaveAttribute('name', 'IconMiniArrowUp');
+    });
+    it('can render down arrow for descending order', async () => {
+      const _renderSortableTable2 = renderSortableTable({
+          id: 'id',
+          sortDirection: 'descending'
+        }),
+        container = _renderSortableTable2.container;
+      const arrow = container.querySelector('svg');
+      expect(arrow).toHaveAttribute('name', 'IconMiniArrowDown');
+    });
+    it('calls onRequestSort when column header is clicked', async () => {
+      const onRequestSort = vi.fn();
+      renderSortableTable({
+        id: 'id'
+      }, {
+        onRequestSort
+      });
+      const button = screen.getByRole('button', {
+        name: 'Foo'
+      });
+      userEvent.click(button);
+      await waitFor(() => {
+        expect(onRequestSort).toHaveBeenCalledTimes(1);
+      });
+    });
+    it('can display custom label in the select in stacked layout', async () => {
+      renderSortableTable({
+        id: 'id',
+        stackedSortByLabel: 'Custom Text'
+      }, {
+        onRequestSort: vi.fn()
+      }, 'stacked');
+      const input = screen.getByRole('combobox');
+      userEvent.click(input);
+      await waitFor(async () => {
+        const options = screen.getAllByRole('option');
+        expect(options[0]).toHaveTextContent('Custom Text');
+        expect(options[1]).toHaveTextContent('bar');
+      });
+    });
+    it('can render check mark for sorted column in stacked layout', async () => {
+      const _renderSortableTable3 = renderSortableTable({
+          id: 'id',
+          sortDirection: 'ascending'
+        }, {
+          onRequestSort: vi.fn()
+        }, 'stacked'),
+        container = _renderSortableTable3.container;
+      const icon = container.querySelector('svg');
+      expect(icon).toHaveAttribute('name', 'IconCheck');
+    });
+    it('creates proper aria-sort attributes (ascending)', async () => {
+      renderSortableTable({
+        id: 'id',
+        sortDirection: 'ascending'
+      });
+      const header = screen.getByRole('columnheader', {
+        name: 'Foo'
+      });
+      expect(header).toHaveAttribute('aria-sort', 'ascending');
+    });
+    it('creates proper aria-sort attributes (descending)', async () => {
+      renderSortableTable({
+        id: 'id',
+        sortDirection: 'descending'
+      });
+      const header = screen.getByRole('columnheader', {
+        name: 'Foo'
+      });
+      expect(header).toHaveAttribute('aria-sort', 'descending');
+    });
+  });
+});

package/lib/Table/__new-tests__/Table.test.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _userEvent = require("@testing-library/user-event");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _Table$Body2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Table />', async () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  const renderTable = props => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, Object.assign({
+    caption: "Test table"
+  }, props), _Table$Head || (_Table$Head = /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
+    id: "foo"
+  }, "ColHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
+    id: "bar"
+  }, "Bar-header")))), _Table$Body || (_Table$Body = /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.RowHeader, null, "RowHeader"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Cell"))))));
+  it('should render a caption', async () => {
+    const _renderTable = renderTable(),
+      container = _renderTable.container;
+    const caption = container.querySelector('caption');
+    expect(caption).toBeInTheDocument();
+    expect(caption).toHaveTextContent('Test table');
+  });
+  it('should meet a11y standards', async () => {
+    const _renderTable2 = renderTable(),
+      container = _renderTable2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('applies a fixed column layout', async () => {
+    await renderTable({
+      layout: 'fixed'
+    });
+    const table = _react2.screen.getByRole('table');
+    expect(table).toHaveStyle({
+      tableLayout: 'fixed'
+    });
+  });
+  it('passes hover to table row', async () => {
+    renderTable({
+      hover: true
+    });
+    const tableRows = _react2.screen.getAllByRole('row');
+    tableRows.forEach(tableRow => {
+      expect(tableRow).not.toHaveAttribute('border-left', 'none');
+      expect(tableRow).not.toHaveAttribute('border-right', 'none');
+    });
+  });
+  it('sets the scope of column header to col', async () => {
+    await renderTable();
+    const columnHeaders = _react2.screen.getAllByRole('columnheader');
+    columnHeaders.forEach(columnHeader => {
+      expect(columnHeader).toHaveAttribute('scope', 'col');
+    });
+  });
+  it('sets the scope of row header to row', async () => {
+    renderTable();
+    const rowHeaders = _react2.screen.getAllByRole('rowheader');
+    rowHeaders.forEach(rowHeader => {
+      expect(rowHeader).toHaveAttribute('scope', 'row');
+    });
+  });
+  it('can render table in stacked layout', async () => {
+    renderTable({
+      layout: 'stacked'
+    });
+    const stackedTable = _react2.screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+    expect(stackedTable).toHaveTextContent('RowHeader');
+    expect(stackedTable).toHaveTextContent('Cell');
+    expect(stackedTable).not.toHaveTextContent('ColHeader');
+  });
+  it('can handle non-existent head in stacked layout', async () => {
+    (0, _react2.render)(_Table || (_Table = /*#__PURE__*/_react.default.createElement(_index.Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Body, null))));
+    const stackedTable = _react2.screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+  });
+  it('can handle empty head in stacked layout', async () => {
+    (0, _react2.render)(_Table2 || (_Table2 = /*#__PURE__*/_react.default.createElement(_index.Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null))));
+    const stackedTable = _react2.screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+  });
+  it('can handle invalid header in stacked layout', async () => {
+    (0, _react2.render)(_Table3 || (_Table3 = /*#__PURE__*/_react.default.createElement(_index.Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))))));
+    const stackedTable = _react2.screen.getByRole('table');
+    expect(stackedTable).toBeInTheDocument();
+    expect(stackedTable).not.toHaveTextContent('Foo');
+  });
+  describe('when table is sortable', async () => {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+      caption: "Sortable table",
+      layout: layout
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
+      id: "foo"
+    }, props, handlers), "Foo"), /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
+      id: "bar"
+    }, handlers), "Bar"))), _Table$Body2 || (_Table$Body2 = /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null), /*#__PURE__*/_react.default.createElement(_index.Table.Row, null)))));
+    it('can render up arrow for ascending order', async () => {
+      const _renderSortableTable = renderSortableTable({
+          id: 'id',
+          sortDirection: 'ascending'
+        }),
+        container = _renderSortableTable.container;
+      const arrow = container.querySelector('svg');
+      expect(arrow).toHaveAttribute('name', 'IconMiniArrowUp');
+    });
+    it('can render down arrow for descending order', async () => {
+      const _renderSortableTable2 = renderSortableTable({
+          id: 'id',
+          sortDirection: 'descending'
+        }),
+        container = _renderSortableTable2.container;
+      const arrow = container.querySelector('svg');
+      expect(arrow).toHaveAttribute('name', 'IconMiniArrowDown');
+    });
+    it('calls onRequestSort when column header is clicked', async () => {
+      const onRequestSort = _vitest.vi.fn();
+      renderSortableTable({
+        id: 'id'
+      }, {
+        onRequestSort
+      });
+      const button = _react2.screen.getByRole('button', {
+        name: 'Foo'
+      });
+      _userEvent.userEvent.click(button);
+      await (0, _react2.waitFor)(() => {
+        expect(onRequestSort).toHaveBeenCalledTimes(1);
+      });
+    });
+    it('can display custom label in the select in stacked layout', async () => {
+      renderSortableTable({
+        id: 'id',
+        stackedSortByLabel: 'Custom Text'
+      }, {
+        onRequestSort: _vitest.vi.fn()
+      }, 'stacked');
+      const input = _react2.screen.getByRole('combobox');
+      _userEvent.userEvent.click(input);
+      await (0, _react2.waitFor)(async () => {
+        const options = _react2.screen.getAllByRole('option');
+        expect(options[0]).toHaveTextContent('Custom Text');
+        expect(options[1]).toHaveTextContent('bar');
+      });
+    });
+    it('can render check mark for sorted column in stacked layout', async () => {
+      const _renderSortableTable3 = renderSortableTable({
+          id: 'id',
+          sortDirection: 'ascending'
+        }, {
+          onRequestSort: _vitest.vi.fn()
+        }, 'stacked'),
+        container = _renderSortableTable3.container;
+      const icon = container.querySelector('svg');
+      expect(icon).toHaveAttribute('name', 'IconCheck');
+    });
+    it('creates proper aria-sort attributes (ascending)', async () => {
+      renderSortableTable({
+        id: 'id',
+        sortDirection: 'ascending'
+      });
+      const header = _react2.screen.getByRole('columnheader', {
+        name: 'Foo'
+      });
+      expect(header).toHaveAttribute('aria-sort', 'ascending');
+    });
+    it('creates proper aria-sort attributes (descending)', async () => {
+      renderSortableTable({
+        id: 'id',
+        sortDirection: 'descending'
+      });
+      const header = _react2.screen.getByRole('columnheader', {
+        name: 'Foo'
+      });
+      expect(header).toHaveAttribute('aria-sort', 'descending');
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "9.5.0",
+  "version": "9.5.1-snapshot-0",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.5.0",
-    "@instructure/ui-color-utils": "9.5.0",
-    "@instructure/ui-test-utils": "9.5.0",
-    "@instructure/ui-themes": "9.5.0"
+    "@instructure/ui-axe-check": "9.5.1-snapshot-0",
+    "@instructure/ui-babel-preset": "9.5.1-snapshot-0",
+    "@instructure/ui-color-utils": "9.5.1-snapshot-0",
+    "@instructure/ui-test-utils": "9.5.1-snapshot-0",
+    "@instructure/ui-themes": "9.5.1-snapshot-0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^2.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.5.0",
-    "@instructure/emotion": "9.5.0",
-    "@instructure/shared-types": "9.5.0",
-    "@instructure/ui-a11y-content": "9.5.0",
-    "@instructure/ui-icons": "9.5.0",
-    "@instructure/ui-prop-types": "9.5.0",
-    "@instructure/ui-react-utils": "9.5.0",
-    "@instructure/ui-simple-select": "9.5.0",
-    "@instructure/ui-testable": "9.5.0",
-    "@instructure/ui-utils": "9.5.0",
-    "@instructure/ui-view": "9.5.0",
+    "@instructure/console": "9.5.1-snapshot-0",
+    "@instructure/emotion": "9.5.1-snapshot-0",
+    "@instructure/shared-types": "9.5.1-snapshot-0",
+    "@instructure/ui-a11y-content": "9.5.1-snapshot-0",
+    "@instructure/ui-icons": "9.5.1-snapshot-0",
+    "@instructure/ui-prop-types": "9.5.1-snapshot-0",
+    "@instructure/ui-react-utils": "9.5.1-snapshot-0",
+    "@instructure/ui-simple-select": "9.5.1-snapshot-0",
+    "@instructure/ui-testable": "9.5.1-snapshot-0",
+    "@instructure/ui-utils": "9.5.1-snapshot-0",
+    "@instructure/ui-view": "9.5.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {