@vimeo/iris
Version:
Vimeo Design System
147 lines (145 loc) • 7.45 kB
JavaScript
import { g as __awaiter, c as __assign, h as __generator } from '../../../../tslib.es6-7f0e734f.js';
import React__default from 'react';
import { s as screen, r as render } from '../../../../react.esm-edf204b5.js';
import { u as userEvent } from '../../../../index-cff9b439.js';
import { ThemeProvider } from 'styled-components';
import { themes } from '../../../../themes/index.esm.js';
import { Calendar } from './Calendar.esm.js';
import '../../../../es.typed-array.set-c204e812.js';
import 'os';
import 'tty';
import 'react-dom';
import 'util';
import 'polished';
import '../../../../color/colors.esm.js';
import './useDaysFromViewport.esm.js';
import '../../../../Calendar.state-4c10d987.js';
import '../DateRange/DateFormat.esm.js';
import './CalendarDay.esm.js';
import './CalendarDayLabel.esm.js';
import '../../../../typography/Paragraph/Paragraph.esm.js';
import '../../../../typography/Paragraph/Paragraph.style.esm.js';
import '../../../../typography/Text/Text.esm.js';
import '../../../../typography/Text/Text.style.esm.js';
import '../../../../typography/typography.esm.js';
import '../../../../tokens/core.esm.js';
import '../../../../tokens/color/index.esm.js';
import '../../../../tokens/color/background/background.esm.js';
import '../../../../tokens/util/readToken.esm.js';
import '../../../../tokens/util/clamp.esm.js';
import '../../../../tokens/color/format/format.esm.js';
import '../../../../tokens/color/format/primary.esm.js';
import '../../../../tokens/color/format/secondary.esm.js';
import '../../../../tokens/color/format/tertiary.esm.js';
import '../../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../../tokens/color/livestream/livestream.esm.js';
import '../../../../tokens/color/status/status.esm.js';
import '../../../../tokens/color/status/caution.esm.js';
import '../../../../tokens/color/status/negative.esm.js';
import '../../../../tokens/color/status/positive.esm.js';
import '../../../../tokens/color/stroke/stroke.esm.js';
import '../../../../tokens/color/surface/surface.esm.js';
import '../../../../tokens/color/text/text.esm.js';
import '../../../../tokens/util/round.esm.js';
import '../../../../tokens/color/upsell/upsell.esm.js';
import '../../../../tokens/color/upsell/sm.esm.js';
import '../../../../tokens/color/upsell/xl.esm.js';
import '../../../../tokens/color/upsell/new.esm.js';
import '../../../../tokens/edge/edge.esm.js';
import '../../../../tokens/space/space.esm.js';
import '../../../../tokens/typography/index.esm.js';
import '../../../../tokens/typography/size/size.esm.js';
import '../../../../typography/Text/EditableText.esm.js';
import '../../../../utils/HOCs/withIris.esm.js';
import '../../../../utils/hooks/useLayoutStyles.esm.js';
import '../../../../utils/DOM/geometry.esm.js';
import '../../../../utils/css.esm.js';
import '../DateRange/translations.esm.js';
import '../../../../typography/Header/Header.esm.js';
import '../../../../typography/Header/Header.style.esm.js';
import '../../../../icons/ui/ChevronLeft.esm.js';
import '../../../../icons/ui/ChevronRight.esm.js';
var Provider = function (_a) {
var children = _a.children;
return (React__default.createElement(ThemeProvider, { theme: themes['light'] }, children));
};
var renderWithThemeProvider = function (ui, options) { return render(ui, __assign({ wrapper: Provider }, options)); };
describe('Calendar', function () {
it('Renders Calendar', function () {
renderWithThemeProvider(React__default.createElement(Calendar, { "data-testid": "calendar" }));
var calendar = screen.getByTestId('calendar');
expect(calendar).toBeInTheDocument();
});
it('Renders with initial month', function () {
var date = new Date(2022, 8, 26);
renderWithThemeProvider(React__default.createElement(Calendar, { "data-testid": "calendar", initialMonth: date }));
var month = screen.getByRole('heading');
expect(month).toHaveTextContent('September 2022');
});
// Renders appropriate min date, and can navigate to next month
it('Handles min date', function () { return __awaiter(void 0, void 0, void 0, function () {
var minDate, month, nextButton;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
minDate = new Date(2022, 8, 26);
renderWithThemeProvider(React__default.createElement(Calendar, { "data-testid": "calendar", initialMonth: minDate, minDate: minDate }));
month = screen.getByRole('heading');
expect(month).toHaveTextContent('September 2022');
nextButton = screen.getByLabelText('Next');
return [4 /*yield*/, userEvent.click(nextButton)];
case 1:
_a.sent();
return [4 /*yield*/, expect(screen.getByRole('heading')).toHaveTextContent('October 2022')];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); });
// Renders appropriate max date, and can navigate to previous month
it('Handles max date', function () { return __awaiter(void 0, void 0, void 0, function () {
var maxDate, month, previousButton;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
maxDate = new Date(2022, 8, 26);
renderWithThemeProvider(React__default.createElement(Calendar, { "data-testid": "calendar", initialMonth: maxDate, maxDate: maxDate }));
month = screen.getByRole('heading');
expect(month).toHaveTextContent('September 2022');
previousButton = screen.getByLabelText('Previous');
return [4 /*yield*/, userEvent.click(previousButton)];
case 1:
_a.sent();
return [4 /*yield*/, expect(screen.getByRole('heading')).toHaveTextContent('August 2022')];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); });
it('Handles onClick', function () { return __awaiter(void 0, void 0, void 0, function () {
var minDate, mockFn, clickedDay, expectedDateValue;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
minDate = new Date(2022, 8, 26);
mockFn = jest.fn();
renderWithThemeProvider(React__default.createElement(Calendar, { "data-testid": "calendar", initialMonth: minDate, minDate: minDate, onClick: mockFn }));
clickedDay = screen.getByText('27');
return [4 /*yield*/, userEvent.click(clickedDay)];
case 1:
_a.sent();
expectedDateValue = new Date(2022, 8, 27);
expect(mockFn).toBeCalledWith(expectedDateValue);
return [2 /*return*/];
}
});
}); });
});