Skip to content

Commit

Permalink
Updated unit tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tellthemachines
tellthemachines committed Dec 4, 2019
1 parent 43127d4 commit f0b892e
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 74 deletions.
3 changes: 1 addition & 2 deletions packages/editor/src/components/post-preview-button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,6 @@ export class PostPreviewButton extends Component {
className="editor-block-preview__new-tab"
href={ href }
target={ this.getWindowTarget() }
disabled={ ! isSaveable }
onClick={ this.openPreviewInNewTab }
>
{ _x( 'Open preview in new tab', 'imperative verb' ) }
Expand All @@ -200,7 +199,7 @@ export class PostPreviewButton extends Component {
<iframe
className="editor-block-preview__frame"
title={ __( 'Responsive preview frame' ) }
src={ previewLink }
src={ href }
style={
{
width: this.state.previewSize.width,
Expand Down
138 changes: 106 additions & 32 deletions packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PostPreviewButton render() should render currentPostLink otherwise 1`] = `
<ForwardRef(Button)
className="editor-post-preview"
disabled={false}
href="https://wordpress.org/?p=1"
isLarge={true}
onClick={[Function]}
target="wp-preview-1"
>
Preview
<span
className="screen-reader-text"
exports[`PostPreviewButton render() should render overlay when state is open 1`] = `
<Fragment>
<ForwardRef(Button)
className="editor-post-preview"
disabled={true}
isLarge={true}
onClick={[Function]}
>
(opens in a new tab)
</span>
</ForwardRef(Button)>
`;

exports[`PostPreviewButton render() should render previewLink if provided 1`] = `
<ForwardRef(Button)
className="editor-post-preview"
disabled={false}
href="https://wordpress.org/?p=1&preview=true"
isLarge={true}
onClick={[Function]}
target="wp-preview-1"
>
Preview
<span
className="screen-reader-text"
Preview
<WithSelect(WithDispatch(DotTip))
tipId="core/editor.preview"
>
Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
</WithSelect(WithDispatch(DotTip))>
</ForwardRef(Button)>
<WithInstanceId(Modal)
className="editor-block-preview"
onRequestClose={[Function]}
shouldCloseOnClickOutside={false}
title="Preview"
>
(opens in a new tab)
</span>
</ForwardRef(Button)>
<div
className="editor-block-preview__controls"
>
<ForwardRef(IconButton)
icon={
<SVG
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M0 0h24v24H0z"
fill="none"
/>
<Path
d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"
/>
</SVG>
}
label="Preview desktop screen"
onClick={[Function]}
/>
<ForwardRef(IconButton)
icon={
<SVG
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M0 0h24v24H0z"
fill="none"
/>
<Path
d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z"
/>
</SVG>
}
label="Preview tablet screen"
onClick={[Function]}
/>
<ForwardRef(IconButton)
icon={
<SVG
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M0 0h24v24H0z"
fill="none"
/>
<Path
d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"
/>
</SVG>
}
label="Preview phone screen"
onClick={[Function]}
/>
<ForwardRef(Button)
className="editor-block-preview__new-tab"
href="https://wordpress.org/?p=1"
isLarge={true}
onClick={[Function]}
target="wp-preview-1"
>
Open preview in new tab
</ForwardRef(Button)>
</div>
<div
className="editor-block-preview__frame-container"
>
<iframe
className="editor-block-preview__frame"
src="https://wordpress.org/?p=1"
style={
Object {
"height": "800px",
"width": "1200px",
}
}
title="Responsive preview frame"
/>
</div>
</WithInstanceId(Modal)>
</Fragment>
`;
95 changes: 55 additions & 40 deletions packages/editor/src/components/post-preview-button/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,40 @@ describe( 'PostPreviewButton', () => {
} );
} );

describe( 'openPreviewWindow()', () => {
describe( 'openPreviewOverlay()', () => {
it( 'behaves like a regular link if not autosaveable', () => {
const autosave = jest.fn();

const wrapper = shallow(
<PostPreviewButton
postId={ 1 }
autosave={ autosave }
/>
);

wrapper.instance().openPreviewOverlay();

expect( autosave ).not.toHaveBeenCalled();
} );

it( 'autosaves the post if autosaveable', () => {
const autosave = jest.fn();

const wrapper = shallow(
<PostPreviewButton
postId={ 1 }
autosave={ autosave }
isAutosaveable
/>
);

wrapper.instance().openPreviewOverlay();

expect( autosave ).toHaveBeenCalled();
} );
} );

describe( 'openPreviewInNewTab()', () => {
let windowOpen;
beforeEach( () => {
windowOpen = window.open;
Expand All @@ -80,9 +113,8 @@ describe( 'PostPreviewButton', () => {
window.open = windowOpen;
} );

it( 'behaves like a regular link if not autosaveable', () => {
it( 'opens preview in new tab', () => {
const preventDefault = jest.fn();
const autosave = jest.fn();
const setLocation = jest.fn();
window.open = jest.fn( () => ( {
focus: jest.fn(),
Expand All @@ -94,77 +126,60 @@ describe( 'PostPreviewButton', () => {
const wrapper = shallow(
<PostPreviewButton
postId={ 1 }
autosave={ autosave }
/>
);

wrapper.simulate( 'click', {
wrapper.instance().openPreviewInNewTab( {
preventDefault,
target: { href: 'https://wordpress.org/?p=1' },
} );

expect( preventDefault ).toHaveBeenCalled();
expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
expect( window.open ).toHaveBeenCalledWith( '', '_blank' );
expect( wrapper.instance().previewWindow.focus ).toHaveBeenCalled();
expect( autosave ).not.toHaveBeenCalled();
expect( setLocation ).toHaveBeenCalledWith( 'https://wordpress.org/?p=1' );
} );
} );

it( 'autosaves the post if autosaveable', () => {
const preventDefault = jest.fn();
const autosave = jest.fn();

window.open = jest.fn( () => ( {
focus: jest.fn(),
document: {
write: jest.fn(),
close: jest.fn(),
},
} ) );

describe( 'render()', () => {
const previewLink = 'https://wordpress.org/?p=1&preview=true';
const currentPostLink = 'https://wordpress.org/?p=1';
it( 'should render overlay when state is open', () => {
const wrapper = shallow(
<PostPreviewButton
postId={ 1 }
autosave={ autosave }
isAutosaveable
currentPostLink={ currentPostLink }
/>
);

wrapper.simulate( 'click', { preventDefault } );
).setState( { isPreviewOpen: true } );

expect( preventDefault ).toHaveBeenCalled();
expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
expect( wrapper.instance().previewWindow.focus ).toHaveBeenCalled();
expect( autosave ).toHaveBeenCalled();
expect( wrapper.instance().previewWindow.document.write.mock.calls[ 0 ][ 0 ] ).toContain( 'Generating preview…' );
expect( wrapper.instance().previewWindow.document.close ).toHaveBeenCalled();
expect( wrapper ).toMatchSnapshot();
} );
} );

describe( 'render()', () => {
it( 'should render previewLink if provided', () => {
const wrapper = shallow(
<PostPreviewButton
postId={ 1 }
isSaveable
previewLink="https://wordpress.org/?p=1&preview=true"
currentPostLink="https://wordpress.org/?p=1"
previewLink={ previewLink }
currentPostLink={ currentPostLink }
/>
);
).setState( { isPreviewOpen: true } );

expect( wrapper ).toMatchSnapshot();
const frameSrc = wrapper.find( '.editor-block-preview__frame' ).prop( 'src' );
expect( frameSrc ).toEqual( previewLink );
} );

it( 'should render currentPostLink otherwise', () => {
const wrapper = shallow(
<PostPreviewButton
postId={ 1 }
isSaveable
currentPostLink="https://wordpress.org/?p=1"
currentPostLink={ currentPostLink }
/>
);
).setState( { isPreviewOpen: true } );

expect( wrapper ).toMatchSnapshot();
const frameSrc = wrapper.find( '.editor-block-preview__frame' ).prop( 'src' );
expect( frameSrc ).toEqual( currentPostLink );
} );

it( 'should be disabled if post is not saveable', () => {
Expand All @@ -173,7 +188,7 @@ describe( 'PostPreviewButton', () => {
postId={ 1 }
currentPostLink="https://wordpress.org/?p=1"
/>
);
).find( '.editor-post-preview' );

expect( wrapper.prop( 'disabled' ) ).toBe( true );
} );
Expand Down

0 comments on commit f0b892e

Please sign in to comment.