Configure testing env, write tests for all components, fix surfaced errors, run in CI#478
Configure testing env, write tests for all components, fix surfaced errors, run in CI#478aurorascharff merged 16 commits intomainfrom
Conversation
|
Please set a versioning label of either |
There was a problem hiding this comment.
Pull request overview
This PR introduces a full unit-testing setup for the packages/react component library (Vitest + Testing Library), adds a large suite of component tests, wires tests into CI, and includes a handful of small component fixes surfaced by testing.
Changes:
- Add Vitest configuration/setup, scripts, and dependencies for
packages/react(jsdom + coverage). - Add unit tests for a broad set of React components/utilities under
packages/react/src/**/tests. - Update CI workflow, repo docs, and templates to incorporate/require unit tests; apply small component fixes (e.g., icon + ref forwarding + textarea value handling).
Reviewed changes
Copilot reviewed 47 out of 50 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
types.d.ts |
Adds global jest-dom type reference for matcher typings. |
pull_request_template.md |
Adds checklist item requiring unit tests for new components. |
packages/react/vitest.setup.ts |
Adds Vitest setup (jest-dom matchers, cleanup, console warning suppression). |
packages/react/vitest.config.ts |
Adds Vitest config (jsdom, setupFiles, coverage config). |
packages/react/tsconfig.json |
Adds Vitest/jest-dom types to TS compiler options. |
packages/react/src/utils/tests/MdClickOutsideWrapper.test.tsx |
Adds unit tests for click-outside behavior + ref/props forwarding. |
packages/react/src/tooltip/tests/MdTooltip.test.tsx |
Adds unit tests for tooltip rendering, modes, props, a11y. |
packages/react/src/toggle/tests/MdToggle.test.tsx |
Adds unit tests for toggle rendering, interactions, a11y, props. |
packages/react/src/tiles/tests/MdTileVertical.test.tsx |
Adds unit tests for vertical tile rendering, states, interactions, asChild. |
packages/react/src/tiles/tests/MdTile.test.tsx |
Adds unit tests for tile modes/themes/states and asChild behavior. |
packages/react/src/tag/tests/MdTag.test.tsx |
Adds unit tests for tag themes/types/icons and tooltip-only behavior. |
packages/react/src/tabs/tests/MdTabs.test.tsx |
Adds unit tests for tabs rendering, initialTab, interaction, a11y. |
packages/react/src/tabs/tests/MdTab.test.tsx |
Adds unit tests for MdTab child rendering and prop acceptance. |
packages/react/src/stepper/tests/MdStepper.test.tsx |
Adds unit tests for stepper rendering, active/completed/disabled steps. |
packages/react/src/skipToMainContent/tests/MdSkipToMainContent.test.tsx |
Adds unit tests for skip link rendering, props, a11y. |
packages/react/src/modal/tests/MdModal.test.tsx |
Adds unit tests for modal rendering, close interactions, dividers, a11y. |
packages/react/src/messages/tests/MdAlertMessage.test.tsx |
Adds unit tests for alert message themes, icons, closable behavior, a11y. |
packages/react/src/messages/MdAlertMessage.tsx |
Switches error icon to MdIconDangerous; formatting/cleanup around labels and icon rendering. |
packages/react/src/loadingSpinner/tests/MdLoadingSpinner.test.tsx |
Adds unit tests for spinner rendering, size/position, props, a11y. |
packages/react/src/link/tests/MdLink.test.tsx |
Adds unit tests for anchor/button modes, asChild, props, ref forwarding. |
packages/react/src/icons-material/MdIconDangerous.tsx |
Fixes className/prop forwarding for non-large variant path/svg. |
packages/react/src/iconButton/tests/MdIconButton.test.tsx |
Adds unit tests for icon button themes, loading, tooltip, a11y. |
packages/react/src/help/tests/MdHelp.test.tsx |
Adds unit tests for help text/button rendering, state, a11y. |
packages/react/src/formElements/tests/MdTextArea.test.tsx |
Adds unit tests for textarea rendering, states, help text, a11y, ref. |
packages/react/src/formElements/tests/MdSelect.test.tsx |
Adds unit tests for select modes/states/help/reset/multi-select/ref. |
packages/react/src/formElements/tests/MdRadioGroup.test.tsx |
Adds unit tests for radio group rendering, states, help, events, a11y. |
packages/react/src/formElements/tests/MdRadioButton.test.tsx |
Adds unit tests for radio button rendering, interactions, group behavior, a11y. |
packages/react/src/formElements/tests/MdInputSearch.test.tsx |
Adds unit tests for search input behavior, help text, a11y, ref. |
packages/react/src/formElements/tests/MdInput.test.tsx |
Adds unit tests for input rendering/states/help text/a11y/ref. |
packages/react/src/formElements/tests/MdFileUpload.test.tsx |
Adds unit tests for file upload UI, drag/drop, button behavior. |
packages/react/src/formElements/tests/MdComboBoxGrouped.test.tsx |
Adds unit tests for grouped combobox modes/states/help/reset/dropdown/ref. |
packages/react/src/formElements/tests/MdComboBox.test.tsx |
Adds unit tests for combobox modes/states/help/reset/dropdown/ref. |
packages/react/src/formElements/tests/MdCheckboxGroup.test.tsx |
Adds unit tests for checkbox group directions/states/help/events/a11y. |
packages/react/src/formElements/tests/MdCheckbox.test.tsx |
Adds unit tests for checkbox rendering/interactions/a11y/props. |
packages/react/src/formElements/MdTextArea.tsx |
Adjusts textarea value handling to avoid controlled/uncontrolled warning. |
packages/react/src/formElements/MdSelect.tsx |
Updates select export to be a forwardRef component (ref forwarding fix). |
packages/react/src/formElements/MdComboBoxGrouped.tsx |
Updates combobox grouped export to be a forwardRef component (ref forwarding fix). |
packages/react/src/formElements/MdComboBox.tsx |
Updates combobox export to be a forwardRef component (ref forwarding fix). |
packages/react/src/fileList/tests/MdFileList.test.tsx |
Adds unit tests for file list rendering and action callbacks. |
packages/react/src/descriptionList/tests/MdDescriptionList.test.tsx |
Adds unit tests for description list rendering and item behavior. |
packages/react/src/chips/tests/MdChips.test.tsx |
Adds unit tests for input/filter chips rendering, state, interactions. |
packages/react/src/button/tests/MdButton.test.tsx |
Adds unit tests for button themes/modes/icons/loading/asChild. |
packages/react/src/accordion/tests/MdAccordion.test.tsx |
Adds unit tests for accordion + item rendering, themes, interactions. |
packages/react/package.json |
Adds test scripts and Vitest/testing-library-related dev deps; adds React peer deps. |
package.json |
Adds root scripts to run React package tests; adds testing/vitest deps at root. |
eslint.config.mjs |
Ignores coverage output directory. |
README.md |
Documents unit testing commands and requirement for new components. |
.gitignore |
Ignores coverage output. |
.github/workflows/test.yml |
Adds CI workflow to run unit tests with coverage and upload artifact. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ing and error handling
…peScript configuration and remove unused test config
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 47 out of 50 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ary comment in vitest.config.ts
Describe your changes
This PR introduces comprehensive unit testing infrastructure for the md-components React library.
It also updates the CI to include test, build, and lint.
Testing Framework:
vitest.config.tswith coverage reporting (v8 provider)vitest.setup.tswith global test cleanup and matchersTest Coverage:
Test Organization:
tests/subfolders within component directoriesCI/CD Integration:
.github/workflows/test.ymlto run tests with coverage on PRs and pushes to mainBug Fixes During Testing:
MdSelect,MdComboBox,MdComboBoxGroupedref forwarding patternsMdTextAreacontrolled component warningMdAlertMessageto useMdIconDangerousinstead of deprecatedMdIconReportMdIconDangerousto properly pass className in non-large variantChecklist before requesting a review
major,minororpatch)stories-folder?packages/react/index.tsx?packages/css/index.css?