Add E2E tests covering Site Scan summary in Onboarding Wizard

ampproject · Oct 20, 2021 · 13fd827 · 13fd827
1 parent 33164b2
commit 13fd827
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 19 deletions.
diff --git a/assets/src/components/site-scan-results/plugins-with-issues.js b/assets/src/components/site-scan-results/plugins-with-issues.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -19,10 +20,11 @@ import { SiteScanResults } from './index';
  * Render a list of plugins that cause issues.
  *
  * @param {Object} props                   Component props.
+ * @param {string} props.className         Component class name.
  * @param {Array}  props.issues            List of plugins issues.
- * @param {Array}  props.validatedUrlsLink URL to the Validated URLs page.
+ * @param {string} props.validatedUrlsLink URL to the Validated URLs page.
  */
-export function PluginsWithIssues( { issues = [], validatedUrlsLink, ...props } ) {
+export function PluginsWithIssues( { issues = [], validatedUrlsLink, className, ...props } ) {
 	const pluginsData = useNormalizedPluginsData();
 	const sources = issues?.map( ( slug ) => pluginsData?.[ slug ] ?? { name: slug } ) || [];
 
@@ -33,13 +35,14 @@ export function PluginsWithIssues( { issues = [], validatedUrlsLink, ...props }
 			count={ issues.length }
 			sources={ sources }
 			validatedUrlsLink={ validatedUrlsLink }
-			className="site-scan-results--plugins"
+			className={ classnames( 'site-scan-results--plugins', className ) }
 			{ ...props }
 		/>
 	);
 }
 
 PluginsWithIssues.propTypes = {
+	className: PropTypes.string,
 	issues: PropTypes.array.isRequired,
 	validatedUrlsLink: PropTypes.string,
 };
diff --git a/assets/src/components/site-scan-results/themes-with-issues.js b/assets/src/components/site-scan-results/themes-with-issues.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -19,10 +20,11 @@ import { SiteScanResults } from './index';
  * Renders a list of themes that cause issues.
  *
  * @param {Object} props                   Component props.
+ * @param {string} props.className         Component class name.
  * @param {Array}  props.issues            List of theme issues.
- * @param {Array}  props.validatedUrlsLink URL to the Validated URLs page.
+ * @param {string} props.validatedUrlsLink URL to the Validated URLs page.
  */
-export function ThemesWithIssues( { issues = [], validatedUrlsLink, ...props } ) {
+export function ThemesWithIssues( { issues = [], validatedUrlsLink, className, ...props } ) {
 	const themesData = useNormalizedThemesData();
 	const sources = issues?.map( ( slug ) => themesData?.[ slug ] ?? { name: slug } ) || [];
 
@@ -33,13 +35,14 @@ export function ThemesWithIssues( { issues = [], validatedUrlsLink, ...props } )
 			count={ issues.length }
 			sources={ sources }
 			validatedUrlsLink={ validatedUrlsLink }
-			className="site-scan-results--themes"
+			className={ classnames( 'site-scan-results--themes', className ) }
 			{ ...props }
 		/>
 	);
 }
 
 ThemesWithIssues.propTypes = {
+	className: PropTypes.string,
 	issues: PropTypes.array.isRequired,
 	validatedUrlsLink: PropTypes.string,
 };
diff --git a/tests/e2e/specs/amp-onboarding/site-scan.js b/tests/e2e/specs/amp-onboarding/site-scan.js
@@ -1,3 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activateTheme,
+	deleteTheme,
+	installTheme,
+} from '@wordpress/e2e-test-utils';
+
 /**
  * Internal dependencies
  */
@@ -7,33 +16,72 @@ import {
 	testPreviousButton,
 } from '../../utils/onboarding-wizard-utils';
 import { testSiteScanning } from '../../utils/site-scan-utils';
