@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/Chip/Chip.test.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Chip } from "./Chip";
+import { tokens } from "../utils/design";
+it("renders an active Chip", () => {
+    const { getByText, getByLabelText } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), accessibilityLabel: "Foo chip", isActive: true }));
+    expect(getByText("Foo")).toBeDefined();
+    expect(getByLabelText("Foo chip").props.style).toContainEqual({
+        backgroundColor: tokens["color-surface--reverse"],
+    });
+});
+it("renders an active Chip without onPress as disabled", () => {
+    const { getByTestId } = render(React.createElement(Chip, { label: "Foo", accessibilityLabel: "Foo chip", isActive: true }));
+    expect(getByTestId("chipTest").props.accessibilityState.disabled).toBeTruthy();
+});
+it("renders an inactive Chip with a default backgroundColor", () => {
+    const { getByTestId } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), isActive: false }));
+    expect(getByTestId("chipTest").props.style).not.toContainEqual({
+        backgroundColor: tokens["color-surface--reverse"],
+    });
+    expect(getByTestId("chipTest").props.style).toContainEqual({
+        backgroundColor: tokens["color-interactive--background"],
+    });
+});
+it("renders an inactive Chip with a surface backgroundColor", () => {
+    const { getByTestId } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), isActive: false, inactiveBackgroundColor: "surface" }));
+    expect(getByTestId("chipTest").props.style).toContainEqual({
+        backgroundColor: tokens["color-surface"],
+    });
+});
+it("renders an active Chip with icon", () => {
+    const { getByTestId } = render(React.createElement(Chip, { onPress: jest.fn(), icon: "invoice", isActive: true }));
+    expect(getByTestId("invoice")).toBeDefined();
+});
+it("renders an inactive Chip with icon", () => {
+    const { getByTestId } = render(React.createElement(Chip, { onPress: jest.fn(), icon: "invoice", isActive: false }));
+    expect(getByTestId("invoice")).toBeDefined();
+});
+it("renders a Chip with the dismiss icon", () => {
+    const { getByTestId } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), isActive: true, isDismissible: true }));
+    expect(getByTestId("remove")).toBeDefined();
+});
+it("should call the handler with the new value", () => {
+    const pressHandler = jest.fn();
+    const accessibilityLabel = "test chip";
+    const { getByLabelText } = render(React.createElement(Chip, { onPress: pressHandler, label: "foo", accessibilityLabel: accessibilityLabel, isActive: true }));
+    fireEvent.press(getByLabelText(accessibilityLabel));
+    expect(pressHandler).toHaveBeenCalled();
+});
+describe("accessibilityLabel", () => {
+    it("uses accessibilityLabel if specified", () => {
+        const pressHandler = jest.fn();
+        const { getByLabelText } = render(React.createElement(Chip, { onPress: pressHandler, label: "label", accessibilityLabel: "accessibilityLabel", isActive: true }));
+        expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+    });
+    it("uses label if unspecified", () => {
+        const pressHandler = jest.fn();
+        const { getByLabelText } = render(React.createElement(Chip, { onPress: pressHandler, label: "label", isActive: true }));
+        expect(getByLabelText("label")).toBeTruthy();
+    });
+});
+describe("accent", () => {
+    it("uses accent color when present and chip is Active", () => {
+        const { getByTestId } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), accessibilityLabel: "Foo chip", isActive: true, accent: "client" }));
+        expect(getByTestId("chipTest").props.style).toContainEqual({
+            backgroundColor: tokens["color-client"],
+        });
+    });
+});

package/dist/src/Content/Content.test.js

