diff --git a/cypress/component/Table.cy.tsx b/cypress/component/Table.cy.tsx new file mode 100644 index 0000000000..9991e6ae99 --- /dev/null +++ b/cypress/component/Table.cy.tsx @@ -0,0 +1,60 @@ +/* + * 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 '../support/component' +import 'cypress-real-events' + +import { Table } from '../../packages/ui' + +describe('', () => + it('can render table head as a combobox when in stacked layout', async () => { + const sortFoo = cy.stub() + cy.mount( +
+ + + + Foo + + + Bar + + + + + + + +
+ ) + + const input = cy.get('input[role="combobox"]') + + input.click() + + cy.get('[role="option"]').first().click() + + cy.wrap(sortFoo).should('have.been.calledOnce') + })) diff --git a/package-lock.json b/package-lock.json index 387d5ed6f5..2a2dd41f26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47725,15 +47725,477 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "9.3.0", "@instructure/ui-babel-preset": "9.3.0", "@instructure/ui-color-utils": "9.3.0", "@instructure/ui-test-utils": "9.3.0", - "@instructure/ui-themes": "9.3.0" + "@instructure/ui-themes": "9.3.0", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.5.2", + "vitest": "^1.6.0" }, "peerDependencies": { "react": ">=16.8 <=18" } }, + "packages/ui-table/node_modules/@testing-library/dom": { + "version": "10.3.2", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.2.tgz", + "integrity": "sha512-0bxIdP9mmPiOJ6wHLj8bdJRq+51oddObeCGdEf6PNEhYd93ZYAN+lPRnEOVFtheVwDM7+p+tza3LAQgp0PTudg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "packages/ui-table/node_modules/@testing-library/react": { + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.7.tgz", + "integrity": "sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^10.0.0", + "@types/react-dom": "^18.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/react": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "packages/ui-table/node_modules/@vitest/expect": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz", + "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==", + "dev": true, + "dependencies": { + "@vitest/spy": "1.6.0", + "@vitest/utils": "1.6.0", + "chai": "^4.3.10" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "packages/ui-table/node_modules/@vitest/runner": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz", + "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==", + "dev": true, + "dependencies": { + "@vitest/utils": "1.6.0", + "p-limit": "^5.0.0", + "pathe": "^1.1.1" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "packages/ui-table/node_modules/@vitest/snapshot": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz", + "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==", + "dev": true, + "dependencies": { + "magic-string": "^0.30.5", + "pathe": "^1.1.1", + "pretty-format": "^29.7.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "packages/ui-table/node_modules/@vitest/snapshot/node_modules/pretty-format": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", + "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==", + "dev": true, + "dependencies": { + "@jest/schemas": "^29.6.3", + "ansi-styles": "^5.0.0", + "react-is": "^18.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "packages/ui-table/node_modules/@vitest/spy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz", + "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==", + "dev": true, + "dependencies": { + "tinyspy": "^2.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "packages/ui-table/node_modules/@vitest/utils": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz", + "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==", + "dev": true, + "dependencies": { + "diff-sequences": "^29.6.3", + "estree-walker": "^3.0.3", + "loupe": "^2.3.7", + "pretty-format": "^29.7.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "packages/ui-table/node_modules/@vitest/utils/node_modules/pretty-format": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", + "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==", + "dev": true, + "dependencies": { + "@jest/schemas": "^29.6.3", + "ansi-styles": "^5.0.0", + "react-is": "^18.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "packages/ui-table/node_modules/acorn": { + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "packages/ui-table/node_modules/acorn-walk": { + "version": "8.3.3", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz", + "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==", + "dev": true, + "dependencies": { + "acorn": "^8.11.0" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "packages/ui-table/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "packages/ui-table/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "packages/ui-table/node_modules/execa": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz", + "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.3", + "get-stream": "^8.0.1", + "human-signals": "^5.0.0", + "is-stream": "^3.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^5.1.0", + "onetime": "^6.0.0", + "signal-exit": "^4.1.0", + "strip-final-newline": "^3.0.0" + }, + "engines": { + "node": ">=16.17" + }, + "funding": { + "url": "https://github.com/sindresorhus/execa?sponsor=1" + } + }, + "packages/ui-table/node_modules/get-stream": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", + "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==", + "dev": true, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/human-signals": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz", + "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==", + "dev": true, + "engines": { + "node": ">=16.17.0" + } + }, + "packages/ui-table/node_modules/is-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz", + "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/mimic-fn": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", + "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/npm-run-path": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", + "dev": true, + "dependencies": { + "path-key": "^4.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/onetime": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz", + "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==", + "dev": true, + "dependencies": { + "mimic-fn": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/p-limit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz", + "integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==", + "dev": true, + "dependencies": { + "yocto-queue": "^1.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/path-key": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz", + "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "dev": true + }, + "packages/ui-table/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/ui-table/node_modules/strip-final-newline": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz", + "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "packages/ui-table/node_modules/tinypool": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz", + "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==", + "dev": true, + "engines": { + "node": ">=14.0.0" + } + }, + "packages/ui-table/node_modules/tinyspy": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz", + "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==", + "dev": true, + "engines": { + "node": ">=14.0.0" + } + }, + "packages/ui-table/node_modules/vite-node": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz", + "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==", + "dev": true, + "dependencies": { + "cac": "^6.7.14", + "debug": "^4.3.4", + "pathe": "^1.1.1", + "picocolors": "^1.0.0", + "vite": "^5.0.0" + }, + "bin": { + "vite-node": "vite-node.mjs" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "packages/ui-table/node_modules/vitest": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz", + "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==", + "dev": true, + "dependencies": { + "@vitest/expect": "1.6.0", + "@vitest/runner": "1.6.0", + "@vitest/snapshot": "1.6.0", + "@vitest/spy": "1.6.0", + "@vitest/utils": "1.6.0", + "acorn-walk": "^8.3.2", + "chai": "^4.3.10", + "debug": "^4.3.4", + "execa": "^8.0.1", + "local-pkg": "^0.5.0", + "magic-string": "^0.30.5", + "pathe": "^1.1.1", + "picocolors": "^1.0.0", + "std-env": "^3.5.0", + "strip-literal": "^2.0.0", + "tinybench": "^2.5.1", + "tinypool": "^0.8.3", + "vite": "^5.0.0", + "vite-node": "1.6.0", + "why-is-node-running": "^2.2.2" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@types/node": "^18.0.0 || >=20.0.0", + "@vitest/browser": "1.6.0", + "@vitest/ui": "1.6.0", + "happy-dom": "*", + "jsdom": "*" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@vitest/browser": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + } + } + }, + "packages/ui-table/node_modules/yocto-queue": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz", + "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==", + "dev": true, + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "packages/ui-tabs": { "name": "@instructure/ui-tabs", "version": "9.3.0", diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json index 9630e80969..038a1f7cfd 100644 --- a/packages/ui-table/package.json +++ b/packages/ui-table/package.json @@ -23,10 +23,15 @@ }, "license": "MIT", "devDependencies": { + "@instructure/ui-axe-check": "9.3.0", "@instructure/ui-babel-preset": "9.3.0", "@instructure/ui-color-utils": "9.3.0", "@instructure/ui-test-utils": "9.3.0", - "@instructure/ui-themes": "9.3.0" + "@instructure/ui-themes": "9.3.0", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.5.2", + "vitest": "^1.6.0" }, "dependencies": { "@babel/runtime": "^7.24.5", diff --git a/packages/ui-table/src/Table/__tests__/Table.test.tsx b/packages/ui-table/src/Table/__new-tests__/Table.test.tsx similarity index 54% rename from packages/ui-table/src/Table/__tests__/Table.test.tsx rename to packages/ui-table/src/Table/__new-tests__/Table.test.tsx index b99bb2f3ff..799c2bab27 100644 --- a/packages/ui-table/src/Table/__tests__/Table.test.tsx +++ b/packages/ui-table/src/Table/__new-tests__/Table.test.tsx @@ -23,113 +23,136 @@ */ import React from 'react' -import { expect, mount, stub, find, within } from '@instructure/ui-test-utils' -//TODO -/* eslint-disable no-restricted-imports */ -// @ts-ignore: Cannot find module -import { SimpleSelectLocator } from '@instructure/ui-simple-select/es/SimpleSelect/SimpleSelectLocator' +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 type { TableProps } from '../props' import type { TableColHeaderProps } from '../ColHeader/props' +import { runAxeCheck } from '@instructure/ui-axe-check' + describe('', async () => { - const render = (props?: TableProps) => - mount( + let consoleErrorMock: any + + beforeEach(() => { + // Mocking console to prevent test output pollution + consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {}) + }) + + afterEach(() => { + consoleErrorMock.mockRestore() + }) + + const renderTable = (props?: TableProps) => + render(
- Foo - Bar + ColHeader + Bar-header - foo - bar + RowHeader + Cell
) it('should render a caption', async () => { - await render() - const table = await find('table') + const { container } = renderTable() + const caption = container.querySelector('caption') - expect(await table.find('caption:contains(Test table)')).to.exist() + expect(caption).toBeInTheDocument() + expect(caption).toHaveTextContent('Test table') }) it('should meet a11y standards', async () => { - await render() - const table = await find('table') - expect(await table.accessible()).to.be.true() + const { container } = renderTable() + const axeCheck = await runAxeCheck(container) + + expect(axeCheck).toBe(true) }) it('applies a fixed column layout', async () => { - await render({ + await renderTable({ layout: 'fixed' }) - const table = await find('table') - const tableNode = within(table.getDOMNode()) + const table = screen.getByRole('table') - expect(tableNode.getComputedStyle().tableLayout).to.equal('fixed') + expect(table).toHaveStyle({ tableLayout: 'fixed' }) }) it('passes hover to table row', async () => { - await render({ + renderTable({ hover: true }) - const tr = await find('tbody tr') - const trNode = within(tr.getDOMNode()) + const tableRows = screen.getAllByRole('row') - expect(trNode.getComputedStyle().borderLeftStyle).to.not.equal('none') - expect(trNode.getComputedStyle().borderRightStyle).to.not.equal('none') + 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 render() - const th = await find('thead th') - const thNode = within(th.getDOMNode()) + await renderTable() + const columnHeaders = screen.getAllByRole('columnheader') - expect(thNode.getAttribute('scope')).to.equal('col') + columnHeaders.forEach((columnHeader) => { + expect(columnHeader).toHaveAttribute('scope', 'col') + }) }) it('sets the scope of row header to row', async () => { - await render() - const th = await find('tbody th') - const thNode = within(th.getDOMNode()) + renderTable() + const rowHeaders = screen.getAllByRole('rowheader') - expect(thNode.getAttribute('scope')).to.equal('row') + rowHeaders.forEach((rowHeader) => { + expect(rowHeader).toHaveAttribute('scope', 'row') + }) }) it('can render table in stacked layout', async () => { - const stackedTable = await render({ + renderTable({ layout: 'stacked' }) + const stackedTable = screen.getByRole('table') - expect(stackedTable).to.exist() + 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 () => { - const stackedTable = await mount( + render(
) + const stackedTable = screen.getByRole('table') - expect(stackedTable).to.exist() + expect(stackedTable).toBeInTheDocument() }) it('can handle empty head in stacked layout', async () => { - const stackedTable = await mount( + render(
) + const stackedTable = screen.getByRole('table') - expect(stackedTable).to.exist() + expect(stackedTable).toBeInTheDocument() }) it('can handle invalid header in stacked layout', async () => { - const stackedTable = await mount( + render( @@ -138,8 +161,10 @@ describe('
', async () => {
) + const stackedTable = screen.getByRole('table') - expect(stackedTable).to.exist() + expect(stackedTable).toBeInTheDocument() + expect(stackedTable).not.toHaveTextContent('Foo') }) describe('when table is sortable', async () => { @@ -148,7 +173,7 @@ describe('', async () => { handlers = {}, layout: TableProps['layout'] = 'auto' ) => - mount( + render(
@@ -168,29 +193,28 @@ describe('
', async () => { ) it('can render up arrow for ascending order', async () => { - await renderSortableTable({ + const { container } = renderSortableTable({ id: 'id', sortDirection: 'ascending' }) - const arrow = await find('svg[name="IconMiniArrowUp"]') + const arrow = container.querySelector('svg') - expect(arrow).to.exist() + expect(arrow).toHaveAttribute('name', 'IconMiniArrowUp') }) it('can render down arrow for descending order', async () => { - await renderSortableTable({ + const { container } = renderSortableTable({ id: 'id', sortDirection: 'descending' }) - const arrow = await find('svg[name="IconMiniArrowDown"]') + const arrow = container.querySelector('svg') - expect(arrow).to.exist() + expect(arrow).toHaveAttribute('name', 'IconMiniArrowDown') }) it('calls onRequestSort when column header is clicked', async () => { - const onRequestSort = stub() - - await renderSortableTable( + const onRequestSort = vi.fn() + renderSortableTable( { id: 'id' }, @@ -198,95 +222,72 @@ describe('
', async () => { onRequestSort } ) - const button = await find('th button') - - await button.click() - expect(onRequestSort).to.have.been.calledOnce() - }) - - it('can render table head as a combobox when in stacked layout', async () => { - const sortFoo = stub() - - await renderSortableTable( - { - id: 'id' - }, - { - onRequestSort: sortFoo - }, - 'stacked' - ) - const select = await SimpleSelectLocator.find() - const input = await select.findInput() + const button = screen.getByRole('button', { name: 'Foo' }) - await input.click() + userEvent.click(button) - const list = await select.findOptionsList() - const options = await list.findAll('[role="option"]') - - await options[1].click() - expect(sortFoo).to.have.been.calledOnce() + await waitFor(() => { + expect(onRequestSort).toHaveBeenCalledTimes(1) + }) }) it('can display custom label in the select in stacked layout', async () => { - await renderSortableTable( + renderSortableTable( { id: 'id', stackedSortByLabel: 'Custom Text' }, { - onRequestSort: stub() + onRequestSort: vi.fn() }, 'stacked' ) - const select = await SimpleSelectLocator.find() - const input = await select.findInput() + const input = screen.getByRole('combobox') - await input.click() + userEvent.click(input) - const list = await select.findOptionsList() - const options = await list.findAll('[role="option"]') + await waitFor(async () => { + const options = screen.getAllByRole('option') - // with stackedSortByLabel provided - expect(options[0].text()).to.equal('Custom Text') - // the id by default - expect(options[1].text()).to.equal('bar') + expect(options[0]).toHaveTextContent('Custom Text') + expect(options[1]).toHaveTextContent('bar') + }) }) it('can render check mark for sorted column in stacked layout', async () => { - await renderSortableTable( + const { container } = renderSortableTable( { id: 'id', sortDirection: 'ascending' }, { - onRequestSort: stub() + onRequestSort: vi.fn() }, 'stacked' ) - const icon = await find('svg[name="IconCheck"]') + const icon = container.querySelector('svg') - expect(icon).to.exist() + expect(icon).toHaveAttribute('name', 'IconCheck') }) it('creates proper aria-sort attributes (ascending)', async () => { - await renderSortableTable({ + renderSortableTable({ id: 'id', sortDirection: 'ascending' }) - const sortedHeader = await find('th[aria-sort="ascending"]') + const header = screen.getByRole('columnheader', { name: 'Foo' }) - expect(sortedHeader).to.exist() + expect(header).toHaveAttribute('aria-sort', 'ascending') }) it('creates proper aria-sort attributes (descending)', async () => { - await renderSortableTable({ + renderSortableTable({ id: 'id', sortDirection: 'descending' }) - const sortedHeader = await find('th[aria-sort="descending"]') + const header = screen.getByRole('columnheader', { name: 'Foo' }) - expect(sortedHeader).to.exist() + expect(header).toHaveAttribute('aria-sort', 'descending') }) }) }) diff --git a/packages/ui-table/tsconfig.build.json b/packages/ui-table/tsconfig.build.json index 0ffd8f3545..795ebf6e1b 100644 --- a/packages/ui-table/tsconfig.build.json +++ b/packages/ui-table/tsconfig.build.json @@ -7,6 +7,7 @@ }, "include": ["src"], "references": [ + { "path": "../ui-axe-check/tsconfig.build.json" }, { "path": "../ui-babel-preset/tsconfig.build.json" }, { "path": "../ui-color-utils/tsconfig.build.json" }, { "path": "../ui-test-utils/tsconfig.build.json" },