@instructure/ui-range-input 10.19.2-snapshot-2 → 10.19.2-snapshot-4

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

@@ -1,234 +0,0 @@
-var _RangeInput, _RangeInput2, _RangeInput3, _RangeInput4, _RangeInput5, _RangeInput6, _RangeInput7, _RangeInput8, _RangeInput9, _RangeInput10, _RangeInput11;
-/*
- * 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, expect } from 'vitest';
-import { runAxeCheck } from '@instructure/ui-axe-check';
-import '@testing-library/jest-dom';
-import { RangeInput } from '../index';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-describe('<RangeInput />', () => {
-  let consoleWarningMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution
-    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleWarningMock.mockRestore();
-  });
-  it('renders an input with type "range"', async () => {
-    const _render = render(_RangeInput || (_RangeInput = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0
-      }))),
-      container = _render.container;
-    const label = container.querySelector('[class$="-formFieldLayout__label"]');
-    const input = container.querySelector('[class$="-rangeInput__input"]');
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent('Opacity');
-    expect(input).toBeInTheDocument();
-    expect(input.tagName).toBe('INPUT');
-    expect(input).toHaveAttribute('name', 'opacity');
-    expect(input).toHaveAttribute('type', 'range');
-  });
-  it('displays the default value', async () => {
-    const _render2 = render(_RangeInput2 || (_RangeInput2 = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 42
-      }))),
-      container = _render2.container;
-    const output = container.querySelector('[class$="-rangeInput__value"]');
-    expect(output).toHaveTextContent('42');
-  });
-  it('sets input value to default value', async () => {
-    const _render3 = render(_RangeInput3 || (_RangeInput3 = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 25
-      }))),
-      container = _render3.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveValue('25');
-  });
-  it('sets input value to controlled value', async () => {
-    const _render4 = render(_jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        value: 25,
-        onChange: () => {}
-      })),
-      container = _render4.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveValue('25');
-  });
-  it('should provide an inputRef prop', async () => {
-    const inputRef = vi.fn();
-    const _render5 = render(_jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 42,
-        inputRef: inputRef
-      })),
-      container = _render5.container;
-    const input = container.querySelector('input');
-    expect(inputRef).toHaveBeenCalledWith(input);
-  });
-  describe('thumbVariant prop', () => {
-    it('should throw deprecation warning by default', async () => {
-      render(_RangeInput4 || (_RangeInput4 = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 30
-      })));
-      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should throw deprecation warning when explicitly "deprecated"', async () => {
-      render(_RangeInput5 || (_RangeInput5 = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 30,
-        thumbVariant: "deprecated"
-      })));
-      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should not throw deprecation warning when "accessible"', async () => {
-      render(_RangeInput6 || (_RangeInput6 = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 30,
-        thumbVariant: "accessible"
-      })));
-      expect(consoleWarningMock).not.toHaveBeenCalled();
-    });
-  });
-  it('sets min value', async () => {
-    render(_RangeInput7 || (_RangeInput7 = _jsx(RangeInput, {
-      label: "Opacity",
-      name: "opacity",
-      max: 100,
-      min: 25
-    })));
-    const input = screen.getByLabelText('Opacity');
-    expect(input).toHaveAttribute('min', '25');
-  });
-  it('sets max value', async () => {
-    render(_RangeInput8 || (_RangeInput8 = _jsx(RangeInput, {
-      label: "Opacity",
-      name: "opacity",
-      max: 75,
-      min: 0
-    })));
-    const input = screen.getByLabelText('Opacity');
-    expect(input).toHaveAttribute('max', '75');
-  });
-  it('sets step value', async () => {
-    render(_RangeInput9 || (_RangeInput9 = _jsx(RangeInput, {
-      label: "Opacity",
-      name: "opacity",
-      max: 100,
-      min: 0,
-      step: 5
-    })));
-    const input = screen.getByLabelText('Opacity');
-    expect(input).toHaveAttribute('step', '5');
-  });
-  it('formats the value displayed', async () => {
-    const _render6 = render(_jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 45,
-        formatValue: value => {
-          return `${value}%`;
-        }
-      })),
-      container = _render6.container;
-    const output = container.querySelector('[class$="-rangeInput__value"]');
-    expect(output).toHaveTextContent('45%');
-  });
-  it('hides the value when displayValue is false', async () => {
-    const _render7 = render(_RangeInput10 || (_RangeInput10 = _jsx(RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        displayValue: false
-      }))),
-      container = _render7.container;
-    const output = container.querySelector('[class$="-rangeInput__value"]');
-    expect(output).not.toBeInTheDocument();
-  });
-  describe('for a11y', () => {
-    it('should meet standards', async () => {
-      const _render8 = render(_RangeInput11 || (_RangeInput11 = _jsx(RangeInput, {
-          label: "Opacity",
-          name: "opacity",
-          max: 100,
-          min: 0,
-          defaultValue: 50
-        }))),
-        container = _render8.container;
-      const axeCheck = await runAxeCheck(container);
-      expect(axeCheck).toBe(true);
-    });
-    it('formats the aria-valuetext attribute', async () => {
-      const _render9 = render(_jsx(RangeInput, {
-          label: "Opacity",
-          name: "opacity",
-          max: 100,
-          min: 0,
-          defaultValue: 40,
-          formatValue: value => {
-            return `${value}%`;
-          }
-        })),
-        container = _render9.container;
-      const input = container.querySelector('input');
-      const output = container.querySelector('[class$="-rangeInput__value"]');
-      expect(input).toHaveAttribute('aria-valuetext', '40%');
-      expect(output).toHaveTextContent('40%');
-    });
-  });
-});

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

@@ -1,235 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-var _vitest = require("vitest");
-var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-require("@testing-library/jest-dom");
-var _index = require("../index");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _RangeInput, _RangeInput2, _RangeInput3, _RangeInput4, _RangeInput5, _RangeInput6, _RangeInput7, _RangeInput8, _RangeInput9, _RangeInput10, _RangeInput11;
-/*
- * 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('<RangeInput />', () => {
-  let consoleWarningMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution
-    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleWarningMock.mockRestore();
-  });
-  it('renders an input with type "range"', async () => {
-    const _render = (0, _react.render)(_RangeInput || (_RangeInput = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0
-      }))),
-      container = _render.container;
-    const label = container.querySelector('[class$="-formFieldLayout__label"]');
-    const input = container.querySelector('[class$="-rangeInput__input"]');
-    (0, _vitest.expect)(label).toBeInTheDocument();
-    (0, _vitest.expect)(label).toHaveTextContent('Opacity');
-    (0, _vitest.expect)(input).toBeInTheDocument();
-    (0, _vitest.expect)(input.tagName).toBe('INPUT');
-    (0, _vitest.expect)(input).toHaveAttribute('name', 'opacity');
-    (0, _vitest.expect)(input).toHaveAttribute('type', 'range');
-  });
-  it('displays the default value', async () => {
-    const _render2 = (0, _react.render)(_RangeInput2 || (_RangeInput2 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 42
-      }))),
-      container = _render2.container;
-    const output = container.querySelector('[class$="-rangeInput__value"]');
-    (0, _vitest.expect)(output).toHaveTextContent('42');
-  });
-  it('sets input value to default value', async () => {
-    const _render3 = (0, _react.render)(_RangeInput3 || (_RangeInput3 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 25
-      }))),
-      container = _render3.container;
-    const input = container.querySelector('input');
-    (0, _vitest.expect)(input).toHaveValue('25');
-  });
-  it('sets input value to controlled value', async () => {
-    const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        value: 25,
-        onChange: () => {}
-      })),
-      container = _render4.container;
-    const input = container.querySelector('input');
-    (0, _vitest.expect)(input).toHaveValue('25');
-  });
-  it('should provide an inputRef prop', async () => {
-    const inputRef = _vitest.vi.fn();
-    const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 42,
-        inputRef: inputRef
-      })),
-      container = _render5.container;
-    const input = container.querySelector('input');
-    (0, _vitest.expect)(inputRef).toHaveBeenCalledWith(input);
-  });
-  describe('thumbVariant prop', () => {
-    it('should throw deprecation warning by default', async () => {
-      (0, _react.render)(_RangeInput4 || (_RangeInput4 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 30
-      })));
-      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
-      (0, _vitest.expect)(consoleWarningMock).toHaveBeenCalledWith(_vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
-    });
-    it('should throw deprecation warning when explicitly "deprecated"', async () => {
-      (0, _react.render)(_RangeInput5 || (_RangeInput5 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 30,
-        thumbVariant: "deprecated"
-      })));
-      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
-      (0, _vitest.expect)(consoleWarningMock).toHaveBeenCalledWith(_vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
-    });
-    it('should not throw deprecation warning when "accessible"', async () => {
-      (0, _react.render)(_RangeInput6 || (_RangeInput6 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 30,
-        thumbVariant: "accessible"
-      })));
-      (0, _vitest.expect)(consoleWarningMock).not.toHaveBeenCalled();
-    });
-  });
-  it('sets min value', async () => {
-    (0, _react.render)(_RangeInput7 || (_RangeInput7 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-      label: "Opacity",
-      name: "opacity",
-      max: 100,
-      min: 25
-    })));
-    const input = _react.screen.getByLabelText('Opacity');
-    (0, _vitest.expect)(input).toHaveAttribute('min', '25');
-  });
-  it('sets max value', async () => {
-    (0, _react.render)(_RangeInput8 || (_RangeInput8 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-      label: "Opacity",
-      name: "opacity",
-      max: 75,
-      min: 0
-    })));
-    const input = _react.screen.getByLabelText('Opacity');
-    (0, _vitest.expect)(input).toHaveAttribute('max', '75');
-  });
-  it('sets step value', async () => {
-    (0, _react.render)(_RangeInput9 || (_RangeInput9 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-      label: "Opacity",
-      name: "opacity",
-      max: 100,
-      min: 0,
-      step: 5
-    })));
-    const input = _react.screen.getByLabelText('Opacity');
-    (0, _vitest.expect)(input).toHaveAttribute('step', '5');
-  });
-  it('formats the value displayed', async () => {
-    const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        defaultValue: 45,
-        formatValue: value => {
-          return `${value}%`;
-        }
-      })),
-      container = _render6.container;
-    const output = container.querySelector('[class$="-rangeInput__value"]');
-    (0, _vitest.expect)(output).toHaveTextContent('45%');
-  });
-  it('hides the value when displayValue is false', async () => {
-    const _render7 = (0, _react.render)(_RangeInput10 || (_RangeInput10 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-        label: "Opacity",
-        name: "opacity",
-        max: 100,
-        min: 0,
-        displayValue: false
-      }))),
-      container = _render7.container;
-    const output = container.querySelector('[class$="-rangeInput__value"]');
-    (0, _vitest.expect)(output).not.toBeInTheDocument();
-  });
-  describe('for a11y', () => {
-    it('should meet standards', async () => {
-      const _render8 = (0, _react.render)(_RangeInput11 || (_RangeInput11 = (0, _jsxRuntime.jsx)(_index.RangeInput, {
-          label: "Opacity",
-          name: "opacity",
-          max: 100,
-          min: 0,
-          defaultValue: 50
-        }))),
-        container = _render8.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-      (0, _vitest.expect)(axeCheck).toBe(true);
-    });
-    it('formats the aria-valuetext attribute', async () => {
-      const _render9 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.RangeInput, {
-          label: "Opacity",
-          name: "opacity",
-          max: 100,
-          min: 0,
-          defaultValue: 40,
-          formatValue: value => {
-            return `${value}%`;
-          }
-        })),
-        container = _render9.container;
-      const input = container.querySelector('input');
-      const output = container.querySelector('[class$="-rangeInput__value"]');
-      (0, _vitest.expect)(input).toHaveAttribute('aria-valuetext', '40%');
-      (0, _vitest.expect)(output).toHaveTextContent('40%');
-    });
-  });
-});