From a6f4dbb0abe52ee4ace1631eb6d79eb59788c896 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Fri, 23 Aug 2024 15:55:07 +0200 Subject: [PATCH] test(editor): Unit tests for assistant store and new design system components (no-changelog) (#10508) --- .../__tests__/AskAssistantAvatar.spec.ts | 21 + .../AskAssistantAvatar.spec.ts.snap | 87 ++ .../__tests__/AskAssistantButton.spec.ts | 17 + .../AskAssistantButton.spec.ts.snap | 96 ++ .../__tests__/AskAssistantChat.spec.ts | 131 ++ .../AskAssistantChat.spec.ts.snap | 1334 +++++++++++++++++ .../__tests__/AssistantIcon.spec.ts | 49 + .../__snapshots__/AssistantIcon.spec.ts.snap | 235 +++ .../__tests__/AssistantText.spec.ts | 40 + .../__snapshots__/AssistantText.spec.ts.snap | 41 + .../BetaTag/__tests__/BetaTag.spec.ts | 9 + .../__snapshots__/BetaTag.spec.ts.snap | 11 + .../__tests__/BlinkingCursor.spec.ts | 9 + .../__snapshots__/BlinkingCursor.spec.ts.snap | 9 + .../CodeDiff/__tests__/CodeDiff.spec.ts | 48 + .../__snapshots__/CodeDiff.spec.ts.snap | 1091 ++++++++++++++ .../stores/__tests__/assistant.store.test.ts | 317 ++++ .../src/stores/__tests__/posthog.test.ts | 2 +- .../editor-ui/src/stores/assistant.store.ts | 11 +- .../editor-ui/src/stores/posthog.store.ts | 1 + 20 files changed, 3554 insertions(+), 5 deletions(-) create mode 100644 packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts create mode 100644 packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap create mode 100644 packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts create mode 100644 packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap create mode 100644 packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts create mode 100644 packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap create mode 100644 packages/design-system/src/components/AskAssistantIcon/__tests__/AssistantIcon.spec.ts create mode 100644 packages/design-system/src/components/AskAssistantIcon/__tests__/__snapshots__/AssistantIcon.spec.ts.snap create mode 100644 packages/design-system/src/components/AskAssistantText/__tests__/AssistantText.spec.ts create mode 100644 packages/design-system/src/components/AskAssistantText/__tests__/__snapshots__/AssistantText.spec.ts.snap create mode 100644 packages/design-system/src/components/BetaTag/__tests__/BetaTag.spec.ts create mode 100644 packages/design-system/src/components/BetaTag/__tests__/__snapshots__/BetaTag.spec.ts.snap create mode 100644 packages/design-system/src/components/BlinkingCursor/__tests__/BlinkingCursor.spec.ts create mode 100644 packages/design-system/src/components/BlinkingCursor/__tests__/__snapshots__/BlinkingCursor.spec.ts.snap create mode 100644 packages/design-system/src/components/CodeDiff/__tests__/CodeDiff.spec.ts create mode 100644 packages/design-system/src/components/CodeDiff/__tests__/__snapshots__/CodeDiff.spec.ts.snap create mode 100644 packages/editor-ui/src/stores/__tests__/assistant.store.test.ts diff --git a/packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts b/packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts new file mode 100644 index 000000000..94857ed4d --- /dev/null +++ b/packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts @@ -0,0 +1,21 @@ +import { render } from '@testing-library/vue'; +import AssistantAvatar from '../AssistantAvatar.vue'; + +describe('AskAssistantAvatar', () => { + it('renders small avatar correctly', () => { + const { container } = render(AssistantAvatar, { + props: { + size: 'small', + }, + }); + expect(container).toMatchSnapshot(); + }); + it('renders mini avatar correctly', () => { + const { container } = render(AssistantAvatar, { + props: { + size: 'mini', + }, + }); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap b/packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap new file mode 100644 index 000000000..ba82ada82 --- /dev/null +++ b/packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap @@ -0,0 +1,87 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`AskAssistantAvatar > renders mini avatar correctly 1`] = ` +
+
+ + + + + + + + + + +
+
+`; + +exports[`AskAssistantAvatar > renders small avatar correctly 1`] = ` +
+
+ + + + + + + + + + +
+
+`; diff --git a/packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts b/packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts new file mode 100644 index 000000000..13d96d4a6 --- /dev/null +++ b/packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts @@ -0,0 +1,17 @@ +import { render } from '@testing-library/vue'; +import AskAssistantButton from '../AskAssistantButton.vue'; + +describe('AskAssistantButton', () => { + it('renders default button correctly', () => { + const { container } = render(AskAssistantButton, {}); + expect(container).toMatchSnapshot(); + }); + it('renders button with unread messages correctly', () => { + const { container } = render(AskAssistantButton, { + props: { + unreadCount: 3, + }, + }); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap b/packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap new file mode 100644 index 000000000..5ff7a87d6 --- /dev/null +++ b/packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap @@ -0,0 +1,96 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`AskAssistantButton > renders button with unread messages correctly 1`] = ` +
+ +
+`; + +exports[`AskAssistantButton > renders default button correctly 1`] = ` +
+ +
+`; diff --git a/packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts b/packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts new file mode 100644 index 000000000..6634c9807 --- /dev/null +++ b/packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts @@ -0,0 +1,131 @@ +import { render } from '@testing-library/vue'; +import AskAssistantChat from '../AskAssistantChat.vue'; + +describe('AskAssistantChat', () => { + it('renders default placeholder chat correctly', () => { + const { container } = render(AskAssistantChat, { + props: { + user: { firstName: 'Kobi', lastName: 'Dog' }, + }, + }); + expect(container).toMatchSnapshot(); + }); + it('renders chat with messages correctly', () => { + const { container } = render(AskAssistantChat, { + props: { + user: { firstName: 'Kobi', lastName: 'Dog' }, + messages: [ + { + id: '1', + type: 'text', + role: 'assistant', + content: + 'Hi Max! Here is my top solution to fix the error in your **Transform data** node👇', + read: false, + }, + { + id: '1', + type: 'code-diff', + role: 'assistant', + description: 'Short solution description here that can spill over to two lines', + codeDiff: + '@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!', + suggestionId: 'test', + quickReplies: [ + { + type: 'new-suggestion', + text: 'Give me another solution', + }, + { + type: 'resolved', + text: 'All good', + }, + ], + read: false, + }, + { + id: '2', + type: 'text', + role: 'user', + content: 'Give it to me **ignore this markdown**', + read: false, + }, + { + id: '2', + type: 'block', + role: 'assistant', + title: 'Credential doesn’t have correct permissions to send a message', + content: + 'Solution steps:\n1. Lorem ipsum dolor sit amet, consectetur **adipiscing** elit. Proin id nulla placerat, tristique ex at, euismod dui.\n2. Copy this into somewhere\n3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui.\n4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui. \n Testing more code \n - Unordered item 1 \n - Unordered item 2', + read: false, + }, + { + id: '2', + type: 'code-diff', + role: 'assistant', + description: 'Short solution with min height', + codeDiff: + '@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\n+The door of all subtleties!', + quickReplies: [ + { + type: 'new-suggestion', + text: 'Give me another solution', + }, + { + type: 'resolved', + text: 'All good', + }, + ], + suggestionId: 'test', + read: false, + }, + ], + }, + }); + expect(container).toMatchSnapshot(); + }); + it('renders streaming chat correctly', () => { + const { container } = render(AskAssistantChat, { + props: { + user: { firstName: 'Kobi', lastName: 'Dog' }, + messages: [ + { + id: '1', + type: 'text', + role: 'assistant', + content: + 'Hi Max! Here is my top solution to fix the error in your **Transform data** node👇', + read: false, + }, + ], + isStreaming: true, + }, + }); + expect(container).toMatchSnapshot(); + }); + it('renders end of session chat correctly', () => { + const { container } = render(AskAssistantChat, { + props: { + user: { firstName: 'Kobi', lastName: 'Dog' }, + messages: [ + { + id: '1', + type: 'text', + role: 'assistant', + content: + 'Hi Max! Here is my top solution to fix the error in your **Transform data** node👇', + read: false, + }, + { + id: '123', + role: 'assistant', + type: 'event', + eventName: 'end-session', + read: false, + }, + ], + }, + }); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap b/packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap new file mode 100644 index 000000000..826732bdb --- /dev/null +++ b/packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap @@ -0,0 +1,1334 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`AskAssistantChat > renders chat with messages correctly 1`] = ` +
+
+
+
+
+ + + + + + + + + + + + AI Assistant + +
+
+ beta +
+
+
+ +
+
+
+
+ +
+
+
+ + + + + + + + + + +
+ + Assistant + +
+
+ + + + +

+ Hi Max! Here is my top solution to fix the error in your + + Transform data + + node👇 +

+ + + + + +
+ +
+
+ +
+
+
+ Short solution description here that can spill over to two lines +
+
+ +
+
+ + + +
+
+ +  -  + + + The Way that can be told of is not the eternal Way; + +
+
+
+
+ + + +
+
+ +  -  + + + The name that can be named is not the eternal name. + +
+
+
+
+ + + +
+
+ +  -  + + + The Named is the mother of all things. + +
+
+
+
+ + + 1 +
+
+ +  +  + + + The named is the mother of all things. + +
+
+
+
+ + + 2 +
+
+ +  +  + + +
+
+
+
+ + + 3 +
+
+ +     + + + The two are the same, + +
+
+
+
+ + + 4 +
+
+ +     + + + But after they are produced, + +
+
+
+
+ + + 5 +
+
+ +     + + + they have different names. + +
+
+
+
+ + + 6 +
+
+ +  +  + + + They both may be called deep and profound. + +
+
+
+
+ + + 7 +
+
+ +  +  + + + Deeper and more profound, + +
+
+
+
+ + + 8 +
+
+ +  +  + + + The door of all subtleties! + +
+
+ +
+
+ + Replace my code + +
+
+
+ +
+
+
+ + + You + +
+
+ + +

+ Give it to me + + ignore this markdown + +

+ + + + +
+ +
+
+
+
+ + + + + + + + + + +
+ + Assistant + +
+
+
+
+ Credential doesn’t have correct permissions to send a message + +
+
+ + +

+ Solution steps: +

+ + +
    + + +
  1. + Lorem ipsum dolor sit amet, consectetur + + adipiscing + + elit. Proin id nulla placerat, tristique ex at, euismod dui. +
    2. + + +
  2. + Copy this into somewhere +
    3. + + +
  3. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui. +
    4. + + +
  4. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui. +
    + +Testing more code +
    5. + + +
+ + +
    + + +
  • + Unordered item 1 +
    • + + +
  • + Unordered item 2 +
    • + + +
+ + + + +
+
+
+ +
+
+ +
+
+
+ Short solution with min height +
+
+ +
+
+ + + +
+
+ +  -  + + + The Way that can be told of is not the eternal Way; + +
+
+
+
+ + + +
+
+ +  -  + + + The name that can be named is not the eternal name. + +
+
+
+
+ + + 1 +
+
+ +  +  + + + The door of all subtleties! + +
+
+
+
+ + + +
+
+ +     + + +
+
+ +
+
+ + Replace my code + +
+
+
+
+
+ Quick reply 👇 +
+ +
+ + Give me another solution + +
+
+ + All good + +
+ +
+
+ +
+
+
+