Updating Marketo message tests (#435)

Co-authored-by: Dennis Li <[email protected]>
adobecom · Sep 13, 2024 · 782bc48 · 782bc48
1 parent 0f58606
commit 782bc48
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 31 deletions.
diff --git a/configs/bacom.config.js b/configs/bacom.config.js
@@ -8,7 +8,8 @@ const envs = require('../envs/envs.js');
  * @type {import('@playwright/test').PlaywrightTestConfig}
  */
 const config = {
-  testDir: '../tests/bacom',
+  testDir: '../tests/',
+  testMatch: ['bacom/**/*.test.js', 'milo/**/*.test.js'],
   outputDir: '../test-results',
   /* Maximum time one test can run for. */
   timeout: 45 * 1000,
@@ -30,11 +31,18 @@ const config = {
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI
     ? [['github'], ['list'], ['../utils/reporters/base-reporter.js']]
-    : [['html', {
-      outputFolder: 'test-html-results',
-      open: 'never',
-    }], ['list'], ['../utils/reporters/base-reporter.js'],
-    ['json', { outputFile: '../test-json-results/test-results.json' }]],
+    : [
+      [
+        'html',
+        {
+          outputFolder: 'test-html-results',
+          open: 'never',
+        },
+      ],
+      ['list'],
+      ['../utils/reporters/base-reporter.js'],
+      ['json', { outputFile: '../test-json-results/test-results.json' }],
+    ],
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -45,7 +53,10 @@ const config = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    baseURL: process.env.BASE_URL || envs['@bacom_live'] || 'https://main--bacom--adobecom.hlx.live',
+    baseURL:
+      process.env.BASE_URL
+      || envs['@bacom_live']
+      || 'https://main--bacom--adobecom.hlx.live',
   },
 
   /* Configure projects for major browsers */

diff --git a/features/milo/marketo.block.spec.js b/features/milo/marketo.block.spec.js
@@ -4,17 +4,13 @@ module.exports = {
     {
       tcid: '0',
       name: '@marketo full template',
-      path: [
-        '/drafts/nala/blocks/marketo/full',
-      ],
+      path: ['/drafts/nala/blocks/marketo/full'],
       tags: '@marketo @marketoFullRedirect @marketoRedirect @milo @smoke @regression',
     },
     {
       tcid: '1',
       name: '@marketo full template with company type',
-      path: [
-        '/drafts/nala/blocks/marketo/full-with-company-type',
-      ],
+      path: ['/drafts/nala/blocks/marketo/full-with-company-type'],
       tags: '@marketo @marketoFullRedirect @marketoRedirect @milo @smoke @regression',
     },
     {
@@ -38,17 +34,13 @@ module.exports = {
     {
       tcid: '4',
       name: '@marketo full template message',
-      path: [
-        '/drafts/nala/blocks/marketo/full-message',
-      ],
+      path: ['/drafts/nala/blocks/marketo/full-message'],
       tags: '@marketo @marketoFullMessage @marketoMessage @milo @smoke @regression',
     },
     {
       tcid: '5',
       name: '@marketo full template with company type',
-      path: [
-        '/drafts/nala/blocks/marketo/full-message-with-company-type',
-      ],
+      path: ['/drafts/nala/blocks/marketo/full-message-with-company-type'],
       tags: '@marketo @marketoFullMessage @marketoMessage @milo @smoke @regression',
     },
     {

diff --git a/selectors/milo/marketo.block.page.js b/selectors/milo/marketo.block.page.js
@@ -31,6 +31,8 @@ export default class Marketo {
     );
     this.submitButton = this.marketo.locator('#mktoButton_new');
     this.message = this.marketo.locator('.ty-message');
+    this.title = this.marketo.locator('.marketo-title');
+    this.description = this.marketo.locator('.marketo-description');
   }
 
   async submitFullTemplateForm(poi) {
@@ -45,7 +47,9 @@ export default class Marketo {
     await this.postalCode.fill(POSTAL_CODE);
 
     // Setting index 2 to test so that the 'Company Type' field doesn't display
-    await this.primaryProductInterest.selectOption(poi !== undefined ? poi : { index: 2 });
+    await this.primaryProductInterest.selectOption(
+      poi !== undefined ? poi : { index: 2 },
+    );
 
     await this.state.selectOption({ index: 1 });
     await this.selectCompanyType();
@@ -85,6 +89,11 @@ export default class Marketo {
     const template = await this.page.evaluate(
       'window.mcz_marketoForm_pref.form.template',
     );
+
+    if (!template) {
+      throw new Error('Template not found');
+    }
+
     return template;
   }
 
@@ -102,13 +111,7 @@ export default class Marketo {
    * and that the value isn't empty.
    */
   async checkInputPlaceholders() {
-    const template = await this.page.evaluate(
-      'window.mcz_marketoForm_pref.form.template',
-    );
-
-    if (!template) {
-      throw new Error('Template not found');
-    }
+    const template = await this.getFormTemplate();
 
     const inputFields = [
       this.firstName,
@@ -127,4 +130,35 @@ export default class Marketo {
       }).toPass();
     });
   }
+
+  async formElements() {
+    const template = await this.getFormTemplate();
+
+    const elements = [
+      this.firstName,
+      this.lastName,
+      this.email,
+      this.company,
+      this.country,
+      this.companyType,
+      this.submitButton,
+      this.title,
+      this.description,
+    ];
+
+    if (template === 'flex_event') {
+      elements.push(this.jobTitle, this.functionalArea);
+    } else if (template === 'flex_contact') {
+      elements.push(
+        this.phone,
+        this.jobTitle,
+        this.functionalArea,
+        this.state,
+        this.postalCode,
+        this.primaryProductInterest,
+      );
+    }
+
+    return elements;
+  }
 }
diff --git a/tests/milo/marketo.block.test.js b/tests/milo/marketo.block.test.js
@@ -171,11 +171,19 @@ test.describe('Marketo block test suite', () => {
         await marketoBlock.submitFullTemplateForm();
       });
 
-      await test.step('step-4: Verify the form submission redirect', async () => {
+      await test.step('step-4: Verify that the form message displays after form submission.', async () => {
         await expect(async () => {
           await expect(marketoBlock.message).toBeAttached();
           await expect(page.url()).toBe(testPage);
         }).toPass();
+
+        const elements = await marketoBlock.formElements();
+
+        elements.forEach(async (el) => {
+          await expect(async () => {
+            await expect(el).not.toBeVisible();
+          }).toPass();
+        });
       });
     });
   });
@@ -203,11 +211,19 @@ test.describe('Marketo block test suite', () => {
         await marketoBlock.submitFullTemplateForm('Digital commerce');
       });
 
-      await test.step('step-4: Verify the form submission redirect', async () => {
+      await test.step('step-4: Verify that the form message displays after form submission.', async () => {
         await expect(async () => {
           await expect(marketoBlock.message).toBeAttached();
           await expect(page.url()).toBe(testPage);
         }).toPass();
+
+        const elements = await marketoBlock.formElements();
+
+        elements.forEach(async (el) => {
+          await expect(async () => {
+            await expect(el).not.toBeVisible();
+          }).toPass();
+        });
       });
     });
   });
@@ -235,11 +251,19 @@ test.describe('Marketo block test suite', () => {
         await marketoBlock.submitExpandedTemplateForm();
       });
 
-      await test.step('step-4: Verify the form submission redirect', async () => {
+      await test.step('step-4: Verify that the form message displays after form submission.', async () => {
         await expect(async () => {
           await expect(marketoBlock.message).toBeAttached();
           await expect(page.url()).toBe(testPage);
         }).toPass();
+
+        const elements = await marketoBlock.formElements();
+
+        elements.forEach(async (el) => {
+          await expect(async () => {
+            await expect(el).not.toBeVisible();
+          }).toPass();
+        });
       });
     });
   });
@@ -267,11 +291,19 @@ test.describe('Marketo block test suite', () => {
         await marketoBlock.submitEssentialTemplateForm();
       });
 
-      await test.step('step-4: Verify the form submission redirect', async () => {
+      await test.step('step-4: Verify that the form message displays after form submission.', async () => {
         await expect(async () => {
           await expect(marketoBlock.message).toBeAttached();
           await expect(page.url()).toBe(testPage);
         }).toPass();
+
+        const elements = await marketoBlock.formElements();
+
+        elements.forEach(async (el) => {
+          await expect(async () => {
+            await expect(el).not.toBeVisible();
+          }).toPass();
+        });
       });
     });
   });