|
1 | | -import { Text } from "react-native"; |
| 1 | +import { AccessibilityInfo, Modal, Platform, Text } from "react-native"; |
2 | 2 | import { fireEvent, render, act, RenderAPI } from "@testing-library/react-native"; |
3 | 3 | import { NativeIcon, NativeImage } from "mendix"; |
4 | 4 | import { Style } from "@mendix/piw-native-utils-internal"; |
@@ -29,6 +29,17 @@ async function fireLayout(image: RenderAPI, name: string, suffix: string): Promi |
29 | 29 | fireEvent(await findByImageTestId(image, name, suffix), "layout", onLayoutEventData); |
30 | 30 | } |
31 | 31 |
|
| 32 | +const mockFindNodeHandle = jest.fn(); |
| 33 | +jest.mock("react-native/Libraries/ReactNative/RendererProxy", () => { |
| 34 | + const actual = jest.requireActual("react-native/Libraries/ReactNative/RendererProxy"); |
| 35 | + return { |
| 36 | + ...actual, |
| 37 | + // Only intercepted while a test installs an implementation, so other tests keep the real behaviour |
| 38 | + findNodeHandle: (node: unknown) => |
| 39 | + mockFindNodeHandle.getMockImplementation() ? mockFindNodeHandle(node) : actual.findNodeHandle(node) |
| 40 | + }; |
| 41 | +}); |
| 42 | + |
32 | 43 | jest.mock("../../utils/imageUtils", () => { |
33 | 44 | const actual = jest.requireActual("../../utils/imageUtils") as typeof import("../../utils/imageUtils"); |
34 | 45 |
|
@@ -668,4 +679,146 @@ describe("Widget", () => { |
668 | 679 | }); |
669 | 680 | }); |
670 | 681 | }); |
| 682 | + |
| 683 | + describe("Enlarged overlay", () => { |
| 684 | + const originalOS = Platform.OS; |
| 685 | + let setFocus: jest.SpyInstance; |
| 686 | + let nodeOf: (tag: number) => { props: { testID?: string } }; |
| 687 | + |
| 688 | + const openEnlarged = async (props: Partial<ImageProps<Style>> = {}): Promise<RenderAPI> => { |
| 689 | + const image = render(<Image {...imageProps} onClickType={"enlarge"} {...props} />); |
| 690 | + await flushMicrotasksQueue(); |
| 691 | + fireEvent.press(await findByImageTestId(image, imageProps.name, "ImageSmallPressable")); |
| 692 | + await findByImageTestId(image, imageProps.name, "ImageEnlargedPressable"); |
| 693 | + return image; |
| 694 | + }; |
| 695 | + |
| 696 | + // Closing plays the exit animation, so fake timers are switched on right before closing to run it to the end |
| 697 | + const closeWithFakeTimers = (close: () => void): void => { |
| 698 | + jest.useFakeTimers(); |
| 699 | + act(() => close()); |
| 700 | + act(() => { |
| 701 | + jest.advanceTimersByTime(500); |
| 702 | + }); |
| 703 | + }; |
| 704 | + |
| 705 | + beforeEach(() => { |
| 706 | + setFocus = jest.spyOn(AccessibilityInfo, "setAccessibilityFocus").mockImplementation(() => undefined); |
| 707 | + // Numeric tags (as on a device) that can be mapped back, to see which element got focus |
| 708 | + const tags = new Map<unknown, number>(); |
| 709 | + const nodes = new Map<number, { props: { testID?: string } }>(); |
| 710 | + mockFindNodeHandle.mockReset().mockImplementation((node: { props: { testID?: string } } | null) => { |
| 711 | + if (!node) { |
| 712 | + return null; |
| 713 | + } |
| 714 | + if (!tags.has(node)) { |
| 715 | + tags.set(node, tags.size + 1); |
| 716 | + nodes.set(tags.size, node); |
| 717 | + } |
| 718 | + return tags.get(node); |
| 719 | + }); |
| 720 | + nodeOf = tag => nodes.get(tag)!; |
| 721 | + }); |
| 722 | + |
| 723 | + afterEach(() => { |
| 724 | + jest.useRealTimers(); |
| 725 | + (Platform as { OS: string }).OS = originalOS; |
| 726 | + mockFindNodeHandle.mockReset(); |
| 727 | + jest.restoreAllMocks(); |
| 728 | + }); |
| 729 | + |
| 730 | + it("is not shown before the image is pressed", async () => { |
| 731 | + const image = render(<Image {...imageProps} onClickType={"enlarge"} />); |
| 732 | + await flushMicrotasksQueue(); |
| 733 | + |
| 734 | + expect(image.UNSAFE_queryByType(Modal)).toBeNull(); |
| 735 | + }); |
| 736 | + |
| 737 | + it("shows a transparent modal that keeps every orientation", async () => { |
| 738 | + const image = await openEnlarged(); |
| 739 | + const { props } = image.UNSAFE_getByType(Modal); |
| 740 | + |
| 741 | + expect(props.transparent).toBe(true); |
| 742 | + expect(props.statusBarTranslucent).toBe(false); |
| 743 | + expect(props.supportedOrientations).toEqual([ |
| 744 | + "portrait", |
| 745 | + "portrait-upside-down", |
| 746 | + "landscape", |
| 747 | + "landscape-left", |
| 748 | + "landscape-right" |
| 749 | + ]); |
| 750 | + }); |
| 751 | + |
| 752 | + it("closes when the enlarged image is pressed", async () => { |
| 753 | + const image = await openEnlarged(); |
| 754 | + const enlarged = await findByImageTestId(image, imageProps.name, "ImageEnlargedPressable"); |
| 755 | + |
| 756 | + closeWithFakeTimers(() => fireEvent.press(enlarged)); |
| 757 | + |
| 758 | + expect(image.UNSAFE_queryByType(Modal)).toBeNull(); |
| 759 | + }); |
| 760 | + |
| 761 | + it("closes on the Android back button", async () => { |
| 762 | + const image = await openEnlarged(); |
| 763 | + |
| 764 | + closeWithFakeTimers(() => image.UNSAFE_getByType(Modal).props.onRequestClose()); |
| 765 | + |
| 766 | + expect(image.UNSAFE_queryByType(Modal)).toBeNull(); |
| 767 | + }); |
| 768 | + |
| 769 | + it("exposes the screen reader caption, hint and role on the enlarged image", async () => { |
| 770 | + const image = await openEnlarged({ |
| 771 | + screenReaderCaption: dynamicValue("A caption"), |
| 772 | + screenReaderHint: dynamicValue("A hint") |
| 773 | + }); |
| 774 | + const { props } = await findByImageTestId(image, imageProps.name, "ImageEnlargedPressable"); |
| 775 | + |
| 776 | + expect(props.accessibilityLabel).toBe("A caption"); |
| 777 | + expect(props.accessibilityHint).toBe("A hint"); |
| 778 | + expect(props.accessibilityRole).toBe("image"); |
| 779 | + }); |
| 780 | + |
| 781 | + it("marks the overlay as modal on iOS", async () => { |
| 782 | + (Platform as { OS: string }).OS = "ios"; |
| 783 | + const image = await openEnlarged(); |
| 784 | + const { props } = await findByImageTestId(image, imageProps.name, "ImageEnlargedOverlay-content"); |
| 785 | + |
| 786 | + expect(props.accessibilityViewIsModal).toBe(true); |
| 787 | + expect(props.importantForAccessibility).toBeUndefined(); |
| 788 | + }); |
| 789 | + |
| 790 | + it("marks the overlay as important for accessibility on Android", async () => { |
| 791 | + (Platform as { OS: string }).OS = "android"; |
| 792 | + const image = await openEnlarged(); |
| 793 | + const { props } = await findByImageTestId(image, imageProps.name, "ImageEnlargedOverlay-content"); |
| 794 | + |
| 795 | + expect(props.importantForAccessibility).toBe("yes"); |
| 796 | + expect(props.accessibilityViewIsModal).toBeUndefined(); |
| 797 | + }); |
| 798 | + |
| 799 | + it("moves accessibility focus to the enlarged image when it opens", async () => { |
| 800 | + const image = await openEnlarged(); |
| 801 | + |
| 802 | + fireEvent( |
| 803 | + await findByImageTestId(image, imageProps.name, "ImageEnlargedOverlay-content"), |
| 804 | + "layout", |
| 805 | + onLayoutEventData |
| 806 | + ); |
| 807 | + |
| 808 | + expect(setFocus).toHaveBeenCalledTimes(1); |
| 809 | + expect(nodeOf(setFocus.mock.calls[0][0]).props.testID).toBe(`${imageProps.name}$ImageEnlargedPressable`); |
| 810 | + }); |
| 811 | + |
| 812 | + it("returns accessibility focus to the small image once it has closed", async () => { |
| 813 | + const image = await openEnlarged(); |
| 814 | + const enlarged = await findByImageTestId(image, imageProps.name, "ImageEnlargedPressable"); |
| 815 | + setFocus.mockClear(); |
| 816 | + |
| 817 | + closeWithFakeTimers(() => fireEvent.press(enlarged)); |
| 818 | + |
| 819 | + expect(image.UNSAFE_queryByType(Modal)).toBeNull(); |
| 820 | + expect(setFocus).toHaveBeenCalledTimes(1); |
| 821 | + expect(nodeOf(setFocus.mock.calls[0][0]).props.testID).toBe(`${imageProps.name}$ImageSmallPressable`); |
| 822 | + }); |
| 823 | + }); |
671 | 824 | }); |
0 commit comments