From f7fe053c268a764e4485ba8c3c92cc8dd7e03bb9 Mon Sep 17 00:00:00 2001 From: Irshad Ahmad Date: Sat, 12 Oct 2024 21:50:42 +0530 Subject: [PATCH] Fix the damn E2E tests --- packages/js/services/use-display-feedback.ts | 3 ++ .../js/shared-ui/wptelegram/active-field.tsx | 9 +--- .../wptelegram/advanced-settings.tsx | 14 +----- .../shared-ui/wptelegram/channels-field.tsx | 2 +- .../wptelegram/disable-notification.tsx | 7 +-- .../shared-ui/wptelegram/excerpt-settings.tsx | 3 +- .../shared-ui/wptelegram/image-settings.tsx | 2 - .../wptelegram/link-preview-options.tsx | 5 +- .../wptelegram/misc-message-settings.tsx | 4 -- .../p2tg-switch-and-plugin-posts.tsx | 14 +----- .../wptelegram/rules/add-rule-group.tsx | 2 +- .../wptelegram/rules/rule-set-buttons.tsx | 4 +- .../shared-ui/wptelegram/single-message.tsx | 3 +- .../wptelegram/user-notifications.tsx | 7 +-- packages/js/ui-components/ui/toaster.tsx | 4 +- packages/js/ui-components/ui/use-toast.ts | 1 + .../ui-components/wrappers/react-select.tsx | 4 +- packages/js/ui-components/wrappers/switch.tsx | 6 ++- .../js/settings/ui/ButtonOptions.tsx | 2 - .../js/settings/ui/ErrorMessageOptions.tsx | 1 - .../js/settings/ui/LoginOptions.tsx | 4 -- .../js/settings/ui/advanced/Advanced.tsx | 7 +-- .../js/settings/ui/joinLink/JoinLink.tsx | 4 +- .../wptelegram/js/settings/services/fields.ts | 11 ++++- .../wptelegram/js/settings/ui/basics/tab.tsx | 1 + .../js/settings/ui/p2tg/message-keyboard.tsx | 2 - .../specs/wptelegram-login/public-ui.spec.ts | 2 +- .../wptelegram-login/settings-page.spec.ts | 8 ++-- .../wptelegram-widget/settings-page.spec.ts | 8 +--- .../wptelegram/settings-page-p2tg.spec.ts | 46 ++++++++++--------- .../specs/wptelegram/settings-page.spec.ts | 26 ++++++++--- test/e2e/utils/actions.ts | 21 +++++++-- 32 files changed, 109 insertions(+), 128 deletions(-) diff --git a/packages/js/services/use-display-feedback.ts b/packages/js/services/use-display-feedback.ts index a39ef7ee..fe12387e 100644 --- a/packages/js/services/use-display-feedback.ts +++ b/packages/js/services/use-display-feedback.ts @@ -20,6 +20,7 @@ export const useDisplayFeedback = (): DF => { const displayError = useCallback( (props) => { toast({ + status: 'error', ...props, variant: 'destructive', }); @@ -30,6 +31,7 @@ export const useDisplayFeedback = (): DF => { const displaySuccess = useCallback( (props) => { toast({ + status: 'success', ...props, }); }, @@ -48,6 +50,7 @@ export const useDisplayFeedback = (): DF => { const displaySubmitErrors = useCallback( ({ [FORM_ERROR]: formError, ...errors }, submitError) => { + // biome-ignore lint/suspicious/noConsoleLog: console.log({ errors, submitError, formError }); if (submitError || formError) { diff --git a/packages/js/shared-ui/wptelegram/active-field.tsx b/packages/js/shared-ui/wptelegram/active-field.tsx index fe0ea66b..9c6741d8 100644 --- a/packages/js/shared-ui/wptelegram/active-field.tsx +++ b/packages/js/shared-ui/wptelegram/active-field.tsx @@ -1,5 +1,3 @@ -import { useFormContext } from '@wpsocio/form'; -import { __ } from '@wpsocio/i18n'; import { FormControl } from '@wpsocio/ui-components/wrappers/form.js'; import { Switch } from '@wpsocio/ui-components/wrappers/switch.js'; import { prefixName } from '@wpsocio/utilities/misc.js'; @@ -15,12 +13,7 @@ export const ActiveField: React.FC = ({ prefix }) => { render={({ field }) => ( - + )} diff --git a/packages/js/shared-ui/wptelegram/advanced-settings.tsx b/packages/js/shared-ui/wptelegram/advanced-settings.tsx index 0b26f69f..66c7ad18 100644 --- a/packages/js/shared-ui/wptelegram/advanced-settings.tsx +++ b/packages/js/shared-ui/wptelegram/advanced-settings.tsx @@ -50,12 +50,7 @@ export const AdvancedSettings: React.FC = ({ )} > - + )} @@ -82,12 +77,7 @@ export const AdvancedSettings: React.FC = ({ render={({ field }) => ( - + )} diff --git a/packages/js/shared-ui/wptelegram/channels-field.tsx b/packages/js/shared-ui/wptelegram/channels-field.tsx index 54528969..df9d4b43 100644 --- a/packages/js/shared-ui/wptelegram/channels-field.tsx +++ b/packages/js/shared-ui/wptelegram/channels-field.tsx @@ -66,7 +66,7 @@ export function ChannelsField({ variant="secondary" > - {__('Add')} + {__('Add channel')} ); diff --git a/packages/js/shared-ui/wptelegram/disable-notification.tsx b/packages/js/shared-ui/wptelegram/disable-notification.tsx index 90dab830..632716e0 100644 --- a/packages/js/shared-ui/wptelegram/disable-notification.tsx +++ b/packages/js/shared-ui/wptelegram/disable-notification.tsx @@ -21,12 +21,7 @@ export const DisableNotification: React.FC = ({ prefix }) => { label={getFieldLabel('disable_notification')} > - + )} diff --git a/packages/js/shared-ui/wptelegram/excerpt-settings.tsx b/packages/js/shared-ui/wptelegram/excerpt-settings.tsx index 759bbdcf..8fdab12f 100644 --- a/packages/js/shared-ui/wptelegram/excerpt-settings.tsx +++ b/packages/js/shared-ui/wptelegram/excerpt-settings.tsx @@ -86,11 +86,10 @@ export const ExcerptSettings: React.FC = ({ prefix }) => { > diff --git a/packages/js/shared-ui/wptelegram/image-settings.tsx b/packages/js/shared-ui/wptelegram/image-settings.tsx index 26326642..d1d2ce4c 100644 --- a/packages/js/shared-ui/wptelegram/image-settings.tsx +++ b/packages/js/shared-ui/wptelegram/image-settings.tsx @@ -44,8 +44,6 @@ export const ImageSettings: React.FC = ({ prefix }) => { > diff --git a/packages/js/shared-ui/wptelegram/link-preview-options.tsx b/packages/js/shared-ui/wptelegram/link-preview-options.tsx index 922e766a..084b2464 100644 --- a/packages/js/shared-ui/wptelegram/link-preview-options.tsx +++ b/packages/js/shared-ui/wptelegram/link-preview-options.tsx @@ -29,8 +29,6 @@ export const LinkPreviewOptions: React.FC = ({ prefix }) => { > @@ -90,11 +88,10 @@ export const LinkPreviewOptions: React.FC = ({ prefix }) => { > diff --git a/packages/js/shared-ui/wptelegram/misc-message-settings.tsx b/packages/js/shared-ui/wptelegram/misc-message-settings.tsx index e216c100..0807b7fa 100644 --- a/packages/js/shared-ui/wptelegram/misc-message-settings.tsx +++ b/packages/js/shared-ui/wptelegram/misc-message-settings.tsx @@ -23,8 +23,6 @@ export const MiscMessageSettings: React.FC = ({ prefix }) => { > @@ -60,8 +58,6 @@ export const MiscMessageSettings: React.FC = ({ prefix }) => { > diff --git a/packages/js/shared-ui/wptelegram/p2tg-switch-and-plugin-posts.tsx b/packages/js/shared-ui/wptelegram/p2tg-switch-and-plugin-posts.tsx index 38f454f3..48e18ca9 100644 --- a/packages/js/shared-ui/wptelegram/p2tg-switch-and-plugin-posts.tsx +++ b/packages/js/shared-ui/wptelegram/p2tg-switch-and-plugin-posts.tsx @@ -22,12 +22,7 @@ export const P2TGSwitchAndPluginPosts: React.FC = ({ prefix }) => { )} > - + )} @@ -43,12 +38,7 @@ export const P2TGSwitchAndPluginPosts: React.FC = ({ prefix }) => { label={getFieldLabel('plugin_posts')} > - + )} diff --git a/packages/js/shared-ui/wptelegram/rules/add-rule-group.tsx b/packages/js/shared-ui/wptelegram/rules/add-rule-group.tsx index 34b7d5e6..1a7e9d9b 100644 --- a/packages/js/shared-ui/wptelegram/rules/add-rule-group.tsx +++ b/packages/js/shared-ui/wptelegram/rules/add-rule-group.tsx @@ -10,7 +10,7 @@ export const AddRuleGroup: React.FC = ({ onAdd }) => { return ( ); }; diff --git a/packages/js/shared-ui/wptelegram/rules/rule-set-buttons.tsx b/packages/js/shared-ui/wptelegram/rules/rule-set-buttons.tsx index df1b3e5f..916fdb99 100644 --- a/packages/js/shared-ui/wptelegram/rules/rule-set-buttons.tsx +++ b/packages/js/shared-ui/wptelegram/rules/rule-set-buttons.tsx @@ -14,10 +14,10 @@ export const RuleSetButtons: React.FC = ({ return (
} onClick={onRemove} - title={__('Remove the rule')} + title={__('Remove this rule')} variant="outline" className="text-destructive" /> diff --git a/packages/js/shared-ui/wptelegram/single-message.tsx b/packages/js/shared-ui/wptelegram/single-message.tsx index 5c900630..27bfef7a 100644 --- a/packages/js/shared-ui/wptelegram/single-message.tsx +++ b/packages/js/shared-ui/wptelegram/single-message.tsx @@ -96,11 +96,10 @@ export const SingleMessage: React.FC = ({ > diff --git a/packages/js/shared-ui/wptelegram/user-notifications.tsx b/packages/js/shared-ui/wptelegram/user-notifications.tsx index a20db8cb..24e63a7d 100644 --- a/packages/js/shared-ui/wptelegram/user-notifications.tsx +++ b/packages/js/shared-ui/wptelegram/user-notifications.tsx @@ -29,12 +29,7 @@ export const UserNotifications: React.FC = ({ label={getFieldLabel('user_notifications')} > - + )} diff --git a/packages/js/ui-components/ui/toaster.tsx b/packages/js/ui-components/ui/toaster.tsx index c86fec79..50688ee4 100644 --- a/packages/js/ui-components/ui/toaster.tsx +++ b/packages/js/ui-components/ui/toaster.tsx @@ -13,11 +13,11 @@ export function Toaster() { return ( - {toasts.map(function ({ id, title, description, action, ...props }) { + {toasts.map(function ({ id, title, description, action, status, ...props }) { return (
- {title && {title}} + {title && {title}} {description && ( {description} )} diff --git a/packages/js/ui-components/ui/use-toast.ts b/packages/js/ui-components/ui/use-toast.ts index 0931e903..b257be66 100644 --- a/packages/js/ui-components/ui/use-toast.ts +++ b/packages/js/ui-components/ui/use-toast.ts @@ -14,6 +14,7 @@ type ToasterToast = ToastProps & { title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement + status?: 'success'| 'error'| 'warning'| 'info' } const actionTypes = { diff --git a/packages/js/ui-components/wrappers/react-select.tsx b/packages/js/ui-components/wrappers/react-select.tsx index 4dfab76b..30c6beb2 100644 --- a/packages/js/ui-components/wrappers/react-select.tsx +++ b/packages/js/ui-components/wrappers/react-select.tsx @@ -12,10 +12,10 @@ const controlStyles = { }; const placeholderStyles = 'pl-1 py-0.5'; const selectInputStyles = 'pl-1 py-0.5'; -const valueContainerStyles = 'p-1 gap-1'; +const valueContainerStyles = 'p-1 gap-1 data__values-container'; const singleValueStyles = 'leading-7 ml-1'; const multiValueStyles = - 'bg-accent rounded items-center py-0.5 pl-2 pr-1 gap-1.5'; + 'bg-accent rounded items-center py-0.5 pl-2 pr-1 gap-1.5 data__multi-value'; const multiValueLabelStyles = 'leading-6 py-0.5'; const multiValueRemoveStyles = 'bg-transparent text-primary opacity-50 hover:opacity-100'; diff --git a/packages/js/ui-components/wrappers/switch.tsx b/packages/js/ui-components/wrappers/switch.tsx index 2d1e8238..1a872bf3 100644 --- a/packages/js/ui-components/wrappers/switch.tsx +++ b/packages/js/ui-components/wrappers/switch.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useCallback, useState } from 'react'; +import { forwardRef, useCallback, useEffect, useState } from 'react'; import { Switch as SwitchUI } from '../ui/switch.js'; export type SwitchProps = React.ComponentProps & { @@ -19,6 +19,10 @@ export const Switch = forwardRef( [onCheckedChange], ); + useEffect(() => { + setIsChecked((prevVal) => props.checked ?? prevVal); + }, [props.checked]); + return ( <> {undefined !== offValue && props.name && !isChecked ? ( diff --git a/plugins/wptelegram-login/js/settings/ui/ButtonOptions.tsx b/plugins/wptelegram-login/js/settings/ui/ButtonOptions.tsx index ab1b6847..81d72162 100644 --- a/plugins/wptelegram-login/js/settings/ui/ButtonOptions.tsx +++ b/plugins/wptelegram-login/js/settings/ui/ButtonOptions.tsx @@ -57,7 +57,6 @@ export const ButtonOptions = () => { > @@ -133,7 +132,6 @@ export const ButtonOptions = () => { > diff --git a/plugins/wptelegram-login/js/settings/ui/ErrorMessageOptions.tsx b/plugins/wptelegram-login/js/settings/ui/ErrorMessageOptions.tsx index b626035e..838e50a1 100644 --- a/plugins/wptelegram-login/js/settings/ui/ErrorMessageOptions.tsx +++ b/plugins/wptelegram-login/js/settings/ui/ErrorMessageOptions.tsx @@ -32,7 +32,6 @@ export const ErrorMessageOptions = () => { > diff --git a/plugins/wptelegram-login/js/settings/ui/LoginOptions.tsx b/plugins/wptelegram-login/js/settings/ui/LoginOptions.tsx index 30125bfd..1054dade 100644 --- a/plugins/wptelegram-login/js/settings/ui/LoginOptions.tsx +++ b/plugins/wptelegram-login/js/settings/ui/LoginOptions.tsx @@ -52,8 +52,6 @@ export const LoginOptions = () => { > @@ -154,8 +152,6 @@ export const LoginOptions = () => { > diff --git a/plugins/wptelegram-widget/js/settings/ui/advanced/Advanced.tsx b/plugins/wptelegram-widget/js/settings/ui/advanced/Advanced.tsx index e8a79b5b..b05d3304 100644 --- a/plugins/wptelegram-widget/js/settings/ui/advanced/Advanced.tsx +++ b/plugins/wptelegram-widget/js/settings/ui/advanced/Advanced.tsx @@ -33,12 +33,7 @@ export const Advanced: React.FC = () => { description={__('Whether your host blocks Telegram.')} > - + )} diff --git a/plugins/wptelegram-widget/js/settings/ui/joinLink/JoinLink.tsx b/plugins/wptelegram-widget/js/settings/ui/joinLink/JoinLink.tsx index 76cd635f..8f49e46c 100644 --- a/plugins/wptelegram-widget/js/settings/ui/joinLink/JoinLink.tsx +++ b/plugins/wptelegram-widget/js/settings/ui/joinLink/JoinLink.tsx @@ -8,7 +8,7 @@ import { import { Input } from '@wpsocio/ui-components/wrappers/input.js'; import { RadioGroup } from '@wpsocio/ui-components/wrappers/radio-group'; import { Switch } from '@wpsocio/ui-components/wrappers/switch.js'; -import { type DataShape, getFieldLabel, useData } from '../../services'; +import { type DataShape, getFieldLabel } from '../../services'; import { JoinLinkInfo } from './JoinLinkInfo'; import { PostTypes } from './PostTypes'; import { Styles } from './Styles'; @@ -105,8 +105,6 @@ export const JoinLink: React.FC = () => { > diff --git a/plugins/wptelegram/js/settings/services/fields.ts b/plugins/wptelegram/js/settings/services/fields.ts index 749abc1f..a2b45047 100644 --- a/plugins/wptelegram/js/settings/services/fields.ts +++ b/plugins/wptelegram/js/settings/services/fields.ts @@ -86,24 +86,33 @@ export const validationSchema = z.object({ ) .optional(), message_template: z.string().optional(), + // Excerpt settings excerpt_source: z .enum(['post_content', 'before_more', 'post_excerpt']) .optional(), excerpt_length: z.coerce.number().int().min(1).max(300).optional(), excerpt_preserve_eol: z.boolean().optional(), + // Image settings send_featured_image: z.boolean().optional(), image_position: z.enum(['before', 'after']).optional(), single_message: z.boolean().optional(), + // Additional settings cats_as_tags: z.boolean().optional(), parse_mode: parseModeSchema, + protect_content: z.boolean().optional(), + // Link preview settings link_preview_disabled: z.boolean().optional(), link_preview_url: z.string().optional(), link_preview_above_text: z.boolean().optional(), + // Inline button settings + inline_url_button: z.boolean().optional(), inline_button_text: z.string().optional(), inline_button_url: z.string().optional(), + // Misc settings + post_edit_switch: z.boolean().optional(), + plugin_posts: z.boolean().optional(), delay: z.coerce.number().min(0).optional(), disable_notification: z.boolean().optional(), - protect_content: z.boolean().optional(), }) .refine((value) => !value.active || value.channels?.length, { message: sprintf( diff --git a/plugins/wptelegram/js/settings/ui/basics/tab.tsx b/plugins/wptelegram/js/settings/ui/basics/tab.tsx index 1ab4936b..6d9f3d4e 100644 --- a/plugins/wptelegram/js/settings/ui/basics/tab.tsx +++ b/plugins/wptelegram/js/settings/ui/basics/tab.tsx @@ -36,6 +36,7 @@ export const BasicsTab: React.FC = () => { __('Use %s above to set automatically.'), __('Test Token'), )} + isRequired > { > diff --git a/test/e2e/specs/wptelegram-login/public-ui.spec.ts b/test/e2e/specs/wptelegram-login/public-ui.spec.ts index 501ffe94..f8854606 100644 --- a/test/e2e/specs/wptelegram-login/public-ui.spec.ts +++ b/test/e2e/specs/wptelegram-login/public-ui.spec.ts @@ -111,7 +111,7 @@ test.describe('Public UI', () => { admin, }) => { // Select "Any" option for "Show if user is" setting - await page.getByLabel('Show if user is').selectOption('Any'); + await actions.selectOption(page.getByLabel('Show if user is'), 'Any'); await actions.saveChangesAndWait({ apiPath: '/wptelegram-login/v1/settings', diff --git a/test/e2e/specs/wptelegram-login/settings-page.spec.ts b/test/e2e/specs/wptelegram-login/settings-page.spec.ts index 6c8278b6..407d045a 100644 --- a/test/e2e/specs/wptelegram-login/settings-page.spec.ts +++ b/test/e2e/specs/wptelegram-login/settings-page.spec.ts @@ -151,8 +151,8 @@ test.describe('Settings', () => { test('Should save the changes with only bot token and username', async ({ page, }) => { - const botTokenField = page.getByLabel('Bot Token'); - const botUsernameField = page.getByLabel('Bot Username'); + let botTokenField = page.getByLabel('Bot Token'); + let botUsernameField = page.getByLabel('Bot Username'); await botTokenField.selectText(); @@ -170,10 +170,12 @@ test.describe('Settings', () => { // Reload the page and wait await page.reload(); + botTokenField = page.getByLabel('Bot Token'); + botUsernameField = page.getByLabel('Bot Username'); + await botTokenField.waitFor(); expect(await botTokenField.inputValue()).toBe(botToken); - expect(await botUsernameField.inputValue()).toBe('E2ETestBot'); }); diff --git a/test/e2e/specs/wptelegram-widget/settings-page.spec.ts b/test/e2e/specs/wptelegram-widget/settings-page.spec.ts index 1352c129..9e791d86 100644 --- a/test/e2e/specs/wptelegram-widget/settings-page.spec.ts +++ b/test/e2e/specs/wptelegram-widget/settings-page.spec.ts @@ -42,13 +42,7 @@ test.describe('Settings', () => { ], [ 'Legacy Widget', - [ - 'Username', - 'Bot Token', - 'Widget Width', - 'Author Photo', - 'Number of Messages', - ], + ['Username', 'Bot Token', 'Widget Width', 'Number of Messages'], ], [ 'Join Link', diff --git a/test/e2e/specs/wptelegram/settings-page-p2tg.spec.ts b/test/e2e/specs/wptelegram/settings-page-p2tg.spec.ts index 51f674e3..d09585de 100644 --- a/test/e2e/specs/wptelegram/settings-page-p2tg.spec.ts +++ b/test/e2e/specs/wptelegram/settings-page-p2tg.spec.ts @@ -11,6 +11,8 @@ async function setupPostToTelegramSection(page: Page) { await page.getByRole('tab', { name: 'Basics' }).click(); await page.getByLabel('Bot Token').fill(botToken); + await page.getByLabel('Bot Username').dblclick(); + await page.keyboard.type('E2ETestBot'); const button = page.getByRole('tab', { name: 'Post to Telegram' }); @@ -24,11 +26,9 @@ async function setupPostToTelegramSection(page: Page) { ); // Now let us activate the section - await tabPanel - .getByRole('checkbox', { name: 'Active' }) - .check({ force: true }); + await tabPanel.getByRole('switch', { name: 'Active' }).check({ force: true }); - await tabPanel.getByRole('button', { name: 'Add Channel' }).click(); + await tabPanel.getByRole('button', { name: 'Add channel' }).click(); await tabPanel.getByPlaceholder('@username').last().fill('@WPTelegram'); @@ -88,7 +88,7 @@ test.describe('Settings > P2TG', () => { .locator('input[type="radio"][name="p2tg.image_position"]') .first(); - const singleMessage = tabPanel.getByRole('checkbox', { + const singleMessage = tabPanel.getByRole('switch', { name: 'Single Message', }); @@ -102,11 +102,11 @@ test.describe('Settings > P2TG', () => { await expect(singleMessage).toBeDisabled(); // Fields that depend on "Disable link preview" - const disableLinkPreview = tabPanel.getByRole('checkbox', { + const disableLinkPreview = tabPanel.getByRole('switch', { name: 'Disable link preview', }); const linkPreviewUrl = tabPanel.getByLabel('Link Preview URL'); - const showPreviewAboveText = tabPanel.getByRole('checkbox', { + const showPreviewAboveText = tabPanel.getByRole('switch', { name: 'Show preview above text', }); @@ -120,7 +120,7 @@ test.describe('Settings > P2TG', () => { await expect(showPreviewAboveText).toBeDisabled(); // Fields that depend on the "Add Inline URL Button" setting - const inlineButtonSwitch = tabPanel.getByRole('checkbox', { + const inlineButtonSwitch = tabPanel.getByRole('switch', { name: 'Add Inline URL Button', }); const inlineButtonText = tabPanel.getByLabel('Inline Button Text'); @@ -139,7 +139,7 @@ test.describe('Settings > P2TG', () => { }); test('Should show warnings for Single Message', async () => { - const singleMessage = tabPanel.getByRole('checkbox', { + const singleMessage = tabPanel.getByRole('switch', { name: 'Single Message', }); @@ -151,7 +151,7 @@ test.describe('Settings > P2TG', () => { name: 'HTML style', }); - const disableLinkPreview = tabPanel.getByRole('checkbox', { + const disableLinkPreview = tabPanel.getByRole('switch', { name: 'Disable link preview', }); @@ -186,7 +186,7 @@ test.describe('Settings > P2TG', () => { test('Should clean up message template after saving changes', async ({ page, }) => { - const templateField = tabPanel.getByLabel('Message Template'); + let templateField = tabPanel.getByLabel('Message Template'); templateField.fill( // trailing whitespaces,
and