test: updated tests and stories with new context provider

memori-ai · Oct 8, 2024 · 88ec8e9 · 88ec8e9
1 parent dea3740
commit 88ec8e9
Show file tree

Hide file tree

Showing 11 changed files with 829 additions and 56 deletions.
diff --git a/src/components/Avatar/AvatarView/AvatarView.stories.tsx b/src/components/Avatar/AvatarView/AvatarView.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import I18nWrapper from '../../../I18nWrapper';
 import AvatarView, { Props } from './index';
+import { VisemeProvider } from '../../../context/visemeContext';
 
 const meta: Meta = {
   title: 'RPM 3D Avatar',
@@ -60,9 +61,7 @@ const meta: Meta = {
     },
   },
   parameters: {
-    controls: { expanded: false,
-    },
-
+    controls: { expanded: false },
   },
 };
 
@@ -76,11 +75,13 @@ const Template: Story<Props> = args => {
 
   return hydrated ? (
     <I18nWrapper>
-      <AvatarView
-        {...args}
-        url={args.url + `#${new Date(Date.now()).toISOString()}`}
-        key={Date.now()}
-      />
+      <VisemeProvider>
+        <AvatarView
+          {...args}
+          url={args.url + `#${new Date(Date.now()).toISOString()}`}
+          key={Date.now()}
+        />
+      </VisemeProvider>
     </I18nWrapper>
   ) : (
     <></>
@@ -95,14 +96,17 @@ Default.args = {
   headMovement: false,
   rotateAvatar: false,
   speaking: false,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
 };
 
-
 export const EyeBlink = Template.bind({});
 EyeBlink.args = {
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   eyeBlink: true,
   headMovement: false,
   rotateAvatar: false,
@@ -114,6 +118,8 @@ EyeBlink.args = {
 
 export const HeadMovement = Template.bind({});
 HeadMovement.args = {
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   eyeBlink: false,
   headMovement: true,
   rotateAvatar: false,
@@ -125,6 +131,8 @@ HeadMovement.args = {
 
 export const RotateAvatar = Template.bind({});
 RotateAvatar.args = {
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   eyeBlink: false,
   headMovement: false,
   rotateAvatar: true,
@@ -136,6 +144,8 @@ RotateAvatar.args = {
 
 export const Speaking = Template.bind({});
 Speaking.args = {
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   eyeBlink: false,
   headMovement: false,
   rotateAvatar: false,
@@ -152,6 +162,8 @@ Fullbody.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -166,6 +178,8 @@ FullbodyZoomed.args = {
   rotateAvatar: true,
   speaking: false,
   isZoomed: true,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://assets.memori.ai/api/v2/asset/3f5ef41c-6c4c-449c-888d-cf9c89782528.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -179,6 +193,8 @@ FullbodyAnimatedIdle.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -193,6 +209,8 @@ FullbodyAnimatedLoading.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -207,6 +225,8 @@ FullbodyAnimatedSpeaking.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: true,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -221,6 +241,8 @@ FullbodyFemale.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -234,6 +256,8 @@ FullbodyAnimatedFemale.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: true,
+  clearVisemes: () => {},
+  setMeshRef: () => {},
   url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',

diff --git a/src/components/layouts/Chat.test.tsx b/src/components/layouts/Chat.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
-
+import { VisemeProvider } from '../../context/visemeContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,15 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders Chat layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
-        showShare={true}
+      <VisemeProvider>
+        <Memori
+          showShare={true}
         showSettings={true}
         memori={memori}
         tenant={tenant}
         tenantID="aisuru.com"
         integration={integration}
-        layout="CHAT"
-      />
+          layout="CHAT"
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

diff --git a/src/components/layouts/FullPage.test.tsx b/src/components/layouts/FullPage.test.tsx
@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -20,15 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders FullPage layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
-        showShare={true}
-        showSettings={true}
-        memori={memori}
-        tenant={tenant}
-        tenantID="aisuru.com"
-        integration={integration}
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
         layout="FULLPAGE"
-      />
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

diff --git a/src/components/layouts/HiddenChat.test.tsx b/src/components/layouts/HiddenChat.test.tsx
@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import Memori from '../MemoriWidget/MemoriWidget';
+import { integration, memori, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+it('renders HIDDEN_CHAT layout unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
+          layout="HIDDEN_CHAT"
+        />
+      </VisemeProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});
diff --git a/src/components/layouts/Totem.test.tsx b/src/components/layouts/Totem.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
-
+import { VisemeProvider } from '../../context/visemeContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,15 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders Totem layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
+      <VisemeProvider>
+        <Memori
         showShare={true}
         showSettings={true}
         memori={memori}
         tenant={tenant}
         tenantID="aisuru.com"
         integration={integration}
-        layout="TOTEM"
-      />
+          layout="TOTEM"
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

diff --git a/src/components/layouts/WebsiteAssistant.test.tsx b/src/components/layouts/WebsiteAssistant.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
-
+import { VisemeProvider } from '../../context/visemeContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,15 +20,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders WEBSITE_ASSISTANT layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <Memori
-        showShare={true}
+      <VisemeProvider>
+        <Memori
+          showShare={true}
         showSettings={true}
         memori={memori}
         tenant={tenant}
         tenantID="aisuru.com"
         integration={integration}
-        layout="WEBSITE_ASSISTANT"
-      />
+          layout="WEBSITE_ASSISTANT"
+        />
+      </VisemeProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

diff --git a/src/components/layouts/ZoomedFullBody.test.tsx b/src/components/layouts/ZoomedFullBody.test.tsx
@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import Memori from '../MemoriWidget/MemoriWidget';
+import { integration, memori, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+it('renders ZOOMED_FULL_BODY layout unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
+          layout="ZOOMED_FULL_BODY"
+        />
+      </VisemeProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});