@instructure/ui-calendar 10.5.1-snapshot-0 → 10.5.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.5.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-0) (2024-11-08)
+## [10.5.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-2) (2024-11-13)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 

package/es/Calendar/Day/__new-tests__/Day.test.js

@@ -0,0 +1,242 @@
+var _Day, _Day2, _Day3, _Day4, _Day5, _Day6, _Day7, _Day8, _Day9, _Day10, _Day11;
+/*
+ * 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 from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Day } from '../index';
+import DayExamples from '../__examples__/Day.examples';
+describe('Day', () => {
+  it('should render children', async () => {
+    const _render = render(_Day || (_Day = /*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: "1 August 2019 Friday"
+      }, "8"))),
+      rerender = _render.rerender;
+    const child = screen.getByText('8');
+    expect(child).toBeInTheDocument();
+    rerender(_Day2 || (_Day2 = /*#__PURE__*/React.createElement(Day, {
+      date: "2019-08-02",
+      label: "1 August 2019 Friday"
+    }, "31")));
+    const childUpdated = screen.getByText('31');
+    expect(childUpdated).toBeInTheDocument();
+  });
+  it('should have an accessible label', async () => {
+    const label = '1 August 2019 Friday';
+    const _render2 = render(/*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: label
+      }, "8")),
+      container = _render2.container;
+    const screenReaderContent = container.querySelector('[class$="-screenReaderContent"]');
+    expect(screenReaderContent).toBeInTheDocument();
+    expect(screenReaderContent).toHaveTextContent(label);
+  });
+  it('should set aria-current="date" when `isToday`', async () => {
+    const _render3 = render(_Day3 || (_Day3 = /*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: "1 August 2019 Friday",
+        isToday: true
+      }, "8"))),
+      container = _render3.container,
+      rerender = _render3.rerender;
+    const today = container.querySelector('[class$="-calendarDay"]');
+    expect(today).toHaveAttribute('aria-current', 'date');
+    rerender(_Day4 || (_Day4 = /*#__PURE__*/React.createElement(Day, {
+      date: "2019-08-02",
+      label: "1 August 2019 Friday",
+      isToday: false
+    }, "8")));
+    const day = container.querySelector('[class$="-calendarDay"]');
+    expect(day).not.toHaveAttribute('aria-current', 'date');
+  });
+  it('should not set aria-selected without a role', async () => {
+    const _render4 = render(_Day5 || (_Day5 = /*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: "1 August 2019 Friday"
+      }, "8"))),
+      container = _render4.container,
+      rerender = _render4.rerender;
+    const day = container.querySelector('[class$="-calendarDay"]');
+    expect(day).not.toHaveAttribute('aria-selected');
+    rerender(_Day6 || (_Day6 = /*#__PURE__*/React.createElement(Day, {
+      date: "2019-08-02",
+      label: "1 August 2019 Friday",
+      isSelected: true
+    }, "8")));
+    const daySelected = container.querySelector('[class$="-calendarDay"]');
+    expect(daySelected).not.toHaveAttribute('aria-selected');
+  });
+  it('should set aria-selected="true/false" when `isSelected` and `role` is `option` or `gridcell`', async () => {
+    const _render5 = render(_Day7 || (_Day7 = /*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: "1 August 2019 Friday",
+        role: "option"
+      }, "8"))),
+      container = _render5.container,
+      rerender = _render5.rerender;
+    const day = container.querySelector('[class$="-calendarDay"]');
+    expect(day).toHaveAttribute('aria-selected', 'false');
+    rerender(_Day8 || (_Day8 = /*#__PURE__*/React.createElement(Day, {
+      date: "2019-08-02",
+      label: "1 August 2019 Friday",
+      role: "option",
+      isSelected: true
+    }, "8")));
+    const daySelected = container.querySelector('[class$="-calendarDay"]');
+    expect(daySelected).toHaveAttribute('aria-selected', 'true');
+    rerender(_Day9 || (_Day9 = /*#__PURE__*/React.createElement(Day, {
+      date: "2019-08-02",
+      label: "1 August 2019 Friday",
+      role: "gridcell",
+      isSelected: false
+    }, "8")));
+    const dayCell = container.querySelector('[class$="-calendarDay"]');
+    expect(dayCell).toHaveAttribute('aria-selected', 'false');
+    rerender(_Day10 || (_Day10 = /*#__PURE__*/React.createElement(Day, {
+      date: "2019-08-02",
+      label: "1 August 2019 Friday",
+      role: "gridcell",
+      isSelected: true
+    }, "8")));
+    const dayCellSelected = container.querySelector('[class$="-calendarDay"]');
+    expect(dayCellSelected).toHaveAttribute('aria-selected', 'true');
+  });
+  it('should call onClick with date', async () => {
+    const onClick = vi.fn();
+    const date = '2019-08-02';
+    const _render6 = render(/*#__PURE__*/React.createElement(Day, {
+        date: date,
+        label: "1 August 2019 Friday",
+        onClick: onClick
+      }, "8")),
+      container = _render6.container;
+    const day = container.querySelector('[class$="-calendarDay"]');
+    await userEvent.click(day);
+    await waitFor(() => {
+      const args = onClick.mock.calls[0][1];
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(args).toHaveProperty('date', date);
+    });
+  });
+  it('should call onKeyDown with date', async () => {
+    const onKeyDown = vi.fn();
+    const date = '2019-08-02';
+    const _render7 = render(/*#__PURE__*/React.createElement(Day, {
+        date: date,
+        label: "1 August 2019 Friday",
+        onKeyDown: onKeyDown,
+        onClick: () => {}
+      }, "8")),
+      container = _render7.container;
+    const day = container.querySelector('[class$="-calendarDay"]');
+    userEvent.type(day, '{enter}');
+    await waitFor(() => {
+      const args = onKeyDown.mock.calls[0][1];
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(args).toHaveProperty('date', date);
+    });
+  });
+  it('should apply disabled when interaction is `disabled`', async () => {
+    const onClick = vi.fn();
+    const _render8 = render(/*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: "1 August 2019 Friday",
+        onClick: onClick,
+        interaction: "disabled"
+      }, "8")),
+      container = _render8.container;
+    const day = container.querySelector('[class$="-calendarDay"]');
+    userEvent.click(day);
+    await waitFor(() => {
+      expect(onClick).not.toHaveBeenCalled();
+      expect(day).toHaveAttribute('disabled');
+    });
+  });
+  it('should provide an elementRef', async () => {
+    let element;
+    const elementRef = el => {
+      element = el;
+    };
+    const _render9 = render(/*#__PURE__*/React.createElement(Day, {
+        date: "2019-08-02",
+        label: "1 August 2019 Friday",
+        elementRef: elementRef
+      }, "8")),
+      container = _render9.container;
+    const day = container.querySelector('[class$="-calendarDay"]');
+    expect(day).toEqual(element);
+  });
+  describe('element type', () => {
+    it('should render as a span by default', async () => {
+      const _render10 = render(_Day11 || (_Day11 = /*#__PURE__*/React.createElement(Day, {
+          date: "2019-08-02",
+          label: "1 August 2019 Friday"
+        }, "8"))),
+        container = _render10.container;
+      const day = container.querySelector('[class$="-calendarDay"]');
+      expect(day === null || day === void 0 ? void 0 : day.tagName).toEqual('SPAN');
+    });
+    it('should render as a button when onClick is provided', async () => {
+      const _render11 = render(/*#__PURE__*/React.createElement(Day, {
+          date: "2019-08-02",
+          label: "1 August 2019 Friday",
+          onClick: () => {}
+        }, "8")),
+        container = _render11.container;
+      const day = container.querySelector('[class$="-calendarDay"]');
+      expect(day === null || day === void 0 ? void 0 : day.tagName).toEqual('BUTTON');
+    });
+    it('default elementTypes should be overwritten when `as` prop is set', async () => {
+      const _render12 = render(/*#__PURE__*/React.createElement(Day, {
+          date: "2019-08-02",
+          label: "1 August 2019 Friday",
+          onClick: () => {},
+          as: "li"
+        }, "8")),
+        container = _render12.container;
+      const day = container.querySelector('[class$="-calendarDay"]');
+      expect(day === null || day === void 0 ? void 0 : day.tagName).toEqual('LI');
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(Day, DayExamples);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render13 = render(component.content),
+          container = _render13.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
+});

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

@@ -1,4 +1,4 @@
-var _Calendar, _Calendar2, _Calendar3, _Calendar4;
+var _Calendar, _Calendar2, _Calendar3, _Calendar4, _span, _button, _button2, _button3, _button4, _button5, _button6;
 /*
  * The MIT License (MIT)
  *
@@ -23,10 +23,31 @@ var _Calendar, _Calendar2, _Calendar3, _Calendar4;
  * SOFTWARE.
  */
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import CalendarExamples from '../__examples__/Calendar.examples';
 import Calendar from '../index';
+const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const generateDays = (count = Calendar.DAY_COUNT) => {
+  const days = [];
+  const date = new Date('2019-07-28');
+  while (days.length < count) {
+    days.push(/*#__PURE__*/React.createElement(Calendar.Day, {
+      key: date.toISOString(),
+      date: date.toISOString(),
+      label: date.toISOString(),
+      isOutsideMonth: date.getMonth() !== 7
+    }, date.getDate()));
+    date.setDate(date.getDate() + 1);
+  }
+  return days;
+};
 describe('<Calendar />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -85,4 +106,190 @@ describe('<Calendar />', () => {
       }
     });
   });
