@vimeo/iris/components/inputs/Dates/Calendar/Calendar.test.js

Vimeo Design System

'use strict';

var tslib_es6 = require('../../../../tslib.es6-3ec409b7.js');
var React = require('react');
var react_esm = require('../../../../react.esm-d9b3c6bd.js');
var index = require('../../../../index-1aed0cf1.js');
var styled = require('styled-components');
var themes_index = require('../../../../themes/index.js');
var components_inputs_Dates_Calendar_Calendar = require('./Calendar.js');
require('../../../../es.typed-array.set-5ee45ede.js');
require('os');
require('tty');
require('react-dom');
require('util');
require('polished');
require('../../../../color/colors.js');
require('./useDaysFromViewport.js');
require('../../../../Calendar.state-6346b28e.js');
require('../DateRange/DateFormat.js');
require('./CalendarDay.js');
require('./CalendarDayLabel.js');
require('../../../../typography/Paragraph/Paragraph.js');
require('../../../../typography/Paragraph/Paragraph.style.js');
require('../../../../typography/Text/Text.js');
require('../../../../typography/Text/Text.style.js');
require('../../../../typography/typography.js');
require('../../../../tokens/core.js');
require('../../../../tokens/color/index.js');
require('../../../../tokens/color/background/background.js');
require('../../../../tokens/util/readToken.js');
require('../../../../tokens/util/clamp.js');
require('../../../../tokens/color/format/format.js');
require('../../../../tokens/color/format/primary.js');
require('../../../../tokens/color/format/secondary.js');
require('../../../../tokens/color/format/tertiary.js');
require('../../../../tokens/color/rainbow/rainbow.js');
require('../../../../tokens/color/rainbow/conic/index.js');
require('../../../../tokens/color/rainbow/conic/sm.js');
require('../../../../tokens/color/rainbow/conic/xl.js');
require('../../../../tokens/color/rainbow/linear/index.js');
require('../../../../tokens/color/rainbow/linear/sm.js');
require('../../../../tokens/color/rainbow/linear/xl.js');
require('../../../../tokens/color/livestream/livestream.js');
require('../../../../tokens/color/status/status.js');
require('../../../../tokens/color/status/caution.js');
require('../../../../tokens/color/status/negative.js');
require('../../../../tokens/color/status/positive.js');
require('../../../../tokens/color/stroke/stroke.js');
require('../../../../tokens/color/surface/surface.js');
require('../../../../tokens/color/text/text.js');
require('../../../../tokens/util/round.js');
require('../../../../tokens/color/upsell/upsell.js');
require('../../../../tokens/color/upsell/sm.js');
require('../../../../tokens/color/upsell/xl.js');
require('../../../../tokens/color/upsell/new.js');
require('../../../../tokens/edge/edge.js');
require('../../../../tokens/space/space.js');
require('../../../../tokens/typography/index.js');
require('../../../../tokens/typography/size/size.js');
require('../../../../typography/Text/EditableText.js');
require('../../../../utils/HOCs/withIris.js');
require('../../../../utils/hooks/useLayoutStyles.js');
require('../../../../utils/DOM/geometry.js');
require('../../../../utils/css.js');
require('../DateRange/translations.js');
require('../../../../typography/Header/Header.js');
require('../../../../typography/Header/Header.style.js');
require('../../../../icons/ui/ChevronLeft.js');
require('../../../../icons/ui/ChevronRight.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Provider = function (_a) {
    var children = _a.children;
    return (React__default["default"].createElement(styled.ThemeProvider, { theme: themes_index.themes['light'] }, children));
};
var renderWithThemeProvider = function (ui, options) { return react_esm.render(ui, tslib_es6.__assign({ wrapper: Provider }, options)); };
describe('Calendar', function () {
    it('Renders Calendar', function () {
        renderWithThemeProvider(React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { "data-testid": "calendar" }));
        var calendar = react_esm.screen.getByTestId('calendar');
        expect(calendar).toBeInTheDocument();
    });
    it('Renders with initial month', function () {
        var date = new Date(2022, 8, 26);
        renderWithThemeProvider(React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { "data-testid": "calendar", initialMonth: date }));
        var month = react_esm.screen.getByRole('heading');
        expect(month).toHaveTextContent('September 2022');
    });
    // Renders appropriate min date, and can navigate to next month
    it('Handles min date', function () { return tslib_es6.__awaiter(void 0, void 0, void 0, function () {
        var minDate, month, nextButton;
        return tslib_es6.__generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    minDate = new Date(2022, 8, 26);
                    renderWithThemeProvider(React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { "data-testid": "calendar", initialMonth: minDate, minDate: minDate }));
                    month = react_esm.screen.getByRole('heading');
                    expect(month).toHaveTextContent('September 2022');
                    nextButton = react_esm.screen.getByLabelText('Next');
                    return [4 /*yield*/, index.userEvent.click(nextButton)];
                case 1:
                    _a.sent();
                    return [4 /*yield*/, expect(react_esm.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 tslib_es6.__awaiter(void 0, void 0, void 0, function () {
        var maxDate, month, previousButton;
        return tslib_es6.__generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    maxDate = new Date(2022, 8, 26);
                    renderWithThemeProvider(React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { "data-testid": "calendar", initialMonth: maxDate, maxDate: maxDate }));
                    month = react_esm.screen.getByRole('heading');
                    expect(month).toHaveTextContent('September 2022');
                    previousButton = react_esm.screen.getByLabelText('Previous');
                    return [4 /*yield*/, index.userEvent.click(previousButton)];
                case 1:
                    _a.sent();
                    return [4 /*yield*/, expect(react_esm.screen.getByRole('heading')).toHaveTextContent('August 2022')];
                case 2:
                    _a.sent();
                    return [2 /*return*/];
            }
        });
    }); });
    it('Handles onClick', function () { return tslib_es6.__awaiter(void 0, void 0, void 0, function () {
        var minDate, mockFn, clickedDay, expectedDateValue;
        return tslib_es6.__generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    minDate = new Date(2022, 8, 26);
                    mockFn = jest.fn();
                    renderWithThemeProvider(React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { "data-testid": "calendar", initialMonth: minDate, minDate: minDate, onClick: mockFn }));
                    clickedDay = react_esm.screen.getByText('27');
                    return [4 /*yield*/, index.userEvent.click(clickedDay)];
                case 1:
                    _a.sent();
                    expectedDateValue = new Date(2022, 8, 27);
                    expect(mockFn).toBeCalledWith(expectedDateValue);
                    return [2 /*return*/];
            }
        });
    }); });
});