@instructure/ui-date-input 10.19.2-snapshot-3 → 10.19.2-snapshot-4

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

@@ -1,353 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _DateInputExample4;
-/*
- * 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 { useState } from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { vi } from 'vitest';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import { IconHeartLine } from '@instructure/ui-icons';
-import { DateInput2 } from '../index';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const LABEL_TEXT = 'Choose a date';
-const DateInputExample = () => {
-  const _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  return _jsx(DateInput2, {
-    renderLabel: LABEL_TEXT,
-    screenReaderLabels: {
-      calendarIcon: 'Calendar',
-      nextMonthButton: 'Next month',
-      prevMonthButton: 'Previous month'
-    },
-    value: inputValue,
-    onChange: (_e, inputValue, _dateString) => {
-      setInputValue(inputValue);
-    }
-  });
-};
-describe('<DateInput2 />', () => {
-  let consoleWarningMock;
-  let consoleErrorMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution
-    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleWarningMock.mockRestore();
-    consoleErrorMock.mockRestore();
-  });
-  it('should render an input', async () => {
-    const _render = render(_DateInputExample || (_DateInputExample = _jsx(DateInputExample, {}))),
-      container = _render.container;
-    const dateInput = container.querySelector('input');
-    expect(dateInput).toBeInTheDocument();
-    expect(dateInput).toHaveAttribute('type', 'text');
-  });
-  it('should render an input label', async () => {
-    const _render2 = render(_DateInputExample2 || (_DateInputExample2 = _jsx(DateInputExample, {}))),
-      container = _render2.container;
-    const label = container.querySelector('label');
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent(LABEL_TEXT);
-  });
-  it('should render an input placeholder', async () => {
-    const placeholder = 'Placeholder';
-    render(_jsx(DateInput2, {
-      renderLabel: "Choose a date",
-      screenReaderLabels: {
-        calendarIcon: 'Calendar',
-        nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
-      },
-      placeholder: placeholder,
-      value: ""
-    }));
-    const dateInput = screen.getByLabelText('Choose a date');
-    expect(dateInput).toHaveAttribute('placeholder', placeholder);
-  });
-  it('should render a calendar icon with screen reader label', async () => {
-    const iconLabel = 'Calendar icon Label';
-    const _render3 = render(_jsx(DateInput2, {
-        renderLabel: "Choose a date",
-        screenReaderLabels: {
-          calendarIcon: iconLabel,
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        },
-        value: ""
-      })),
-      container = _render3.container;
-    const calendarIcon = container.querySelector('svg[name="IconCalendarMonth"]');
-    const calendarLabel = screen.getByText(iconLabel);
-    expect(calendarIcon).toBeInTheDocument();
-    expect(calendarLabel).toBeInTheDocument();
-  });
-  it('refs should return the underlying component', async () => {
-    const inputRef = vi.fn();
-    const ref = {
-      current: null
-    };
-    const _render4 = render(_jsx(DateInput2, {
-        id: "dateInput2",
-        inputRef: inputRef,
-        ref: ref,
-        renderLabel: LABEL_TEXT,
-        screenReaderLabels: {
-          calendarIcon: 'Calendar',
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        }
-      })),
-      container = _render4.container;
-    const dateInput = container.querySelector('input');
-    expect(inputRef).toHaveBeenCalledWith(dateInput);
-    expect(ref.current.props.id).toBe('dateInput2');
-    expect(dateInput).toBeInTheDocument();
-  });
-  it('should render a custom calendar icon with screen reader label', async () => {
-    const iconLabel = 'Calendar icon Label';
-    const _render5 = render(_jsx(DateInput2, {
-        renderLabel: "Choose a date",
-        screenReaderLabels: {
-          calendarIcon: iconLabel,
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        },
-        value: "",
-        renderCalendarIcon: _IconHeartLine || (_IconHeartLine = _jsx(IconHeartLine, {}))
-      })),
-      container = _render5.container;
-    const calendarIcon = container.querySelector('svg[name="IconHeart"]');
-    const calendarLabel = screen.getByText(iconLabel);
-    expect(calendarIcon).toBeInTheDocument();
-    expect(calendarLabel).toBeInTheDocument();
-  });
-  it('should not show calendar table by default', async () => {
-    render(_DateInputExample3 || (_DateInputExample3 = _jsx(DateInputExample, {})));
-    const calendarTable = screen.queryByRole('table');
-    expect(calendarTable).not.toBeInTheDocument();
-  });
-  it('should show calendar table when calendar button is clicked', async () => {
-    render(_DateInputExample4 || (_DateInputExample4 = _jsx(DateInputExample, {})));
-    const calendarButton = screen.getByRole('button');
-    expect(calendarButton).toBeInTheDocument();
-    await userEvent.click(calendarButton);
-    await waitFor(() => {
-      const calendarTable = screen.queryByRole('table');
-      expect(calendarTable).toBeInTheDocument();
-    });
-  });
-  it('should render navigation arrow buttons with screen reader labels', async () => {
-    const nextMonthLabel = 'Next month';
-    const prevMonthLabel = 'Previous month';
-    render(_jsx(DateInput2, {
-      renderLabel: "Choose a date",
-      screenReaderLabels: {
-        calendarIcon: 'Calendar',
-        nextMonthButton: nextMonthLabel,
-        prevMonthButton: prevMonthLabel
-      },
-      value: ""
-    }));
-    const calendarButton = screen.getByRole('button');
-    await userEvent.click(calendarButton);
-    await waitFor(() => {
-      const prevMonthButton = screen.getByRole('button', {
-        name: prevMonthLabel
-      });
-      const nextMonthButton = screen.getByRole('button', {
-        name: nextMonthLabel
-      });
-      expect(prevMonthButton).toBeInTheDocument();
-      expect(nextMonthButton).toBeInTheDocument();
-      const prevButtonLabel = screen.getByText(prevMonthLabel);
-      const nextButtonLabel = screen.getByText(nextMonthLabel);
-      expect(prevButtonLabel).toBeInTheDocument();
-      expect(nextButtonLabel).toBeInTheDocument();
-      const prevMonthIcon = prevMonthButton.querySelector('svg[name="IconArrowOpenStart"]');
-      const nextMonthIcon = nextMonthButton.querySelector('svg[name="IconArrowOpenEnd"]');
-      expect(prevMonthIcon).toBeInTheDocument();
-      expect(nextMonthIcon).toBeInTheDocument();
-    });
-  });
-  it('should programmatically set and render the initial value', async () => {
-    const value = '26/03/2024';
-    render(_jsx(DateInput2, {
-      renderLabel: "Choose a date",
-      screenReaderLabels: {
-        calendarIcon: 'Calendar',
-        nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
-      },
-      locale: "en-GB",
-      timezone: "UTC",
-      value: value
-    }));
-    const dateInput = screen.getByLabelText('Choose a date');
-    expect(dateInput).toHaveValue(value);
-    expect(dateInput).toBeInTheDocument();
-  });
-  it('should set interaction type to disabled', async () => {
-    const interactionDisabled = 'disabled';
-    const _render6 = render(_jsx(DateInput2, {
-        renderLabel: "Choose a date",
-        screenReaderLabels: {
-          calendarIcon: 'Calendar',
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        },
-        value: "",
-        interaction: interactionDisabled
-      })),
-      container = _render6.container;
-    const dateInput = container.querySelector('input');
-    expect(dateInput).toHaveAttribute(interactionDisabled);
-  });
-  it('should set interaction type to readonly', async () => {
-    const interactionReadOnly = 'readonly';
-    const _render7 = render(_jsx(DateInput2, {
-        renderLabel: "Choose a date",
-        screenReaderLabels: {
-          calendarIcon: 'Calendar',
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        },
-        value: "",
-        interaction: interactionReadOnly
-      })),
-      container = _render7.container;
-    const dateInput = container.querySelector('input');
-    const calendarButton = screen.getByRole('button');
-    expect(dateInput).toHaveAttribute(interactionReadOnly);
-    expect(calendarButton).toBeInTheDocument();
-    await userEvent.click(calendarButton);
-    await waitFor(() => {
-      const calendarTable = screen.queryByRole('table');
-      expect(calendarTable).not.toBeInTheDocument();
-    });
-  });
-  it('should set required', async () => {
-    const _render8 = render(_jsx(DateInput2, {
-        renderLabel: "Choose a date",
-        screenReaderLabels: {
-          calendarIcon: 'Calendar',
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        },
-        value: "",
-        isRequired: true
-      })),
-      container = _render8.container;
-    const dateInput = container.querySelector('input');
-    expect(dateInput).toHaveAttribute('required');
-  });
-  it('should call onBlur', async () => {
-    const onBlur = vi.fn();
-    render(_jsx(DateInput2, {
-      renderLabel: "Choose a date",
-      screenReaderLabels: {
-        calendarIcon: 'Calendar',
-        nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
-      },
-      value: "",
-      onBlur: onBlur
-    }));
-    const dateInput = screen.getByLabelText('Choose a date');
-    fireEvent.blur(dateInput);
-    await waitFor(() => {
-      expect(onBlur).toHaveBeenCalled();
-    });
-  });
-  it('should validate if the invalidDateErrorMessage prop is provided', async () => {
-    const errorMsg = 'errorMsg';
-    const Example = () => {
-      const _useState3 = useState(''),
-        _useState4 = _slicedToArray(_useState3, 2),
-        inputValue = _useState4[0],
-        setInputValue = _useState4[1];
-      return _jsx(DateInput2, {
-        renderLabel: LABEL_TEXT,
-        screenReaderLabels: {
-          calendarIcon: 'Calendar',
-          nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
-        },
-        value: inputValue,
-        onChange: (_e, inputValue, _dateString) => {
-          setInputValue(inputValue);
-        },
-        invalidDateErrorMessage: errorMsg
-      });
-    };
-    render(_jsx(Example, {}));
-    expect(screen.queryByText(errorMsg)).not.toBeInTheDocument();
-    const dateInput = screen.getByLabelText(LABEL_TEXT);
-    await userEvent.click(dateInput);
-    await userEvent.type(dateInput, 'Not a date');
-    dateInput.blur();
-    await waitFor(() => {
-      expect(screen.getByText(errorMsg)).toBeInTheDocument();
-    });
-  });
-  it('should show form field messages', async () => {
-    const messages = [{
-      text: 'TypeLess'
-    }, {
-      type: 'error',
-      text: 'Error'
-    }, {
-      type: 'success',
-      text: 'Success'
-    }, {
-      type: 'hint',
-      text: 'Hint'
-    }, {
-      type: 'screenreader-only',
-      text: 'Screenreader'
-    }];
-    render(_jsx(DateInput2, {
-      renderLabel: "Choose a date",
-      screenReaderLabels: {
-        calendarIcon: 'Calendar',
-        nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
-      },
-      value: "",
-      messages: messages
-    }));
-    expect(screen.getByText('TypeLess')).toBeVisible();
-    expect(screen.getByText('Error')).toBeVisible();
-    expect(screen.getByText('Success')).toBeVisible();
-    expect(screen.getByText('Hint')).toBeVisible();
-    const screenreaderMessage = screen.getByText('Screenreader');
-    expect(screenreaderMessage).toBeInTheDocument();
-    expect(screenreaderMessage).toHaveClass(/screenReaderContent/);
-  });
-});