Closes #42: Smoke/Regression test for delayjs script

backstop_data/engine_scripts/mobileMenuThemeSwitch.js

@@ -0,0 +1,28 @@
+module.exports = async (page) => {
+    let target;
+
+    const theme = process.env.THEME ? process.env.THEME : '';
+
+    if (theme === '') {
+        return;
+    }
+
+    switch (theme) {
+        case 'genesis-sample-develop':
+            target = '#genesis-mobile-nav-primary';
+            break;
+        case 'flatsome':
+            target = '[data-open="#main-menu"]';
+            break;
+        case 'Divi':
+            target = '#et_mobile_nav_menu';
+            break;
+        case 'astra':
+            target = '.ast-mobile-menu-trigger-minimal';
+            break;
+    }
+
+    await page.click(target);
+    await page.waitForTimeout(2000); 
+};
+

config/wp.config.sample.ts

@@ -49,20 +49,38 @@ const {
  * Exported Scenario urls to be used for visual regression testing with backstopjs
  * @exports
  * @type {{
-* 	home: string;
-* 	llcss: string;	
-* 	noJsLlcss: string;
-* 	elementorLlcss: string;
-* }}
+ * [key: string]: {
+ *	 path?: string,
+ *	 disableJs?: boolean,
+ *	 theme?: string,
+ *	 mobile?: boolean
+ *	}
+ * }}
 */
 const SCENARIO_URLS = {
 	/**
 	 * The value will hold the url paths
 	 */
-	home: '',
-	llcss: '',
-	noJsLlcss: '',
-	elementorLlcss: ''
+	home: {
+		path: ''
+	},
+	llcss: {
+		path: 'lazyload_css_background_images'
+	},
+	noJsLlcss: {
+		path: 'lazyload_css_background_images',
+		disableJs: true
+	},
+	elementorLlcss: {
+		path: 'elementor-overlay'
+	},
+	delayJs: {
+		path: ''
+	},
+	delayJsMobile: {
+		path: '',
+		mobile: true,
+	},
 }
 
 /**

package.json

@@ -16,6 +16,11 @@
     "test:online": "$npm_package_config_testCommand --tags @online",
     "test:vr": "$npm_package_config_testCommand --tags @vr",
     "test:llcssbg": "$npm_package_config_testCommand --tags @llcssbg",
+    "test:delayjs:genesis": "THEME=genesis-sample-develop $npm_package_config_testCommand --tags @delayjs",
+    "test:delayjs:flatsome": "THEME=flatsome $npm_package_config_testCommand --tags @delayjs",
+    "test:delayjs:divi": "THEME=Divi $npm_package_config_testCommand --tags @delayjs",
+    "test:delayjs:astra": "THEME=astra $npm_package_config_testCommand --tags @delayjs",
+    "test:test": "$npm_package_config_testCommand --tags @test",
     "wp-env": "wp-env"
   },
   "repository": {
@@ -49,7 +54,7 @@
     "backstopjs": "^6.2.2",
     "json-diff": "^1.0.6",
     "node-ssh": "^13.1.0",
-    "node-zip": "^1.1.1",
+    "node-zip": "^1.0.1",
     "playwright": "^1.34.3",
     "shelljs": "^0.8.5",
     "ssh2": "^1.14.0",

src/common/custom-world.ts

@@ -32,7 +32,7 @@ export interface ICustomWorld extends World {
 	context?: BrowserContext;
 	page?: Page;
     sections?: Sections;
-    utils?: PageUtils
+    utils?: PageUtils;
 }
 
 export class CustomWorld extends World implements ICustomWorld {

src/features/delay-js.feature

@@ -0,0 +1,39 @@
+@delayjs @setup
+Feature: No Regression with delayjs script udpate
+
+    Background:
+        Given I am logged in
+        And plugin is installed 'new_release'
+        And plugin is activated
+        And I go to 'wp-admin/options-general.php?page=wprocket#dashboard'
+        And I save settings 'fileOptimization' 'delayJs'
+
+    Scenario: Shouldn't cause console error when enabling Delay JS with genesis theme
+        When theme is activated
+        And I log out
+        And I visit site url
+        And move the mouse
+        Then no error in the console different than nowprocket page ''
+
+    Scenario: Should the mobile menu work While Delay JS is enabled
+        When theme is activated
+        Then I must not see any visual regression 'delayJsMobile'
+
+    Scenario: Should links be clickable While Delay JS is enabled
+        When I save settings 'cache' 'mobileDeviceCache'
+        And I save settings 'cache' 'mobileDeviceSeparateCache'
+        When theme is activated
+        And I log out
+        And visit page '' in mobile view
+        And expand mobile menu 
+        And I click on link
+        Then page navigated to the new page 'https://e2e.rocketlabsqa.ovh/about-us'
+
+    Scenario: Shouldn't cause console error when enabling Delay JS with WPML
+        When I go to 'wp-admin/plugins.php'
+        And activate 'wpml-multilingual-cms' plugin
+        And I go to 'wp-admin/admin.php?page=sitepress-multilingual-cms/menu/languages.php'
+        And wpml directory is enabled
+        And I log out
+        And I visit site url
+        Then no error in the console different than nowprocket page 'ar'

src/features/ll-css-bg-image-elementor.feature

@@ -9,4 +9,4 @@ Feature: C14412 - Should be compatible with Elementor background
         And I save settings 'media' 'lazyloadCssBgImg'
         Then I must not see any visual regression 'elementorLlcss'
         When I log out
-        Then no error in the console different than nowprocket page 'elementorLlcss'
+        Then no error in the console different than nowprocket page 'elementor-overlay'

src/features/ll-css-bg-image.feature

@@ -11,7 +11,7 @@ Feature: C13969 - Should lazyload CSS background images inside internal, and ext
         Then I must not see any visual regression 'llcss'
         Then I must not see any error in debug.log
         When I log out
-        Then no error in the console different than nowprocket page 'llcss'
+        Then no error in the console different than nowprocket page 'lazyload_css_background_images'
 
     Scenario: Inspect the element that loads the background image
         When I log out

src/support/hooks.ts

@@ -45,6 +45,26 @@ BeforeAll(async function (this: ICustomWorld) {
     await deleteFolder('./backstop_data/bitmaps_test');
     browser = await chromium.launch({ headless: false });
 
+    const theme = process.env.THEME ? process.env.THEME : '';
+
+    if (theme !== '') {
+        const context = await browser.newContext({
+            recordVideo: {
+                dir: "test-results/videos",
+            },
+        });
+
+        const page = await context.newPage();
+        const sections = new Sections(page, pluginSelectors);
+        const utils = new PageUtils(page, sections);
+
+        await utils.auth();
+        await utils.switchTheme(theme);
+
+        await page?.close();
+        await context?.close();
+    }
+
     if (process.env.npm_config_vrurl === undefined) {
         await batchUpdateVRTestUrl({
             optimize: false,

src/support/steps/delay-js.ts

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview
+ * This module contains Cucumber step definitions using Playwright for performing actions with Delayjs option enabled on WP Rocket.
+ * 
+ * 
+ *
+ * @requires {@link ../../common/custom-world}
+ * @requires {@link @cucumber/cucumber}
+ */
+import { ICustomWorld } from "../../common/custom-world";
+import { When, Given } from '@cucumber/cucumber';
+
+/**
+ * Executes the step to move the mouse.
+ */
+When('move the mouse', async function (this: ICustomWorld) {
+    await this.page.mouse.down();
+    await this.page.mouse.up();
+});
+
+/**
+ * Executes the step to click on about us link.
+ */
+When('I click on link', async function (this:ICustomWorld) {
+    await this.page.getByRole('link', { name: 'About Us' }).click()
+});
+
+/**
+ * Save directory for wpml language setting
+ */
+Given('wpml directory is enabled', async function(this:ICustomWorld) {
+    await this.page.waitForSelector('#lang-sec-2');
+    await this.page.locator('input[name="icl_language_negotiation_type"]').nth(0).check()
+
+    await this.page.locator('input[type="submit"]').nth(0).click();
+
+    await this.page.waitForLoadState('load', { timeout: 30000 });
+});

