some test updates

Author: lexi-taylor

__tests__/html2/activity/feedback.form.activity.html

@@ -66,7 +66,7 @@
         await host.snapshot('local');
 
         // Dismiss like button
-        await host.sendShiftTab(1);
+        await host.sendShiftTab(2);
         await host.sendKeys('ENTER');
 
         await host.snapshot('local');
@@ -102,6 +102,9 @@
         );
 
         await host.sendKeys('Test feedback');
+
+        await host.snapshot('local');
+
         const { activity } = await directLine.actPostActivity(async () => {
           await host.sendTab(1);
           await host.sendKeys('ENTER');
@@ -116,7 +119,7 @@
               actionValue: {
                 reaction: 'dislike',
                 feedback: {
-                  feedbackText: expect.any('Test feedback')
+                  feedbackText: 'Test feedback'
                 }
               }
             }

__tests__/html2/activity/feedback.form.activity.html.snap-1.png

@@ -1,17 +1,16 @@
 import { hooks } from 'botframework-webchat-api';
 import { getOrgSchemaMessage, OrgSchemaAction, parseAction, WebChatActivity } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { defaultFeedbackEntities } from './private/DefaultFeedbackEntities';
 import { hasFeedbackLoop, getDisclaimer } from './private/feedbackActivity.util';
 
 import Feedback from './private/Feedback';
 import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
 import FeedbackForm from './private/FeedbackForm';
 import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import { useRefFrom } from 'use-ref-from';
 
-const { useStyleOptions, usePostActivity, usePonyfill } = hooks;
+const { useStyleOptions } = hooks;
 
 type ActivityFeedbackProps = Readonly<{
   activity: WebChatActivity;
@@ -43,15 +42,9 @@ const useGetMessageThing = (activity: WebChatActivity) =>
     return { isFeedbackLoopSupported: false, messageThing, graph };
   }, [activity]);
 
-const DEBOUNCE_TIMEOUT = 500;
-
 function ActivityFeedback({ activity }: ActivityFeedbackProps) {
-  const [{ clearTimeout, setTimeout }] = usePonyfill();
-  const postActivity = usePostActivity();
-
   const [{ feedbackActionsPlacement }] = useStyleOptions();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-  const postActivityRef = useRefFrom(postActivity);
 
   const [selectedAction, setSelectedAction] = useState<OrgSchemaAction | undefined>();
 
@@ -78,28 +71,12 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
     return Object.freeze(new Set([] as OrgSchemaAction[]));
   }, [graph, messageThing?.potentialAction]);
 
