Skip to content

Commit

Permalink
chore: Add e2e tests for the NUX tips (#7874)
Browse files Browse the repository at this point in the history 
* chore: Add e2e tests for the NUX tips

* chore: Tidy up tests and add failing tests for #7458

* chore: Add NUX test for #7753

* chore: PR tweaks to tests

* chore: PR Tweaks
  • Loading branch information
@tofumatt
tofumatt committed Jul 13, 2018
1 parent 489a85f commit b96bfff
Showing 1 changed file with 174 additions and 3 deletions.
177 changes: 174 additions & 3 deletions test/e2e/specs/nux.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,49 @@
* Internal dependencies
*/
import '../support/bootstrap';
import { newDesktopBrowserPage, newPost } from '../support/utils';
import {
clearLocalStorage,
clickOnMoreMenuItem,
newDesktopBrowserPage,
newPost,
} from '../support/utils';

describe( 'NUX', () => {
it( 'should show tips to a first-time user', async () => {
describe( 'New User Experience (NUX)', () => {
async function clickAllTips( page ) {
// Click through all available tips.
const tips = await getTips( page );
const numberOfTips = tips.tipIds.length;

for ( let i = 1; i < numberOfTips; i++ ) {
await page.click( '.nux-dot-tip .components-button.is-link' );
}

return { numberOfTips, tips };
}

async function getTips( page ) {
return await page.evaluate( () => {
return wp.data.select( 'core/nux' ).getAssociatedGuide( 'core/editor.inserter' );
} );
}

async function getTipsEnabled( page ) {
return await page.evaluate( () => {
return wp.data.select( 'core/nux' ).areTipsEnabled();
} );
}

beforeEach( async () => {
await newDesktopBrowserPage();
await newPost( undefined, false );
} );

afterEach( async () => {
// Clear localStorage tips so they aren't persisted for the next test.
await clearLocalStorage();
} );

it( 'should show tips to a first-time user', async () => {
const firstTipText = await page.$eval( '.nux-dot-tip', ( element ) => element.innerText );
expect( firstTipText ).toContain( 'Welcome to the wonderful world of blocks!' );

Expand All @@ -18,4 +54,139 @@ describe( 'NUX', () => {
const secondTipText = await page.$eval( '.nux-dot-tip', ( 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\')]' );
expect( gotItButton ).toHaveLength( 1 );

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

// Verify no more tips are visible on the page.
const nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 0 );

// Tips should not be marked as disabled, but when the user has seen all
// of the available tips, they will not appear.
const areTipsEnabled = await getTipsEnabled( page );
expect( areTipsEnabled ).toEqual( true );
} );

it( 'should hide and disable tips if "disable tips" button is clicked', async () => {
await page.click( '.nux-dot-tip__disable' );

// Verify no more tips are visible on the page.
let nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 0 );

// We should be disabling the tips so they don't appear again.
const areTipsEnabled = await getTipsEnabled( page );
expect( areTipsEnabled ).toEqual( false );

// Refresh the page; tips should not show because they were disabled.
await page.reload();

nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 0 );
} );

it( 'should toggle tips when the "Show tips" menu item is clicked', async () => {
// Tips should be enabled at first.
let nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 1 );

// The "Show Tips" button is a checkmark/toggle button and it's enabled
// by default. Clicking on it disables the tips.
await clickOnMoreMenuItem( 'Show Tips' );

// Should disable tips from appearing.
nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 0 );

// Tips should be disabled in localStorage as well.
let areTipsEnabled = await getTipsEnabled( page );
expect( areTipsEnabled ).toEqual( false );

// Click again to re-enable tips; they should appear.
await clickOnMoreMenuItem( 'Show Tips' );

nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 1 );

areTipsEnabled = await getTipsEnabled( page );
expect( areTipsEnabled ).toEqual( true );
} );

// TODO: This test should be enabled once
// https://github.com/WordPress/gutenberg/issues/7458 is fixed.
it.skip( 'should show tips as disabled if all tips have been shown', async () => {
await clickAllTips( page );

// Open the "More" menu to check the "Show Tips" element.
await page.click( '.edit-post-more-menu [aria-label="More"]' );
const showTipsButton = await page.$x( '//button[contains(text(), "Show Tips")][@aria-pressed="false"]' );

expect( showTipsButton ).toHaveLength( 1 );
} );

// TODO: This test should be enabled once
// https://github.com/WordPress/gutenberg/issues/7458 is fixed.
it.skip( 'should reset tips if all tips have been shown and show tips was unchecked', async () => {
const { numberOfTips } = await clickAllTips( page );

// Click again to re-enable tips; they should appear.
await clickOnMoreMenuItem( 'Show Tips' );

// Open the "More" menu to check the "Show Tips" element.
await page.click( '.edit-post-more-menu [aria-label="More"]' );
const showTipsButton = await page.$x( '//button[contains(text(), "Show Tips")][@aria-pressed="true"]' );

expect( showTipsButton ).toHaveLength( 1 );

// Tips should re-appear on the page.
const nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 1 );

// Tips should be enabled again.
const areTipsEnabled = await getTipsEnabled( page );
expect( areTipsEnabled ).toEqual( true );

// Dismissed tips should be reset and ready to be shown again.
const resetTips = await getTips( page );
const newNumberOfTips = resetTips.tipIds.length;
expect( newNumberOfTips ).toHaveLength( numberOfTips );
} );

// TODO: This test should be enabled once
// https://github.com/WordPress/gutenberg/issues/7753 is fixed.
// See: https://github.com/WordPress/gutenberg/issues/7753#issuecomment-403952816
it.skip( 'should show tips if "Show tips" was disabled on a draft and then enabled', async () => {
// Click the "Show tips" button (enabled by default) to disable tips.
await clickOnMoreMenuItem( 'Show Tips' );

// Let's type something so there's content in this post.
await page.click( '.editor-post-title__input' );
await page.keyboard.type( 'Post title' );
await page.click( '.editor-default-block-appender' );
await page.keyboard.type( 'Post content goes here.' );
// Save the post as a draft.
await page.click( '.editor-post-save-draft' );

await page.waitForSelector( '.editor-post-saved-state.is-saved' );

// Refresh the page; tips should be disabled.
await page.reload();
let nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 0 );

// Clicking should re-enable tips.
await clickOnMoreMenuItem( 'Show Tips' );

// Tips should re-appear on the page.
nuxTipElements = await page.$$( '.nux-dot-tip' );
expect( nuxTipElements ).toHaveLength( 1 );
} );
} );

0 comments on commit b96bfff

Please sign in to comment.