@instructure/ui-color-picker 9.2.1-snapshot-2 → 9.2.1-snapshot-4

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.2.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-2) (2024-07-10)
+## [9.2.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-4) (2024-07-12)
 
 **Note:** Version bump only for package @instructure/ui-color-picker
 

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

@@ -0,0 +1,176 @@
+/*
+ * 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 } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { contrast } from '@instructure/ui-color-utils';
+import { ColorContrast } from '../';
+import ColorContrastExamples from '../__examples__/ColorContrast.examples';
+const testColors = {
+  firstColor: '#FF0000',
+  secondColor: '#FFFF00'
+};
+const testLabels = {
+  label: 'Color Contrast Ratio',
+  successLabel: 'PASS',
+  failureLabel: 'FAIL',
+  normalTextLabel: 'Normal text',
+  largeTextLabel: 'Large text',
+  graphicsTextLabel: 'Graphics text',
+  firstColorLabel: 'Background',
+  secondColorLabel: 'Foreground'
+};
+describe('<ColorContrast />', () => {
+  describe('elementRef prop', () => {
+    it('should provide ref', async () => {
+      const elementRef = vi.fn();
+      const _render = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels, {
+          elementRef: elementRef
+        }))),
+        container = _render.container;
+      expect(elementRef).toHaveBeenCalledWith(container.firstChild);
+    });
+  });
+  describe('labels are displayed:', () => {
+    Object.entries(testLabels).forEach(([label, text]) => {
+      it(label, async () => {
+        const _render2 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
+          container = _render2.container;
+        expect(container).toHaveTextContent(text);
+      });
+    });
+  });
+  describe('should calculate contrast correctly', () => {
+    it('on opaque colors', async () => {
+      const color1 = '#fff';
+      const color2 = '#088';
+      const _render3 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
+          firstColor: color1,
+          secondColor: color2
+        }))),
+        container = _render3.container;
+      const contrastResult = contrast(color1, color2, 2);
+      expect(container).toHaveTextContent(contrastResult + ':1');
+    });
+    it('on transparent colors', async () => {
+      const color1 = '#fff';
+      const color2 = '#00888880';
+      const _render4 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
+          firstColor: color1,
+          secondColor: color2
+        }))),
+        container = _render4.container;
+
+      // this is the result of a complicated "blended color" calculation
+      // in the component, not simple `contrast()` check
+      expect(container).toHaveTextContent('2:1');
+    });
+  });
+  describe('withoutColorPreview prop', () => {
+    it('should be false by default, should display preview', async () => {
+      const _render5 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
+        container = _render5.container;
+      const preview = container.querySelector("[class$='-colorContrast__colorPreview']");
+      expect(preview).toBeInTheDocument();
+    });
+    it('should hide preview', async () => {
+      const _render6 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels, {
+          withoutColorPreview: true
+        }))),
+        container = _render6.container;
+      const preview = container.querySelector("[class$='-colorContrast__colorPreview']");
+      expect(preview).not.toBeInTheDocument();
+    });
+  });
+  describe('contrast check', () => {
+    const checkContrastPills = (title, firstColor, secondColor, expectedResult) => {
+      describe(title, () => {
+        it(`normal text should ${expectedResult.normal.toLowerCase()}`, async () => {
+          const _render7 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
+              firstColor: firstColor,
+              secondColor: secondColor
+            }))),
+            container = _render7.container;
+          expect(container).toHaveTextContent(expectedResult.normal);
+        });
+        it(`large text should ${expectedResult.large.toLowerCase()}`, async () => {
+          const _render8 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
+              firstColor: firstColor,
+              secondColor: secondColor
+            }))),
+            container = _render8.container;
+          expect(container).toHaveTextContent(expectedResult.large);
+        });
+        it(`graphics should ${expectedResult.graphics.toLowerCase()}`, async () => {
+          const _render9 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testLabels, {
+              firstColor: firstColor,
+              secondColor: secondColor
+            }))),
+            container = _render9.container;
+          expect(container).toHaveTextContent(expectedResult.graphics);
+        });
+      });
+    };
+    checkContrastPills('on x < 3 contrast', '#fff', '#aaa', {
+      normal: 'FAIL',
+      large: 'FAIL',
+      graphics: 'FAIL'
+    });
+    checkContrastPills('on small 3 < x < 4.5 contrast', '#fff', '#0c89bf', {
+      normal: 'FAIL',
+      large: 'PASS',
+      graphics: 'PASS'
+    });
+    checkContrastPills('on small x > 4.5 contrast', '#fff', '#333', {
+      normal: 'PASS',
+      large: 'PASS',
+      graphics: 'PASS'
+    });
+  });
+  describe('should be accessible', () => {
+    it('a11y', async () => {
+      const _render10 = render( /*#__PURE__*/React.createElement(ColorContrast, Object.assign({}, testColors, testLabels))),
+        container = _render10.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    describe('with generated examples', () => {
+      const generatedComponents = generateA11yTests(ColorContrast, ColorContrastExamples);
+      it.each(generatedComponents)('should be accessible with example: $description', async ({
+        content
+      }) => {
+        const _render11 = render(content),
+          container = _render11.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,66 @@
+var _ColorIndicator;
+/*
+ * 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 } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { ColorIndicator } from '../';
+import ColorIndicatorExamples from '../__examples__/ColorIndicator.examples';
+describe('<ColorIndicator />', () => {
+  describe('elementRef prop', () => {
+    it('should provide ref', async () => {
+      const elementRef = vi.fn();
+      const _render = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+          elementRef: elementRef
+        })),
+        container = _render.container;
+      expect(elementRef).toHaveBeenCalledWith(container.firstChild);
+    });
+  });
+  describe('should be accessible', () => {
+    it('a11y', async () => {
+      const _render2 = render(_ColorIndicator || (_ColorIndicator = /*#__PURE__*/React.createElement(ColorIndicator, null))),
+        container = _render2.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    describe('with generated examples', () => {
+      const generatedComponents = generateA11yTests(ColorIndicator, ColorIndicatorExamples);
+      it.each(generatedComponents)('should be accessible with example: $description', async ({
+        content
+      }) => {
+        const _render3 = render(content),
+          container = _render3.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    });
+  });
+});