Skip to content

Commit

Permalink
Merge pull request #6967 from ampproject/fix/5404-e2e-tests-for-core-…
Browse files Browse the repository at this point in the history
…themes

Test Twenty Twenty search modal on mobile breakpoint
  • Loading branch information
westonruter authored Mar 9, 2022
2 parents 3ad6a86 + beba916 commit a93ddfe
Show file tree
Hide file tree
Showing 13 changed files with 164 additions and 99 deletions.
33 changes: 0 additions & 33 deletions tests/e2e/config/bootstrap.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import { get } from 'lodash';
import {
activateTheme,
clearLocalStorage,
createMenu,
deleteAllMenus,
enablePageDialogAccept,
installTheme,
isOfflineMode,
Expand Down Expand Up @@ -250,36 +248,6 @@ async function createTestData() {
} );
}

/**
* Create test posts so that the WordPress instance has some data.
*/
async function createTestMenus() {
await deleteAllMenus();
await createMenu(
{
name: 'Test Menu 1',
},
[
{
title: 'WordPress.org',
url: 'https://wordpress.org',
menu_order: 1,
},
{
title: 'Wikipedia.org',
url: 'https://wikipedia.org',
menu_order: 2,
},
{
title: 'Google',
url: 'https://google.com',
menu_order: 3,
parent: 1,
},
],
);
}

/**
* Install themes and plugins needed in tests.
*/
Expand Down Expand Up @@ -309,7 +277,6 @@ beforeAll( async () => {
await setupThemesAndPlugins();
await trashAllPosts();
await createTestData();
await createTestMenus();
await cleanUpSettings();
await page.setDefaultNavigationTimeout( 10000 );
await page.setDefaultTimeout( 10000 );
Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentyfifteen.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Fifteen theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Fifteen theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'primary' );
} );

Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentyfourteen.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Fourteen theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Fourteen theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'primary' );
} );

Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentynineteen.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Nineteen theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Nineteen theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'menu-1' );
} );

Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentyseventeen.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Seventeen theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Seventeen theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'top' );
} );

Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentysixteen.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Sixteen theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Sixteen theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'primary' );
} );

Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentythirteen.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Thirteen theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Thirteen theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'primary' );
} );

Expand Down
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentytwelve.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Twelve theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Twelve theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'primary' );
} );

Expand Down
89 changes: 43 additions & 46 deletions tests/e2e/specs/core-themes/twentytwenty.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, setBrowserViewport, visitAdminPage } from '@w
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Twenty theme on AMP', () => {
Expand All @@ -18,11 +18,7 @@ describe( 'Twenty Twenty theme on AMP', () => {
await setTemplateMode( 'standard' );
} );

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await assignMenuToLocation( 'mobile' );
} );

