@instructure/ui-color-picker 11.7.2 → 11.7.3-snapshot-2

package/es/ColorContrast/v2/ColorContrast.test.js

@@ -1,229 +0,0 @@
-/*
- * 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 { render, screen } from '@testing-library/react';
-import { vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { runAxeCheck } from '@instructure/ui-axe-check';
-import { contrast } from '@instructure/ui-color-utils';
-import { ColorContrast } from "./index.js";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-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(_jsx(ColorContrast, {
-          ...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(_jsx(ColorContrast, {
-            ...testColors,
-            ...testLabels
-          })),
-          container = _render2.container;
-        expect(container).toHaveTextContent(text);
-      });
-    });
-  });
-  describe('labelLevel prop', () => {
-    it('should render label as div when labelLevel is not provided', async () => {
-      render(_jsx(ColorContrast, {
-        ...testColors,
-        ...testLabels
-      }));
-      const heading = screen.queryByRole('heading', {
-        name: testLabels.label
-      });
-      expect(heading).not.toBeInTheDocument();
-      const labelText = screen.getByText(testLabels.label);
-      expect(labelText).toBeInTheDocument();
-      expect(labelText.tagName.toLowerCase()).toBe('div');
-    });
-    it('should render label as Heading when labelLevel is provided', async () => {
-      render(_jsx(ColorContrast, {
-        ...testColors,
-        ...testLabels,
-        labelLevel: "h2"
-      }));
-      const heading = screen.getByRole('heading', {
-        name: testLabels.label,
-        level: 2
-      });
-      expect(heading).toBeInTheDocument();
-    });
-    it('should render correct heading level', async () => {
-      const _render3 = render(_jsx(ColorContrast, {
-          ...testColors,
-          ...testLabels,
-          labelLevel: "h3"
-        })),
-        rerender = _render3.rerender;
-      let heading = screen.getByRole('heading', {
-        name: testLabels.label,
-        level: 3
-      });
-      expect(heading).toBeInTheDocument();
-      rerender(_jsx(ColorContrast, {
-        ...testColors,
-        ...testLabels,
-        labelLevel: "h1"
-      }));
-      heading = screen.getByRole('heading', {
-        name: testLabels.label,
-        level: 1
-      });
-      expect(heading).toBeInTheDocument();
-    });
-  });
-  describe('should calculate contrast correctly', () => {
-    it('on opaque colors', async () => {
-      const color1 = '#fff';
-      const color2 = '#088';
-      const _render4 = render(_jsx(ColorContrast, {
-          ...testLabels,
-          firstColor: color1,
-          secondColor: color2
-        })),
-        container = _render4.container;
-      const contrastResult = contrast(color1, color2, 2);
-      expect(container).toHaveTextContent(contrastResult + ':1');
-    });
-    it('on transparent colors', async () => {
-      const color1 = '#fff';
-      const color2 = '#00888880';
-      const _render5 = render(_jsx(ColorContrast, {
-          ...testLabels,
-          firstColor: color1,
-          secondColor: color2
-        })),
-        container = _render5.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 _render6 = render(_jsx(ColorContrast, {
-          ...testColors,
-          ...testLabels
-        })),
-        container = _render6.container;
-      const preview = container.querySelector("[class$='-colorContrast__colorPreview']");
-      expect(preview).toBeInTheDocument();
-    });
-    it('should hide preview', async () => {
-      const _render7 = render(_jsx(ColorContrast, {
-          ...testColors,
-          ...testLabels,
-          withoutColorPreview: true
-        })),
-        container = _render7.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 _render8 = render(_jsx(ColorContrast, {
-              ...testLabels,
-              firstColor: firstColor,
-              secondColor: secondColor
-            })),
-            container = _render8.container;
-          expect(container).toHaveTextContent(expectedResult.normal);
-        });
-        it(`large text should ${expectedResult.large.toLowerCase()}`, async () => {
-          const _render9 = render(_jsx(ColorContrast, {
-              ...testLabels,
-              firstColor: firstColor,
-              secondColor: secondColor
-            })),
-            container = _render9.container;
-          expect(container).toHaveTextContent(expectedResult.large);
-        });
-        it(`graphics should ${expectedResult.graphics.toLowerCase()}`, async () => {
-          const _render0 = render(_jsx(ColorContrast, {
-              ...testLabels,
-              firstColor: firstColor,
-              secondColor: secondColor
-            })),
-            container = _render0.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 _render1 = render(_jsx(ColorContrast, {
-          ...testColors,
-          ...testLabels
-        })),
-        container = _render1.container;
-      const axeCheck = await runAxeCheck(container);
-      expect(axeCheck).toBe(true);
-    });
-  });
-});