-  const handleFeedbackActionClick = useCallback((action?: OrgSchemaAction) => {
-    setSelectedAction(action);
-  }, []);
-
-  useEffect(() => {
-    if (!selectedAction) {
-      return;
-    }
-
-    const timeout = setTimeout(
-      () =>
-        // TODO: We should update this to use W3C Hydra.1
-        postActivityRef.current({
-          entities: [selectedAction],
-          name: 'webchat:activity-status/feedback',
-          type: 'event'
-        } as any),
-      DEBOUNCE_TIMEOUT
-    );
-
-    return () => clearTimeout(timeout);
-  }, [clearTimeout, postActivityRef, selectedAction, setTimeout]);
+  const handleFeedbackActionClick = useCallback(
+    (action?: OrgSchemaAction) => {
+      setSelectedAction(action === selectedAction ? undefined : action);
+    },
+    [selectedAction]
+  );
 
   const FeedbackComponent = useMemo(
     () => (
@@ -108,10 +85,12 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
         className={classNames({
           'webchat__thumb-button--large': feedbackActionsPlacement === 'activity-actions'
         })}
+        isFeedbackFormSupported={isFeedbackLoopSupported}
         onHandleFeedbackActionClick={handleFeedbackActionClick}
+        selectedAction={selectedAction}
       />
     ),
-    [feedbackActions, feedbackActionsPlacement, handleFeedbackActionClick]
+    [feedbackActions, feedbackActionsPlacement, handleFeedbackActionClick, isFeedbackLoopSupported, selectedAction]
   );
 
   const FeedbackFormComponent = useMemo(

__tests__/html2/activity/feedback.form.activity.html.snap-2.png

@@ -1,53 +1,82 @@
 import { hooks } from 'botframework-webchat-api';
 import { type OrgSchemaAction } from 'botframework-webchat-core';
-import React, { Fragment, memo, useMemo, type PropsWithChildren } from 'react';
+import React, { Fragment, memo, useEffect, useMemo, type PropsWithChildren } from 'react';
+import { useRefFrom } from 'use-ref-from';
 
 import FeedbackVoteButton from './VoteButton';
 
-const { useLocalizer } = hooks;
+const { usePonyfill, usePostActivity, useLocalizer } = hooks;
 
 type Props = Readonly<
   PropsWithChildren<{
     actions: ReadonlySet<OrgSchemaAction>;
     className?: string | undefined;
+    isFeedbackFormSupported?: boolean;
     onHandleFeedbackActionClick?: (action: OrgSchemaAction) => void;
     selectedAction?: OrgSchemaAction | undefined;
   }>
 >;
 
-const Feedback = memo(({ actions, className, onHandleFeedbackActionClick, selectedAction }: Props) => {
-  const localize = useLocalizer();
-
-  const actionProps = useMemo(
-    () =>
-      [...actions].some(action => action.actionStatus === 'CompletedActionStatus')
-        ? {
-            disabled: true,
-            title: localize('VOTE_COMPLETE_ALT')
-          }
-        : undefined,
-    [actions, localize]
-  );
-
-  return (
-    <Fragment>
-      {[...actions].map((action, index) => (
-        <FeedbackVoteButton
-          action={action}
-          className={className}
-          key={action['@id'] || index}
-          onClick={onHandleFeedbackActionClick}
-          pressed={
-            selectedAction === action ||
-            action.actionStatus === 'CompletedActionStatus' ||
-            action.actionStatus === 'ActiveActionStatus'
-          }
-          {...actionProps}
-        />
-      ))}
-    </Fragment>
-  );
-});
+const DEBOUNCE_TIMEOUT = 500;
+
+const Feedback = memo(
+  ({ actions, className, isFeedbackFormSupported, onHandleFeedbackActionClick, selectedAction }: Props) => {
+    const [{ clearTimeout, setTimeout }] = usePonyfill();
+    const postActivity = usePostActivity();
+    const localize = useLocalizer();
+
+    const postActivityRef = useRefFrom(postActivity);
+
+    useEffect(() => {
+      if (!selectedAction || isFeedbackFormSupported) {
+        return;
+      }
+
+      const timeout = setTimeout(
+        () =>
+          // TODO: We should update this to use W3C Hydra.1
+          postActivityRef.current({
+            entities: [selectedAction],
+            name: 'webchat:activity-status/feedback',
+            type: 'event'
+          } as any),
+        DEBOUNCE_TIMEOUT
+      );
+
+      return () => clearTimeout(timeout);
+    }, [clearTimeout, isFeedbackFormSupported, postActivityRef, selectedAction, setTimeout]);
+
+    const actionProps = useMemo(
+      () =>
+        [...actions].some(action => action.actionStatus === 'CompletedActionStatus')
+          ? {
+              disabled: true,
+              title: localize('VOTE_COMPLETE_ALT')
+            }
+          : undefined,
+      [actions, localize]
+    );
+
+    return (
+      <Fragment>
+        {[...actions].map((action, index) => (
+          <FeedbackVoteButton
+            action={action}
+            className={className}
+            key={action['@id'] || index}
+            onClick={onHandleFeedbackActionClick}
+            pressed={
+              selectedAction === action ||
+              action.actionStatus === 'CompletedActionStatus' ||
+              action.actionStatus === 'ActiveActionStatus'
+            }
+            {...actionProps}
+          />
+        ))}
+      </Fragment>
+    );
+  }
+);
 
 Feedback.displayName = 'ActivityStatusFeedback';
 

__tests__/html2/activity/feedback.form.activity.html.snap-3.png

@@ -1,10 +1,10 @@
 import { type WebChatActivity } from 'botframework-webchat-core';
-import { object, safeParse, string } from 'valibot';
+import { literal, object, safeParse, string } from 'valibot';
 
 const activityWithFeedbackLoopSchema = object({
   channelData: object({
     feedbackLoop: object({
-      type: string(),
+      type: literal('default'),
       disclaimer: string()
     })
   })
@@ -15,7 +15,7 @@ type FeedbackActivity = WebChatActivity & {
 };
 
 export const hasFeedbackLoop = (activity: WebChatActivity): activity is FeedbackActivity =>
-  safeParse(activityWithFeedbackLoopSchema, activity.channelData).success;
+  safeParse(activityWithFeedbackLoopSchema, activity).success;
 
 export const getDisclaimer = (activity: WebChatActivity): string | undefined =>
   hasFeedbackLoop(activity) ? activity.channelData.feedbackLoop.disclaimer : undefined;

__tests__/html2/activity/feedback.form.activity.html.snap-4.png

@@ -21,7 +21,7 @@ export default function createFeedbackTextAreaStyle() {
       '&::after': {
         borderBottomLeftRadius: '4px',
         borderBottomRightRadius: '4px',
-        borderBottom: `3px solid ${CSSTokens.FeedbackFormNeutralLight}`,
+        borderBottom: `3px solid ${CSSTokens.FeedbackFormPrimary}`,
         bottom: '-1px',
         clipPath: 'inset(calc(100% - 3px) 50% 0 50%)',
         content: '""',
@@ -32,7 +32,7 @@ export default function createFeedbackTextAreaStyle() {
         transition: 'clip-path 0 cubic-bezier(1, 0, 1, 1)'
       },
       '&:focus-within': {
-        border: `1px solid ${CSSTokens.FeedbackFormPrimary}`
+        border: `1px solid ${CSSTokens.FeedbackFormNeutralLight}`
       },
       '&:focus-within::after': {
         clipPath: 'inset(calc(100% - 3px) 0 0 0)',