@@ -0,0 +1,250 @@
+import React from "react";
+import { render, renderHook } from "@testing-library/react-native";
+import { View } from "react-native";
+import { Content } from "./Content";
+import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
+import { useVerticalStyles } from "./ContentVertical.style";
+import { useHorizontalStyles } from "./ContentHorizontal.style";
+import { Text } from "../Text";
+function getContentComponent(parentView) {
+    var _a;
+    return (_a = parentView === null || parentView === void 0 ? void 0 : parentView.children[0]) === null || _a === void 0 ? void 0 : _a.children[0];
+}
+function getContentChildren(contentView) {
+    var _a;
+    return (_a = contentView.children[0]) === null || _a === void 0 ? void 0 : _a.children;
+}
+const text = "🌚 I am the text 🌞";
+function setupContent(props) {
+    const container = render(React.createElement(View, { accessibilityLabel: "contentView" },
+        React.createElement(Content, { spacing: props === null || props === void 0 ? void 0 : props.spacing, childSpacing: props === null || props === void 0 ? void 0 : props.childSpacing, direction: props === null || props === void 0 ? void 0 : props.direction, UNSAFE_style: props === null || props === void 0 ? void 0 : props.UNSAFE_style },
+            React.createElement(Text, null, text),
+            React.createElement(Text, null, text))));
+    const parentView = container.getByLabelText("contentView");
+    const contentView = getContentComponent(parentView);
+    const contentChildren = getContentChildren(contentView);
+    return Object.assign(Object.assign({}, container), { parentView, contentView, contentChildren });
+}
+let spaceStyles;
+let verticalStyles;
+let horizontalStyles;
+beforeAll(() => {
+    spaceStyles = renderHook(() => useSpaceAroundStyles()).result.current;
+    verticalStyles = renderHook(() => useVerticalStyles()).result.current;
+    horizontalStyles = renderHook(() => useHorizontalStyles()).result.current;
+});
+describe("Space around", () => {
+    it("should have a base padding around the component", () => {
+        const { contentView } = setupContent();
+        expect(contentView.props.style).toContainEqual(spaceStyles.baseSpace);
+    });
+    it("should have a small padding around the component", () => {
+        const { contentView } = setupContent({ spacing: "small" });
+        expect(contentView.props.style).toContainEqual(spaceStyles.smallSpace);
+    });
+    it("should have a large padding around the component", () => {
+        const { contentView } = setupContent({ spacing: "large" });
+        expect(contentView.props.style).toContainEqual(spaceStyles.largeSpace);
+    });
+    it("should have a no padding around the component", () => {
+        const { contentView } = setupContent({ spacing: "none" });
+        expect(contentView.props.style).toContainEqual(spaceStyles.noneSpace);
+    });
+    it("should have a smaller padding around the component", () => {
+        const { contentView } = setupContent({ spacing: "smaller" });
+        expect(contentView.props.style).toContainEqual(spaceStyles.smallerSpace);
+    });
+    it("should have the smallest padding around the component", () => {
+        const { contentView } = setupContent({ spacing: "smallest" });
+        expect(contentView.props.style).toContainEqual(spaceStyles.smallestSpace);
+    });
+});
+describe("Vertical", () => {
+    it("should have the vertical wrapper style", () => {
+        const { contentView } = setupContent();
+        expect(contentView.props.style).toContainEqual(verticalStyles.wrapper);
+    });
+    describe("Child space between", () => {
+        it("should have a base top padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "vertical",
+                childSpacing: "base",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                verticalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(verticalStyles.baseChildSpace);
+        });
+        it("should have a small top padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "vertical",
+                childSpacing: "small",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                verticalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(verticalStyles.smallChildSpace);
+        });
+        it("should have a large top padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "vertical",
+                childSpacing: "large",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                verticalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(verticalStyles.largeChildSpace);
+        });
+        it("should have no top padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "vertical",
+                childSpacing: "none",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                verticalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(verticalStyles.noneChildSpace);
+        });
+        it("should have a smaller top padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "vertical",
+                childSpacing: "smaller",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                verticalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(verticalStyles.smallerChildSpace);
+        });
+        it("should have the smallest top padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "vertical",
+                childSpacing: "smallest",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                verticalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(verticalStyles.smallestChildSpace);
+        });
+    });
+});
+describe("Horizontal", () => {
+    it("should have the horizontal wrapper style", () => {
+        const { contentView } = setupContent({ direction: "horizontal" });
+        expect(contentView.props.style).toContainEqual(horizontalStyles.wrapper);
+    });
+    describe("Child space between", () => {
+        it("should have a base left padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "horizontal",
+                childSpacing: "base",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                horizontalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(horizontalStyles.baseChildSpace);
+        });
+        it("should have a small left padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "horizontal",
+                childSpacing: "small",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                horizontalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(horizontalStyles.smallChildSpace);
+        });
+        it("should have a large left padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "horizontal",
+                childSpacing: "large",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                horizontalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(horizontalStyles.largeChildSpace);
+        });
+        it("should have no left padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "horizontal",
+                childSpacing: "none",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                horizontalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(horizontalStyles.noneChildSpace);
+        });
+        it("should have a smaller left padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "horizontal",
+                childSpacing: "smaller",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                horizontalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(horizontalStyles.smallerChildSpace);
+        });
+        it("should have the smallest left padding on every child but the first", () => {
+            const { contentChildren } = setupContent({
+                direction: "horizontal",
+                childSpacing: "smallest",
+            });
+            expect(contentChildren[0].props.style).toEqual([
+                horizontalStyles.childWrapper,
+            ]);
+            expect(contentChildren[1].props.style).toContainEqual(horizontalStyles.smallestChildSpace);
+        });
+    });
+});
+describe("UNSAFE_style", () => {
+    it("applies custom styles to container", () => {
+        const customStyle = {
+            backgroundColor: "red",
+            padding: 16,
+        };
+        const { parentView } = setupContent({
+            UNSAFE_style: {
+                container: customStyle,
+            },
+        });
+        const contentView = getContentComponent(parentView);
+        expect(contentView.props.style).toEqual(expect.arrayContaining([expect.objectContaining(customStyle)]));
+    });
+    it("applies custom styles to child wrapper", () => {
+        const customStyle = {
+            backgroundColor: "blue",
+            marginLeft: 8,
+        };
+        const { parentView } = setupContent({
+            UNSAFE_style: {
+                childWrapper: customStyle,
+            },
+        });
+        const contentView = getContentComponent(parentView);
+        const contentChildren = getContentChildren(contentView);
+        contentChildren.forEach(child => {
+            expect(child.props.style).toEqual(expect.arrayContaining([expect.objectContaining(customStyle)]));
+        });
+    });
+    it("applies custom styles to both container and child wrapper", () => {
+        const containerStyle = {
+            backgroundColor: "red",
+            padding: 16,
+        };
+        const childWrapperStyle = {
+            backgroundColor: "blue",
+            marginLeft: 8,
+        };
+        const { parentView } = setupContent({
+            UNSAFE_style: {
+                container: containerStyle,
+                childWrapper: childWrapperStyle,
+            },
+        });
+        const contentView = getContentComponent(parentView);
+        const contentChildren = getContentChildren(contentView);
+        expect(contentView.props.style).toEqual(expect.arrayContaining([expect.objectContaining(containerStyle)]));
+        contentChildren.forEach(child => {
+            expect(child.props.style).toEqual(expect.arrayContaining([expect.objectContaining(childWrapperStyle)]));
+        });
+    });
+});

