cronofy-elements 1.48.2 → 1.49.2

package/tests/AvailabilityViewer/Navigation.test.js

@@ -1,130 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import { i18n } from "../mocks/i18n";
-import { theme } from "../mocks/theme";
-
-import { PagesProvider } from "../../src/js/components/AvailabilityViewer/contexts/page-context";
-import {
-    I18nContext,
-    LoggingContext,
-    StatusContext,
-    ThemeContext,
-} from "../../src/js/components/AvailabilityViewer/AvailabilityViewer";
-
-import Navigation from "../../src/js/components/AvailabilityViewer/Navigation";
-
-const wrapper = ({ children, log, status, pages }) => (
-    <LoggingContext.Provider value={log ?? { warn: () => undefined }}>
-        <I18nContext.Provider value={i18n}>
-            <ThemeContext.Provider value={[theme("AvailabilityViewer")]}>
-                <StatusContext.Provider
-                    value={
-                        status ?? [
-                            { pagesLoaded: [], notificationCallback: () => undefined },
-                            () => undefined,
-                        ]
-                    }
-                >
-                    <PagesProvider
-                        {...(pages
-                            ? { value: pages[0], dispatch: pages[1] }
-                            : { value: {}, dispatch: () => undefined })}
-                    >
-                        {children}
-                    </PagesProvider>
-                </StatusContext.Provider>
-            </ThemeContext.Provider>
-        </I18nContext.Provider>
-    </LoggingContext.Provider>
-);
-
-describe("Navigation", () => {
-    it("displays nothing if pages.total is empty", () => {
-        const pages = [{ total: 0 }];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        expect(container).toBeEmptyDOMElement();
-    });
-
-    it("displays navigation if pages.total > 0", () => {
-        const pages = [{ total: 1 }];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const buttonWrapper = container.querySelector(".AvailabilityViewer__navigation");
-
-        expect(buttonWrapper).toBeInTheDocument();
-    });
-
-    it("disables button is hasNext is false", () => {
-        const pages = [{ total: 10, hasNext: false }];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const nextButton = container.querySelector(".AvailabilityViewer__button--next");
-
-        expect(nextButton).toBeDisabled();
-    });
-
-    it("enables next button if hasNext is true", () => {
-        const pages = [{ total: 10, hasNext: true }];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const nextButton = container.querySelector(".AvailabilityViewer__button--next");
-
-        expect(nextButton).toBeEnabled();
-    });
-
-    it("calls dispatch to set the next page", () => {
-        const pagesDispatch = jest.fn();
-        const pages = [{ total: 10, hasNext: true }, pagesDispatch];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const nextButton = container.querySelector(".AvailabilityViewer__button--next");
-
-        fireEvent.click(nextButton);
-
-        expect(pagesDispatch).toHaveBeenCalledWith({
-            type: "SET_NEXT_PAGE",
-        });
-    });
-
-    it("disables button if hasPrev is false", () => {
-        const pages = [{ total: 10, hasPrev: false }];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const prevButton = container.querySelector(".AvailabilityViewer__button--prev");
-
-        expect(prevButton).toBeDisabled();
-    });
-
-    it("enables button if hasPrev is true", () => {
-        const pages = [{ total: 10, hasPrev: true }];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const prevButton = container.querySelector(".AvailabilityViewer__button--prev");
-
-        expect(prevButton).toBeEnabled();
-    });
-
-    it("calls dispatch to set the prev page", () => {
-        const pagesDispatch = jest.fn();
-        const pages = [{ total: 10, hasPrev: true }, pagesDispatch];
-
-        const { container } = render(<Navigation />, { wrapper: e => wrapper({ ...e, pages }) });
-
-        const prevButton = container.querySelector(".AvailabilityViewer__button--prev");
-
-        fireEvent.click(prevButton);
-
-        expect(pagesDispatch).toHaveBeenCalledWith({
-            type: "SET_PREV_PAGE",
-        });
-    });
-});

package/tests/AvailabilityViewer/contexts/page-reducer.test.js

