-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fullScreen prop * tests * tests * add tests Co-authored-by: Steve Mask <[email protected]>
- Loading branch information
Showing
5 changed files
with
185 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,4 +2,5 @@ | |
|
|
||
| import './three-domain-secure'; | ||
| import './spinner-page'; | ||
| import './overlay'; | ||
| import './post-robot'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| /* @flow */ | ||
| /** @jsx node */ | ||
|
|
||
| import { node, dom } from 'jsx-pragmatic/src'; | ||
| import { ZalgoPromise } from 'zalgo-promise/src'; | ||
|
|
||
| import { Overlay } from '../../../../src/overlay'; | ||
|
|
||
| describe(`paypal overlay component happy path`, () => { | ||
| const cancel = () => undefined; | ||
|
|
||
| let context = 'popup'; | ||
| let focussed; | ||
|
|
||
| const close = () => ZalgoPromise.resolve(); | ||
| const focus = () => { | ||
| focussed = true; | ||
| return ZalgoPromise.resolve(); | ||
| }; | ||
| const event = { | ||
| on: () => ({ cancel }), | ||
| once: () => ({ cancel }), | ||
| reset: () => undefined, | ||
| trigger: () => ZalgoPromise.resolve(), | ||
| triggerOnce: () => ZalgoPromise.resolve() | ||
| }; | ||
| const frame = null; | ||
| const prerenderFrame = null; | ||
| const content = { | ||
| windowMessage: 'window message', | ||
| continueMessage: 'continue message' | ||
| }; | ||
| const autoResize = true; | ||
| let hideCloseButton = false; | ||
| const nonce = 'abc123'; | ||
| let fullScreen = false; | ||
|
|
||
| const getOverlay = () => | ||
| (<Overlay | ||
| context={ context } | ||
| content={ content } | ||
| close={ close } | ||
| focus={ focus } | ||
| event={ event } | ||
| frame={ frame } | ||
| prerenderFrame={ prerenderFrame } | ||
| autoResize={ autoResize } | ||
| hideCloseButton={ hideCloseButton } | ||
| nonce={ nonce } | ||
| fullScreen={ fullScreen } | ||
| />); | ||
|
|
||
| const addOverlayToDOM = (child) => { | ||
| // $FlowFixMe | ||
| document.body.appendChild(child); | ||
| }; | ||
|
|
||
| const getOverlayContainer = (domNode) => { | ||
| // $FlowFixMe | ||
| return domNode.querySelector('iframe').contentWindow.document; | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| // $FlowFixMe | ||
| document.body.innerHTML = ''; | ||
| }); | ||
|
|
||
| it('should render the overlay component', () => { | ||
| const domNode = getOverlay().render(dom()); | ||
|
|
||
| if (domNode.ownerDocument !== document) { | ||
| throw new Error(`Expected overlay component to be rendered to current dom`); | ||
| } | ||
| }); | ||
|
|
||
| it('should render the overlay component with popup', () => { | ||
| context = 'popup'; | ||
|
|
||
| const domNode = getOverlay().render(dom()); | ||
| addOverlayToDOM(domNode); | ||
|
|
||
| if (!getOverlayContainer(domNode).querySelector('.paypal-overlay-context-popup')) { | ||
| throw new Error(`Expected overlay to have popup`); | ||
| } | ||
| }); | ||
|
|
||
| it('should render the overlay component with iframe', () => { | ||
| context = 'iframe'; | ||
|
|
||
| const domNode = getOverlay().render(dom()); | ||
| addOverlayToDOM(domNode); | ||
|
|
||
| if (!getOverlayContainer(domNode).querySelector('.paypal-overlay-context-iframe')) { | ||
| throw new Error(`Expected overlay to have iframe`); | ||
| } | ||
|
|
||
| context = 'popup'; // reset | ||
| }); | ||
|
|
||
| it('should render the overlay component fullscreen', () => { | ||
| fullScreen = true; | ||
|
|
||
| const domNode = getOverlay().render(dom()); | ||
| addOverlayToDOM(domNode); | ||
|
|
||
| if (!getOverlayContainer(domNode).querySelector('.paypal-checkout-iframe-container-full')) { | ||
| throw new Error(`Expected overlay to be full screen`); | ||
| } | ||
| }); | ||
|
|
||
| it('should hide the overlay close button', () => { | ||
| hideCloseButton = true; | ||
|
|
||
| const domNode = getOverlay().render(dom()); | ||
| addOverlayToDOM(domNode); | ||
|
|
||
| if (getOverlayContainer(domNode).querySelector('.paypal-checkout-close')) { | ||
| throw new Error(`Expected close button to be hidden`); | ||
| } | ||
|
|
||
| hideCloseButton = false; // reset | ||
| }); | ||
|
|
||
| it('should be able to close the overlay using close button', () => { | ||
| const domNode = getOverlay().render(dom()); | ||
| addOverlayToDOM(domNode); | ||
|
|
||
| getOverlayContainer(domNode).querySelector('.paypal-checkout-close').click(); | ||
|
|
||
| if (getOverlayContainer(domNode).querySelector('.paypal-checkout-sandbox')) { | ||
| throw new Error(`Expected overlay to be removed after closing`); | ||
| } | ||
| }); | ||
|
|
||
| it('should be able to focus on the overlay by clicking on it', () => { | ||
| const domNode = getOverlay().render(dom()); | ||
| addOverlayToDOM(domNode); | ||
|
|
||
| getOverlayContainer(domNode).querySelector('.paypal-checkout-overlay').click(); | ||
|
|
||
| if (!focussed) { | ||
| throw new Error(`Expected overlay to be focussed after clicking on it`); | ||
| } | ||
|
|
||
| focussed = null; // reset | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| /* @flow */ | ||
|
|
||
| import './happy'; |