Skip to content

Commit

Permalink
Update NUX tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@noisysocks
noisysocks committed Nov 16, 2018
1 parent 7c61265 commit 9a0de00
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 39 deletions.
2 changes: 2 additions & 0 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
Expand Up @@ -16,6 +16,7 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`]
(opens in a new tab)
</span>
<WithSelect(WithDispatch(DotTip))
className="editor-post-preview__tip"
tipId="core/editor.preview"
>
Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
Expand All @@ -39,6 +40,7 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
(opens in a new tab)
</span>
<WithSelect(WithDispatch(DotTip))
className="editor-post-preview__tip"
tipId="core/editor.preview"
>
Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
Expand Down
2 changes: 1 addition & 1 deletion packages/nux/src/components/dot-tip/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function stopEventPropagation( event ) {
event.stopPropagation();
}

class DotTip extends Component {
export class DotTip extends Component {
constructor( { isCollapsible } ) {
super( ...arguments );

Expand Down
93 changes: 69 additions & 24 deletions packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,75 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DotTip should render correctly 1`] = `
<Popover
aria-label="Gutenberg tips"
exports[`DotTip should render a button when collapsible 1`] = `
<button
aria-label="Open tip"
className="nux-dot-tip"
focusOnMount="container"
getAnchorRect={[Function]}
noArrow={true}
onClick={[Function]}
position="middle right"
role="dialog"
/>
`;

exports[`DotTip should render the tip after being clicked when collapsible 1`] = `
<button
aria-label="Close tip"
className="nux-dot-tip"
onClick={[Function]}
>
<Popover
aria-label="Gutenberg tips"
className="nux-dot-tip__popover"
focusOnMount="container"
noArrow={true}
onClick={[Function]}
position="middle right"
role="dialog"
>
<p>
It looks like you’re writing a letter. Would you like help?
</p>
<p>
<Button
isLink={true}
>
Dismiss tip
</Button>
</p>
<IconButton
className="nux-dot-tip__disable"
icon="no-alt"
label="Disable tips"
/>
</Popover>
</button>
`;

exports[`DotTip should render the tip when non-collapsible 1`] = `
<div
className="nux-dot-tip"
>
<p>
It looks like you’re writing a letter. Would you like help?
</p>
<p>
<Button
isLink={true}
>
Got it
</Button>
</p>
<IconButton
className="nux-dot-tip__disable"
icon="no-alt"
label="Disable tips"
/>
</Popover>
<Popover
aria-label="Gutenberg tips"
className="nux-dot-tip__popover"
focusOnMount="container"
noArrow={true}
onClick={[Function]}
position="middle right"
role="dialog"
>
<p>
It looks like you’re writing a letter. Would you like help?
</p>
<p>
<Button
isLink={true}
>
Dismiss tip
</Button>
</p>
<IconButton
className="nux-dot-tip__disable"
icon="no-alt"
label="Disable tips"
/>
</Popover>
</div>
`;
35 changes: 29 additions & 6 deletions packages/nux/src/components/dot-tip/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import { shallow } from 'enzyme';
import { noop } from 'lodash';

/**
* Internal dependencies
Expand All @@ -21,30 +20,54 @@ describe( 'DotTip', () => {
expect( wrapper.isEmptyRender() ).toBe( true );
} );

it( 'should render correctly', () => {
it( 'should render the tip when non-collapsible', () => {
const wrapper = shallow(
<DotTip isVisible setTimeout={ noop }>
<DotTip isVisible>
It looks like you’re writing a letter. Would you like help?
</DotTip>
);
expect( wrapper ).toMatchSnapshot();
} );

it( 'should render a button when collapsible', () => {
const wrapper = shallow(
<DotTip isCollapsible isVisible>
It looks like you’re writing a letter. Would you like help?
</DotTip>
);
expect( wrapper ).toMatchSnapshot();
} );

it( 'should render the tip after being clicked when collapsible', () => {
const wrapper = shallow(
<DotTip isCollapsible isVisible>
It looks like you’re writing a letter. Would you like help?
</DotTip>
);

const stopPropagation = jest.fn();
wrapper.simulate( 'click', { stopPropagation } );
wrapper.update();

expect( wrapper ).toMatchSnapshot();
expect( stopPropagation ).toHaveBeenCalled();
} );

it( 'should call onDismiss when the dismiss button is clicked', () => {
const onDismiss = jest.fn();
const wrapper = shallow(
<DotTip isVisible onDismiss={ onDismiss } setTimeout={ noop }>
<DotTip isVisible onDismiss={ onDismiss }>
It looks like you’re writing a letter. Would you like help?
</DotTip>
);
wrapper.find( 'Button[children="Got it"]' ).first().simulate( 'click' );
wrapper.find( 'Button[children="Dismiss tip"]' ).first().simulate( 'click' );
expect( onDismiss ).toHaveBeenCalled();
} );

it( 'should call onDisable when the X button is clicked', () => {
const onDisable = jest.fn();
const wrapper = shallow(
<DotTip isVisible onDisable={ onDisable } setTimeout={ noop }>
<DotTip isVisible onDisable={ onDisable }>
It looks like you’re writing a letter. Would you like help?
</DotTip>
);
Expand Down
32 changes: 24 additions & 8 deletions test/e2e/specs/nux.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,15 @@ import {

describe( 'New User Experience (NUX)', () => {
async function clickAllTips( page ) {
// Click through all available tips.
const tips = await getTips( page );
const numberOfTips = tips.tipIds.length;

// Open up the first tip.
await page.click( '.nux-dot-tip' );

// Click through all of the tips.
for ( let i = 1; i < numberOfTips; i++ ) {
await page.click( '.nux-dot-tip .components-button.is-link' );
await page.click( '.nux-dot-tip__popover .components-button.is-link' );
}

return { numberOfTips, tips };
Expand All @@ -39,25 +42,31 @@ describe( 'New User Experience (NUX)', () => {
} );

it( 'should show tips to a first-time user', async () => {
const firstTipText = await page.$eval( '.nux-dot-tip', ( element ) => element.innerText );
// Click on the tip indicator to open the first tip.
await page.click( '.nux-dot-tip' );

// Check that we see the first tip.
const firstTipText = await page.$eval( '.nux-dot-tip__popover', ( element ) => element.innerText );
expect( firstTipText ).toContain( 'Welcome to the wonderful world of blocks!' );

// Go to the next tip.
const [ nextTipButton ] = await page.$x( "//button[contains(text(), 'See next tip')]" );
await nextTipButton.click();

const secondTipText = await page.$eval( '.nux-dot-tip', ( element ) => element.innerText );
// Check that we see the second tip.
const secondTipText = await page.$eval( '.nux-dot-tip__popover', ( element ) => element.innerText );
expect( secondTipText ).toContain( 'You’ll find more settings for your page and blocks in the sidebar.' );
} );

it( 'should show "Got it" once all tips have been displayed', async () => {
await clickAllTips( page );

// Make sure "Got it" button appears on the last tip.
const gotItButton = await page.$x( "//button[contains(text(), 'Got it')]" );
// Make sure "Dismiss tip" button appears on the last tip.
const gotItButton = await page.$x( "//button[contains(text(), 'Dismiss tip')]" );
expect( gotItButton ).toHaveLength( 1 );

// Click the "Got it button".
await page.click( '.nux-dot-tip .components-button.is-link' );
await page.click( '.nux-dot-tip__popover .components-button.is-link' );

// Verify no more tips are visible on the page.
const nuxTipElements = await page.$$( '.nux-dot-tip' );
Expand All @@ -70,6 +79,10 @@ describe( 'New User Experience (NUX)', () => {
} );

it( 'should hide and disable tips if "disable tips" button is clicked', async () => {
// Click on the tip indicator to open the first tip.
await page.click( '.nux-dot-tip' );

// Click the X.
await page.click( '.nux-dot-tip__disable' );

// Verify no more tips are visible on the page.
Expand All @@ -88,7 +101,10 @@ describe( 'New User Experience (NUX)', () => {
} );

it( 'should enable tips when the "Enable tips" option is toggled on', async () => {
// Start by disabling tips.
// Click on the tip indicator to open the first tip.
await page.click( '.nux-dot-tip' );

// Click the X to disable tips.
await page.click( '.nux-dot-tip__disable' );

// Verify no more tips are visible on the page.
Expand Down

0 comments on commit 9a0de00

Please sign in to comment.