@@ -1,87 +0,0 @@
-import { pageReducer } from "../../../src/js/components/AvailabilityViewer/contexts/page-reducer";
-
-describe("pageReducer", () => {
-    describe("SET_PREV_PAGE", () => {
-        it("sets prev page", () => {
-            const initialState = {
-                current: 5,
-                total: 10,
-            };
-
-            const action = {
-                type: "SET_PREV_PAGE",
-            };
-
-            const actual = pageReducer(initialState, action);
-
-            expect(actual).toEqual({
-                current: 4,
-                total: 10,
-                hasNext: true,
-                hasPrev: true,
-            });
-        });
-
-        it("sets page to 1 if calculated page is less than it", () => {
-            const initialState = {
-                current: 1,
-                total: 10,
-            };
-
-            const action = {
-                type: "SET_PREV_PAGE",
-            };
-
-            const actual = pageReducer(initialState, action);
-
-            expect(actual).toEqual({
-                current: 1,
-                total: 10,
-                hasNext: true,
-                hasPrev: false,
-            });
-        });
-    });
-
-    describe("SET_NEXT_PAGE", () => {
-        it("sets next page", () => {
-            const initialState = {
-                current: 3,
-                total: 15,
-            };
-
-            const action = {
-                type: "SET_NEXT_PAGE",
-            };
-
-            const actual = pageReducer(initialState, action);
-
-            expect(actual).toEqual({
-                current: 4,
-                total: 15,
-                hasNext: true,
-                hasPrev: true,
-            });
-        });
-
-        it("sets page to the total if calculated page is greater than it", () => {
-            const initialState = {
-                current: 15,
-                total: 15,
-            };
-
-            const action = {
-                type: "SET_NEXT_PAGE",
-            };
-
-            const actual = pageReducer(initialState, action);
-
-            expect(actual).toEqual({
-                current: 15,
-                total: 15,
-                hasNext: false,
-                hasPrev: true,
-            });
-        });
-    });
-});

package/tests/AvailabilityViewer/reducer.test.js

@@ -1,73 +0,0 @@
-import { selectionReducer } from "../../src/js/components/AvailabilityViewer/contexts/selection-reducer";
-
-describe("AvailabilityViewer Selection Context Reducer", () => {
-    describe("SET_SELECTED_SLOTS", () => {
-        it("should set slot to selectedSlots", () => {
-            const initialState = {
-                selectedSlots: {},
-            };
-
-            const action = {
-                type: "SET_SELECTED_SLOTS",
-                selectedSlots: {
-                    "date-1": "value",
-                },
-            };
-
-            const actual = selectionReducer(initialState, action);
-
-            expect(actual).toEqual({
-                selectedSlots: {
-                    "date-1": "value",
-                },
-            });
-        });
-
-        it("should override existing slot in selectedSlots", () => {
-            const initialState = {
-                selectedSlots: {
-                    "date-1": "value-1",
-                    "date-2": "value-2",
-                },
-            };
-
-            const action = {
-                type: "SET_SELECTED_SLOTS",
-                selectedSlots: {
-                    "date-3": "value-3",
-                    "date-4": "value-4",
-                },
-            };
-
-            const actual = selectionReducer(initialState, action);
-
-            expect(actual).toEqual({
-                selectedSlots: {
-                    "date-3": "value-3",
-                    "date-4": "value-4",
-                },
-            });
-        });
-    });
-
-    describe("CLEAR_SELECTED_SLOTS", () => {
-        it("should clear items from selectedSlots", () => {
-            const initialState = {
-                selectedSlots: {
-                    "date-1": "value",
-                    "date-2": "value",
-                },
-            };
-
-            const action = {
-                type: "CLEAR_SELECTED_SLOTS",
-            };
-
-            const actual = selectionReducer(initialState, action);
-
-            expect(actual).toEqual({
-                selectedSlots: {},
-            });
-        });
-    });
-});

