e2e test for setting and non-admin user

Author: BhargavBhandari90

.gitignore

@@ -4,6 +4,7 @@
 node_modules/
 build/
 artifacts/
+test-results/
 
 # Packages #
 ############

package.json

@@ -1,16 +1,13 @@
 {
   "name": "comment-mention",
-  "version": "1.7.14",
+  "version": "1.7.15",
   "description": "Comment Mention plugin",
   "main": "Gruntfile.js",
   "scripts": {
     "start": "npx wp-scripts start",
     "build": "npx wp-scripts build",
     "readme": "grunt readme",
     "i18n": "grunt i18n",
-    "wp-env": "wp-env",
-    "start:env": "wp-env start",
-    "stop:env": "wp-env stop",
     "env": "wp-env",
     "env:start": "wp-env start",
     "env:clean": "wp-env clean",

tests/e2e/config/index.js

@@ -3,6 +3,12 @@ const admin = {
 	password: 'password',
 };
 
+const testuser = {
+	username: 'testuser',
+	password: 'testuser',
+};
+
 module.exports = {
 	admin,
+	testuser,
 }

tests/e2e/global-setup.js

@@ -2,7 +2,7 @@ const { chromium, expect } = require('@playwright/test');
 
 
 const fs = require('fs');
-const { admin } = require('./config');
+const { admin, testuser } = require('./config');
 
 module.exports = async (config) => {
     const { stateDir, baseURL, userAgent } = config.projects[0].use;
@@ -12,20 +12,23 @@ module.exports = async (config) => {
 
     // used throughout tests for authentication
     process.env.ADMINSTATE = `${stateDir}adminState.json`;
+    process.env.TESTUSERSTATE = `${stateDir}testuserState.json`;
 
     // Clear out the previous save states
     try {
         fs.unlinkSync(process.env.ADMINSTATE);
-        console.log('Admin state file deleted successfully.');
+        fs.unlinkSync(process.env.TESTUSERSTATE);
+        console.log('Admin and Test User state files deleted successfully.');
     } catch (err) {
         if (err.code === 'ENOENT') {
-            console.log('Admin state file does not exist.');
+            console.log('Admin or Test User state file does not exist.');
         } else {
-            console.log('Admin state file could not be deleted: ' + err);
+            console.log('Admin or Test User state file could not be deleted: ' + err);
         }
     }
 
     let adminLoggedIn = false;
+    let testuserLoggedIn = false;
 
     const contextOptions = { baseURL, userAgent };
 
@@ -70,6 +73,46 @@ module.exports = async (config) => {
         process.exit(1);
     }
 
+    const testuserContext = await browser.newContext(contextOptions);
+    const testuserPage = await testuserContext.newPage();
+
+    const testuserRetries = 5;
+    for (let i = 0; i < testuserRetries; i++) {
+        try {
+            console.log('Login as testuser...');
+            await testuserPage.goto(`/wp-admin`);
+            await testuserPage.fill('input[name="log"]', testuser.username);
+            await testuserPage.fill('input[name="pwd"]', testuser.password);
+            await testuserPage.locator("#wp-submit").click();
+            await testuserPage.waitForLoadState('networkidle');
+            await testuserPage.goto(`/wp-admin`);
+            await testuserPage.waitForLoadState('domcontentloaded');
+
+            await expect(testuserPage.locator('div.wrap > h1')).toHaveText(
+                'Dashboard'
+            );
+            await testuserPage
+                .context()
+                .storageState({ path: process.env.TESTUSERSTATE });
+            console.log('Logged-in as testuser successfully.');
+            testuserLoggedIn = true;
+            break;
+        } catch (e) {
+            console.log(
+                `Testuser login failed, Re-trying... ${i}/${testuserRetries}`
+            );
+            console.log(e);
+        }
+    }
+
+    if (!testuserLoggedIn) {
+        console.error(
+            'Testuser login failed... Check your credentials.'
+        );
+        process.exit(1);
+    }
+
     await adminContext.close();
+    await testuserContext.close();
     await browser.close();
 };

tests/e2e/specs/comment-mention-by-subscriber.spec.js

@@ -0,0 +1,22 @@
+const { test, expect } = require( '@playwright/test' );
+
+test.use( { storageState: process.env.TESTUSERSTATE } );
+
+test( 'Mention users in Post Comment by Subscriber', async ( { page } ) => {
+    await page.goto('/hello-world');
+    await page.getByRole('textbox', { name: 'Comment *' }).click();
+    await page.getByRole('textbox', { name: 'Comment *' }).pressSequentially('@ad',{ delay: 200 });
+
+    const mentionItem = page.locator('.tribute-container li.highlight');
+
+    // Wait for the mention suggestion to appear
+    await expect(mentionItem).toBeVisible({ timeout: 3000 });
+    await expect(mentionItem).toContainText('admin');
+
+    await mentionItem.click();
+
+    // await page.getByText('testuser (testuser)').click();
+    await page.getByRole('textbox', { name: 'Comment *' }).pressSequentially(' this is test comment',{ delay: 100 });
+    await page.getByRole('button', { name: 'Post Comment' }).click();
+    await expect(page.getByText('@admin this is test comment').last()).toBeVisible({ timeout: 10000 });
+});

tests/e2e/specs/comment-mention-setting.spec.js

@@ -0,0 +1,13 @@
+const { test, expect } = require( '@playwright/test' );
+
+test.use( { storageState: process.env.ADMINSTATE } );
+
+test( 'Check Plugin Setting Page', async ( { page } ) => {
+    await page.goto('/wp-admin/');
+    await page.getByRole('link', { name: 'Comment Mention' }).click();
+    await expect(page.getByRole('heading', { name: 'Comment Mention' })).toBeVisible();
+    await page.getByRole('cell', { name: 'Choose which user roles' }).getByLabel('Subscriber').check();
+    await page.locator('input[name="cmt_mntn_email_enable"]').check();
+    await page.locator('#submit').click();
+    await expect(page.getByText('Settings Saved')).toBeVisible();
+});

tests/e2e/specs/example.spec.js renamed to tests/e2e/specs/comment-mention.spec.js

@@ -5,18 +5,18 @@ test.use( { storageState: process.env.ADMINSTATE } );
 test( 'Mention users in Post Comment', async ( { page } ) => {
     await page.goto('/hello-world');
     await page.getByRole('textbox', { name: 'Comment *' }).click();
-    await page.getByRole('textbox', { name: 'Comment *' }).pressSequentially('@test');
+    await page.getByRole('textbox', { name: 'Comment *' }).pressSequentially('@test',{ delay: 200 });
 
     const mentionItem = page.locator('.tribute-container li.highlight');
 
     // Wait for the mention suggestion to appear
-    await expect(mentionItem).toBeVisible({ timeout: 10000 });
+    await expect(mentionItem).toBeVisible({ timeout: 3000 });
     await expect(mentionItem).toContainText('testuser');
 
     await mentionItem.click();
 
     // await page.getByText('testuser (testuser)').click();
-    await page.getByRole('textbox', { name: 'Comment *' }).pressSequentially(' this is test comment');
+    await page.getByRole('textbox', { name: 'Comment *' }).pressSequentially(' this is test comment',{ delay: 100 });
     await page.getByRole('button', { name: 'Post Comment' }).click();
     await expect(page.getByText('@testuser this is test comment').last()).toBeVisible({ timeout: 10000 });
 });