package/dist/src/ContentOverlay/ContentOverlay.test.js

@@ -0,0 +1,297 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { createRef } from "react";
+import { act, render, screen, userEvent, waitFor, } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { ContentOverlay } from "./ContentOverlay";
+import { AtlantisOverlayProvider } from "../AtlantisOverlayProvider";
+import { tokens } from "../utils/design";
+import { Button } from "../Button";
+import { Content } from "../Content";
+import { Text } from "../Text";
+jest.unmock("../hooks/useIsScreenReaderEnabled");
+jest.unmock("react-native-reanimated");
+jest.unmock("@gorhom/bottom-sheet");
+jest.mock("@gorhom/bottom-sheet/lib/commonjs/hooks/useAnimatedLayout", () => ({
+    // Fix for reanimated not actually running in the test environment.
+    useAnimatedLayout: () => {
+        const value = {
+            containerHeight: 600,
+            rawContainerHeight: 600,
+            handleHeight: 24,
+            footerHeight: 0,
+            contentHeight: 400,
+            containerOffset: { top: 0, bottom: 0, left: 0, right: 0 },
+        };
+        return { value, get: () => value };
+    },
+}));
+const user = userEvent.setup();
+function getDefaultOptions() {
+    return {
+        text: "I am the contentOverlay text",
+        title: "Title",
+        buttonLabel: "Open Content Overlay",
+        fullScreen: false,
+        showDismiss: false,
+        modalBackgroundColor: "surface",
+    };
+}
+function renderContentOverlay({ text, title, buttonLabel, a11yLabel, fullScreen, showDismiss, modalBackgroundColor, onCloseCallback, onOpenCallback, onBeforeExitCallback, } = getDefaultOptions()) {
+    const contentOverlayRef = createRef();
+    render(React.createElement(AtlantisOverlayProvider, null,
+        React.createElement(View, null,
+            React.createElement(Text, null, "I am a bunch of text"),
+            React.createElement(Button, { label: buttonLabel || "Open Content Overlay", onPress: () => {
+                    var _a, _b;
+                    (_b = (_a = contentOverlayRef === null || contentOverlayRef === void 0 ? void 0 : contentOverlayRef.current) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a);
+                } }),
+            React.createElement(ContentOverlay, { ref: contentOverlayRef, title: title, onClose: onCloseCallback, onOpen: onOpenCallback, accessibilityLabel: a11yLabel, fullScreen: fullScreen, showDismiss: showDismiss, modalBackgroundColor: modalBackgroundColor, onBeforeExit: onBeforeExitCallback },
+                React.createElement(Content, null,
+                    React.createElement(Text, null, text))))));
+}
+function renderAndOpenContentOverlay() {
+    return __awaiter(this, arguments, void 0, function* (defaultOptions = getDefaultOptions()) {
+        jest.useFakeTimers();
+        const props = Object.assign({ onOpenCallback: jest.fn(), onCloseCallback: jest.fn() }, defaultOptions);
+        renderContentOverlay(props);
+        yield user.press(screen.getByLabelText(defaultOptions.buttonLabel));
+        yield act(() => __awaiter(this, void 0, void 0, function* () {
+            jest.runAllTimers();
+        }));
+        yield waitFor(() => {
+            // expect(screen.getByTestId("ATL-Overlay-Header")).toBeDefined();
+            expect(props.onOpenCallback).toHaveBeenCalledTimes(1);
+        });
+    });
+}
+describe("when open is called on the content overlay ref", () => {
+    it("should open the content overlay, exposing the content to the user", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { text: "I am text within the content overlay" });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getByText(options.text)).toBeDefined();
+    }));
+});
+describe("when the close button is clicked on an open content overlay", () => {
+    it("should close the content overlay", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { text: "I am text within the content overlay", showDismiss: true });
+        yield renderAndOpenContentOverlay(options);
+        const closeButton = yield screen.findByTestId("ATL-Overlay-CloseButton");
+        yield user.press(closeButton);
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            jest.runAllTimers();
+        }));
+        yield waitFor(() => {
+            expect(screen.queryByText(options.text)).toBeNull();
+        });
+    }));
+});
+describe("when the close button is clicked on an open content overlay with a defined onClose prop", () => {
+    it("should call the passed in onClose prop", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { onCloseCallback: jest.fn(), showDismiss: true });
+        yield renderAndOpenContentOverlay(options);
+        const closeButton = yield screen.findByTestId("ATL-Overlay-CloseButton");
+        yield user.press(closeButton);
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            jest.runAllTimers();
+        }));
+        yield waitFor(() => {
+            expect(options.onCloseCallback).toHaveBeenCalled();
+        });
+    }));
+});
+describe("when the content overlay is created with a defined onOpen prop", () => {
+    describe("when the content overlay is not opened", () => {
+        it("should not call the passed in onOpen prop", () => __awaiter(void 0, void 0, void 0, function* () {
+            const options = Object.assign(Object.assign({}, getDefaultOptions()), { onOpenCallback: jest.fn() });
+            renderContentOverlay(options);
+            yield waitFor(() => {
+                expect(options.onOpenCallback).not.toHaveBeenCalled();
+            });
+        }));
+    });
+    describe("when the content overlay is opened", () => {
+        it("should call the passed in onOpen prop", () => __awaiter(void 0, void 0, void 0, function* () {
+            const options = Object.assign(Object.assign({}, getDefaultOptions()), { onOpenCallback: jest.fn() });
+            yield renderAndOpenContentOverlay(options);
+            yield waitFor(() => {
+                expect(options.onOpenCallback).toHaveBeenCalled();
+            });
+        }));
+    });
+});
+describe("when title prop passed to content overlay", () => {
+    it("should set the header title", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { title: "Awesome Title" });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getByText(options.title)).toBeDefined();
+    }));
+});
+describe("when accessibilityLabel prop passed to content overlay", () => {
+    it("should set the header accessibilityLabel", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { a11yLabel: "Awesome a11y Label", showDismiss: true });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getByLabelText(options.a11yLabel || "ohno")).toBeDefined();
+    }));
+});
+describe("when accessibilityLabel prop NOT passed to content overlay", () => {
+    it("should use default accessibilityLabel", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { title: "Awesome Title", showDismiss: true });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getAllByLabelText(`Close ${options.title} modal`)).toHaveLength(2);
+    }));
+});
+describe("when there is a screen reader enabled", () => {
+    jest
+        .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+        .mockImplementation(() => Promise.resolve(true));
+    it("should show the dismiss button", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign({}, getDefaultOptions());
+        yield renderAndOpenContentOverlay(options);
+        expect(yield screen.findByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    }));
+});
+describe("when fullScreen is set to true", () => {
+    it("should show the dismiss button", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { fullScreen: true });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    }));
+});
+describe("when showDismiss is set to true", () => {
+    it("should show the dismiss button", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { showDismiss: true });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    }));
+});
+describe("when the close button is clicked on an open content overlay with a defined onBeforeExit", () => {
+    it("should call the callback method on exit", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { onBeforeExitCallback: jest.fn(), showDismiss: true });
+        yield renderAndOpenContentOverlay(options);
+        yield user.press(screen.getByTestId("ATL-Overlay-CloseButton"));
+        yield waitFor(() => {
+            expect(options.onBeforeExitCallback).toHaveBeenCalled();
+        });
+    }));
+});
+describe("modalBackgroundColor prop", () => {
+    describe("when using the default surface value", () => {
+        it("renders the component with the color-surface color", () => __awaiter(void 0, void 0, void 0, function* () {
+            const options = Object.assign({}, getDefaultOptions());
+            yield renderAndOpenContentOverlay(options);
+            const OverlayHeader = screen.getByTestId("ATL-Overlay-Header")
+                .children[0];
+            const OverlayHeaderStyles = OverlayHeader.props.style;
+            expect(OverlayHeaderStyles).toEqual(expect.arrayContaining([
+                expect.objectContaining({
+                    backgroundColor: tokens["color-surface"],
+                }),
+            ]));
+            expect(OverlayHeaderStyles).not.toEqual(expect.arrayContaining([
+                expect.objectContaining({
+                    backgroundColor: tokens["color-surface--background"],
+                }),
+            ]));
+        }));
+    });
+    describe("when set to background", () => {
+        it("changes the backround color of the modal to color-surface--background", () => __awaiter(void 0, void 0, void 0, function* () {
+            const options = Object.assign(Object.assign({}, getDefaultOptions()), { modalBackgroundColor: "background" });
+            yield renderAndOpenContentOverlay(options);
+            const OverlayHeader = screen.getByTestId("ATL-Overlay-Header")
+                .children[0];
+            const OverlayHeaderStyles = OverlayHeader.props.style;
+            expect(OverlayHeaderStyles).toEqual(expect.arrayContaining([
+                expect.objectContaining({
+                    backgroundColor: tokens["color-surface--background"],
+                }),
+            ]));
+        }));
+    });
+});
+describe("scrollEnabled prop", () => {
+    describe("when scrollEnabled is false (default)", () => {
+        it("should render content in BottomSheetView", () => __awaiter(void 0, void 0, void 0, function* () {
+            const options = Object.assign({}, getDefaultOptions());
+            yield renderAndOpenContentOverlay(options);
+            expect(screen.getByText(options.text)).toBeDefined();
+            expect(screen.getByTestId("ATL-Overlay-Children")).toBeDefined();
+        }));
+    });
+});
+describe("loading prop", () => {
+    describe("when loading is true", () => {
+        it("should show subdued heading text", () => __awaiter(void 0, void 0, void 0, function* () {
+            const overlayRef = createRef();
+            render(React.createElement(AtlantisOverlayProvider, null,
+                React.createElement(View, null,
+                    React.createElement(ContentOverlay, { ref: overlayRef, title: "Loading Overlay", loading: true, showDismiss: true },
+                        React.createElement(Text, null, "Loading content")))));
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                (_b = (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }));
+            yield waitFor(() => {
+                expect(screen.getByText("Loading Overlay")).toBeDefined();
+            });
+        }));
+    });
+});
+describe("onBeforeExit callback", () => {
+    describe("when close button is pressed with onBeforeExit defined", () => {
+        it("should call onBeforeExit instead of immediately closing", () => __awaiter(void 0, void 0, void 0, function* () {
+            const overlayRef = createRef();
+            const onBeforeExitCallback = jest.fn();
+            render(React.createElement(AtlantisOverlayProvider, null,
+                React.createElement(View, null,
+                    React.createElement(ContentOverlay, { ref: overlayRef, title: "Confirmation Required", onBeforeExit: onBeforeExitCallback, showDismiss: true },
+                        React.createElement(Text, null, "Must confirm to close")))));
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                (_b = (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }));
+            yield waitFor(() => {
+                expect(screen.getByText("Must confirm to close")).toBeDefined();
+            });
+            const closeButton = screen.getByTestId("ATL-Overlay-CloseButton");
+            yield user.press(closeButton);
+            yield waitFor(() => {
+                expect(onBeforeExitCallback).toHaveBeenCalled();
+                expect(screen.getByText("Must confirm to close")).toBeDefined();
+            });
+        }));
+    });
+});
+describe("title prop", () => {
+    it("should render the title", () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = Object.assign(Object.assign({}, getDefaultOptions()), { title: "Awesome Title" });
+        yield renderAndOpenContentOverlay(options);
+        expect(screen.getByText(options.title)).toBeDefined();
+    }));
+    describe("when title is not passed but showDismiss is true", () => {
+        it("should should render dismiss button", () => __awaiter(void 0, void 0, void 0, function* () {
+            const options = Object.assign(Object.assign({}, getDefaultOptions()), { showDismiss: true });
+            yield renderAndOpenContentOverlay(options);
+            expect(screen.getByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+        }));
+    });
+    describe("when title is not passed but showDismiss is false", () => {
+        it("should not render the header", () => __awaiter(void 0, void 0, void 0, function* () {
+            jest
+                .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+                .mockImplementation(() => Promise.resolve(false));
+            const options = Object.assign(Object.assign({}, getDefaultOptions()), { showDismiss: false, title: "", fullScreen: false });
+            yield renderAndOpenContentOverlay(options);
+            console.log(options);
+            expect(screen.queryByTestId("ATL-Overlay-Header")).toBeNull();
+        }));
+    });
+});