package/tests/CalendarSync/Active.test.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import { i18n } from "../mocks/i18n";
-import { theme } from "./mocks/theme";
-import { I18nContext, ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
-
-import Active from "../../src/js/components/CalendarSync/Active";
-
-const renderActive = () =>
-    render(
-        <I18nContext.Provider value={i18n}>
-            <ThemeContext.Provider value={theme}>
-                <Active />
-            </ThemeContext.Provider>
-        </I18nContext.Provider>
-    );
-
-describe("Active", () => {
-    it("should render component", () => {
-        const { container } = renderActive();
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/tests/CalendarSync/AddToggle.test.js

@@ -1,57 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import {
-    I18nContext,
-    StatusContext,
-    ThemeContext,
-} from "../../src/js/components/CalendarSync/CalendarSync";
-
-import { i18n } from "../mocks/i18n";
-import { theme } from "./mocks/theme";
-
-import AddToggle from "../../src/js/components/CalendarSync/AddToggle";
-
-const renderAddToggle = children =>
-    render(
-        <I18nContext.Provider value={i18n}>
-            <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
-        </I18nContext.Provider>
-    );
-
-describe("AddToggle", () => {
-    // User
-    it.skip("toggles between 'add_to_calendar' and 'back'", () => {
-        // StatusContext not isolated to test this use case
-        // Currently, this would require entire CalSync component to be imported which is not ideal
-    });
-
-    // Developers
-    it("calls dispatch when pressing 'add_calendar_account' button", () => {
-        const dispatch = jest.fn();
-
-        renderAddToggle(
-            <StatusContext.Provider value={[{ adding: false }, dispatch]}>
-                <AddToggle />
-            </StatusContext.Provider>
-        );
-
-        fireEvent.click(screen.getByText(i18n.t("add_calendar_account")));
-
-        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: "TOGGLE_ADD_PROFILE" });
-    });
-
-    it("calls dispatch when pressing 'back' button", () => {
-        const dispatch = jest.fn();
-
-        renderAddToggle(
-            <StatusContext.Provider value={[{ adding: true }, dispatch]}>
-                <AddToggle />
-            </StatusContext.Provider>
-        );
-
-        fireEvent.click(screen.getByText(i18n.t("back")));
-
-        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: "TOGGLE_ADD_PROFILE" });
-    });
-});

package/tests/CalendarSync/EditToggle.test.js

@@ -1,57 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import {
-    I18nContext,
-    StatusContext,
-    ThemeContext,
-} from "../../src/js/components/CalendarSync/CalendarSync";
-
-import { i18n } from "../mocks/i18n";
-import { theme } from "./mocks/theme";
-
-import EditToggle from "../../src/js/components/CalendarSync/EditToggle";
-
-const renderAddToggle = children =>
-    render(
-        <I18nContext.Provider value={i18n}>
-            <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
-        </I18nContext.Provider>
-    );
-
-describe("EditToggle", () => {
-    // User
-    it.skip("toggles between 'edit_accounts' and 'cancel'", () => {
-        // StatusContext not isolated to test this use case
-        // Currently, this would require entire CalSync component to be imported which is not ideal
-    });
-
-    // Developer
-    it("calls dispatch when pressing 'edit_accounts' button", () => {
-        const dispatch = jest.fn();
-
-        renderAddToggle(
-            <StatusContext.Provider value={[{ editing: false }, dispatch]}>
-                <EditToggle />
-            </StatusContext.Provider>
-        );
-
-        fireEvent.click(screen.getByText(i18n.t("edit_accounts")));
-
-        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: "TOGGLE_EDIT_PROFILES" });
-    });
-
-    it("calls dispatch when pressing 'cancel' button", () => {
-        const dispatch = jest.fn();
-
-        renderAddToggle(
-            <StatusContext.Provider value={[{ editing: true }, dispatch]}>
-                <EditToggle />
-            </StatusContext.Provider>
-        );
-
-        fireEvent.click(screen.getByText(i18n.t("cancel")));
-
-        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenCalledWith({ type: "TOGGLE_EDIT_PROFILES" });
-    });
-});

