[AiAssistance] Move markdown renderer tests in a separate file

ergunsh · Devtools-frontend LUCI CQ · commit d9a23be6490d · 2025-02-13T06:51:19.000-08:00
Drive-by: * Rename `Freestyler` references to be `AiAssistance` or `EvaluateAction` based on what is imported. Bug: none Change-Id: I87d7cc5646cc25097243eab4fa68f129c61f5149 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6264204 Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org> Auto-Submit: Ergün Erdoğmuş <ergunsh@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
diff --git a/front_end/panels/ai_assistance/BUILD.gn b/front_end/panels/ai_assistance/BUILD.gn
@@ -102,6 +102,7 @@ ts_library("unittests") {
     "agents/PerformanceAgent.test.ts",
     "agents/StylingAgent.test.ts",
     "components/ChatView.test.ts",
+    "components/MarkdownRendererWithCodeBlock.test.ts",
     "components/UserActionRow.test.ts",
     "data_formatters/FileFormatter.test.ts",
     "data_formatters/NetworkRequestFormatter.test.ts",
diff --git a/front_end/panels/ai_assistance/ChangeManager.test.ts b/front_end/panels/ai_assistance/ChangeManager.test.ts
@@ -5,7 +5,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import * as Freestyler from './ai_assistance.js';
+import * as AiAssistance from './ai_assistance.js';
 
 describe('ChangeManager', () => {
   let styleSheetId = 0;
@@ -45,7 +45,7 @@ describe('ChangeManager', () => {
   }
 
   it('can register a change', async () => {
-    const changeManager = new Freestyler.ChangeManager();
+    const changeManager = new AiAssistance.ChangeManager();
     const cssModel = createModel();
     await changeManager.addChange(cssModel, frameId, {
       groupId: agentId,
@@ -63,7 +63,7 @@ describe('ChangeManager', () => {
   });
 
   it('can merge multiple changes with same className', async () => {
-    const changeManager = new Freestyler.ChangeManager();
+    const changeManager = new AiAssistance.ChangeManager();
     const cssModel = createModel();
     await changeManager.addChange(cssModel, frameId, {
       groupId: agentId,
@@ -92,7 +92,7 @@ describe('ChangeManager', () => {
   });
 
   it('can register multiple changes with the same selector', async () => {
-    const changeManager = new Freestyler.ChangeManager();
+    const changeManager = new AiAssistance.ChangeManager();
     const cssModel = createModel();
     await changeManager.addChange(cssModel, frameId, {
       groupId: agentId,
@@ -120,7 +120,7 @@ describe('ChangeManager', () => {
   });
 
   it('creates a stylesheet per frame', async () => {
-    const changeManager = new Freestyler.ChangeManager();
+    const changeManager = new AiAssistance.ChangeManager();
     const cssModel = createModel();
     await changeManager.addChange(cssModel, frameId, {
       groupId: agentId,
@@ -151,7 +151,7 @@ describe('ChangeManager', () => {
   });
 
   it('can clear changes', async () => {
-    const changeManager = new Freestyler.ChangeManager();
+    const changeManager = new AiAssistance.ChangeManager();
     let cssModel = createModel();
     await changeManager.addChange(cssModel, frameId, {
       groupId: agentId,
@@ -185,13 +185,13 @@ describe('ChangeManager', () => {
 
   describe('format changes', () => {
     it('returns empty string when there are no changes from the given agent', async () => {
-      const changeManager = new Freestyler.ChangeManager();
+      const changeManager = new AiAssistance.ChangeManager();
 
       assert.strictEqual(changeManager.formatChanges(agentId), '');
     });
 
     it('returns formatted changes for an agent without `.ai-style-change` classes', async () => {
-      const changeManager = new Freestyler.ChangeManager();
+      const changeManager = new AiAssistance.ChangeManager();
       const cssModel = createModel();
 
       await changeManager.addChange(cssModel, frameId, {
diff --git a/front_end/panels/ai_assistance/EvaluateAction.test.ts b/front_end/panels/ai_assistance/EvaluateAction.test.ts
@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {describeWithRealConnection, getExecutionContext} from '../../testing/RealConnection.js';
 
-import * as Freestyler from './EvaluateAction.js';
+import * as EvaluateAction from './EvaluateAction.js';
 
 describe('FreestylerEvaluateAction', () => {
   describe('error handling', () => {
@@ -21,7 +21,7 @@ describe('FreestylerEvaluateAction', () => {
       }
       executionContextStub.callFunctionOn.resolves(mockResult);
       executionContextStub.runtimeModel = sinon.createStubInstance(SDK.RuntimeModel.RuntimeModel);
-      return Freestyler.EvaluateAction.execute('', [], executionContextStub, {throwOnSideEffect: false});
+      return EvaluateAction.EvaluateAction.execute('', [], executionContextStub, {throwOnSideEffect: false});
     }
 
     function mockRemoteObject(overrides: Partial<SDK.RemoteObject.RemoteObject> = {}): SDK.RemoteObject.RemoteObject {
@@ -77,7 +77,7 @@ describe('FreestylerEvaluateAction', () => {
            });
            assert.fail('not reachable');
          } catch (err) {
-           assert.instanceOf(err, Freestyler.SideEffectError);
+           assert.instanceOf(err, EvaluateAction.SideEffectError);
            assert.strictEqual(err.message, 'EvalError: Possible side-effect in debug-evaluate');
          }
        });
@@ -101,7 +101,7 @@ describe('FreestylerEvaluateAction', () => {
     return error;
   }
 }`;
-      return Freestyler.EvaluateAction.execute(
+      return EvaluateAction.EvaluateAction.execute(
           functionDeclaration, [], await executionContextForTest(), {throwOnSideEffect});
     }
 
diff --git a/front_end/panels/ai_assistance/components/ChatView.test.ts b/front_end/panels/ai_assistance/components/ChatView.test.ts
@@ -6,101 +6,13 @@ import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import * as Marked from '../../../third_party/marked/marked.js';
-import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
-import * as Freestyler from '../ai_assistance.js';
-
-const {MarkdownRendererWithCodeBlock} = Freestyler.FOR_TEST;
+import * as AiAssistance from '../ai_assistance.js';
 
 describeWithEnvironment('ChatView', () => {
-  describe('MarkdownRendererWithCodeBlock', () => {
-    it('should transform code token for multiline code blocks with `css` language written in the first line', () => {
-      const renderer = new MarkdownRendererWithCodeBlock();
-      const templateForTokenStub =
-          sinon.stub(MarkdownView.MarkdownView.MarkdownInsightRenderer.prototype, 'templateForToken');
-      const codeBlock = `\`\`\`
-css
-* {
-  color: red;
-}
-\`\`\``;
-      const codeToken = Marked.Marked.lexer(codeBlock)[0] as Marked.Marked.Tokens.Code;
-      assert.isEmpty(codeToken.lang);
-      renderer.renderToken(codeToken);
-
-      sinon.assert.calledWith(templateForTokenStub, sinon.match({
-        lang: 'css',
-        text: `* {
-  color: red;
-}`,
-      }));
-    });
-
-    describe('link/image stripping', () => {
-      const linkCases = [
-        '[link text](https://z.com)',
-        'A response with [link text](https://z.com).',
-        '[*link text*](https://z.com)',
-        '[**text** `with code`](https://z.com).',
-        'plain link https://z.com .',
-        'link in quotes \'https://z.com\' .',
-      ];
-
-      const renderToElem = (string: string, renderer: MarkdownView.MarkdownView.MarkdownLitRenderer): Element => {
-        const component = new MarkdownView.MarkdownView.MarkdownView();
-        renderElementIntoDOM(component, {allowMultipleChildren: true});
-        component.data = {tokens: Marked.Marked.lexer(string), renderer};
-        assert.exists(component.shadowRoot?.firstElementChild);
-        return component.shadowRoot.firstElementChild;
-      };
-
-      it('strips links if stripLinks true', () => {
-        const linklessRenderer = new MarkdownRendererWithCodeBlock({stripLinks: true});
-        for (const linkCase of linkCases) {
-          const elem = renderToElem(linkCase, linklessRenderer);
-          assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link'), 0);
-          assert.isFalse(['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)));
-          assert.isOk(elem.textContent?.includes('( https://z.com )'), linkCase);
-        }
-      });
-
-      it('leaves links intact by default', () => {
-        const linkfulRenderer = new MarkdownRendererWithCodeBlock();
-        for (const linkCase of linkCases) {
-          const elem = renderToElem(linkCase, linkfulRenderer);
-          assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link'), 1);
-          assert.isTrue(['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)));
-          assert.isFalse(elem.textContent?.includes('( https://z.com )'));
-        }
-      });
-
-      const imageCases = [
-        '![image alt](https://z.com/i.png)',
-        'A response with ![image alt](https://z.com/i.png).',
-        '![*image alt*](https://z.com/i.png)',
-        '![**text** `with code`](https://z.com/i.png).',
-        'plain image href https://z.com/i.png .',
-        'link in quotes \'https://z.com/i.png\' .',
-      ];
-
-      it('strips images if stripLinks true', () => {
-        const linklessRenderer = new MarkdownRendererWithCodeBlock({stripLinks: true});
-        for (const imageCase of imageCases) {
-          const elem = renderToElem(imageCase, linklessRenderer);
-          assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link, img, devtools-markdown-image'), 0);
-          assert.isFalse(['<a', '<x-link', '<devtools-link', '<img', '<devtools-markdown-image'].some(
-              tagName => elem.outerHTML.includes(tagName)));
-
-          assert.isOk(elem.textContent?.includes('( https://z.com/i.png )'), imageCase);
-        }
-      });
-    });
-  });
-
-  function getProp(options: Partial<Freestyler.Props>): Freestyler.Props {
+  function getProp(options: Partial<AiAssistance.Props>): AiAssistance.Props {
     const noop = () => {};
-    const messages: Freestyler.ChatMessage[] = options.messages ?? [];
-    const selectedContext = sinon.createStubInstance(Freestyler.NodeContext);
+    const messages: AiAssistance.ChatMessage[] = options.messages ?? [];
+    const selectedContext = sinon.createStubInstance(AiAssistance.NodeContext);
     selectedContext.getTitle.returns('');
     return {
       onTextSubmit: noop,
@@ -110,8 +22,8 @@ css
       onContextClick: noop,
       onNewConversation: noop,
       inspectElementToggled: false,
-      state: Freestyler.State.CHAT_VIEW,
-      agentType: Freestyler.AgentType.STYLING,
+      state: AiAssistance.State.CHAT_VIEW,
+      agentType: AiAssistance.AgentType.STYLING,
       aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
       messages,
       selectedContext,
@@ -130,7 +42,7 @@ css
       const props = getProp({
         messages: [
           {
-            entity: Freestyler.ChatMessageEntity.MODEL,
+            entity: AiAssistance.ChatMessageEntity.MODEL,
             steps: [
               {
                 isLoading: false,
@@ -145,7 +57,7 @@ css
           },
         ],
       });
-      const chat = new Freestyler.ChatView(props);
+      const chat = new AiAssistance.ChatView(props);
       renderElementIntoDOM(chat);
 
       const sideEffect = chat.shadowRoot!.querySelector('.side-effect-confirmation');
@@ -154,9 +66,9 @@ css
 
     it('shows the disabled view when the state is CONSENT_VIEW', async () => {
       const props = getProp({
-        state: Freestyler.State.CONSENT_VIEW,
+        state: AiAssistance.State.CONSENT_VIEW,
       });
-      const chat = new Freestyler.ChatView(props);
+      const chat = new AiAssistance.ChatView(props);
       renderElementIntoDOM(chat);
 
       const optIn = chat.shadowRoot?.querySelector('.disabled-view');
@@ -169,10 +81,10 @@ css
 
     it('shows the disabled view when the AIDA is not available', async () => {
       const props = getProp({
-        state: Freestyler.State.CHAT_VIEW,
+        state: AiAssistance.State.CHAT_VIEW,
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.NO_INTERNET,
       });
-      const chat = new Freestyler.ChatView(props);
+      const chat = new AiAssistance.ChatView(props);
       renderElementIntoDOM(chat);
 
       const optIn = chat.shadowRoot?.querySelector('.disabled-view');
@@ -201,7 +113,7 @@ css
         const props = getProp({
           agentType: undefined,
         });
-        const chat = new Freestyler.ChatView(props);
+        const chat = new AiAssistance.ChatView(props);
         renderElementIntoDOM(chat);
         const featureCards = chat.shadowRoot?.querySelectorAll('.feature-card');
         assert.isDefined(featureCards);
@@ -230,7 +142,7 @@ css
         const props = getProp({
           agentType: undefined,
         });
-        const chat = new Freestyler.ChatView(props);
+        const chat = new AiAssistance.ChatView(props);
         renderElementIntoDOM(chat);
         const featureCards = chat.shadowRoot?.querySelectorAll('.feature-card');
         assert.isDefined(featureCards);
diff --git a/front_end/panels/ai_assistance/components/ChatView.ts b/front_end/panels/ai_assistance/components/ChatView.ts
@@ -1800,8 +1800,4 @@ declare global {
   }
 }
 
-export const FOR_TEST = {
-  MarkdownRendererWithCodeBlock,
-};
-
 customElements.define('devtools-ai-chat-view', ChatView);
diff --git a/front_end/panels/ai_assistance/components/MarkdownRendererWithCodeBlock.test.ts b/front_end/panels/ai_assistance/components/MarkdownRendererWithCodeBlock.test.ts
@@ -0,0 +1,93 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import * as Marked from '../../../third_party/marked/marked.js';
+import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import * as AiAssistance from '../ai_assistance.js';
+
+describeWithEnvironment('MarkdownRendererWithCodeBlock', () => {
+  it('should transform code token for multiline code blocks with `css` language written in the first line', () => {
+    const renderer = new AiAssistance.MarkdownRendererWithCodeBlock();
+    const templateForTokenStub =
+        sinon.stub(MarkdownView.MarkdownView.MarkdownInsightRenderer.prototype, 'templateForToken');
+    const codeBlock = `\`\`\`
+css
+* {
+color: red;
+}
+\`\`\``;
+    const codeToken = Marked.Marked.lexer(codeBlock)[0] as Marked.Marked.Tokens.Code;
+    assert.isEmpty(codeToken.lang);
+    renderer.renderToken(codeToken);
+
+    sinon.assert.calledWith(templateForTokenStub, sinon.match({
+      lang: 'css',
+      text: `* {
+color: red;
+}`,
+    }));
+  });
+
+  describe('link/image stripping', () => {
+    const linkCases = [
+      '[link text](https://z.com)',
+      'A response with [link text](https://z.com).',
+      '[*link text*](https://z.com)',
+      '[**text** `with code`](https://z.com).',
+      'plain link https://z.com .',
+      'link in quotes \'https://z.com\' .',
+    ];
+
+    const renderToElem = (string: string, renderer: MarkdownView.MarkdownView.MarkdownLitRenderer): Element => {
+      const component = new MarkdownView.MarkdownView.MarkdownView();
+      renderElementIntoDOM(component, {allowMultipleChildren: true});
+      component.data = {tokens: Marked.Marked.lexer(string), renderer};
+      assert.exists(component.shadowRoot?.firstElementChild);
+      return component.shadowRoot.firstElementChild;
+    };
+
+    it('strips links if stripLinks true', () => {
+      const linklessRenderer = new AiAssistance.MarkdownRendererWithCodeBlock({stripLinks: true});
+      for (const linkCase of linkCases) {
+        const elem = renderToElem(linkCase, linklessRenderer);
+        assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link'), 0);
+        assert.isFalse(['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)));
+        assert.isOk(elem.textContent?.includes('( https://z.com )'), linkCase);
+      }
+    });
+
+    it('leaves links intact by default', () => {
+      const linkfulRenderer = new AiAssistance.MarkdownRendererWithCodeBlock();
+      for (const linkCase of linkCases) {
+        const elem = renderToElem(linkCase, linkfulRenderer);
+        assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link'), 1);
+        assert.isTrue(['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)));
+        assert.isFalse(elem.textContent?.includes('( https://z.com )'));
+      }
+    });
+
+    const imageCases = [
+      '![image alt](https://z.com/i.png)',
+      'A response with ![image alt](https://z.com/i.png).',
+      '![*image alt*](https://z.com/i.png)',
+      '![**text** `with code`](https://z.com/i.png).',
+      'plain image href https://z.com/i.png .',
+      'link in quotes \'https://z.com/i.png\' .',
+    ];
+
+    it('strips images if stripLinks true', () => {
+      const linklessRenderer = new AiAssistance.MarkdownRendererWithCodeBlock({stripLinks: true});
+      for (const imageCase of imageCases) {
+        const elem = renderToElem(imageCase, linklessRenderer);
+        assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link, img, devtools-markdown-image'), 0);
+        assert.isFalse(['<a', '<x-link', '<devtools-link', '<img', '<devtools-markdown-image'].some(
+            tagName => elem.outerHTML.includes(tagName)));
+
+        assert.isOk(elem.textContent?.includes('( https://z.com/i.png )'), imageCase);
+      }
+    });
+  });
+});
diff --git a/front_end/panels/ai_assistance/components/UserActionRow.test.ts b/front_end/panels/ai_assistance/components/UserActionRow.test.ts

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';`
`6`	`6`	`import * as Protocol from '../../generated/protocol.js';`
`7`	`7`	`import {describeWithRealConnection, getExecutionContext} from '../../testing/RealConnection.js';`
`8`	`8`
`9`		`-import * as Freestyler from './EvaluateAction.js';`
	`9`	`+import * as EvaluateAction from './EvaluateAction.js';`
`10`	`10`
`11`	`11`	`describe('FreestylerEvaluateAction', () => {`
`12`	`12`	`describe('error handling', () => {`
`@@ -21,7 +21,7 @@ describe('FreestylerEvaluateAction', () => {`
`21`	`21`	`}`
`22`	`22`	`executionContextStub.callFunctionOn.resolves(mockResult);`
`23`	`23`	`executionContextStub.runtimeModel = sinon.createStubInstance(SDK.RuntimeModel.RuntimeModel);`
`24`		`- return Freestyler.EvaluateAction.execute('', [], executionContextStub, {throwOnSideEffect: false});`
	`24`	`+ return EvaluateAction.EvaluateAction.execute('', [], executionContextStub, {throwOnSideEffect: false});`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`function mockRemoteObject(overrides: Partial<SDK.RemoteObject.RemoteObject> = {}): SDK.RemoteObject.RemoteObject {`
`@@ -77,7 +77,7 @@ describe('FreestylerEvaluateAction', () => {`
`77`	`77`	`});`
`78`	`78`	`assert.fail('not reachable');`
`79`	`79`	`} catch (err) {`
`80`		`- assert.instanceOf(err, Freestyler.SideEffectError);`
	`80`	`+ assert.instanceOf(err, EvaluateAction.SideEffectError);`
`81`	`81`	`assert.strictEqual(err.message, 'EvalError: Possible side-effect in debug-evaluate');`
`82`	`82`	`}`
`83`	`83`	`});`
`@@ -101,7 +101,7 @@ describe('FreestylerEvaluateAction', () => {`
`101`	`101`	`return error;`
`102`	`102`	`}`
`103`	`103`	}`;
`104`		`- return Freestyler.EvaluateAction.execute(`
	`104`	`+ return EvaluateAction.EvaluateAction.execute(`
`105`	`105`	`functionDeclaration, [], await executionContextForTest(), {throwOnSideEffect});`
`106`	`106`	`}`
`107`	`107`
Original file line number	Diff line number	Diff line change
`@@ -1800,8 +1800,4 @@ declare global {`
`1800`	`1800`	`}`
`1801`	`1801`	`}`
`1802`	`1802`
`1803`		`-export const FOR_TEST = {`
`1804`		`- MarkdownRendererWithCodeBlock,`
`1805`		`-};`
`1806`		`-`
`1807`	`1803`	`customElements.define('devtools-ai-chat-view', ChatView);`