+  it('should render children', async () => {
+    const _render4 = render(/*#__PURE__*/React.createElement(Calendar, {
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays())),
+      container = _render4.container;
+    const calendarDays = container.querySelectorAll('span[class$="-calendarDay__day"]');
+    expect(calendarDays.length).toEqual(Calendar.DAY_COUNT);
+  });
+  it(`should warn if the correct number of children are not provided`, async () => {
+    const count = Calendar.DAY_COUNT - 1;
+    render(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: weekdayLabels
+    }, generateDays(count)));
+    const expectedErrorMessage = `should have exactly ${Calendar.DAY_COUNT} children. ${count} provided.`;
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+  });
+  it('should render weekday labels', async () => {
+    const _render5 = render(/*#__PURE__*/React.createElement(Calendar, {
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays())),
+      container = _render5.container,
+      rerender = _render5.rerender;
+    const originalHeaders = container.querySelectorAll('th');
+    expect(originalHeaders.length).toEqual(7);
+    weekdayLabels.forEach((label, i) => {
+      expect(originalHeaders[i]).toHaveTextContent(label);
+    });
+    const functionalWeekdayLabels = [() => 'Sx', () => 'Mx', () => 'Tx', () => 'Wx', () => 'Tx', () => 'Fx', () => 'Sx'];
+
+    // Set prop: renderWeekdayLabels
+    rerender(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: functionalWeekdayLabels
+    }, generateDays()));
+    const updatedHeaders = container.querySelectorAll('th');
+    expect(updatedHeaders.length).toEqual(7);
+    functionalWeekdayLabels.forEach((functionalLabel, i) => {
+      expect(updatedHeaders[i]).toHaveTextContent(functionalLabel());
+    });
+  });
+  it('should warn if 7 weekday labels are not provided', async () => {
+    render(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: []
+    }, generateDays()));
+    const expectedErrorMessage = '`renderWeekdayLabels` should be an array with 7 labels (one for each weekday). 0 provided.';
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+  });
+  it('should format the weekday labels and days correctly', async () => {
+    const _render6 = render(/*#__PURE__*/React.createElement(Calendar, {
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays())),
+      container = _render6.container;
+    const headerRow = container.querySelectorAll('thead > tr');
+    expect(headerRow.length).toEqual(1);
+    const headers = container.querySelectorAll('thead > tr > th');
+    expect(headers.length).toEqual(7);
+    const bodyRows = container.querySelectorAll('tbody > tr');
+    expect(bodyRows.length).toEqual(Calendar.DAY_COUNT / 7);
+    for (const row of bodyRows) {
+      const days = row.querySelectorAll('td');
+      expect(days.length).toEqual(7);
+    }
+  });
+  it('should render navigation label', async () => {
+    const navLabel = _span || (_span = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, "March"), /*#__PURE__*/React.createElement("div", null, "2019")));
+    const _render7 = render(/*#__PURE__*/React.createElement(Calendar, {
+        renderWeekdayLabels: weekdayLabels,
+        renderNavigationLabel: navLabel
+      }, generateDays())),
+      rerender = _render7.rerender;
+    const month = screen.getByText('March');
+    const year = screen.getByText('2019');
+    expect(month).toBeInTheDocument();
+    expect(year).toBeInTheDocument();
+
+    // Set prop: renderNavigationLabel
+    rerender(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: weekdayLabels,
+      renderNavigationLabel: () => navLabel
+    }, generateDays()));
+    const updatedMonth = screen.getByText('March');
+    const updatedYear = screen.getByText('2019');
+    expect(updatedMonth).toBeInTheDocument();
+    expect(updatedYear).toBeInTheDocument();
+  });
+  it('should render next and prev buttons', async () => {
+    const _render8 = render(/*#__PURE__*/React.createElement(Calendar, {
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays())),
+      rerender = _render8.rerender;
+    const defaultPrevButton = screen.getByText('Previous month');
+    const defaultNextButton = screen.getByText('Next month');
+    expect(defaultPrevButton).toBeInTheDocument();
+    expect(defaultNextButton).toBeInTheDocument();
+    rerender(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: weekdayLabels,
+      renderPrevMonthButton: _button || (_button = /*#__PURE__*/React.createElement("button", null, "test-prev")),
+      renderNextMonthButton: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "test-next"))
+    }, generateDays()));
+    const customPrevButton = screen.getByText('test-prev');
+    const customNextButton = screen.getByText('test-next');
+    expect(customPrevButton).toBeInTheDocument();
+    expect(customNextButton).toBeInTheDocument();
+    rerender(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: weekdayLabels,
+      renderPrevMonthButton: () => _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "func-test-prev")),
+      renderNextMonthButton: () => _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "func-test-next"))
+    }, generateDays()));
+    const funcPrevButton = screen.getByText('func-test-prev');
+    const funcNextButton = screen.getByText('func-test-next');
+    expect(funcPrevButton).toBeInTheDocument();
+    expect(funcNextButton).toBeInTheDocument();
+  });
+  it('should call onRequestRenderNextMonth and onRequestRenderPrevMonth', async () => {
+    const onRequestRenderPrevMonth = vi.fn();
+    const onRequestRenderNextMonth = vi.fn();
+    render(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: weekdayLabels,
+      renderPrevMonthButton: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "prev month")),
+      renderNextMonthButton: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "next month")),
+      onRequestRenderPrevMonth: onRequestRenderPrevMonth,
+      onRequestRenderNextMonth: onRequestRenderNextMonth
+    }, generateDays()));
+    const prevButton = screen.getByText('prev month');
+    const nextButton = screen.getByText('next month');
+    expect(onRequestRenderPrevMonth).not.toHaveBeenCalled();
+    expect(onRequestRenderNextMonth).not.toHaveBeenCalled();
+    await userEvent.click(prevButton);
+    await userEvent.click(nextButton);
+    await waitFor(() => {
+      expect(onRequestRenderPrevMonth).toHaveBeenCalledTimes(1);
+      expect(onRequestRenderNextMonth).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('when role="listbox"', () => {
+    it('should set role="listbox" on table root and role="presentation" on the correct elements', async () => {
+      const _render9 = render(/*#__PURE__*/React.createElement(Calendar, {
+          renderWeekdayLabels: weekdayLabels,
+          role: "listbox"
+        }, generateDays())),
+        container = _render9.container;
+      const table = container.querySelector('table');
+      expect(table).toHaveAttribute('role', 'listbox');
+      const rows = container.querySelectorAll('tbody > tr');
+      for (const row of rows) {
+        expect(row).toHaveAttribute('role', 'presentation');
+        const tds = row.querySelectorAll('td');
+        tds.forEach(td => {
+          expect(td).toHaveAttribute('role', 'presentation');
+        });
+      }
+    });
+    it("should link each day with it's weekday header via `aria-describedby`", async () => {
+      const _render10 = render(/*#__PURE__*/React.createElement(Calendar, {
+          renderWeekdayLabels: weekdayLabels,
+          role: "listbox"
+        }, generateDays())),
+        container = _render10.container;
+      const days = container.querySelectorAll('tbody > tr > td');
+      const headers = container.querySelectorAll('th');
+      days.forEach((dayTd, i) => {
+        const index = i % 7;
+        const day = dayTd.querySelector('span[class$="-calendarDay"]');
+        expect(day).toHaveAttribute('aria-describedby', headers[index].getAttribute('id'));
+      });
+    });
+  });
+  it('should render root as designated by the `as` prop', async () => {
+    render(/*#__PURE__*/React.createElement(Calendar, {
+      renderWeekdayLabels: weekdayLabels,
+      as: "ul"
+    }, generateDays()));
+    const calendar = screen.getByRole('list');
+    expect(calendar.tagName).toBe('UL');
+    expect(calendar).toHaveTextContent(weekdayLabels.join(''));
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(Calendar, CalendarExamples);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render11 = render(component.content),
+          container = _render11.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
 });