Add tests for react admin translations (#33510)

* Add switch-language endpoint

* Add translation tests for PHP, react client, and component

* Fix component test

* Add Changelog

* Add Changelog

packages/js/admin-e2e-tests/changelog/update-add-tests-for-translations

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add tests for react-admin translations.

packages/js/admin-e2e-tests/src/fixtures/reset.ts

@@ -10,6 +10,7 @@ const { utils } = require( '@woocommerce/e2e-utils' );
 const { PLUGIN_NAME } = process.env;
 
 const resetEndpoint = '/woocommerce-reset/v1/state';
+const switchLanguageEndpoint = '/woocommerce-reset/v1/switch-language';
 
 const pluginName = PLUGIN_NAME ? PLUGIN_NAME : 'WooCommerce';
 const pluginNameSlug = utils.getSlug( pluginName );
@@ -31,3 +32,9 @@ export async function resetWooCommerceState() {
 	expect( response.statusCode ).toEqual( 200 );
 	await deactivateAndDeleteAllPlugins( skippedPlugins );
 }
+
+export async function switchLanguage( lang: string ) {
+	await httpClient.post( switchLanguageEndpoint, {
+		lang,
+	} );
+}

packages/js/admin-e2e-tests/src/specs/index.ts

@@ -7,3 +7,4 @@ export * from './tasks/payment';
 export * from './tasks/purchase';
 export * from './homescreen/task-list';
 export * from './homescreen/activity-panel';
+export * from './translations';

packages/js/admin-e2e-tests/src/specs/translations.ts

@@ -0,0 +1,85 @@
+/**
+ * Internal dependencies
+ */
+import { Login } from '../pages/Login';
+import { OnboardingWizard } from '../pages/OnboardingWizard';
+import { WcHomescreen } from '../pages/WcHomescreen';
+import { Analytics } from '../pages/Analytics';
+import { switchLanguage } from '../fixtures';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const testAdminTranslations = () => {
+	describe( 'Test client, package, and PHP class translations,', () => {
+		const profileWizard = new OnboardingWizard( page );
+		const homeScreen = new WcHomescreen( page );
+		const analyticsPage = new Analytics( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+			await switchLanguage( 'en_US' );
+			await profileWizard.navigate();
+			await profileWizard.skipStoreSetup();
+		} );
+		afterAll( async () => {} );
+
+		it( 'tests translations in PHP class, client, and component', async () => {
+			await homeScreen.isDisplayed();
+			await homeScreen.possiblyDismissWelcomeModal();
+			await homeScreen.navigate();
+			await homeScreen.isDisplayed();
+			const matchMenu = async ( expected: string ) => {
+				await expect( page ).toMatchElement(
+					'.toplevel_page_woocommerce ul li.wp-first-item a',
+					{
+						text: expected,
+					}
+				);
+			};
+			const matchH1 = async ( expected: string ) => {
+				await expect( page ).toMatchElement( 'h1', {
+					text: expected,
+				} );
+			};
+
+			const matchDatePickerContentButton = async ( expected: string ) => {
+				await expect( page ).toMatchElement(
+					'.woocommerce-filters-date__button-group button',
+					{
+						text: expected,
+					}
+				);
+			};
+
+			matchMenu( 'Home' );
+			matchH1( 'Home' );
+
+			await switchLanguage( 'es_ES' );
+			await page.reload();
+			matchMenu( 'Inicio' );
+			matchH1( 'Inicio' );
+
+			await switchLanguage( 'en_US' );
+
+			// Navigate to the Analytics page and test the component translation
+			await analyticsPage.navigate();
+			await analyticsPage.isDisplayed();
+			await analyticsPage.click( '.woocommerce-filters-filter button' );
+			await matchDatePickerContentButton( 'Update' );
+
+			await switchLanguage( 'es_ES' );
+			await page.reload();
+			await analyticsPage.isDisplayed();
+			await analyticsPage.click( '.woocommerce-filters-filter button' );
+			await matchDatePickerContentButton( 'Actualizar' );
+
+			// Rendimiento
+			await switchLanguage( 'en_US' );
+		} );
+	} );
+};
+
+module.exports = { testAdminTranslations };

plugins/woocommerce/changelog/update-33230-add-test-for-translations

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added tests for react admin translations

plugins/woocommerce/tests/e2e/specs/wp-admin/translations.test.js

@@ -0,0 +1,3 @@
+const { testAdminTranslations } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminTranslations();