Add E2E tests for core themes mobile menus (#6933)

Co-authored-by: Piotr Delawski <piotr.delawski@gmail.com>
ampproject · Mar 8, 2022 · e6686fd · e6686fd
1 parent 26c9220
commit e6686fd
Show file tree

Hide file tree

Showing 11 changed files with 690 additions and 5 deletions.
diff --git a/tests/e2e/config/bootstrap.js b/tests/e2e/config/bootstrap.js
@@ -9,6 +9,8 @@ import { get } from 'lodash';
 import {
 	activateTheme,
 	clearLocalStorage,
+	createMenu,
+	deleteAllMenus,
 	enablePageDialogAccept,
 	installTheme,
 	isOfflineMode,
@@ -28,6 +30,26 @@ import { deactivatePlugin, installLocalPlugin } from '../utils/amp-settings-util
  */
 const { PUPPETEER_TIMEOUT } = process.env;
 
+/**
+ * Default browser viewport size.
+ *
+ * @type {{width: number, height: number}}
+ */
+export const DEFAULT_BROWSER_VIEWPORT_SIZE = {
+	width: 1600,
+	height: 1000,
+};
+
+/**
+ * Mobile browser viewport size.
+ *
+ * @type {{width: number, height: number}}
+ */
+export const MOBILE_BROWSER_VIEWPORT_SIZE = {
+	width: 375,
+	height: 667,
+};
+
 /**
  * Set of console logging types observed to protect against unexpected yet
  * handled (i.e. not catastrophic) errors or warnings. Each key corresponds
@@ -210,11 +232,8 @@ async function runAxeTestsForBlockEditor() {
 /**
  * Set up browser.
  */
-async function setupBrowser() {
-	await setBrowserViewport( {
-		width: 1600,
-		height: 1000,
-	} );
+export async function setupBrowser() {
+	await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
 }
 
 /**
@@ -231,6 +250,36 @@ 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.
  */
@@ -260,6 +309,7 @@ beforeAll( async () => {
 	await setupThemesAndPlugins();
 	await trashAllPosts();
 	await createTestData();
+	await createTestMenus();
 	await cleanUpSettings();
 	await page.setDefaultNavigationTimeout( 10000 );
 	await page.setDefaultTimeout( 10000 );

diff --git a/tests/e2e/specs/core-themes/twentyfifteen.js b/tests/e2e/specs/core-themes/twentyfifteen.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminPage } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { setTemplateMode } from '../../utils/amp-settings-utils';
+import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
+import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';
+
+describe( 'Twenty Fifteen theme on AMP', () => {
+	beforeAll( async () => {
+		await installTheme( 'twentyfifteen' );
+		await activateTheme( 'twentyfifteen' );
+
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		await setTemplateMode( 'standard' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwenty' );
+	} );
+
+	describe( 'main navigation on mobile', () => {
+		beforeAll( async () => {
+			await assignMenuToLocation( 'primary' );
+		} );
+
+		beforeEach( async () => {
+			await setBrowserViewport( MOBILE_BROWSER_VIEWPORT_SIZE );
+			await page.goto( createURL( '/' ) );
+			await page.waitForSelector( '#page' );
+		} );
+
+		afterAll( async () => {
+			await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
+		} );
+
+		it( 'should be initially hidden', async () => {
+			await expect( page ).toMatchElement( '.site-header .secondary-toggle[aria-expanded=false]' );
+			await expect( page ).toMatchElement( '#site-navigation', { visible: false } );
+		} );
+
+		it( 'should be togglable', async () => {
+			await expect( page ).toClick( '.site-header .secondary-toggle' );
+			await expect( page ).toMatchElement( '.site-header .secondary-toggle[aria-expanded=true]' );
+			await expect( page ).toMatchElement( '#site-navigation', { visible: true } );
+
+			await expect( page ).toClick( '.site-header .secondary-toggle' );
+			await expect( page ).toMatchElement( '.site-header .secondary-toggle[aria-expanded=false]' );
+			await expect( page ).toMatchElement( '#site-navigation', { visible: false } );
+		} );
+
+		it( 'should have a togglable submenu', async () => {
+			await expect( page ).toClick( '.site-header .secondary-toggle' );
+
+			const menuItemWithSubmenu = await page.$( '#site-navigation .menu-item-has-children' );
+
+			expect( menuItemWithSubmenu ).not.toBeNull();
+
+			await expect( menuItemWithSubmenu ).toMatchElement( '.dropdown-toggle[aria-expanded=false]' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
+
+			await expect( menuItemWithSubmenu ).toClick( '.dropdown-toggle' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.dropdown-toggle[aria-expanded=true]' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: true } );
+
+			await expect( menuItemWithSubmenu ).toClick( '.dropdown-toggle' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.dropdown-toggle[aria-expanded=false]' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
+		} );
+	} );
+} );
diff --git a/tests/e2e/specs/core-themes/twentyfourteen.js b/tests/e2e/specs/core-themes/twentyfourteen.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminPage } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { setTemplateMode } from '../../utils/amp-settings-utils';
+import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
+import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';
+
+describe( 'Twenty Fourteen theme on AMP', () => {
+	beforeAll( async () => {
+		await installTheme( 'twentyfourteen' );
+		await activateTheme( 'twentyfourteen' );
+
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		await setTemplateMode( 'standard' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwenty' );
+	} );
+
+	describe( 'main navigation on mobile', () => {
+		beforeAll( async () => {
+			await assignMenuToLocation( 'primary' );
+		} );
+
+		beforeEach( async () => {
+			await setBrowserViewport( MOBILE_BROWSER_VIEWPORT_SIZE );
+			await page.goto( createURL( '/' ) );
+			await page.waitForSelector( '#page' );
+		} );
+
+		afterAll( async () => {
+			await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
+		} );
+
+		it( 'should be initially hidden', async () => {
+			await expect( page ).toMatchElement( '#primary-navigation .menu-toggle[aria-expanded=false]' );
+			await expect( page ).toMatchElement( '#primary-navigation .nav-menu', { visible: false } );
+		} );
+
+		it( 'should be togglable', async () => {
+			await expect( page ).toClick( '#primary-navigation .menu-toggle' );
+			await expect( page ).toMatchElement( '#primary-navigation .menu-toggle[aria-expanded=true]' );
+			await expect( page ).toMatchElement( '#primary-navigation .nav-menu', { visible: true } );
+
+			// Submenus are expanded by default on twentyfourteen mobile.
+			await expect( page ).toMatchElement( '#primary-navigation .nav-menu .menu-item-has-children .sub-menu', { visible: true } );
+
+			await expect( page ).toClick( '#primary-navigation .menu-toggle' );
+			await expect( page ).toMatchElement( '#primary-navigation .menu-toggle[aria-expanded=false]' );
+			await expect( page ).toMatchElement( '#primary-navigation .nav-menu', { visible: false } );
+		} );
+	} );
+} );
diff --git a/tests/e2e/specs/core-themes/twentynineteen.js b/tests/e2e/specs/core-themes/twentynineteen.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminPage } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { setTemplateMode } from '../../utils/amp-settings-utils';
+import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
+import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';
+
+describe( 'Twenty Nineteen theme on AMP', () => {
+	beforeAll( async () => {
+		await installTheme( 'twentynineteen' );
+		await activateTheme( 'twentynineteen' );
+
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		await setTemplateMode( 'standard' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwenty' );
+	} );
+
+	describe( 'main navigation on mobile', () => {
+		beforeAll( async () => {
+			await assignMenuToLocation( 'menu-1' );
+		} );
+
+		beforeEach( async () => {
+			await setBrowserViewport( MOBILE_BROWSER_VIEWPORT_SIZE );
+			await page.goto( createURL( '/' ) );
+			await page.waitForSelector( '#page' );
+		} );
+
+		afterAll( async () => {
+			await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
+		} );
+
+		it( 'should have a togglable submenu', async () => {
+			await expect( page ).toMatchElement( '.main-navigation' );
+
+			const menuItemWithSubmenu = await page.$( '.main-navigation .menu-item-has-children' );
+
+			expect( menuItemWithSubmenu ).not.toBeNull();
+
+			await expect( menuItemWithSubmenu ).toMatchElement( '.submenu-expand' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
+
+			await expect( menuItemWithSubmenu ).toClick( '.submenu-expand' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: true } );
+		} );
+	} );
+} );
diff --git a/tests/e2e/specs/core-themes/twentyseventeen.js b/tests/e2e/specs/core-themes/twentyseventeen.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { activateTheme, createURL, installTheme, setBrowserViewport, visitAdminPage } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { setTemplateMode } from '../../utils/amp-settings-utils';
+import { assignMenuToLocation } from '../../utils/assign-menu-to-location';
+import { DEFAULT_BROWSER_VIEWPORT_SIZE, MOBILE_BROWSER_VIEWPORT_SIZE } from '../../config/bootstrap';
+
+describe( 'Twenty Seventeen theme on AMP', () => {
+	beforeAll( async () => {
+		await installTheme( 'twentyseventeen' );
+		await activateTheme( 'twentyseventeen' );
+
+		await visitAdminPage( 'admin.php', 'page=amp-options' );
+		await setTemplateMode( 'standard' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwenty' );
+	} );
+
+	describe( 'main navigation on mobile', () => {
+		beforeAll( async () => {
+			await assignMenuToLocation( 'top' );
+		} );
+
+		beforeEach( async () => {
+			await setBrowserViewport( MOBILE_BROWSER_VIEWPORT_SIZE );
+			await page.goto( createURL( '/' ) );
+			await page.waitForSelector( '#page' );
+		} );
+
+		afterAll( async () => {
+			await setBrowserViewport( DEFAULT_BROWSER_VIEWPORT_SIZE );
+		} );
+
+		it( 'should be initially hidden', async () => {
+			await expect( page ).toMatchElement( '.main-navigation .menu-toggle[aria-expanded=false]' );
+			await expect( page ).toMatchElement( '#top-menu', { visible: false } );
+		} );
+
+		it( 'should be togglable', async () => {
+			await expect( page ).toClick( '.main-navigation .menu-toggle' );
+			await expect( page ).toMatchElement( '.main-navigation .menu-toggle[aria-expanded=true]' );
+			await expect( page ).toMatchElement( '#top-menu', { visible: true } );
+
+			await expect( page ).toClick( '.main-navigation .menu-toggle' );
+			await expect( page ).toMatchElement( '.main-navigation .menu-toggle[aria-expanded=false]' );
+			await expect( page ).toMatchElement( '#top-menu', { visible: false } );
+		} );
+
+		it( 'should have a togglable submenu', async () => {
+			await expect( page ).toClick( '.main-navigation .menu-toggle' );
+
+			const menuItemWithSubmenu = await page.$( '.main-navigation .menu-item-has-children' );
+
+			expect( menuItemWithSubmenu ).not.toBeNull();
+
+			await expect( menuItemWithSubmenu ).toMatchElement( '.dropdown-toggle[aria-expanded=false]' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
+
+			await expect( menuItemWithSubmenu ).toClick( '.dropdown-toggle' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.dropdown-toggle[aria-expanded=true]' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: true } );
+
+			await expect( menuItemWithSubmenu ).toClick( '.dropdown-toggle' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.dropdown-toggle[aria-expanded=false]' );
+			await expect( menuItemWithSubmenu ).toMatchElement( '.sub-menu', { visible: false } );
+		} );
+	} );
+} );