@instructure/ui-metric 10.2.0 → 10.2.1-snapshot-1

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.
 
+## [10.2.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-1) (2024-08-27)
+
+**Note:** Version bump only for package @instructure/ui-metric
+
+
+
+
+
 # [10.2.0](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.2.0) (2024-08-23)
 
 **Note:** Version bump only for package @instructure/ui-metric

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

@@ -0,0 +1,95 @@
+var _Metric, _Metric2, _Metric3, _Metric4, _Metric5, _Metric6;
+/*
+ * 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 } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { Metric } from '../index';
+describe('<Metric />', () => {
+  it('should render the label', async () => {
+    const _render = render(_Metric || (_Metric = /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }))),
+      container = _render.container;
+    expect(container).toHaveTextContent('Grade');
+  });
+  it('should render the value', async () => {
+    const _render2 = render(_Metric2 || (_Metric2 = /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }))),
+      container = _render2.container;
+    expect(container).toHaveTextContent('80%');
+  });
+  it('passes props through to Metric element', async () => {
+    render(_Metric3 || (_Metric3 = /*#__PURE__*/React.createElement(Metric, {
+      "data-testid": "metric",
+      "data-automation": "foo",
+      renderLabel: "Grade",
+      renderValue: "80%"
+    })));
+    const metric = screen.getByTestId('metric');
+    expect(metric).toHaveAttribute('data-automation', 'foo');
+  });
+  it('should not have role="gridcell" for the value', async () => {
+    render(_Metric4 || (_Metric4 = /*#__PURE__*/React.createElement(Metric, {
+      renderLabel: "Grade",
+      renderValue: "80%"
+    })));
+    const value = screen.getByText('80%');
+    expect(value).not.toHaveAttribute('role', 'gridcell');
+  });
+  it('should not have role=rowheader for the label', async () => {
+    render(_Metric5 || (_Metric5 = /*#__PURE__*/React.createElement(Metric, {
+      renderLabel: "Grade",
+      renderValue: "80%"
+    })));
+    const label = screen.getByText('Grade');
+    expect(label).not.toHaveAttribute('role', 'rowheader');
+  });
+  it('should allow ReactNodes as labels and values', async () => {
+    const _render3 = render(_Metric6 || (_Metric6 = /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: /*#__PURE__*/React.createElement("div", null, "hello")
+      }))),
+      container = _render3.container;
+    expect(container).toHaveTextContent('hello');
+  });
+  it('should allow methods as labels', async () => {
+    const renderLabel = vi.fn();
+    render( /*#__PURE__*/React.createElement(Metric, {
+      renderLabel: renderLabel
+    }));
+    expect(renderLabel).toHaveBeenCalled();
+  });
+  it('should allow methods as values', async () => {
+    const renderValue = vi.fn();
+    render( /*#__PURE__*/React.createElement(Metric, {
+      renderValue: renderValue
+    }));
+    expect(renderValue).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,133 @@
+var _MetricGroup, _MetricGroup2, _MetricGroup3, _MetricGroup4, _MetricGroup5, _MetricGroup6;
+/*
+ * 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 } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { MetricGroup } from '../index';
+import { Metric } from '../../Metric';
+describe('<MetricGroup />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render children', async () => {
+    const _render = render(_MetricGroup || (_MetricGroup = /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      })))),
+      container = _render.container;
+    expect(container).toHaveTextContent('Grade80%Late4Missing2');
+  });
+  it('passes props through to MetricGroup element', async () => {
+    render(_MetricGroup2 || (_MetricGroup2 = /*#__PURE__*/React.createElement(MetricGroup, {
+      "data-testid": "metric-group",
+      "data-automation": "foo"
+    }, /*#__PURE__*/React.createElement(Metric, {
+      renderLabel: "Grade",
+      renderValue: "80%"
+    }), /*#__PURE__*/React.createElement(Metric, {
+      renderLabel: "Late",
+      renderValue: "4"
+    }), /*#__PURE__*/React.createElement(Metric, {
+      renderLabel: "Missing",
+      renderValue: "2"
+    }))));
+    const metric = screen.getByTestId('metric-group');
+    expect(metric).toHaveAttribute('data-automation', 'foo');
+  });
+  describe('for a11y', () => {
+    it('should meet standards', async () => {
+      const _render2 = render(_MetricGroup3 || (_MetricGroup3 = /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
+          renderLabel: "Grade",
+          renderValue: "80%"
+        }), /*#__PURE__*/React.createElement(Metric, {
+          renderLabel: "Late",
+          renderValue: "4"
+        }), /*#__PURE__*/React.createElement(Metric, {
+          renderLabel: "Missing",
+          renderValue: "2"
+        })))),
+        container = _render2.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should have role=grid with aria-readonly=true', async () => {
+      render(_MetricGroup4 || (_MetricGroup4 = /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      }))));
+      const grids = screen.getAllByRole('grid');
+      expect(grids.length).toBe(1);
+      expect(grids[0]).toHaveAttribute('aria-readonly', 'true');
+    });
+    it('should have role=row', async () => {
+      render(_MetricGroup5 || (_MetricGroup5 = /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      }))));
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBe(3);
+    });
+    it('should have role=gridcell', async () => {
+      render(_MetricGroup6 || (_MetricGroup6 = /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/React.createElement(Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      }))));
+      const cells = screen.getAllByRole('gridcell');
+      expect(cells.length).toBe(3);
+    });
+  });
+});

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _vitest = require("vitest");
+var _index = require("../index");
+var _Metric, _Metric2, _Metric3, _Metric4, _Metric5, _Metric6;
+/*
+ * 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('<Metric />', () => {
+  it('should render the label', async () => {
+    const _render = (0, _react2.render)(_Metric || (_Metric = /*#__PURE__*/_react.default.createElement(_index.Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }))),
+      container = _render.container;
+    expect(container).toHaveTextContent('Grade');
+  });
+  it('should render the value', async () => {
+    const _render2 = (0, _react2.render)(_Metric2 || (_Metric2 = /*#__PURE__*/_react.default.createElement(_index.Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }))),
+      container = _render2.container;
+    expect(container).toHaveTextContent('80%');
+  });
+  it('passes props through to Metric element', async () => {
+    (0, _react2.render)(_Metric3 || (_Metric3 = /*#__PURE__*/_react.default.createElement(_index.Metric, {
+      "data-testid": "metric",
+      "data-automation": "foo",
+      renderLabel: "Grade",
+      renderValue: "80%"
+    })));
+    const metric = _react2.screen.getByTestId('metric');
+    expect(metric).toHaveAttribute('data-automation', 'foo');
+  });
+  it('should not have role="gridcell" for the value', async () => {
+    (0, _react2.render)(_Metric4 || (_Metric4 = /*#__PURE__*/_react.default.createElement(_index.Metric, {
+      renderLabel: "Grade",
+      renderValue: "80%"
+    })));
+    const value = _react2.screen.getByText('80%');
+    expect(value).not.toHaveAttribute('role', 'gridcell');
+  });
+  it('should not have role=rowheader for the label', async () => {
+    (0, _react2.render)(_Metric5 || (_Metric5 = /*#__PURE__*/_react.default.createElement(_index.Metric, {
+      renderLabel: "Grade",
+      renderValue: "80%"
+    })));
+    const label = _react2.screen.getByText('Grade');
+    expect(label).not.toHaveAttribute('role', 'rowheader');
+  });
+  it('should allow ReactNodes as labels and values', async () => {
+    const _render3 = (0, _react2.render)(_Metric6 || (_Metric6 = /*#__PURE__*/_react.default.createElement(_index.Metric, {
+        renderLabel: /*#__PURE__*/_react.default.createElement("div", null, "hello")
+      }))),
+      container = _render3.container;
+    expect(container).toHaveTextContent('hello');
+  });
+  it('should allow methods as labels', async () => {
+    const renderLabel = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Metric, {
+      renderLabel: renderLabel
+    }));
+    expect(renderLabel).toHaveBeenCalled();
+  });
+  it('should allow methods as values', async () => {
+    const renderValue = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Metric, {
+      renderValue: renderValue
+    }));
+    expect(renderValue).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _vitest = require("vitest");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _Metric = require("../../Metric");
+var _MetricGroup, _MetricGroup2, _MetricGroup3, _MetricGroup4, _MetricGroup5, _MetricGroup6;
+/*
+ * 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('<MetricGroup />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render children', async () => {
+    const _render = (0, _react2.render)(_MetricGroup || (_MetricGroup = /*#__PURE__*/_react.default.createElement(_index.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      })))),
+      container = _render.container;
+    expect(container).toHaveTextContent('Grade80%Late4Missing2');
+  });
+  it('passes props through to MetricGroup element', async () => {
+    (0, _react2.render)(_MetricGroup2 || (_MetricGroup2 = /*#__PURE__*/_react.default.createElement(_index.MetricGroup, {
+      "data-testid": "metric-group",
+      "data-automation": "foo"
+    }, /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+      renderLabel: "Grade",
+      renderValue: "80%"
+    }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+      renderLabel: "Late",
+      renderValue: "4"
+    }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+      renderLabel: "Missing",
+      renderValue: "2"
+    }))));
+    const metric = _react2.screen.getByTestId('metric-group');
+    expect(metric).toHaveAttribute('data-automation', 'foo');
+  });
+  describe('for a11y', () => {
+    it('should meet standards', async () => {
+      const _render2 = (0, _react2.render)(_MetricGroup3 || (_MetricGroup3 = /*#__PURE__*/_react.default.createElement(_index.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+          renderLabel: "Grade",
+          renderValue: "80%"
+        }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+          renderLabel: "Late",
+          renderValue: "4"
+        }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+          renderLabel: "Missing",
+          renderValue: "2"
+        })))),
+        container = _render2.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should have role=grid with aria-readonly=true', async () => {
+      (0, _react2.render)(_MetricGroup4 || (_MetricGroup4 = /*#__PURE__*/_react.default.createElement(_index.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      }))));
+      const grids = _react2.screen.getAllByRole('grid');
+      expect(grids.length).toBe(1);
+      expect(grids[0]).toHaveAttribute('aria-readonly', 'true');
+    });
+    it('should have role=row', async () => {
+      (0, _react2.render)(_MetricGroup5 || (_MetricGroup5 = /*#__PURE__*/_react.default.createElement(_index.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      }))));
+      const rows = _react2.screen.getAllByRole('row');
+      expect(rows.length).toBe(3);
+    });
+    it('should have role=gridcell', async () => {
+      (0, _react2.render)(_MetricGroup6 || (_MetricGroup6 = /*#__PURE__*/_react.default.createElement(_index.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Grade",
+        renderValue: "80%"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Late",
+        renderValue: "4"
+      }), /*#__PURE__*/_react.default.createElement(_Metric.Metric, {
+        renderLabel: "Missing",
+        renderValue: "2"
+      }))));
+      const cells = _react2.screen.getAllByRole('gridcell');
+      expect(cells.length).toBe(3);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-metric",
-  "version": "10.2.0",
+  "version": "10.2.1-snapshot-1",
   "description": "A UI component for displaying Metrics",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,20 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.0",