src/support/steps/general.ts

@@ -15,7 +15,6 @@ import { ICustomWorld } from "../../common/custom-world";
 
 import { Given, When, Then } from '@cucumber/cucumber';
 import { WP_BASE_URL } from '../../../config/wp.config';
-import { SCENARIO_URLS } from "../../../config/wp.config";
 import { createReference, compareReference } from "../../../utils/helpers";
 import type { Section } from "../../../utils/types";
 import { Page } from '@playwright/test';
@@ -76,6 +75,14 @@ Given('I save settings {string} {string}', async function (this: ICustomWorld, s
     await this.page.waitForLoadState('load', { timeout: 30000 });
 });
 
+/**
+/**
+ * Executes the step to activate the WP plugin.
+ */
+Given('activate {string} plugin', async function (this: ICustomWorld, plugin) {
+    await this.utils.gotoPlugin();
+    await this.utils.togglePluginActivation(plugin);
+});
 
 /**
  * Executes the step to log in.
@@ -150,6 +157,68 @@ When('I create reference', async function (this:ICustomWorld) {
     await createReference(process.env.npm_config_vrurl);
 });
 
+
+/**
+ * Executes the step to activate a theme.
+ */
+When('theme {string} is activated', async function (this:ICustomWorld, theme) {
+    await this.utils.switchTheme(theme);
+});
+
+/**
+ * Executes the step to activate a theme set from the CLI.
+ */
+When('theme is activated', async function (this:ICustomWorld) {
+    const theme = process.env.THEME ? process.env.THEME : '';
+
+    if (theme === '') {
+        return;
+    }
+
+    await this.utils.switchTheme(theme);
+});
+
+/**
+ * Executes the step visit a page in mobile view.
+ */
+When('visit page {string} in mobile view', async function (this:ICustomWorld, page) {
+    await this.page.setViewportSize({
+        width: 500,
+        height: 480,
+    });
+
+    await this.utils.visitPage(page);
+});
+
+/**
+ * Executes the step to expand the mobile menu.
+ */
+When('expand mobile menu', async function (this:ICustomWorld) {
+    let target: string;
+    const theme = process.env.THEME ? process.env.THEME : '';
+
+    if (theme === '') {
+        return;
+    }
+
+    switch (theme) {
+        case 'genesis-sample-develop':
+            target = '#genesis-mobile-nav-primary';
+            break;
+        case 'flatsome':
+            target = '[data-open="#main-menu"]';
+            break;
+        case 'Divi':
+            target = '#et_mobile_nav_menu';
+            break;
+        case 'astra':
+            target = '.ast-mobile-menu-trigger-minimal';
+            break;
+    }
+
+    await this.page.locator(target).click();
+});
+
 /**
  * Executes the step to assert the presence of specific text.
  */
