@kindly/react-chat 2.40.4 → 2.41.1

package/stories/screens.stories/{Chat.stories.jsx → Chat/index.stories.jsx}

@@ -1,18 +1,16 @@
 import { expect } from '@storybook/jest';
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react/prop-types */
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
 import React from 'react';
-import withFetchMock from 'storybook-addon-mock';
 
 import { IMAGE_WIDTH } from 'app/constants';
 
-import { chromaticViewports } from '../../.storybook/preview';
-import { FIELDS } from '../../src/components/Form/utils/constants';
-import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
-import settingsJSON from '../assets/settingsJson';
-import withContainer from '../decorators/withContainer';
-import withMockProvider from '../decorators/withProvider';
+import { chromaticViewports } from '../../../.storybook/preview';
+import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
+import mockMessage from '../../../testing/mockMessage';
+import settingsJSON from '../../assets/settingsJson';
+import withContainer from '../../decorators/withContainer';
+import withMockProvider from '../../decorators/withProvider';
+import wait from '../../utils/wait';
 
 const defaultBotSettings = {
   welcomePage: settingsJSON.welcome_page,
@@ -29,7 +27,7 @@ function Template(args, context) {
 export default {
   title: 'Screen/Chat',
   component: KindlyChatButton,
-  decorators: [withFetchMock, withContainer, withMockProvider],
+  decorators: [withContainer, withMockProvider],
   argTypes: {
     initialStateModifierFromArgs: {
       table: {
@@ -225,7 +223,11 @@ const MESSAGES = {
 };
 MultilineBotMessage.storyName = 'Multiline Bot & User Messages';
 MultilineBotMessage.parameters = {
-  ...defaultParameters,
+  ...Regular.parameters,
+  botSettings: {
+    ...defaultBotSettings,
+    typing_duration: 0,
+  },
   initialStateModifier: {
     ...defaultParameters.initialStateModifier,
     messages: {
@@ -276,24 +278,54 @@ MultilineBotMessage.parameters = {
     },
   },
 };
-MultilineBotMessage.play = async () => {
-  const chatBody = await screen.findByTestId('chat-body-container');
-  await screen.findAllByText('Single-line lonely message');
+MultilineBotMessage.play = async ({ canvasElement }) => {
+  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
+  await within(canvasElement).findAllByText('Single-line lonely message');
+  // wait for the auto-scroll to execute
+  await wait(300);
+
+  // Some screen sizes won't have a scrollbar
+  const hasScrollbar = chatBody.scrollTop > 0;
+
+  if (hasScrollbar) {
+    fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
+
+    const chatNewMessage = await within(canvasElement).findByTestId('chat-new-message');
+    expect(chatNewMessage).not.toBeVisible();
+
+    await waitFor(
+      async () => {
+        await expect(chatNewMessage).toBeVisible();
+      },
+      { timeout: 5000 },
+    );
+  }
+};
+
+export const NewUnreadMessages = Template.bind({});
+NewUnreadMessages.parameters = MultilineBotMessage.parameters;
+NewUnreadMessages.play = async ({ canvasElement }) => {
+  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
   // wait for the auto-scroll to execute
-  await new Promise((resolve) => {
-    setTimeout(resolve, 50);
-  });
-  fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
+  await wait(300);
 
-  const chatNewMessage = await screen.findByTestId('chat-new-message');
+  // Some screen sizes won't have a scrollbar
+  const hasScrollbar = chatBody.scrollTop > 0;
 
-  // TODO: We used to use `waitFor`, but it seems to fail in Chromatic.
-  // Wait for the newMessage button to be visible
-  await new Promise((resolve) => {
-    setTimeout(resolve, 1400);
-  });
+  if (hasScrollbar) {
+    fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
+    const chatNewMessage = await within(canvasElement).findByTestId('chat-new-message');
 
-  await expect(chatNewMessage).toBeVisible();
+    await waitFor(
+      async () => {
+        await expect(chatNewMessage).toBeVisible();
+      },
+      { timeout: 5000 },
+    );
+    mockMessage(window.store, 'This is a new message');
+    await wait(50);
+    await expect(chatNewMessage).toHaveTextContent('This is a new message');
+  }
 };
 
 export const GroupsOfMessages = Template.bind({});
@@ -379,11 +411,11 @@ HandoverRequested.parameters = {
 
 export const HandoverCancelled = Template.bind({});
 HandoverCancelled.parameters = HandoverRequested.parameters;
-HandoverCancelled.play = async () => {
-  await screen.findByText(defaultBotSettings.text.takeover_queue_text.en);
-  const leaveQueueButton = await screen.findByText(defaultBotSettings.text.takeover_queue_link.en);
+HandoverCancelled.play = async ({ canvasElement }) => {
+  await within(canvasElement).findByText(defaultBotSettings.text.takeover_queue_text.en);
+  const leaveQueueButton = await within(canvasElement).findByText(defaultBotSettings.text.takeover_queue_link.en);
   await userEvent.click(leaveQueueButton);
-  await screen.findByText(defaultBotSettings.text.leave_queue_text.en);
+  await within(canvasElement).findByText(defaultBotSettings.text.leave_queue_text.en);
 };
 
 export const Checkbox = Template.bind({});
@@ -698,200 +730,6 @@ Slider.parameters = {
   },
 };
 
-export const Form = Template.bind({});
-Form.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: '',
-          message_format: 'txt',
-          buttons: [],
-          created: '2022-06-15T19:03:46.186495Z',
-          id: '1',
-          form: {
-            submission_id: '1',
-            id: '2',
-            dialogue_id: '2',
-            slug: 'this-is-a-form',
-            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
-            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            languageCode: 'en',
-            texts: {
-              title: 'This is a form',
-              error_text: 'There was an error around here',
-              submit_button_text: 'Submit',
-              cancel_button_text: 'Exit',
-              unanswered_text: 'You failed to answer this form',
-              cancel_text: 'You have cancelled/exited this form',
-            },
-            fields: [
-              {
-                input_type: FIELDS.TEXT,
-                order: 0,
-                slug: 'first-name-field',
-                texts: {
-                  label: 'First name',
-                  help_text: 'Please input your name here',
-                  placeholder_text: 'First name',
-                  required_text: 'This field is absolutely required',
-                },
-                required: true,
-                validators: [
-                  {
-                    max_length: 30,
-                    text: 'Maximum number of length is 30',
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.TEXT,
-                order: 1,
-                slug: 'text-field',
-                texts: {
-                  label: 'Text field',
-                  placeholder_text: 'Free text',
-                  required_text: 'This field is required',
-                },
-                required: true,
-                validators: [
-                  {
-                    min_length: 5,
-                    text: 'This field should be at least 5 characters long',
-                  },
-                  {
-                    max_length: 15,
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.EMAIL,
-                order: 2,
-                slug: 'email-field',
-                texts: {
-                  label: 'Email',
-                  placeholder_text: 'Email',
-                },
-              },
-              {
-                input_type: FIELDS.NUMBER,
-                order: 3,
-                affix: 'PREFIX',
-                slug: 'number-field',
-                texts: {
-                  label: 'Number',
-                  affix_value: 'NOK',
-                  placeholder_text: 'Number',
-                },
-                validators: [
-                  {
-                    minimum: 1,
-                  },
-                  {
-                    maximum: 12,
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.RANGE,
-                order: 4,
-                affix: 'SUFFIX',
-                slug: 'range-field',
-                attributes: {
-                  default_value: '50',
-                  step: 10,
-                },
-                texts: {
-                  label: 'Slider',
-                  affix_value: 'NOK',
-                  placeholder_text: 'Slider',
-                },
-                validators: [
-                  {
-                    minimum: 1,
-                  },
-                  {
-                    maximum: 100,
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.SELECT,
-                order: 5,
-                affix: '',
-                required: true,
-                slug: 'select-field',
-                attributes: {
-                  default_value: '5',
-                  options: [
-                    {
-                      value: 1,
-                      label: 1,
-                    },
-                    {
-                      value: 2,
-                      label: 2,
-                    },
-                    {
-                      value: 3,
-                      label: 3,
-                    },
-                    {
-                      value: 4,
-                      label: 4,
-                    },
-                    {
-                      value: 5,
-                      label: 5,
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Select',
-                  affix_value: '',
-                  placeholder_text: 'Please select option',
-                },
-                validators: [],
-              },
-            ],
-          },
-        },
-      ],
-    },
-  },
-};
-Form.play = async () => {
-  await screen.findByText('Please input your name here');
-  const textPlaceholderValue = 'Free text';
-  const textInput = await screen.findByPlaceholderText(textPlaceholderValue);
-  await userEvent.type(textInput, 'This');
-  await expect(textInput.value).toBe('This');
-  await fireEvent(await screen.getByRole('button', { name: /submit/i }), new MouseEvent('click'));
-  await screen.findByText('This field is absolutely required');
-  await screen.findByText('This field should be at least 5 characters long');
-  const textInputStyle = window.getComputedStyle(textInput);
-  expect(textInputStyle.border).not.toContain('#00000000');
-  expect(textInputStyle.border).not.toContain('transparent');
-  await userEvent.type(textInput, ' is too long');
-  await expect(textInput.value).toBe('This is too lon');
-  const emailPlaceholderValue = 'Email';
-  const emailInput = await screen.findByPlaceholderText(emailPlaceholderValue);
-  await userEvent.type(emailInput, 'this@is@not@an@email');
-  const selectPlaceholderValue = 'Please select option';
-  const selectInput = await screen.findByPlaceholderText(selectPlaceholderValue);
-  const selectInputStyle = window.getComputedStyle(selectInput);
-  expect(selectInputStyle.border).not.toContain('#00000000');
-  expect(selectInputStyle.border).not.toContain('transparent');
-  await userEvent.selectOptions(selectInput, '2');
-  await expect(selectInputStyle.border).toContain('rgba(0, 0, 0, 0)');
-};
-
 export const LeaveContactDetails = Template.bind({});
 LeaveContactDetails.parameters = {
   ...defaultParameters,
@@ -956,8 +794,8 @@ LeaveContactDetails.parameters = {
     },
   },
 };
-LeaveContactDetails.play = async () => {
-  const LeaveContactButton = await screen.findByText(
+LeaveContactDetails.play = async ({ canvasElement }) => {
+  const LeaveContactButton = await within(canvasElement).findByText(
     LeaveContactDetails.parameters.initialStateModifier.messages.chatMessages[0].buttons[2].label,
   );
   await userEvent.click(LeaveContactButton);

package/stories/screens.stories/ClosedButton.stories.jsx

@@ -1,6 +1,4 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
-import withMock from 'storybook-addon-mock';
 
 import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChat from '../../src/KindlyChat';
@@ -24,7 +22,7 @@ function Template({ options, ...args }) {
 export default {
   title: 'Screen/Button',
   component: KindlyChat,
-  decorators: [withMock],
+  decorators: [],
   argTypes: {
     options: {
       table: {

package/stories/screens.stories/Feedback.stories.jsx

@@ -1,7 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react/prop-types */
 import React from 'react';
-import withFetchMock from 'storybook-addon-mock';
 
 import { feedbackFormTypes } from 'app/constants';
 
@@ -26,7 +23,7 @@ function Template(args, context) {
 export default {
   title: 'Screen/Feedback',
   component: KindlyChatButton,
-  decorators: [withFetchMock, withContainer, withMockProvider],
+  decorators: [withContainer, withMockProvider],
 };
 
 export const Emojis = Template.bind({});

package/stories/screens.stories/Nudge.stories.jsx

@@ -1,6 +1,4 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
-import withMock from 'storybook-addon-mock';
 
 import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChat from '../../src/KindlyChat';
@@ -37,7 +35,6 @@ function Template({ slug, nudgeLayout, trackEvent, options, ...args }) {
 export default {
   title: 'Screen/Nudges',
   component: KindlyChat,
-  decorators: [withMock],
 };
 
 export const Product = Template.bind({});

package/stories/screens.stories/Options.stories.jsx

@@ -1,8 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react/prop-types */
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 import React from 'react';
-import withFetchMock from 'storybook-addon-mock';
 
 import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
@@ -25,7 +22,7 @@ function Template(args, context) {
 export default {
   title: 'Screen/Options',
   component: KindlyChatButton,
-  decorators: [withFetchMock, withContainer, withMockProvider],
+  decorators: [withContainer, withMockProvider],
 };
 
 const defaultParameters = {
@@ -165,8 +162,8 @@ LanguageChoice.parameters = {
     ...defaultBotSettings,
   },
 };
-LanguageChoice.play = async () => {
-  const languageButton = await screen.findByText(defaultBotSettings.text.change_language_button.en);
+LanguageChoice.play = async ({ canvasElement }) => {
+  const languageButton = await within(canvasElement).findByText(defaultBotSettings.text.change_language_button.en);
   await userEvent.click(languageButton);
 };
 
@@ -177,17 +174,17 @@ LanguageChoiceConfirm.args = {
 };
 LanguageChoiceConfirm.argTypes = LanguageChoice.argTypes;
 LanguageChoiceConfirm.parameters = LanguageChoice.parameters;
-LanguageChoiceConfirm.play = async () => {
-  const languageButton = await screen.findByText(defaultBotSettings.text.change_language_button.en);
+LanguageChoiceConfirm.play = async ({ canvasElement }) => {
+  const languageButton = await within(canvasElement).findByText(defaultBotSettings.text.change_language_button.en);
   await userEvent.click(languageButton);
-  const norskButton = await screen.findByText(availableLanguages[1].name);
+  const norskButton = await within(canvasElement).findByText(availableLanguages[1].name);
   await userEvent.click(norskButton);
 };
 
 export const DeleteConfirmation = Template.bind({});
 DeleteConfirmation.parameters = defaultParameters;
-DeleteConfirmation.play = async () => {
-  const deleteButton = await screen.findByText(defaultBotSettings.text.delete_button.en);
+DeleteConfirmation.play = async ({ canvasElement }) => {
+  const deleteButton = await within(canvasElement).findByText(defaultBotSettings.text.delete_button.en);
   await userEvent.click(deleteButton);
 };
 
@@ -204,8 +201,8 @@ DeleteSuccess.parameters = {
 
 export const DownloadChat = Template.bind({});
 DownloadChat.parameters = defaultParameters;
-DownloadChat.play = async () => {
-  const downloadButton = await screen.findByText(defaultBotSettings.text.download_button.en);
+DownloadChat.play = async ({ canvasElement }) => {
+  const downloadButton = await within(canvasElement).findByText(defaultBotSettings.text.download_button.en);
   await userEvent.click(downloadButton);
 };
 
@@ -220,7 +217,7 @@ QuitChat.parameters = {
     },
   },
 };
-QuitChat.play = async () => {
-  const deleteButton = await screen.findByTestId('end-chat-button');
+QuitChat.play = async ({ canvasElement }) => {
+  const deleteButton = await within(canvasElement).findByTestId('end-chat-button');
   await userEvent.click(deleteButton);
 };

package/stories/screens.stories/PushGreeting.stories.jsx

@@ -1,7 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react/prop-types */
 import React from 'react';
-import withFetchMock from 'storybook-addon-mock';
 
 import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
@@ -24,7 +21,7 @@ function Template(args, context) {
 export default {
   title: 'Screen/PushGreeting',
   component: KindlyChatButton,
-  decorators: [withFetchMock, withContainer, withMockProvider],
+  decorators: [withContainer, withMockProvider],
 };
 
 export const Default = Template.bind({});

package/stories/screens.stories/StartChat.stories.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { chromaticViewports } from '../../.storybook/preview';

package/stories/utils/wait.js

@@ -0,0 +1,2 @@
+/* eslint-disable no-promise-executor-return */
+export default (waitTime) => new Promise((resolve) => setTimeout(resolve, waitTime));