@instructure/ui-date-input 9.10.2 → 9.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "9.10.2",
+  "version": "9.11.1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.10.2",
-    "@instructure/ui-babel-preset": "9.10.2",
-    "@instructure/ui-buttons": "9.10.2",
-    "@instructure/ui-scripts": "9.10.2",
-    "@instructure/ui-test-utils": "9.10.2",
+    "@instructure/ui-axe-check": "9.11.1",
+    "@instructure/ui-babel-preset": "9.11.1",
+    "@instructure/ui-buttons": "9.11.1",
+    "@instructure/ui-scripts": "9.11.1",
+    "@instructure/ui-test-utils": "9.11.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.10.2",
-    "@instructure/shared-types": "9.10.2",
-    "@instructure/ui-calendar": "9.10.2",
-    "@instructure/ui-form-field": "9.10.2",
-    "@instructure/ui-i18n": "9.10.2",
-    "@instructure/ui-icons": "9.10.2",
-    "@instructure/ui-popover": "9.10.2",
-    "@instructure/ui-position": "9.10.2",
-    "@instructure/ui-prop-types": "9.10.2",
-    "@instructure/ui-react-utils": "9.10.2",
-    "@instructure/ui-selectable": "9.10.2",
-    "@instructure/ui-testable": "9.10.2",
-    "@instructure/ui-text-input": "9.10.2",
-    "@instructure/ui-utils": "9.10.2",
+    "@instructure/emotion": "9.11.1",
+    "@instructure/shared-types": "9.11.1",
+    "@instructure/ui-calendar": "9.11.1",
+    "@instructure/ui-form-field": "9.11.1",
+    "@instructure/ui-i18n": "9.11.1",
+    "@instructure/ui-icons": "9.11.1",
+    "@instructure/ui-popover": "9.11.1",
+    "@instructure/ui-position": "9.11.1",
+    "@instructure/ui-prop-types": "9.11.1",
+    "@instructure/ui-react-utils": "9.11.1",
+    "@instructure/ui-selectable": "9.11.1",
+    "@instructure/ui-testable": "9.11.1",
+    "@instructure/ui-text-input": "9.11.1",
+    "@instructure/ui-utils": "9.11.1",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/src/DateInput/__new-tests__/DateInput.test.tsx

@@ -381,7 +381,9 @@ describe('<DateInput />', () => {
             {generateDays()}
           </DateInput>
         )
-        const dateInput = container.querySelector("[class$='-formFieldLabel']")
+        const dateInput = container.querySelector(
+          'span[class$="-formFieldLayout__label"]'
+        )
 
         expect(dateInput).toHaveTextContent('Choose date')
 

package/src/DateInput2/__new-tests__/DateInput2.test.tsx

@@ -0,0 +1,360 @@
+/*
+ * 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 React, { useState } from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi, MockInstance } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+import { DateInput2 } from '../index'
+
+const LABEL_TEXT = 'Choose a date'
+
+const DateInputExample = () => {
+  const [inputValue, setInputValue] = useState('')
+
+  return (
+    <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: MockInstance<typeof console.error>
+  let consoleErrorMock: MockInstance<typeof console.error>
+
+  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 { container } = render(<DateInputExample />)
+    const dateInput = container.querySelector('input')
+
+    expect(dateInput).toBeInTheDocument()
+    expect(dateInput).toHaveAttribute('type', 'text')
+  })
+
+  it('should render an input label', async () => {
+    const { container } = render(<DateInputExample />)
+
+    const label = container.querySelector('label')
+
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveTextContent(LABEL_TEXT)
+  })
+
+  it('should render an input placeholder', async () => {
+    const placeholder = 'Placeholder'
+    render(
+      <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 { container } = render(
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: iconLabel,
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value=""
+      />
+    )
+    const calendarIcon = container.querySelector(
+      'svg[name="IconCalendarMonth"]'
+    )
+    const calendarLabel = screen.getByText(iconLabel)
+
+    expect(calendarIcon).toBeInTheDocument()
+    expect(calendarLabel).toBeInTheDocument()
+  })
+
+  it('should not show calendar table by default', async () => {
+    render(<DateInputExample />)
+    const calendarTable = screen.queryByRole('table')
+
+    expect(calendarTable).not.toBeInTheDocument()
+  })
+
+  it('should render navigation arrow buttons with screen reader labels', async () => {
+    const nextMonthLabel = 'Next month'
+    const prevMonthLabel = 'Previous month'
+
+    render(
+      <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(
+      <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 { container } = render(
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value=""
+        interaction={interactionDisabled}
+      />
+    )
+    const dateInput = container.querySelector('input')
+
+    expect(dateInput).toHaveAttribute(interactionDisabled)
+  })
+
+  it('should set interaction type to readonly', async () => {
+    const interactionReadOnly = 'readonly'
+    const { container } = render(
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value=""
+        interaction={interactionReadOnly}
+      />
+    )
+    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 { container } = render(
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value=""
+        isRequired
+      />
+    )
+    const dateInput = container.querySelector('input')
+
+    expect(dateInput).toHaveAttribute('required')
+  })
+
+  it('should call onBlur', async () => {
+    const onBlur = vi.fn()
+    render(
+      <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 [inputValue, setInputValue] = useState('')
+
+      return (
+        <DateInput2
+          renderLabel={LABEL_TEXT}
+          screenReaderLabels={{
+            calendarIcon: 'Calendar',
+            nextMonthButton: 'Next month',
+            prevMonthButton: 'Previous month'
+          }}
+          value={inputValue}
+          onChange={(_e, inputValue, _dateString) => {
+            setInputValue(inputValue)
+          }}
+          invalidDateErrorMessage={errorMsg}
+        />
+      )
+    }
+
+    render(<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: any = [
+      { text: 'TypeLess' },
+      { type: 'error', text: 'Error' },
+      { type: 'success', text: 'Success' },
+      { type: 'hint', text: 'Hint' },
+      { type: 'screenreader-only', text: 'Screenreader' }
+    ]
+
+    render(
+      <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/)
+  })
+})