@@ -186,9 +255,9 @@ Then('I must not see any visual regression {string}', async function (this: ICus
 /**
  * Executes the step to check for that there is no console error different from the nowprocket page version.
  */
-Then('no error in the console different than nowprocket page {string}', async function (this: ICustomWorld, label: string) {
-    const consoleMsg1 = await getConsoleMsg(this.page, `${WP_BASE_URL}/${SCENARIO_URLS[label]}?nowprocket`);
-    const consoleMsg2 = await getConsoleMsg(this.page, `${WP_BASE_URL}/${SCENARIO_URLS[label]}`);
+Then('no error in the console different than nowprocket page {string}', async function (this: ICustomWorld, path: string) {
+    const consoleMsg1 = await getConsoleMsg(this.page, `${WP_BASE_URL}/${path}?nowprocket`);
+    const consoleMsg2 = await getConsoleMsg(this.page, `${WP_BASE_URL}/${path}`);
 
     if (consoleMsg2.length !== 0) {
         expect(consoleMsg2).toEqual(consoleMsg1);
@@ -241,3 +310,11 @@ const getConsoleMsg = async (page: Page, url: string): Promise<Array<string>> =>
 
     return consoleMsg;
 }
+
+/**
+ * Executes the step to assert that page navigation.
+ */
+Then('page navigated to the new page {string}', async function (this: ICustomWorld, url) {
+    const regex = new RegExp(url);
+    await expect(this.page).toHaveURL(regex);
+});