package/tests/CalendarSync/Inactive.test.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import { i18n } from "../mocks/i18n";
-import { theme } from "./mocks/theme";
-import { I18nContext, ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
-
-import Inactive from "../../src/js/components/CalendarSync/Inactive";
-
-const renderInactive = children =>
-    render(
-        <I18nContext.Provider value={i18n}>
-            <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
-        </I18nContext.Provider>
-    );
-
-describe("Inactive", () => {
-    it("should render component", () => {
-        const url = "https://example.com";
-
-        const { container } = renderInactive(<Inactive url={url} />);
-
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/tests/CalendarSync/Pending.test.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import { i18n } from "../mocks/i18n";
-import { theme } from "./mocks/theme";
-import { I18nContext, ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
-
-import Pending from "../../src/js/components/CalendarSync/Pending";
-
-const renderInactive = () =>
-    render(
-        <I18nContext.Provider value={i18n}>
-            <ThemeContext.Provider value={theme}>
-                <Pending />
-            </ThemeContext.Provider>
-        </I18nContext.Provider>
-    );
-
-describe("Pending", () => {
-    it("should render component", () => {
-        const { container } = renderInactive();
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});

package/tests/CalendarSync/ProviderLogo.test.js

@@ -1,95 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import { theme } from "./mocks/theme";
-import { ThemeContext } from "../../src/js/components/CalendarSync/CalendarSync";
-import ProviderLogo from "../../src/js/components/CalendarSync/ProviderLogo";
-
-const renderProviderLogo = children =>
-    render(<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>);
-
-describe("ProviderLogo", () => {
-    it("displays nothing if provider doesn't exist", () => {
-        const { container } = renderProviderLogo(<ProviderLogo />);
-
-        const parent = container.firstChild;
-        const expectedResponse = null;
-
-        expect(parent.firstChild).toEqual(expectedResponse);
-    });
-
-    describe("Google", () => {
-        const provider = "google";
-
-        it("displays fill icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} fill />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-
-        it("displays outlined icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-    });
-
-    describe("Live Conntect", () => {
-        const provider = "live_conntect";
-
-        it("displays fill icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} fill />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-
-        it("displays outlined icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-    });
-
-    describe("Apple", () => {
-        const provider = "apple";
-
-        it("displays icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} fill />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-    });
-
-    describe("Office365", () => {
-        const provider = "office365";
-
-        it("displays fill icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} fill />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-
-        it("displays outlined icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-    });
-
-    describe("Exchange", () => {
-        const provider = "exchange";
-
-        it("displays fill icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} fill />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-
-        it("displays outlined icon", () => {
-            const { container } = renderProviderLogo(<ProviderLogo provider={provider} />);
-
-            expect(container.firstChild).toMatchSnapshot();
-        });
-    });
-});

package/tests/CalendarSync/__snapshots__/Active.test.js.snap

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Active should render component 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 10px 0;
-}
-
-.emotion-1 {
-  display: block;
-  color: greyMid;
-  text-transform: uppercase;
-  font-weight: bold;
-  -webkit-letter-spacing: 1px;
-  -moz-letter-spacing: 1px;
-  -ms-letter-spacing: 1px;
-  letter-spacing: 1px;
-  font-size: 10px;
-  line-height: 1;
-}
-
-.emotion-2 {
-  display: block;
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-  margin-left: 4px;
-  background: green;
-  border-radius: 50%;
-}
-
-.emotion-3 {
-  fill: white;
-}
-
-<div
-  class="CalendarSync__status--active emotion-0"
->
-  <span
-    class="CalendarSync__status-label emotion-1"
-  >
-    active
-  </span>
-  <svg
-    class="CalendarSync__status-icon CalendarSync__status-icon--tick emotion-2"
-    viewBox="0 0 14 15"
-  >
-    <path
-      class="emotion-3"
-      d="M3.095 7.892l.65-.927L6.06 8.587l3.57-5.097.926.649-4.218 6.024z"
-    />
-  </svg>
-</div>
-`;