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

package/lib/ColorPicker/v2/ColorPicker.test.js

@@ -1,501 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("@testing-library/react");
-var _userEvent = require("@testing-library/user-event");
-var _vitest = require("vitest");
-require("@testing-library/jest-dom");
-var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
-var _v = require("../v2");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _SimpleExample, _SimpleExample2, _SimpleExample3, _SimpleExample4, _SimpleExample5, _SimpleExample6, _div, _div2, _SimpleExample7;
-/*
- * 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.
- */
-const SimpleExample = props => {
-  return (0, _jsxRuntime.jsx)(_v.ColorPicker, {
-    onChange: props.onChange,
-    value: props.value,
-    placeholderText: "Enter HEX",
-    label: "Color Input",
-    ...props
-  });
-};
-describe('<ColorPicker />', () => {
-  let consoleErrorMock;
-  let consoleWarningMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
-    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleErrorMock.mockRestore();
-    consoleWarningMock.mockRestore();
-  });
-  describe('simple input mode', () => {
-    it('should render correctly', async () => {
-      const _render = (0, _react.render)(_SimpleExample || (_SimpleExample = (0, _jsxRuntime.jsx)(SimpleExample, {}))),
-        container = _render.container;
-      expect(container.firstChild).toBeInTheDocument();
-    });
-    it('should work controlled', async () => {
-      const color = '#FFF';
-      const onChange = _vitest.vi.fn();
-      const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-          value: color,
-          onChange: onChange
-        })),
-        rerender = _render2.rerender;
-      const input = _react.screen.getByRole('textbox');
-      expect(input).toHaveValue('FFF');
-
-      // set new value
-      rerender((0, _jsxRuntime.jsx)(SimpleExample, {
-        value: `${color}555`,
-        onChange: onChange
-      }));
-      const inputUpdated = _react.screen.getByRole('textbox');
-      expect(inputUpdated).toHaveValue('FFF555');
-    });
-    it('should accept 3 digit hex code', async () => {
-      const color = '0CB';
-      (0, _react.render)(_SimpleExample2 || (_SimpleExample2 = (0, _jsxRuntime.jsx)(SimpleExample, {})));
-      const input = _react.screen.getByRole('textbox');
-      await _userEvent.userEvent.type(input, color);
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        expect(input).toHaveValue(color);
-      });
-    });
-    it('should accept 6 digit hex code', async () => {
-      const color = '0CBF2D';
-      (0, _react.render)(_SimpleExample3 || (_SimpleExample3 = (0, _jsxRuntime.jsx)(SimpleExample, {})));
-      const input = _react.screen.getByRole('textbox');
-      await _userEvent.userEvent.type(input, color);
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        expect(input).toHaveValue(color);
-      });
-    });
-    it('should not accept not valid hex code', async () => {
-      const color = 'WWWZZZ';
-      (0, _react.render)(_SimpleExample4 || (_SimpleExample4 = (0, _jsxRuntime.jsx)(SimpleExample, {})));
-      const input = _react.screen.getByRole('textbox');
-      await _userEvent.userEvent.type(input, color);
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        expect(input).not.toHaveValue(color);
-      });
-    });
-    it('should not allow more than 6 characters', async () => {
-      const color = '0CBF2D1234567';
-      (0, _react.render)(_SimpleExample5 || (_SimpleExample5 = (0, _jsxRuntime.jsx)(SimpleExample, {})));
-      const input = _react.screen.getByRole('textbox');
-      await _userEvent.userEvent.type(input, color);
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        expect(input).toHaveValue('0CBF2D');
-      });
-    });
-    it('should not allow input when disabled', async () => {
-      (0, _react.render)(_SimpleExample6 || (_SimpleExample6 = (0, _jsxRuntime.jsx)(SimpleExample, {
-        disabled: true
-      })));
-      const input = _react.screen.getByRole('textbox');
-      expect(input).toHaveAttribute('disabled');
-    });
-    for (const contrastStrength of ['min', 'mid', 'max']) {
-      it(`should check contrast correctly when color has enough contrast [contrastStrength=${contrastStrength}]`, async () => {
-        //oxford in canvas color palette, should be valid with all contrast strenght checkers
-        const colorToCheck = '394B58';
-        const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-            checkContrast: {
-              isStrict: false,
-              contrastStrength: contrastStrength
-            }
-          })),
-          container = _render3.container;
-        const input = _react.screen.getByRole('textbox');
-        await _userEvent.userEvent.type(input, colorToCheck);
-        _react.fireEvent.blur(input);
-        await (0, _react.waitFor)(() => {
-          expect(input).toHaveValue(colorToCheck);
-          const successIconWrapper = container.querySelector('div[class$="-colorPicker__successIcon"]');
-          const successIcon = container.querySelector('svg[name="Check"]');
-          expect(successIconWrapper).toBeInTheDocument();
-          expect(successIcon).toBeInTheDocument();
-        });
-      });
-      it(`should check contrast correctly when color does not have enough contrast [contrastStrength=${contrastStrength}, isStrict=false]`, async () => {
-        //porcelain in canvas color palette, it should be failing even the min check
-        const colorToCheck = 'F5F5F5';
-        const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-            checkContrast: {
-              isStrict: false,
-              contrastStrength: contrastStrength
-            }
-          })),
-          container = _render4.container;
-        const input = _react.screen.getByRole('textbox');
-        await _userEvent.userEvent.type(input, colorToCheck);
-        _react.fireEvent.blur(input);
-        await (0, _react.waitFor)(() => {
-          expect(input).toHaveValue(colorToCheck);
-          const warningIconWrapper = container.querySelector('div[class$="-colorPicker__errorIcons"]');
-          const warningIcon = container.querySelector('svg[name="CircleAlert"]');
-          expect(warningIconWrapper).toBeInTheDocument();
-          expect(warningIcon).toBeInTheDocument();
-        });
-      });
-      it(`should check contrast correctly when color does not have enough contrast [contrastStrength=${contrastStrength}, isStrict=true]`, async () => {
-        //porcelain in canvas color palette, it should be failing even the min check
-        const colorToCheck = 'F5F5F5';
-        const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-            checkContrast: {
-              isStrict: true,
-              contrastStrength: contrastStrength
-            }
-          })),
-          container = _render5.container;
-        const input = _react.screen.getByRole('textbox');
-        await _userEvent.userEvent.type(input, colorToCheck);
-        _react.fireEvent.blur(input);
-        await (0, _react.waitFor)(() => {
-          expect(input).toHaveValue(colorToCheck);
-          const errorIconWrapper = container.querySelector('div[class$="-colorPicker__errorIcons"]');
-          const errorIcon = container.querySelector('svg[name="CircleX"]');
-          expect(errorIconWrapper).toBeInTheDocument();
-          expect(errorIcon).toBeInTheDocument();
-        });
-      });
-      it(`should display success message when contrast is met [contrastStrength=${contrastStrength}]`, async () => {
-        const colorToCheck = '394B58';
-        (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-          checkContrast: {
-            isStrict: false,
-            contrastStrength: contrastStrength,
-            renderContrastSuccessMessage: () => [{
-              type: 'success',
-              text: 'I am a contrast success message'
-            }]
-          }
-        }));
-        const input = _react.screen.getByRole('textbox');
-        await _userEvent.userEvent.type(input, colorToCheck);
-        _react.fireEvent.blur(input);
-        await (0, _react.waitFor)(() => {
-          const successMessage = _react.screen.getByText('I am a contrast success message');
-          expect(input).toHaveValue(colorToCheck);
-          expect(successMessage).toBeInTheDocument();
-        });
-      });
-      it(`should display error message when contrast is not met [contrastStrength=${contrastStrength}, isStrict=false]`, async () => {
-        const colorToCheck = 'F5F5F5';
-        (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-          checkContrast: {
-            isStrict: false,
-            contrastStrength: contrastStrength,
-            renderContrastErrorMessage: () => [{
-              type: 'error',
-              text: 'I am a contrast warning message'
-            }]
-          }
-        }));
-        const input = _react.screen.getByRole('textbox');
-        await _userEvent.userEvent.type(input, colorToCheck);
-        _react.fireEvent.blur(input);
-        await (0, _react.waitFor)(() => {
-          const warningMessage = _react.screen.getByText('I am a contrast warning message');
-          expect(input).toHaveValue(colorToCheck);
-          expect(warningMessage).toBeInTheDocument();
-        });
-      });
-      it(`should display error message when contrast is not met [contrastStrength=${contrastStrength}, isStrict=true]`, async () => {
-        const colorToCheck = 'F5F5F5';
-        (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-          checkContrast: {
-            isStrict: true,
-            contrastStrength: contrastStrength,
-            renderContrastErrorMessage: () => [{
-              type: 'error',
-              text: 'I am a contrast error message'
-            }]
-          }
-        }));
-        const input = _react.screen.getByRole('textbox');
-        await _userEvent.userEvent.type(input, colorToCheck);
-        _react.fireEvent.blur(input);
-        await (0, _react.waitFor)(() => {
-          const errorMessage = _react.screen.getByText('I am a contrast error message');
-          expect(input).toHaveValue(colorToCheck);
-          expect(errorMessage).toBeInTheDocument();
-        });
-      });
-    }
-    it('should call onChange', async () => {
-      const onChange = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        onChange: onChange
-      }));
-      const input = _react.screen.getByRole('textbox');
-      _react.fireEvent.change(input, {
-        target: {
-          value: 'FFF'
-        }
-      });
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        expect(onChange).toHaveBeenLastCalledWith('#FFF');
-      });
-    });
-    it('should display message when ColorPicker is a required field', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        isRequired: true,
-        renderInvalidColorMessage: () => [{
-          type: 'error',
-          text: 'I am an invalid color message'
-        }],
-        renderIsRequiredMessage: () => [{
-          type: 'error',
-          text: 'I am a required message'
-        }]
-      }));
-      const input = _react.screen.getByRole('textbox');
-      _react.fireEvent.focus(input);
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        const requiredMessage = _react.screen.getByText('I am a required message');
-        expect(requiredMessage).toBeInTheDocument();
-      });
-    });
-    it('should display message when color is invalid', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        renderInvalidColorMessage: () => [{
-          type: 'error',
-          text: 'I am an invalid color message'
-        }]
-      }));
-      const input = _react.screen.getByRole('textbox');
-      await _userEvent.userEvent.type(input, 'F');
-      _react.fireEvent.blur(input);
-      await (0, _react.waitFor)(() => {
-        const errorMessage = _react.screen.getByText('I am an invalid color message');
-        expect(errorMessage).toBeInTheDocument();
-      });
-    });
-    it('should provide an inputRef prop', async () => {
-      const inputRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        inputRef: inputRef
-      }));
-      const input = _react.screen.getByRole('textbox');
-      expect(inputRef).toHaveBeenCalledWith(input);
-    });
-  });
-  describe('complex mode', () => {
-    it('should display trigger button', async () => {
-      const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-          colorMixerSettings: {
-            popoverAddButtonLabel: 'add',
-            popoverCloseButtonLabel: 'close'
-          }
-        })),
-        container = _render6.container;
-      const buttonWrapper = container.querySelector('div[class$="-colorPicker__colorMixerButtonWrapper"]');
-      const button = _react.screen.getByRole('button');
-      expect(buttonWrapper).toBeInTheDocument();
-      expect(button).toBeInTheDocument();
-    });
-    it('should open popover when trigger is clicked', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close'
-        }
-      }));
-      const trigger = _react.screen.getByRole('button');
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      _react.fireEvent.click(trigger);
-      await (0, _react.waitFor)(() => {
-        const buttons = _react.screen.getAllByRole('button');
-        const popoverContent = document.querySelector('div[class$="-colorPicker__popoverContent"]');
-        expect(trigger).toHaveAttribute('aria-expanded', 'true');
-        expect(popoverContent).toBeInTheDocument();
-        expect(buttons.length).toBe(2);
-        expect(buttons[0]).toHaveTextContent('close');
-        expect(buttons[1]).toHaveTextContent('add');
-      });
-    });
-    it('should display the color mixer', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close',
-          colorMixer: {
-            withAlpha: false,
-            rgbRedInputScreenReaderLabel: 'Red input',
-            rgbBlueInputScreenReaderLabel: 'Blue input',
-            rgbGreenInputScreenReaderLabel: 'Green input',
-            rgbAlphaInputScreenReaderLabel: '',
-            alphaSliderNavigationExplanationScreenReaderLabel: '',
-            colorSliderNavigationExplanationScreenReaderLabel: '',
-            colorPaletteNavigationExplanationScreenReaderLabel: ''
-          }
-        }
-      }));
-      const trigger = _react.screen.getByRole('button');
-      _react.fireEvent.click(trigger);
-      await (0, _react.waitFor)(() => {
-        const redInput = _react.screen.getByLabelText('Red input');
-        const blueInput = _react.screen.getByLabelText('Blue input');
-        const greenInput = _react.screen.getByLabelText('Green input');
-        expect(redInput).toBeInTheDocument();
-        expect(blueInput).toBeInTheDocument();
-        expect(greenInput).toBeInTheDocument();
-      });
-    });
-    it('should display the correct color in the colormixer when the input is prefilled', async () => {
-      const color = '0374B5';
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close',
-          colorMixer: {
-            withAlpha: false,
-            rgbRedInputScreenReaderLabel: 'Red input',
-            rgbBlueInputScreenReaderLabel: 'Blue input',
-            rgbGreenInputScreenReaderLabel: 'Green input',
-            rgbAlphaInputScreenReaderLabel: '',
-            alphaSliderNavigationExplanationScreenReaderLabel: '',
-            colorSliderNavigationExplanationScreenReaderLabel: '',
-            colorPaletteNavigationExplanationScreenReaderLabel: ''
-          }
-        }
-      }));
-      const input = _react.screen.getByRole('textbox');
-      const trigger = _react.screen.getByRole('button');
-      await _userEvent.userEvent.type(input, color);
-      _react.fireEvent.blur(input);
-      _react.fireEvent.click(trigger);
-      await (0, _react.waitFor)(() => {
-        const redInput = _react.screen.getByLabelText('Red input');
-        const blueInput = _react.screen.getByLabelText('Blue input');
-        const greenInput = _react.screen.getByLabelText('Green input');
-        const convertedColor = _uiColorUtils.default.colorToRGB(`#${color}`);
-        const actualColor = {
-          r: parseInt(redInput.value),
-          g: parseInt(greenInput.value),
-          b: parseInt(blueInput.value),
-          a: 1
-        };
-        expect(convertedColor).toStrictEqual(actualColor);
-      });
-    });
-    it('should trigger onChange when selected color is added from colorMixer', async () => {
-      const onChange = _vitest.vi.fn();
-      const rgb = {
-        r: 131,
-        g: 6,
-        b: 25,
-        a: 1
-      };
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        onChange: onChange,
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close',
-          colorMixer: {
-            withAlpha: false,
-            rgbRedInputScreenReaderLabel: 'Red input',
-            rgbBlueInputScreenReaderLabel: 'Blue input',
-            rgbGreenInputScreenReaderLabel: 'Green input',
-            colorSliderNavigationExplanationScreenReaderLabel: '',
-            rgbAlphaInputScreenReaderLabel: '',
-            alphaSliderNavigationExplanationScreenReaderLabel: '',
-            colorPaletteNavigationExplanationScreenReaderLabel: ''
-          }
-        }
-      }));
-      const trigger = _react.screen.getByRole('button');
-      _react.fireEvent.click(trigger);
-      await (0, _react.waitFor)(() => {
-        const addBtn = _react.screen.getByRole('button', {
-          name: 'add'
-        });
-        const redInput = _react.screen.getByLabelText('Red input');
-        const greenInput = _react.screen.getByLabelText('Green input');
-        const blueInput = _react.screen.getByLabelText('Blue input');
-        _react.fireEvent.change(redInput, {
-          target: {
-            value: `${rgb.r}`
-          }
-        });
-        _react.fireEvent.change(greenInput, {
-          target: {
-            value: `${rgb.g}`
-          }
-        });
-        _react.fireEvent.change(blueInput, {
-          target: {
-            value: `${rgb.b}`
-          }
-        });
-        _react.fireEvent.click(addBtn);
-        expect(onChange).toHaveBeenCalledWith(_uiColorUtils.default.color2hex(rgb));
-      });
-    });
-  });
-  describe('custom popover mode', () => {
-    it('should throw warning if children and settings object are passed too', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close'
-        },
-        children: () => _div || (_div = (0, _jsxRuntime.jsx)("div", {}))
-      }));
-      await (0, _react.waitFor)(() => {
-        expect(consoleWarningMock.mock.calls[0][0]).toEqual(expect.stringContaining('Warning: You should either use children, colorMixerSettings or neither, not both. In this case, the colorMixerSettings will be ignored.'));
-      });
-    });
-    it('should display trigger button', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(SimpleExample, {
-        children: () => _div2 || (_div2 = (0, _jsxRuntime.jsx)("div", {}))
-      }));
-      const trigger = _react.screen.getByRole('button');
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveAttribute('data-popover-trigger', 'true');
-    });
-  });
-  describe('should be accessible', () => {
-    it('a11y', async () => {
-      const _render7 = (0, _react.render)(_SimpleExample7 || (_SimpleExample7 = (0, _jsxRuntime.jsx)(SimpleExample, {}))),
-        container = _render7.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-      expect(axeCheck).toBe(true);
-    });
-  });
-});