Fix the damn E2E tests

wpsocio · Oct 12, 2024 · f7fe053 · f7fe053
1 parent cddd412
commit f7fe053
Show file tree

Hide file tree

Showing 32 changed files with 109 additions and 128 deletions.
diff --git 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<DF['displayError']>(
 		(props) => {
 			toast({
+				status: 'error',
 				...props,
 				variant: 'destructive',
 			});
@@ -30,6 +31,7 @@ export const useDisplayFeedback = (): DF => {
 	const displaySuccess = useCallback<DF['displayError']>(
 		(props) => {
 			toast({
+				status: 'success',
 				...props,
 			});
 		},
@@ -48,6 +50,7 @@ export const useDisplayFeedback = (): DF => {
 
 	const displaySubmitErrors = useCallback<DF['displaySubmitErrors']>(
 		({ [FORM_ERROR]: formError, ...errors }, submitError) => {
+			// biome-ignore lint/suspicious/noConsoleLog: <explanation>
 			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
@@ -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<CommonProps> = ({ prefix }) => {
 			render={({ field }) => (
 				<FormItem label={getFieldLabel('active')}>
 					<FormControl>
-						<Switch
-							{...field}
-							value={field.value?.toString()}
-							checked={field.value}
-							onCheckedChange={field.onChange}
-						/>
+						<Switch checked={field.value} onCheckedChange={field.onChange} />
 					</FormControl>
 				</FormItem>
 			)}

diff --git 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<AdvancedSettingsProps> = ({
 						)}
 					>
 						<FormControl>
-							<Switch
-								{...field}
-								value={field.value?.toString()}
-								checked={field.value}
-								onCheckedChange={field.onChange}
-							/>
+							<Switch checked={field.value} onCheckedChange={field.onChange} />
 						</FormControl>
 					</FormItem>
 				)}
@@ -82,12 +77,7 @@ export const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
 				render={({ field }) => (
 					<FormItem label={getFieldLabel('clean_uninstall')}>
 						<FormControl>
-							<Switch
-								{...field}
-								value={field.value?.toString()}
-								checked={field.value}
-								onCheckedChange={field.onChange}
-							/>
+							<Switch checked={field.value} onCheckedChange={field.onChange} />
 						</FormControl>
 					</FormItem>
 				)}

diff --git 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"
 			>
 				<Plus className="me-2" size="16" />
-				{__('Add')}
+				{__('Add channel')}
 			</Button>
 		</div>
 	);

diff --git 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<CommonProps> = ({ prefix }) => {
 					label={getFieldLabel('disable_notification')}
 				>
 					<FormControl>
-						<Switch
-							{...field}
-							value={field.value?.toString()}
-							checked={field.value}
-							onCheckedChange={field.onChange}
-						/>
+						<Switch checked={field.value} onCheckedChange={field.onChange} />
 					</FormControl>
 				</FormItem>
 			)}

diff --git 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<CommonProps> = ({ prefix }) => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 									disabled={!hasExcerpt}
+									aria-readonly={!hasExcerpt}
 								/>
 							</FormControl>
 						</FormItem>

diff --git 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<CommonProps> = ({ prefix }) => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>

diff --git 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<CommonProps> = ({ prefix }) => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>
@@ -90,11 +88,10 @@ export const LinkPreviewOptions: React.FC<CommonProps> = ({ prefix }) => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 									disabled={link_preview_disabled}
+									aria-readonly={link_preview_disabled}
 								/>
 							</FormControl>
 						</FormItem>

diff --git 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<CommonProps> = ({ prefix }) => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>
@@ -60,8 +58,6 @@ export const MiscMessageSettings: React.FC<CommonProps> = ({ prefix }) => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>

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
@@ -22,12 +22,7 @@ export const P2TGSwitchAndPluginPosts: React.FC<CommonProps> = ({ prefix }) => {
 						)}
 					>
 						<FormControl>
-							<Switch
-								{...field}
-								value={field.value?.toString()}
-								checked={field.value}
-								onCheckedChange={field.onChange}
-							/>
+							<Switch checked={field.value} onCheckedChange={field.onChange} />
 						</FormControl>
 					</FormItem>
 				)}
@@ -43,12 +38,7 @@ export const P2TGSwitchAndPluginPosts: React.FC<CommonProps> = ({ prefix }) => {
 						label={getFieldLabel('plugin_posts')}
 					>
 						<FormControl>
-							<Switch
-								{...field}
-								value={field.value?.toString()}
-								checked={field.value}
-								onCheckedChange={field.onChange}
-							/>
+							<Switch checked={field.value} onCheckedChange={field.onChange} />
 						</FormControl>
 					</FormItem>
 				)}

diff --git 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<AddRuleGroupProps> = ({ onAdd }) => {
 	return (
 		<Button onClick={onAdd} variant="outline">
 			<Plus className="me-2" />
-			{__('Add')}
+			{__('Add rule')}
 		</Button>
 	);
 };
diff --git 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<RuleSetButtonsProps> = ({
 	return (
 		<div className="flex flex-row md:flex-col max-w-max justify-center gap-2">
 			<IconButton
-				aria-label={__('Remove the rule')}
+				aria-label={__('Remove this rule')}
 				icon={<Close />}
 				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
@@ -96,11 +96,10 @@ export const SingleMessage: React.FC<SingleMessageProps> = ({
 				>
 					<FormControl>
 						<Switch
-							{...field}
-							value={field.value?.toString()}
 							checked={field.value}
 							onCheckedChange={field.onChange}
 							disabled={disabled}
+							aria-readonly={disabled}
 						/>
 					</FormControl>
 				</FormItem>

diff --git 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<UserNotificationsProps> = ({
 						label={getFieldLabel('user_notifications')}
 					>
 						<FormControl>
-							<Switch
-								{...field}
-								value={field.value?.toString()}
-								checked={field.value}
-								onCheckedChange={field.onChange}
-							/>
+							<Switch checked={field.value} onCheckedChange={field.onChange} />
 						</FormControl>
 					</FormItem>
 				)}

diff --git a/packages/js/ui-components/ui/toaster.tsx b/packages/js/ui-components/ui/toaster.tsx
@@ -13,11 +13,11 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
+      {toasts.map(function ({ id, title, description, action, status, ...props }) {
         return (
           <Toast key={id} {...props}>
             <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
+              {title && <ToastTitle data-status={status}>{title}</ToastTitle>}
               {description && (
                 <ToastDescription>{description}</ToastDescription>
               )}

diff --git 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
@@ -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
@@ -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<typeof SwitchUI> & {
@@ -19,6 +19,10 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
 			[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
@@ -57,7 +57,6 @@ export const ButtonOptions = () => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>
@@ -133,7 +132,6 @@ export const ButtonOptions = () => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>

diff --git 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 = () => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>

diff --git 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 = () => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>
@@ -154,8 +152,6 @@ export const LoginOptions = () => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>

diff --git 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.')}
 					>
 						<FormControl>
-							<Switch
-								{...field}
-								value={field.value?.toString()}
-								checked={field.value}
-								onCheckedChange={field.onChange}
-							/>
+							<Switch checked={field.value} onCheckedChange={field.onChange} />
 						</FormControl>
 					</FormItem>
 				)}

diff --git 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 = () => {
 						>
 							<FormControl>
 								<Switch
-									{...field}
-									value={field.value?.toString()}
 									checked={field.value}
 									onCheckedChange={field.onChange}
 								/>

diff --git 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(