Add tests for WP Telegram

wpsocio · Oct 12, 2024 · 245c8fa · 245c8fa
1 parent 8bb822f
commit 245c8fa
Show file tree

Hide file tree

Showing 13 changed files with 856 additions and 63 deletions.
diff --git a/packages/js/shared/wptelegram-ui/components/rules/AddRuleGroup.tsx b/packages/js/shared/wptelegram-ui/components/rules/AddRuleGroup.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
 import { Button } from '@wpsocio/adapters';
-import { AddIcon } from '@wpsocio/icons';
 import { __ } from '@wpsocio/i18n';
+import { AddIcon } from '@wpsocio/icons';
 
 import { DEFAULT_RULE } from './constants';
 import type { RuleGroupProps } from './types';
@@ -16,7 +16,7 @@ export const AddRuleGroup: React.FC<AddRuleGroupProps> = ({ rulesArray }) => {
 
 	return (
 		<Button leftIcon={<AddIcon />} onClick={onClick}>
-			{__('Add')}
+			{__('Add rule')}
 		</Button>
 	);
 };
diff --git a/packages/js/shared/wptelegram-ui/components/rules/RuleSetButtons.tsx b/packages/js/shared/wptelegram-ui/components/rules/RuleSetButtons.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
+import { Box, Flex, IconButton } from '@wpsocio/adapters';
 import { __ } from '@wpsocio/i18n';
 import { AddIcon, CloseIcon } from '@wpsocio/icons';
-import { Box, Flex, IconButton } from '@wpsocio/adapters';
 
 import { DEFAULT_RULE } from './constants';
 import type { RuleSetProps } from './types';
