Make the snapshots of recently added html2 tests easier to review (#5908)

* Make weekend html2 tests easier to review: snapshot every keyboard step and describe every snapshot

- Take a snapshot after every key press in keyboard focus tests, each preceded by a THEN comment
- Hide the send box where it is not under test
- Replace "Should match snapshot" with what the snapshot shows
- Keep test data next to the assertions that use it

* Address review: snapshot after every move in carousel arrow key tests

* Move carousel test helpers to testHelpers and pageConditions, split formControls arrow key test by scenario

---------

Co-authored-by: Eugene Olonov <eugeneolonov@microsoft.com>

Author: OEvgeny

__tests__/html2/activity/programmingLanguageTitle.html

@@ -28,58 +28,6 @@
       import React from 'react';
       import { createRoot } from 'react-dom/client';
 
-      const aiMessageEntity = Object.freeze({
-        '@context': 'https://schema.org',
-        '@id': '',
-        '@type': 'Message',
-        keywords: Object.freeze(['AIGeneratedContent']),
-        type: 'https://schema.org/Message'
-      });
-
-      // Programming languages are sent as-is in "programmingLanguage", often in lowercase or as an alias.
-      // Only JavaScript, Python, and TypeScript are highlighted by the bundled highlighter.
-      const COLLAPSIBLE_SAMPLES = Object.freeze([
-        Object.freeze({
-          isHighlighted: true,
-          programmingLanguage: 'javascript',
-          text: "console.log('Hello, World!');",
-          title: 'JavaScript'
-        }),
-        Object.freeze({
-          isHighlighted: true,
-          programmingLanguage: 'TS',
-          text: "const greeting: string = 'Hello, World!';",
-          title: 'TypeScript'
-        }),
-        Object.freeze({
-          isHighlighted: false,
-          programmingLanguage: 'c#',
-          text: 'Console.WriteLine("Hello, World!");',
-          title: 'C#'
-        }),
-        // The title of "sh" ("Shell") is overridden via "overrideLocalizedStrings" below.
-        Object.freeze({
-          isHighlighted: false,
-          programmingLanguage: 'sh',
-          text: 'echo "Hello, World!"',
-          title: 'Shell script'
-        }),
-        // Shell dialects keep their own name: only the first letter is capitalized.
-        Object.freeze({
-          isHighlighted: false,
-          programmingLanguage: 'bash',
-          text: "echo 'Hello, World!'",
-          title: 'Bash'
-        }),
-        // Unknown programming language: only the first letter is capitalized.
-        Object.freeze({
-          isHighlighted: false,
-          programmingLanguage: 'cobol',
-          text: 'DISPLAY "Hello, World!".',
-          title: 'Cobol'
-        })
-      ]);
-
       run(async function () {
         const {
           WebChat: { ReactWebChat, testIds }
@@ -99,8 +47,60 @@
 
         await pageConditions.uiConnected();
 
+        const aiMessageEntity = Object.freeze({
+          '@context': 'https://schema.org',
+          '@id': '',
+          '@type': 'Message',
+          keywords: Object.freeze(['AIGeneratedContent']),
+          type: 'https://schema.org/Message'
+        });
+
+        // Programming languages are sent as-is in "programmingLanguage", often in lowercase or as an alias.
+        // Only JavaScript, Python, and TypeScript are highlighted by the bundled highlighter.
+        const collapsibleSamples = Object.freeze([
+          Object.freeze({
+            isHighlighted: true,
+            programmingLanguage: 'javascript',
+            text: "console.log('Hello, World!');",
+            title: 'JavaScript'
+          }),
+          Object.freeze({
+            isHighlighted: true,
+            programmingLanguage: 'TS',
+            text: "const greeting: string = 'Hello, World!';",
+            title: 'TypeScript'
+          }),
+          Object.freeze({
+            isHighlighted: false,
+            programmingLanguage: 'c#',
+            text: 'Console.WriteLine("Hello, World!");',
+            title: 'C#'
+          }),
+          // The title of "sh" ("Shell") is overridden via "overrideLocalizedStrings" above.
+          Object.freeze({
+            isHighlighted: false,
+            programmingLanguage: 'sh',
+            text: 'echo "Hello, World!"',
+            title: 'Shell script'
+          }),
+          // Shell dialects keep their own name: only the first letter is capitalized.
+          Object.freeze({
+            isHighlighted: false,
+            programmingLanguage: 'bash',
+            text: "echo 'Hello, World!'",
+            title: 'Bash'
+          }),
+          // Unknown programming language: only the first letter is capitalized.
+          Object.freeze({
+            isHighlighted: false,
+            programmingLanguage: 'cobol',
+            text: 'DISPLAY "Hello, World!".',
+            title: 'Cobol'
+          })
+        ]);
+
         // WHEN: The bot sends collapsible messages with code (emulated).
-        for (const { programmingLanguage, text } of COLLAPSIBLE_SAMPLES) {
+        for (const { programmingLanguage, text } of collapsibleSamples) {
           await directLine.emulateIncomingActivity({
             entities: [
               {
@@ -116,7 +116,7 @@
           });
         }
 
-        await pageConditions.numActivitiesShown(COLLAPSIBLE_SAMPLES.length);
+        await pageConditions.numActivitiesShown(collapsibleSamples.length);
 
         // WHEN: Expand every message.
         for (const summary of document.querySelectorAll('summary.collapsible-content__summary')) {
@@ -129,17 +129,17 @@
         await waitFor(() =>
           expect(
             Array.from(document.querySelectorAll('.code-block-content pre'), pre => pre.classList.contains('shiki'))
-          ).toEqual(COLLAPSIBLE_SAMPLES.map(({ isHighlighted }) => isHighlighted))
+          ).toEqual(collapsibleSamples.map(({ isHighlighted }) => isHighlighted))
         );
 
         await pageConditions.scrollStabilized();
 
         // THEN: The code blocks should show the title of the programming language.
         expect(
           Array.from(document.querySelectorAll('.code-block-content__title'), ({ textContent }) => textContent)
-        ).toEqual(COLLAPSIBLE_SAMPLES.map(({ title }) => title));
+        ).toEqual(collapsibleSamples.map(({ title }) => title));
 
-        // THEN: Should match snapshot.
+        // THEN: The 6 expanded messages show their code under the titles JavaScript, TypeScript, C#, Shell script, Bash, and Cobol, only the first 2 highlighted.
         await host.snapshot('local');
 
         // WHEN: The bot sends a message with code in "py" (emulated).
@@ -155,7 +155,7 @@
           type: 'message'
         });
 
-        await pageConditions.numActivitiesShown(COLLAPSIBLE_SAMPLES.length + 1);
+        await pageConditions.numActivitiesShown(collapsibleSamples.length + 1);
         await pageConditions.scrollStabilized();
 
         // WHEN: Click the "View code" button.
@@ -168,7 +168,7 @@
           'Code sample: Python'
         );
 
-        // THEN: Should match snapshot.
+        // THEN: The "View code" dialog shows the Python code under the "Python" title.
         await host.snapshot('local');
       });
     </script>

__tests__/html2/carousel/flipperButton.focusVisible.fluent.html.snap-1.png

@@ -34,7 +34,12 @@
       run(async function () {
         const { directLine, store } = testHelpers.createDirectLineEmulator();
         const variant = new URLSearchParams(location.search).get('variant');
-        const webChatElement = createElement(ReactWebChat, { directLine, store });
+        // The send box is not under test: hide it, including the send box of the Fluent theme.
+        const webChatElement = createElement(ReactWebChat, {
+          directLine,
+          sendBoxMiddleware: [() => () => () => false],
+          store
+        });
 
         createRoot(document.getElementById('webchat')).render(
           variant ? createElement(FluentThemeProvider, { variant }, webChatElement) : webChatElement
@@ -97,6 +102,14 @@
         pageObjects.focusTranscript();
         await host.sendKeys('ENTER');
 
+        // THEN: The first attachment should have the focus, both flippers should stay hidden.
+        await waitFor(() => expect(document.activeElement).toBe(pageElements.activityAttachments()[0][0]));
+        expect(getFlipperBodyOffset(nextFlipper)).toBe(50);
+        expect(previousFlipper.querySelector('.react-film__main__slider--hide')).toBeTruthy();
+
+        // THEN: The first card shows the focus indicator, no flipper is shown.
+        await host.snapshot('local');
+
         // WHEN: Press SHIFT-TAB to move focus to the "Next" flipper.
         await host.sendShiftTab();
 
@@ -106,6 +119,7 @@
         await waitFor(() => expect(getFlipperBodyOffset(nextFlipper)).toBe(0));
         expect(getFocusIndicatorStyle(nextFlipper)).toEqual(visibleFocusIndicatorStyle);
 
+        // THEN: The "Next" flipper shows at the right edge with a two-tone focus indicator, the first card has no focus indicator.
         await host.snapshot('local');
 
         // WHEN: Press SHIFT-TAB to move focus to the "Previous" flipper.
@@ -123,6 +137,7 @@
         // THEN: The "Next" flipper should auto-hide after losing focus (1s delay, then 300ms slide out).
         await waitFor(() => expect(getFlipperBodyOffset(nextFlipper)).toBe(50), { timeout: 2000 });
 
+        // THEN: The "Previous" flipper shows at the left edge with a two-tone focus indicator, the "Next" flipper is hidden.
         await host.snapshot('local');
       });
     </script>