update to playwright-utils beta.2.

add new test cases for invalid GTM ID input. Add new methods for accessing the status on SettingsPage.
inpsyde · Oct 4, 2024 · caa01dd · caa01dd
1 parent 49a0b8b
commit caa01dd
Show file tree

Hide file tree

Showing 6 changed files with 1,404 additions and 1,345 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "devDependencies": {
         "@wordpress/scripts": "^26",
         "@wordpress/env": "^10.3.0",
-        "@inpsyde/playwright-utils": "2.0.0-beta.1",
+        "@inpsyde/playwright-utils": "2.0.0-beta.2",
         "@playwright/test": "^1.45.1",
         "copy-webpack-plugin": "^12.0",
         "typescript": "^4.9.4"
@@ -55,7 +55,8 @@
         "lint:js:fix": "wp-scripts lint-js --ignore-pattern assets/*",
         "lint:style": "wp-scripts lint-style resources/scss/**/*.scss",
         "test:e2e": "wp-scripts test-playwright --config tests/e2e/playwright.config.ts",
-        "wp-env": "wp-env"
+        "wp-env": "wp-env",
+        "packages-update": "wp-scripts packages-update"
     },
     "browserslist": [
         "last 2 versions, not dead"

diff --git a/resources/ts/components/SettingsPage/index.tsx b/resources/ts/components/SettingsPage/index.tsx
@@ -68,7 +68,7 @@ export const SettingsPage: FunctionComponent = () => {
 	};
 
 	return (
-		<div className={ `settings--${ savingStatus }` }>
+		<div className={ `settings settings--${ savingStatus }` }>
 			{ [ 'loading', 'idle' ].includes( loadingState ) && (
 				<LoadingCard />
 			) }

diff --git a/tests/e2e/playwright.config.ts b/tests/e2e/playwright.config.ts
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { defineConfig, devices } from '@playwright/test';
+
 const testsRootPath = __dirname;
 
 export default defineConfig( {

diff --git a/tests/e2e/specs/settings.dataLayer.spec.ts b/tests/e2e/specs/settings.dataLayer.spec.ts
@@ -11,27 +11,41 @@ test.describe( 'Plugin Settings - DataLayer', () => {
 	test.beforeEach( async ( { pluginSettingsPage, login } ) => {
 		await login.login( 'admin', 'password' );
 		await pluginSettingsPage.visit();
+		await pluginSettingsPage.statusIdle();
 	} );
 
 	test( 'I can set successfully a GTM ID.', async ( {
 		pluginSettingsPage,
 	} ) => {
 		await pluginSettingsPage.fillInGtmId( 'GTM-12345' );
 		await pluginSettingsPage.submitForm();
+		await pluginSettingsPage.statusSaving();
+		await pluginSettingsPage.successfullySaved();
 
-		await expect( pluginSettingsPage.successMessage() ).toBeVisible();
 		await expect( pluginSettingsPage.gtmIdInput() ).toHaveValue(
 			'GTM-12345'
 		);
 	} );
 
+	test( 'I can see an error when GTM ID is not valid.', async ( {
+		pluginSettingsPage,
+		page,
+	} ) => {
+		await pluginSettingsPage.fillInGtmId( 'invalid GTM ID' );
+		await pluginSettingsPage.submitForm();
+		await pluginSettingsPage.statusSaving();
+		await pluginSettingsPage.erroneousSaved();
+
+		await expect( page.locator( '.error-message' ) ).toBeVisible();
+	} );
+
 	test( 'I can set successfully a dataLayer name.', async ( {
 		pluginSettingsPage,
 	} ) => {
 		await pluginSettingsPage.fillInDataLayerName( 'myDataLayer' );
 		await pluginSettingsPage.submitForm();
-
-		await expect( pluginSettingsPage.successMessage() ).toBeVisible();
+		await pluginSettingsPage.statusSaving();
+		await pluginSettingsPage.successfullySaved();
 		await expect( pluginSettingsPage.dataLayerNameInput() ).toHaveValue(
 			'myDataLayer'
 		);
@@ -42,14 +56,16 @@ test.describe( 'Plugin Settings - DataLayer', () => {
 	} ) => {
 		await pluginSettingsPage.enableAutoInsertNoScript();
 		await pluginSettingsPage.submitForm();
-		await expect( pluginSettingsPage.successMessage() ).toBeVisible();
+		await pluginSettingsPage.statusSaving();
+		await pluginSettingsPage.successfullySaved();
 		await expect(
 			pluginSettingsPage.autoInsertNoscriptSelect()
 		).toHaveValue( 'enable' );
 
 		await pluginSettingsPage.disableAutoInsertNoScript();
 		await pluginSettingsPage.submitForm();
-		await expect( pluginSettingsPage.successMessage() ).toBeVisible();
+		await pluginSettingsPage.statusSaving();
+		await pluginSettingsPage.successfullySaved();
 		await expect(
 			pluginSettingsPage.autoInsertNoscriptSelect()
 		).toHaveValue( 'disable' );
@@ -74,7 +90,8 @@ test.describe( 'Plugin Settings - DataLayer', () => {
 		}
 
 		await pluginSettingsPage.submitForm();
-		await expect( pluginSettingsPage.successMessage() ).toBeVisible();
+		await pluginSettingsPage.statusSaving();
+		await pluginSettingsPage.successfullySaved();
 
 		//@ts-ignore
 		for ( const [ collector, selected ] of collectors ) {

diff --git a/tests/e2e/src/PluginSettingsPage.ts b/tests/e2e/src/PluginSettingsPage.ts
@@ -30,6 +30,7 @@ export class PluginSettingsPage extends WpPage {
 		this.page.locator(
 			'.components-snackbar__content:has-text("An error happened.")'
 		);
+	settingsContainer = () => this.page.locator( '.settings' );
 
 	// DataLayer/General
 	gtmIdInput = () => this.page.getByLabel( 'Google Tag Manager ID' );
@@ -50,6 +51,33 @@ export class PluginSettingsPage extends WpPage {
 		await this.submitButton().click();
 	};
 
+	statusSuccess = async () =>
+		await expect( this.settingsContainer() ).toHaveClass(
+			'settings settings--succeeded'
+		);
+	statusIdle = async () =>
+		await expect( this.settingsContainer() ).toHaveClass(
+			'settings settings--idle'
+		);
+	statusSaving = async () =>
+		await expect( this.settingsContainer() ).toHaveClass(
+			'settings settings--saving'
+		);
+	statusErrored = async () =>
+		await expect( this.settingsContainer() ).toHaveClass(
+			'settings settings--errored'
+		);
+
+	successfullySaved = async () => {
+		await this.statusSuccess();
+		await expect( this.successMessage() ).toBeVisible();
+	};
+
+	erroneousSaved = async () => {
+		await this.statusErrored();
+		await expect( this.errorMessage() ).toBeVisible();
+	};
+
 	// DataLayer/General
 	fillInGtmId = async ( gtmId: string ) => {
 		await this.gtmIdInput().fill( gtmId );