Add e2e tests for embed frame (#3830)

Author: zenoachtig

packages/embed/src/index.ts

@@ -1 +1,2 @@
 export * from './client';
+export * from './standalone';

packages/gitbook/e2e/internal.spec.ts

@@ -455,7 +455,8 @@ export async function waitForIcons(page: Page) {
  */
 async function waitForTOCScrolling(page: Page) {
     const viewport = await page.viewportSize();
-    if (viewport && viewport.width >= 1024) {
+    if (viewport && viewport.width >= 1024 && !page.url().includes('~gitbook/embed/demo')) {
+        // The embed demo is an iframe, which means the viewport is only a fraction of the main document. So there is no open TOC to scroll to.
         const toc = page.getByTestId('table-of-contents');
         await expect(toc).toBeVisible();
         await page.evaluate(() => {

packages/gitbook/e2e/util.ts

@@ -39,7 +39,10 @@ function ToolCallSummary(props: { toolCall: AIToolCall; context: GitBookSiteCont
     const { toolCall, context } = props;
 
     return (
-        <div className="mt-2 flex origin-top-left animate-blur-in-slow items-start gap-2 text-sm text-tint-subtle">
+        <div
+            data-testid="ai-chat-tool-summary"
+            className="mt-2 flex origin-top-left animate-blur-in-slow items-start gap-2 text-sm text-tint-subtle"
+        >
             <Icon
                 icon={getIconForToolCall(toolCall)}
                 className="mt-1 size-3 shrink-0 text-tint-subtle/8"

packages/gitbook/src/components/AI/server-actions/AIToolCallsSummary.tsx

@@ -70,7 +70,6 @@ export function AIChat() {
 
     return (
         <div
-            data-testid="ai-chat"
             className={tcls(
                 'ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl scroll-mt-36 px-4 py-4 transition-[width,opacity,margin,display] transition-discrete duration-300 sm:px-6 lg:fixed lg:w-80 lg:p-0 xl:w-96',
                 chat.opened
@@ -79,7 +78,7 @@ export function AIChat() {
             )}
         >
             <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base transition-all duration-300 max-lg:circular-corners:rounded-3xl max-lg:rounded-corners:rounded-md max-lg:border lg:w-80 xl:w-96">
-                <EmbeddableFrameMain>
+                <EmbeddableFrameMain data-testid="ai-chat">
                     <EmbeddableFrameHeader>
                         <AIChatDynamicIcon trademark={config.trademark} />
                         <EmbeddableFrameHeaderMain>
@@ -239,13 +238,14 @@ export function AIChatBody(props: {
                                 <h5
                                     className="animate-blur-in-slow font-bold text-lg text-tint-strong leading-tight [@container(min-height:400px)]:text-center"
                                     style={{ animationDelay: '.5s' }}
-                                    data-testid="ai-chat-time-greeting"
+                                    data-testid="ai-chat-greeting-title"
                                 >
                                     {greeting?.title || timeGreeting}
                                 </h5>
                                 <p
                                     className="animate-blur-in-slow text-tint leading-tight [@container(min-height:400px)]:text-center"
                                     style={{ animationDelay: '.6s' }}
+                                    data-testid="ai-chat-greeting-subtitle"
                                 >
                                     {greeting?.subtitle ||
                                         t(language, 'ai_chat_assistant_description')}

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -19,9 +19,13 @@ export default function AIChatSuggestedQuestions(props: {
               ];
 
     return (
-        <div className="flex flex-col items-start gap-2 self-start">
+        <div
+            className="flex flex-col items-start gap-2 self-start"
+            data-testid="ai-chat-suggested-questions"
+        >
             {suggestions.map((question, index) => (
                 <Button
+                    data-testid="ai-chat-suggested-question"
                     key={question}
                     variant="blank"
                     size="medium"

packages/gitbook/src/components/AIChat/AIChatSuggestedQuestions.tsx

@@ -37,6 +37,7 @@ export function AIChatToolConfirmations(props: {
                     style={{ animationDelay: `${0.5 + index * 0.1}s` }}
                 >
                     <Button
+                        data-testid="ai-chat-tool-confirmation"
                         onClick={() => {
                             tool.confirm();
                         }}

packages/gitbook/src/components/AIChat/AIChatToolConfirmations.tsx

@@ -75,7 +75,7 @@ export function EmbeddableAIChat(props: EmbeddableAIChatProps) {
                 />
                 <EmbeddableIframeButtons />
             </EmbeddableFrameSidebar>
-            <EmbeddableFrameMain>
+            <EmbeddableFrameMain data-testid="ai-chat">
                 <EmbeddableFrameHeader>
                     {!tabsRef.current ? (
                         <AIChatDynamicIcon

packages/gitbook/src/components/Embeddable/EmbeddableAIChat.tsx

@@ -49,7 +49,7 @@ export async function EmbeddableDocsPage(
                 />
                 <EmbeddableIframeButtons />
             </EmbeddableFrameSidebar>
-            <EmbeddableFrameMain>
+            <EmbeddableFrameMain data-testid="embed-docs-page">
                 <div className="relative flex not-hydrated:animate-blur-in-slow flex-col">
                     <EmbeddableFrameHeader>
                         <HeaderMobileMenu className="-ml-2 page-no-toc:hidden" />

packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx

@@ -10,6 +10,7 @@ export function EmbeddableDocsPageControlButtons(props: { href: string }) {
     return (
         <Button
             icon="arrow-up-right-from-square"
+            data-testid="embed-docs-page-open-in-new-tab"
             label={tString(language, 'open_in_new_tab')}
             href={href}
             target="_blank"