From b96bfff1cc83dca7b24c4d61f6c8a922e43ba52f Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Fri, 13 Jul 2018 01:42:15 +0100 Subject: [PATCH] chore: Add e2e tests for the NUX tips (#7874) * 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 --- test/e2e/specs/nux.test.js | 177 ++++++++++++++++++++++++++++++++++++- 1 file changed, 174 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/nux.test.js b/test/e2e/specs/nux.test.js index 8f01e968bf535..1e908e4d77ae1 100644 --- a/test/e2e/specs/nux.test.js +++ b/test/e2e/specs/nux.test.js @@ -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!' ); @@ -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 ); + } ); } );