+import {
+	activatePlugin,
+	deactivatePlugin,
+	installPlugin,
+	uninstallPlugin,
+} from '../../utils/amp-settings-utils';
 
 describe( 'Site Scan', () => {
-	beforeEach( async () => {
-		await moveToSiteScanScreen( { technical: true } );
+	beforeAll( async () => {
+		await installTheme( 'hestia' );
+		await installPlugin( 'autoptimize' );
+	} );
+
+	afterAll( async () => {
+		await deleteTheme( 'hestia', { newThemeSlug: 'twentytwenty' } );
+		await uninstallPlugin( 'autoptimize' );
 	} );
 
 	it( 'should start a site scan immediately', async () => {
-		await page.waitForSelector( '.amp-onboarding-wizard-panel h1' );
+		await moveToSiteScanScreen( { technical: true } );
 
-		const screenHeading = await page.$eval( '.amp-onboarding-wizard-panel h1', ( el ) => el.innerText );
-		expect( screenHeading ).toContain( 'Site Scan' );
+		await Promise.all( [
+			expect( page ).toMatchElement( '.amp-onboarding-wizard-panel h1', { text: 'Site Scan' } ),
+			expect( page ).toMatchElement( '.site-scan__heading', { text: 'Please wait a minute' } ),
+			testNextButton( { text: 'Next', disabled: true } ),
+			testPreviousButton( { text: 'Previous' } ),
+			testSiteScanning( {
+				statusElementClassName: 'site-scan__status',
+				isAmpFirst: true,
+			} ),
+		] );
 
-		const scanInProgressHandle = await page.waitForXPath( `//p[contains(text(), 'Please wait a minute')]` );
-		expect( scanInProgressHandle ).not.toBeNull();
+		await testNextButton( { text: 'Next' } );
+		await testPreviousButton( { text: 'Previous' } );
 
-		testNextButton( { text: 'Next', disabled: true } );
-		testPreviousButton( { text: 'Previous' } );
+		await expect( page ).toMatchElement( '.site-scan__heading', { text: 'Scan complete', timeout: 10000 } );
+		await expect( page ).toMatchElement( '.site-scan__section p', { text: /Site scan found no issues/ } );
+	} );
+
+	it( 'should list out plugin and theme issues after the scan', async () => {
+		await activateTheme( 'hestia' );
+		await activatePlugin( 'autoptimize' );
+
+		await moveToSiteScanScreen( { technical: true } );
 
 		await testSiteScanning( {
 			statusElementClassName: 'site-scan__status',
 			isAmpFirst: true,
 		} );
 
-		const scanCompleteHandle = await page.waitForXPath( `//p[@class='site-scan__heading'][contains(text(), 'Scan complete')]` );
-		expect( scanCompleteHandle ).not.toBeNull();
+		await expect( page ).toMatchElement( '.site-scan__heading', { text: 'Scan complete', timeout: 10000 } );
+		await expect( page ).toMatchElement( '.site-scan__section p', { text: /Site scan found issues/ } );
+
+		await expect( page ).toMatchElement( '.site-scan-results--themes' );
+		await expect( page ).toMatchElement( '.site-scan-results--plugins' );
+
+		const totalIssuesCount = await page.$$eval( '.site-scan-results__source', ( sources ) => sources.length );
+		expect( totalIssuesCount ).toBe( 2 );
+
+		await expect( page ).toMatchElement( '.site-scan-results--themes .site-scan-results__source-name', { text: /Hestia/ } );
+		await expect( page ).toMatchElement( '.site-scan-results--plugins .site-scan-results__source-name', { text: /Autoptimize/ } );
+
+		await testNextButton( { text: 'Next' } );
+		await testPreviousButton( { text: 'Previous' } );
 
-		testNextButton( { text: 'Next' } );
-		testPreviousButton( { text: 'Previous' } );
+		await deactivatePlugin( 'autoptimize' );
+		await activateTheme( 'twentytwenty' );
 	} );
 } );