-    "@instructure/emotion": "10.2.0",
-    "@instructure/shared-types": "10.2.0",
-    "@instructure/ui-prop-types": "10.2.0",
-    "@instructure/ui-react-utils": "10.2.0",
-    "@instructure/ui-testable": "10.2.0",
+    "@instructure/console": "10.2.1-snapshot-1",
+    "@instructure/emotion": "10.2.1-snapshot-1",
+    "@instructure/shared-types": "10.2.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.2.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.2.1-snapshot-1",
+    "@instructure/ui-testable": "10.2.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.0",
-    "@instructure/ui-color-utils": "10.2.0",
-    "@instructure/ui-test-locator": "10.2.0",
-    "@instructure/ui-test-utils": "10.2.0",
-    "@instructure/ui-themes": "10.2.0"
+    "@instructure/ui-axe-check": "10.2.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.2.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.2.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.2.1-snapshot-1",
+    "@instructure/ui-themes": "10.2.1-snapshot-1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "vitest": "^2.0.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Metric/__new-tests__/Metric.test.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+
+import { Metric } from '../index'
+
+describe('<Metric />', () => {
+  it('should render the label', async () => {
+    const { container } = render(
+      <Metric renderLabel="Grade" renderValue="80%" />
+    )
+
+    expect(container).toHaveTextContent('Grade')
+  })
+
+  it('should render the value', async () => {
+    const { container } = render(
+      <Metric renderLabel="Grade" renderValue="80%" />
+    )
+
+    expect(container).toHaveTextContent('80%')
+  })
+
+  it('passes props through to Metric element', async () => {
+    render(
+      <Metric
+        data-testid="metric"
+        data-automation="foo"
+        renderLabel="Grade"
+        renderValue="80%"
+      />
+    )
+    const metric = screen.getByTestId('metric')
+
+    expect(metric).toHaveAttribute('data-automation', 'foo')
+  })
+
+  it('should not have role="gridcell" for the value', async () => {
+    render(<Metric renderLabel="Grade" renderValue="80%" />)
+    const value = screen.getByText('80%')
+
+    expect(value).not.toHaveAttribute('role', 'gridcell')
+  })
+
+  it('should not have role=rowheader for the label', async () => {
+    render(<Metric renderLabel="Grade" renderValue="80%" />)
+    const label = screen.getByText('Grade')
+
+    expect(label).not.toHaveAttribute('role', 'rowheader')
+  })
+
+  it('should allow ReactNodes as labels and values', async () => {
+    const { container } = render(<Metric renderLabel={<div>hello</div>} />)
+
+    expect(container).toHaveTextContent('hello')
+  })
+
+  it('should allow methods as labels', async () => {
+    const renderLabel = vi.fn()
+    render(<Metric renderLabel={renderLabel} />)
+
+    expect(renderLabel).toHaveBeenCalled()
+  })
+
+  it('should allow methods as values', async () => {
+    const renderValue = vi.fn()
+    render(<Metric renderValue={renderValue} />)
+
+    expect(renderValue).toHaveBeenCalled()
+  })
+})