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

package/es/ColorPicker/v2/ColorPicker.test.js

@@ -1,499 +0,0 @@
-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.
- */
-
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { runAxeCheck } from '@instructure/ui-axe-check';
-import conversions from '@instructure/ui-color-utils';
-import { ColorPicker } from "../v2/index.js";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const SimpleExample = props => {
-  return _jsx(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 = vi.spyOn(console, 'error').mockImplementation(() => {});
-    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleErrorMock.mockRestore();
-    consoleWarningMock.mockRestore();
-  });
-  describe('simple input mode', () => {
-    it('should render correctly', async () => {
-      const _render = render(_SimpleExample || (_SimpleExample = _jsx(SimpleExample, {}))),
-        container = _render.container;
-      expect(container.firstChild).toBeInTheDocument();
-    });
-    it('should work controlled', async () => {
-      const color = '#FFF';
-      const onChange = vi.fn();
-      const _render2 = render(_jsx(SimpleExample, {
-          value: color,
-          onChange: onChange
-        })),
-        rerender = _render2.rerender;
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('FFF');
-
-      // set new value
-      rerender(_jsx(SimpleExample, {
-        value: `${color}555`,
-        onChange: onChange
-      }));
-      const inputUpdated = screen.getByRole('textbox');
-      expect(inputUpdated).toHaveValue('FFF555');
-    });
-    it('should accept 3 digit hex code', async () => {
-      const color = '0CB';
-      render(_SimpleExample2 || (_SimpleExample2 = _jsx(SimpleExample, {})));
-      const input = screen.getByRole('textbox');
-      await userEvent.type(input, color);
-      fireEvent.blur(input);
-      await waitFor(() => {
-        expect(input).toHaveValue(color);
-      });
-    });
-    it('should accept 6 digit hex code', async () => {
-      const color = '0CBF2D';
-      render(_SimpleExample3 || (_SimpleExample3 = _jsx(SimpleExample, {})));
-      const input = screen.getByRole('textbox');
-      await userEvent.type(input, color);
-      fireEvent.blur(input);
-      await waitFor(() => {
-        expect(input).toHaveValue(color);
-      });
-    });
-    it('should not accept not valid hex code', async () => {
-      const color = 'WWWZZZ';
-      render(_SimpleExample4 || (_SimpleExample4 = _jsx(SimpleExample, {})));
-      const input = screen.getByRole('textbox');
-      await userEvent.type(input, color);
-      fireEvent.blur(input);
-      await waitFor(() => {
-        expect(input).not.toHaveValue(color);
-      });
-    });
-    it('should not allow more than 6 characters', async () => {
-      const color = '0CBF2D1234567';
-      render(_SimpleExample5 || (_SimpleExample5 = _jsx(SimpleExample, {})));
-      const input = screen.getByRole('textbox');
-      await userEvent.type(input, color);
-      fireEvent.blur(input);
-      await waitFor(() => {
-        expect(input).toHaveValue('0CBF2D');
-      });
-    });
-    it('should not allow input when disabled', async () => {
-      render(_SimpleExample6 || (_SimpleExample6 = _jsx(SimpleExample, {
-        disabled: true
-      })));
-      const input = 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 = render(_jsx(SimpleExample, {
-            checkContrast: {
-              isStrict: false,
-              contrastStrength: contrastStrength
-            }
-          })),
-          container = _render3.container;
-        const input = screen.getByRole('textbox');
-        await userEvent.type(input, colorToCheck);
-        fireEvent.blur(input);
-        await 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 = render(_jsx(SimpleExample, {
-            checkContrast: {
-              isStrict: false,
-              contrastStrength: contrastStrength
-            }
-          })),
-          container = _render4.container;
-        const input = screen.getByRole('textbox');
-        await userEvent.type(input, colorToCheck);
-        fireEvent.blur(input);
-        await 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 = render(_jsx(SimpleExample, {
-            checkContrast: {
-              isStrict: true,
-              contrastStrength: contrastStrength
-            }
-          })),
-          container = _render5.container;
-        const input = screen.getByRole('textbox');
-        await userEvent.type(input, colorToCheck);
-        fireEvent.blur(input);
-        await 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';
-        render(_jsx(SimpleExample, {
-          checkContrast: {
-            isStrict: false,
-            contrastStrength: contrastStrength,
-            renderContrastSuccessMessage: () => [{
-              type: 'success',
-              text: 'I am a contrast success message'
-            }]
-          }
-        }));
-        const input = screen.getByRole('textbox');
-        await userEvent.type(input, colorToCheck);
-        fireEvent.blur(input);
-        await waitFor(() => {
-          const successMessage = 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';
-        render(_jsx(SimpleExample, {
-          checkContrast: {
-            isStrict: false,
-            contrastStrength: contrastStrength,
-            renderContrastErrorMessage: () => [{
-              type: 'error',
-              text: 'I am a contrast warning message'
-            }]
-          }
-        }));
-        const input = screen.getByRole('textbox');
-        await userEvent.type(input, colorToCheck);
-        fireEvent.blur(input);
-        await waitFor(() => {
-          const warningMessage = 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';
-        render(_jsx(SimpleExample, {
-          checkContrast: {
-            isStrict: true,
-            contrastStrength: contrastStrength,
-            renderContrastErrorMessage: () => [{
-              type: 'error',
-              text: 'I am a contrast error message'
-            }]
-          }
-        }));
-        const input = screen.getByRole('textbox');
-        await userEvent.type(input, colorToCheck);
-        fireEvent.blur(input);
-        await waitFor(() => {
-          const errorMessage = screen.getByText('I am a contrast error message');
-          expect(input).toHaveValue(colorToCheck);
-          expect(errorMessage).toBeInTheDocument();
-        });
-      });
-    }
-    it('should call onChange', async () => {
-      const onChange = vi.fn();
-      render(_jsx(SimpleExample, {
-        onChange: onChange
-      }));
-      const input = screen.getByRole('textbox');
-      fireEvent.change(input, {
-        target: {
-          value: 'FFF'
-        }
-      });
-      fireEvent.blur(input);
-      await waitFor(() => {
-        expect(onChange).toHaveBeenLastCalledWith('#FFF');
-      });
-    });
-    it('should display message when ColorPicker is a required field', async () => {
-      render(_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 = screen.getByRole('textbox');
-      fireEvent.focus(input);
-      fireEvent.blur(input);
-      await waitFor(() => {
-        const requiredMessage = screen.getByText('I am a required message');
-        expect(requiredMessage).toBeInTheDocument();
-      });
-    });
-    it('should display message when color is invalid', async () => {
-      render(_jsx(SimpleExample, {
-        renderInvalidColorMessage: () => [{
-          type: 'error',
-          text: 'I am an invalid color message'
-        }]
-      }));
-      const input = screen.getByRole('textbox');
-      await userEvent.type(input, 'F');
-      fireEvent.blur(input);
-      await waitFor(() => {
-        const errorMessage = screen.getByText('I am an invalid color message');
-        expect(errorMessage).toBeInTheDocument();
-      });
-    });
-    it('should provide an inputRef prop', async () => {
-      const inputRef = vi.fn();
-      render(_jsx(SimpleExample, {
-        inputRef: inputRef
-      }));
-      const input = screen.getByRole('textbox');
-      expect(inputRef).toHaveBeenCalledWith(input);
-    });
-  });
-  describe('complex mode', () => {
-    it('should display trigger button', async () => {
-      const _render6 = render(_jsx(SimpleExample, {
-          colorMixerSettings: {
-            popoverAddButtonLabel: 'add',
-            popoverCloseButtonLabel: 'close'
-          }
-        })),
-        container = _render6.container;
-      const buttonWrapper = container.querySelector('div[class$="-colorPicker__colorMixerButtonWrapper"]');
-      const button = screen.getByRole('button');
-      expect(buttonWrapper).toBeInTheDocument();
-      expect(button).toBeInTheDocument();
-    });
-    it('should open popover when trigger is clicked', async () => {
-      render(_jsx(SimpleExample, {
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close'
-        }
-      }));
-      const trigger = screen.getByRole('button');
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      fireEvent.click(trigger);
-      await waitFor(() => {
-        const buttons = 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 () => {
-      render(_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 = screen.getByRole('button');
-      fireEvent.click(trigger);
-      await waitFor(() => {
-        const redInput = screen.getByLabelText('Red input');
-        const blueInput = screen.getByLabelText('Blue input');
-        const greenInput = 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';
-      render(_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 = screen.getByRole('textbox');
-      const trigger = screen.getByRole('button');
-      await userEvent.type(input, color);
-      fireEvent.blur(input);
-      fireEvent.click(trigger);
-      await waitFor(() => {
-        const redInput = screen.getByLabelText('Red input');
-        const blueInput = screen.getByLabelText('Blue input');
-        const greenInput = screen.getByLabelText('Green input');
-        const convertedColor = conversions.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 = vi.fn();
-      const rgb = {
-        r: 131,
-        g: 6,
-        b: 25,
-        a: 1
-      };
-      render(_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 = screen.getByRole('button');
-      fireEvent.click(trigger);
-      await waitFor(() => {
-        const addBtn = screen.getByRole('button', {
-          name: 'add'
-        });
-        const redInput = screen.getByLabelText('Red input');
-        const greenInput = screen.getByLabelText('Green input');
-        const blueInput = screen.getByLabelText('Blue input');
-        fireEvent.change(redInput, {
-          target: {
-            value: `${rgb.r}`
-          }
-        });
-        fireEvent.change(greenInput, {
-          target: {
-            value: `${rgb.g}`
-          }
-        });
-        fireEvent.change(blueInput, {
-          target: {
-            value: `${rgb.b}`
-          }
-        });
-        fireEvent.click(addBtn);
-        expect(onChange).toHaveBeenCalledWith(conversions.color2hex(rgb));
-      });
-    });
-  });
-  describe('custom popover mode', () => {
-    it('should throw warning if children and settings object are passed too', async () => {
-      render(_jsx(SimpleExample, {
-        colorMixerSettings: {
-          popoverAddButtonLabel: 'add',
-          popoverCloseButtonLabel: 'close'
-        },
-        children: () => _div || (_div = _jsx("div", {}))
-      }));
-      await 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 () => {
-      render(_jsx(SimpleExample, {
-        children: () => _div2 || (_div2 = _jsx("div", {}))
-      }));
-      const trigger = screen.getByRole('button');
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveAttribute('data-popover-trigger', 'true');
-    });
-  });
-  describe('should be accessible', () => {
-    it('a11y', async () => {
-      const _render7 = render(_SimpleExample7 || (_SimpleExample7 = _jsx(SimpleExample, {}))),
-        container = _render7.container;
-      const axeCheck = await runAxeCheck(container);
-      expect(axeCheck).toBe(true);
-    });
-  });
-});