diff --git a/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts b/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts index a93537cc..20669e17 100644 --- a/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts +++ b/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts @@ -1,4 +1,5 @@ import {AiChat, createAiChat} from '@nlux-dev/core/src'; +import userEvent from '@testing-library/user-event'; import {afterEach, beforeEach, describe, expect, it} from 'vitest'; import '@testing-library/jest-dom'; import {adapterBuilder} from '../../../../utils/adapterBuilder'; @@ -47,6 +48,100 @@ describe('createAiChat() + bot persona + welcome message', () => { expect(welcomeMessage).not.toBeNull(); expect(welcomeMessage.textContent).toContain('Welcome to the chat'); }); + + describe('When the user submits a message', () => { + it('The welcome message should be removed', async () => { + // Arrange + adapterController = adapterBuilder().withFetchText().create(); + aiChat = createAiChat() + .withAdapter(adapterController.adapter) + .withPersonaOptions({ + bot: { + name: 'Bot', + picture: 'https://example.com/bot.png', + tagline: 'Welcome to the chat', + }, + }); + + // Act + aiChat.mount(rootElement); + await waitForRenderCycle(); + + const textArea: HTMLTextAreaElement = rootElement.querySelector('.nlux-comp-prmptBox > textarea')!; + await userEvent.type(textArea, 'Hello{enter}'); + await waitForRenderCycle(); + + // Assert + const welcomeMessage = rootElement.querySelector('.nlux-comp-wlc_msg'); + expect(welcomeMessage).toBeNull(); + }); + }); + + describe('When the initial message submission fails', () => { + it('The welcome message should be displayed again', async () => { + // Arrange + adapterController = adapterBuilder().withFetchText().create(); + aiChat = createAiChat() + .withAdapter(adapterController.adapter) + .withPersonaOptions({ + bot: { + name: 'Bot', + picture: 'https://example.com/bot.png', + tagline: 'Welcome to the chat', + }, + }); + + // Act + aiChat.mount(rootElement); + await waitForRenderCycle(); + + const textArea: HTMLTextAreaElement = rootElement.querySelector('.nlux-comp-prmptBox > textarea')!; + await userEvent.type(textArea, 'Hello{enter}'); + await waitForRenderCycle(); + + adapterController.reject('Error'); + await waitForRenderCycle(); + + // Assert + const welcomeMessage = rootElement.querySelector('.nlux-comp-wlc_msg')!; + expect(welcomeMessage).not.toBeNull(); + expect(welcomeMessage.textContent).toContain('Welcome to the chat'); + }); + }); + }); + + describe('When an initial conversation is provided', () => { + it('The welcome message should not be displayed', async () => { + // Arrange + adapterController = adapterBuilder().withFetchText().create(); + aiChat = createAiChat() + .withAdapter(adapterController.adapter) + .withPersonaOptions({ + bot: { + name: 'Bot', + picture: 'https://example.com/bot.png', + tagline: 'Welcome to the chat', + }, + }) + .withInitialConversation([ + { + role: 'ai', + message: 'Hello, world!', + }, + { + role: 'user', + message: 'Hi, bot!', + }, + ]); + + // Act + aiChat.mount(rootElement); + await waitForRenderCycle(); + + // Assert + const welcomeMessage = rootElement.querySelector('.nlux-comp-wlc_msg'); + expect(welcomeMessage).toBeNull(); + }); }); }); }); diff --git a/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx b/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx index 7a9cd50a..fc37eae5 100644 --- a/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx +++ b/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx @@ -1,5 +1,6 @@ import {AiChat} from '@nlux-dev/react/src'; import {render} from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import {afterEach, beforeEach, describe, expect, it} from 'vitest'; import {adapterBuilder} from '../../../../utils/adapterBuilder'; import {AdapterController} from '../../../../utils/adapters'; @@ -40,6 +41,108 @@ describe(' + bot persona + welcome message', () => { expect(welcomeMessage).not.toBeNull(); expect(welcomeMessage.textContent).toContain('Welcome to the chat'); }); + + describe('When the user submits a message', () => { + it('The welcome message should be removed', async () => { + // Arrange + const aiChat = ( + + ); + const {container} = render(aiChat); + await waitForReactRenderCycle(); + + await waitForReactRenderCycle(); + const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!; + + // Act + await userEvent.type(textArea, 'Hello{enter}'); + await waitForReactRenderCycle(); + + // Assert + const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg'); + expect(welcomeMessage).toBeNull(); + }); + }); + + describe('When the initial message submission fails', () => { + it('The welcome message should be displayed again', async () => { + // Arrange + const aiChat = ( + + ); + const {container} = render(aiChat); + await waitForReactRenderCycle(); + + await waitForReactRenderCycle(); + const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!; + + // Act + await userEvent.type(textArea, 'Hello{enter}'); + await waitForReactRenderCycle(); + + adapterController!.reject('Sorry user!'); + await waitForReactRenderCycle(); + + // Assert + const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg')!; + expect(welcomeMessage).not.toBeNull(); + expect(welcomeMessage.textContent).toContain('Welcome to the chat'); + }); + }); + }); + + describe('When an initial conversation is provided', () => { + it('The welcome message should not be displayed', async () => { + // Arrange + const aiChat = ( + + ); + + // Act + const {container} = render(aiChat); + await waitForReactRenderCycle(); + + // Assert + const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg'); + expect(welcomeMessage).toBeNull(); + }); }); }); });