describe( 'for mobile breakpoint', () => {
beforeEach( async () => {
await setBrowserViewport( MOBILE_BROWSER_VIEWPORT_SIZE );
await page.goto( createURL( '/' ) );
Expand All @@ -33,59 +29,60 @@ describe( 'Twenty Twenty theme on AMP', () => {
await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
} );

it( 'should be initially hidden', async () => {
await expect( page ).toMatchElement( '.mobile-nav-toggle[aria-expanded=false]' );
await expect( page ).toMatchElement( '.menu-modal', { visible: false } );
} );
describe( 'main navigation', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'mobile' );
} );

it( 'should be togglable', async () => {
await expect( page ).toClick( '.mobile-nav-toggle' );
await expect( page ).toMatchElement( '.mobile-nav-toggle[aria-expanded=true]' );
await expect( page ).toMatchElement( '.menu-modal', { visible: true } );
it( 'should be initially hidden', async () => {
await expect( page ).toMatchElement( '.mobile-nav-toggle[aria-expanded=false]' );
await expect( page ).toMatchElement( '.menu-modal', { visible: false } );
} );

await expect( page ).toClick( '.mobile-nav-toggle' );
await expect( page ).toMatchElement( '.mobile-nav-toggle[aria-expanded=false]' );
await expect( page ).toMatchElement( '.menu-modal', { visible: false } );
} );
it( 'should be togglable', async () => {
await expect( page ).toClick( '.mobile-nav-toggle' );
await expect( page ).toMatchElement( '.mobile-nav-toggle[aria-expanded=true]' );
await expect( page ).toMatchElement( '.menu-modal', { visible: true } );

it( 'should have a togglable submenu', async () => {
await expect( page ).toClick( '.mobile-nav-toggle' );
await expect( page ).toClick( '.mobile-nav-toggle' );
await expect( page ).toMatchElement( '.mobile-nav-toggle[aria-expanded=false]' );
await expect( page ).toMatchElement( '.menu-modal', { visible: false } );
} );

const menuItemWithSubmenu = await page.$( '.menu-modal .menu-item-has-children' );
it( 'should have a togglable submenu', async () => {
await expect( page ).toClick( '.mobile-nav-toggle' );

expect( menuItemWithSubmenu ).not.toBeNull();
const menuItemWithSubmenu = await page.$( '.menu-modal .menu-item-has-children' );

await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu-toggle[aria-expanded=false]' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
expect( menuItemWithSubmenu ).not.toBeNull();

await expect( menuItemWithSubmenu ).toClick( '.sub-menu-toggle' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu-toggle[aria-expanded=true]' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: true } );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu-toggle[aria-expanded=false]' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );

await expect( menuItemWithSubmenu ).toClick( '.sub-menu-toggle' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu-toggle[aria-expanded=false]' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
} );
} );
await expect( menuItemWithSubmenu ).toClick( '.sub-menu-toggle' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu-toggle[aria-expanded=true]' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: true } );

describe( 'search modal on desktop', () => {
beforeEach( async () => {
await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
await page.goto( createURL( '/' ) );
await page.waitForSelector( '#site-header' );
await expect( menuItemWithSubmenu ).toClick( '.sub-menu-toggle' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu-toggle[aria-expanded=false]' );
await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
} );
} );

it( 'should be togglable', async () => {
await expect( page ).toMatchElement( '.desktop-search-toggle[aria-expanded=false]' );
await expect( page ).toMatchElement( '.search-modal', { visible: false } );
describe( 'search modal', () => {
it( 'should be togglable', async () => {
await expect( page ).toMatchElement( '.mobile-search-toggle[aria-expanded=false]' );
await expect( page ).toMatchElement( '.search-modal', { visible: false } );

await expect( page ).toClick( '.desktop-search-toggle' );
await expect( page ).toMatchElement( '.search-toggle[aria-expanded=true]' );
await expect( page ).toMatchElement( '.search-modal', { visible: true } );
await expect( page ).toClick( '.mobile-search-toggle' );
await expect( page ).toMatchElement( '.search-toggle[aria-expanded=true]' );
await expect( page ).toMatchElement( '.search-modal', { visible: true } );

await expect( page ).toMatchElement( '.search-modal .close-search-toggle[aria-expanded=true]' );
await expect( page ).toClick( '.search-modal .close-search-toggle' );
await expect( page ).toMatchElement( '.search-modal', { visible: false } );
await expect( page ).toMatchElement( '.search-modal .close-search-toggle[aria-expanded=true]' );
await expect( page ).toClick( '.search-modal .close-search-toggle' );
await expect( page ).toMatchElement( '.search-modal', { visible: false } );
} );
} );
} );
} );
3 changes: 2 additions & 1 deletion tests/e2e/specs/core-themes/twentytwentyone.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminP
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
import { assignMenuToLocation, createTestMenu } from '../../utils/nav-menu-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Twenty-One theme on AMP', () => {
Expand All @@ -25,6 +25,7 @@ describe( 'Twenty Twenty-One theme on AMP', () => {

describe( 'main navigation on mobile', () => {
beforeAll( async () => {
await createTestMenu();
await assignMenuToLocation( 'primary' );
} );

Expand Down
60 changes: 60 additions & 0 deletions tests/e2e/specs/core-themes/twentytwentytwo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/**
* WordPress dependencies
*/
import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminPage } from '@wordpress/e2e-test-utils';

/**
* Internal dependencies
*/
import { setTemplateMode } from '../../utils/amp-settings-utils';
import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';

describe( 'Twenty Twenty-Two theme on AMP', () => {
beforeAll( async () => {
await installTheme( 'twentytwentytwo' );
await activateTheme( 'twentytwentytwo' );

await visitAdminPage( 'admin.php', 'page=amp-options' );
await setTemplateMode( 'standard' );
} );

afterAll( async () => {
await activateTheme( 'twentytwenty' );
} );

describe( 'header navigation on mobile', () => {
const pageHeaderSelector = 'header.wp-block-template-part';

beforeEach( async () => {
await setBrowserViewport( MOBILE_BROWSER_VIEWPORT_SIZE );
await page.goto( createURL( '/' ) );
await page.waitForSelector( '.wp-site-blocks' );
} );

afterAll( async () => {
await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
} );

it( 'should be initially hidden', async () => {
const pageHeaderElement = await page.$( pageHeaderSelector );
expect( pageHeaderElement ).not.toBeNull();

await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container-open' );
await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container[aria-hidden=true]', { visible: false } );
await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container-close', { visible: false } );
} );

it( 'should be togglable', async () => {
const pageHeaderElement = await page.$( pageHeaderSelector );
expect( pageHeaderElement ).not.toBeNull();

await expect( pageHeaderElement ).toClick( '.wp-block-navigation__responsive-container-open' );
await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container[aria-hidden=false]' );
await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container-close' );

await expect( pageHeaderElement ).toClick( '.wp-block-navigation__responsive-container-close' );
await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container[aria-hidden=true]', { visible: false } );
await expect( pageHeaderElement ).toMatchElement( '.wp-block-navigation__responsive-container-close', { visible: false } );
} );
} );
} );
12 changes: 0 additions & 12 deletions tests/e2e/utils/assign-menu-to-location.js

This file was deleted.

Loading

0 comments on commit a93ddfe

Please sign in to comment.