@@ -24,7 +24,7 @@ export const RuleSetButtons: React.FC<RuleSetProps> = (props) => {
 		<Flex alignItems="center">
 			<Box ps="0.5em">
 				<IconButton
-					aria-label={__('Add')}
+					aria-label={__('Add another rule')}
 					icon={<AddIcon />}
 					onClick={onAdd}
 					title={__('Add')}
@@ -33,7 +33,7 @@ export const RuleSetButtons: React.FC<RuleSetProps> = (props) => {
 			</Box>
 			<Box ps="0.5em">
 				<IconButton
-					aria-label={__('Remove')}
+					aria-label={__('Remove this rule')}
 					icon={<CloseIcon />}
 					onClick={onRemove}
 					title={__('Remove')}

diff --git a/plugins/wptelegram/dev.php b/plugins/wptelegram/dev.php
@@ -7,7 +7,7 @@
  * @package           WPTelegram
  *
  * @wordpress-plugin
- * Plugin Name:       WP Telegram Dev
+ * Plugin Name:       WP Telegram
  * Plugin URI:        https://t.me/WPTelegram
  * Description:       ❌ DO NOT DELETE ❌ Development Environment for WP Telegram. Versioned high to avoid auto update.
  * Version:           999.999.999

diff --git a/plugins/wptelegram/js/settings/ui/p2tg/Destination.tsx b/plugins/wptelegram/js/settings/ui/p2tg/Destination.tsx
@@ -28,6 +28,7 @@ export const Destination: React.FC = () => {
 						name={`${PREFIX}.channels`}
 						onBlur={onBlur}
 						placeholder="@username"
+						addButtonLabel={__('Add Channel')}
 					/>
 				</StackItem>
 				<StackItem flex={1}>

diff --git a/test/e2e/specs/wptelegram-comments/settings-page.spec.ts b/test/e2e/specs/wptelegram-comments/settings-page.spec.ts
@@ -30,19 +30,16 @@ test.describe('Settings', () => {
 	test('Should not allow submission without code', async ({ page }) => {
 		const code = page.getByLabel('Code');
 
-		const validationMessage = await code.evaluate((element) => {
-			const input = element as HTMLTextAreaElement;
-			return input.validationMessage;
-		});
+		const validationMessage = await code.evaluate(
+			(el: HTMLTextAreaElement) => el.validationMessage,
+		);
 
 		expect(validationMessage).toBe('Please fill out this field.');
 
 		// Should not show validation message before submission.
 		expect(await page.content()).not.toContain('Code required');
 
-		const saveButton = page.getByRole('button', { name: 'Save Changes' });
-
-		await saveButton.click();
+		await actions.saveChangesButton.click();
 
 		// Press tab key to blur the code input to dismiss form validation tooltip.
 		await page.keyboard.press('Tab');
@@ -78,7 +75,7 @@ test.describe('Settings', () => {
 
 		const code = page.getByLabel('Code');
 
-		code.waitFor();
+		await code.waitFor();
 
 		expect(await code.inputValue()).toBe('<script async></script>');
 	});

diff --git a/test/e2e/specs/wptelegram-login/settings-page.spec.ts b/test/e2e/specs/wptelegram-login/settings-page.spec.ts
@@ -36,21 +36,18 @@ test.describe('Settings', () => {
 	test('Should validate the bot token and username inputs', async ({
 		page,
 	}) => {
-		const botToken = page.getByLabel('Bot Token');
+		const botTokenField = page.getByLabel('Bot Token');
 
-		const validationMessage = await botToken.evaluate((element) => {
-			const input = element as HTMLTextAreaElement;
-			return input.validationMessage;
-		});
+		const validationMessage = await botTokenField.evaluate(
+			(el: HTMLInputElement) => el.validationMessage,
+		);
 
 		expect(validationMessage).toBe('Please fill out this field.');
 
 		// Should not show validation message before submission.
 		expect(await page.content()).not.toContain('Bot Token required');
 
-		const saveButton = page.getByRole('button', { name: 'Save Changes' });
-
-		await saveButton.click();
+		await actions.saveChangesButton.click();
 
 		await page.keyboard.press('Tab');
 
@@ -62,7 +59,7 @@ test.describe('Settings', () => {
 
 		expect(await page.content()).toContain('Bot Username required');
 
-		await botToken.selectText();
+		await botTokenField.selectText();
 
 		await page.keyboard.type('invalid-token');
 
@@ -86,7 +83,7 @@ test.describe('Settings', () => {
 			},
 		};
 		// Mock the api call
-		await mocks.mockRequest(`bot${botToken}/getMe`, { json });
+		const unmock = await mocks.mockRequest(`bot${botToken}/getMe`, { json });
 
 		const botTokenField = page.getByLabel('Bot Token');
 		const botUsernameField = page.getByLabel('Bot Username');
@@ -101,18 +98,20 @@ test.describe('Settings', () => {
 
 		expect(await page.content()).not.toContain(result);
 
-		await actions.testBotTokenAndWait({ botToken });
+		await actions.testBotTokenAndWait({ endpoint: `/bot${botToken}/getMe` });
 
 		expect(await page.content()).toContain(result);
 
 		expect(await botUsernameField.inputValue()).toBe(json.result.username);
+
+		await unmock();
 	});
 
 	test('Should handle the API call for invalid token', async ({ page }) => {
 		const json = { ok: false, error_code: 401, description: 'Unauthorized' };
 
 		// Mock the api call
-		await mocks.mockRequest(`bot${botToken}/getMe`, {
+		const unmock = await mocks.mockRequest(`bot${botToken}/getMe`, {
 			json,
 			status: json.error_code,
 		});
@@ -128,11 +127,13 @@ test.describe('Settings', () => {
 
 		expect(await page.content()).not.toContain(result);
 
-		await actions.testBotTokenAndWait({ botToken });
+		await actions.testBotTokenAndWait({ endpoint: `/bot${botToken}/getMe` });
 
 		expect(await page.content()).toContain(result);
 
 		expect(await botUsernameField.inputValue()).toBe('');
+
+		await unmock();
 	});
 
 	test('That the bot username field is readonly by default', async ({

diff --git a/test/e2e/specs/wptelegram-widget/public-ui.spec.ts b/test/e2e/specs/wptelegram-widget/public-ui.spec.ts
@@ -113,7 +113,7 @@ test.describe('Public UI', () => {
 
 				const link = page.getByRole('link', { name: 'Join our channel' });
 
-				await expect(link).toHaveCount(1);
+				await expect(link).toBeVisible();
 
 				const href = await link.getAttribute('href');
 
@@ -175,7 +175,7 @@ test.describe('Public UI', () => {
 				for (const [text, href] of linksToAssert) {
 					const link = page.getByRole('link', { name: text });
 
-					await expect(link).toHaveCount(1);
+					await expect(link).toBeVisible();
 
 					const linkHref = await link.getAttribute('href');
 

diff --git a/test/e2e/specs/wptelegram-widget/settings-page.spec.ts b/test/e2e/specs/wptelegram-widget/settings-page.spec.ts
@@ -102,25 +102,21 @@ test.describe('Settings', () => {
 
 		const botTokenField = tabPanel.getByLabel('Bot Token');
 
-		let validationMessage = await botTokenField.evaluate((element) => {
-			const input = element as HTMLInputElement;
-			return input.validationMessage;
-		});
+		let validationMessage = await botTokenField.evaluate(
+			(el: HTMLInputElement) => el.validationMessage,
+		);
 
 		expect(validationMessage).toBeFalsy();
 
 		await tabPanel.getByLabel('Username').fill('SomeUsername');
 
-		validationMessage = await botTokenField.evaluate((element) => {
-			const input = element as HTMLInputElement;
-			return input.validationMessage;
-		});
+		validationMessage = await botTokenField.evaluate(
+			(el: HTMLInputElement) => el.validationMessage,
+		);
 
 		expect(validationMessage).toBe('Please fill out this field.');
 
-		const saveButton = page.getByRole('button', { name: 'Save Changes' });
-
-		await saveButton.click();
+		await actions.saveChangesButton.click();
 
 		await page.keyboard.press('Tab');