fix unit test cases

prabhuignoto · Feb 13, 2024 · d213561 · d213561
1 parent 0478013
commit d213561
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 40 deletions.
diff --git a/src/components/timeline/__tests__/layout-switcher.test.tsx b/src/components/timeline/__tests__/layout-switcher.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import { getDefaultThemeOrDark } from '@utils/index';
+import { getDefaultButtonTexts, getDefaultThemeOrDark } from '@utils/index';
+import GlobalContextProvider from 'src/components/GlobalContext';
 import { vi } from 'vitest';
 import { LayoutSwitcher, QuickJump } from '../timeline-popover-elements';
 
@@ -11,13 +12,18 @@ describe('LayoutSwitcher Component', () => {
 
   test('Renders correctly with vertical layout options', () => {
     const { getByText } = render(
-      <LayoutSwitcher
-        onUpdateTimelineMode={onUpdateTimelineMode}
+      <GlobalContextProvider
         theme={theme}
-        mode="VERTICAL"
-        isDarkMode={isDarkMode}
-        position={position}
-      />,
+        buttonTexts={getDefaultButtonTexts()}
+      >
+        <LayoutSwitcher
+          onUpdateTimelineMode={onUpdateTimelineMode}
+          theme={theme}
+          mode="VERTICAL"
+          isDarkMode={isDarkMode}
+          position={position}
+        />
+      </GlobalContextProvider>,
     );
 
     // Add your assertions here
@@ -31,13 +37,18 @@ describe('LayoutSwitcher Component', () => {
 
   test('Renders correctly with horizontal layout options', () => {
     const { getByText } = render(
-      <LayoutSwitcher
-        onUpdateTimelineMode={onUpdateTimelineMode}
+      <GlobalContextProvider
         theme={theme}
-        mode="HORIZONTAL"
-        isDarkMode={isDarkMode}
-        position={position}
-      />,
+        buttonTexts={getDefaultButtonTexts()}
+      >
+        <LayoutSwitcher
+          onUpdateTimelineMode={onUpdateTimelineMode}
+          theme={theme}
+          mode="HORIZONTAL"
+          isDarkMode={isDarkMode}
+          position={position}
+        />
+      </GlobalContextProvider>,
     );
 
     // Add your assertions here
@@ -51,13 +62,18 @@ describe('LayoutSwitcher Component', () => {
 
   test('Handles mode selection correctly', async () => {
     const { getByText } = render(
-      <LayoutSwitcher
-        onUpdateTimelineMode={onUpdateTimelineMode}
+      <GlobalContextProvider
         theme={theme}
-        mode="VERTICAL"
-        isDarkMode={isDarkMode}
-        position={position}
-      />,
+        buttonTexts={getDefaultButtonTexts()}
+      >
+        <LayoutSwitcher
+          onUpdateTimelineMode={onUpdateTimelineMode}
+          theme={theme}
+          mode="VERTICAL"
+          isDarkMode={isDarkMode}
+          position={position}
+        />
+      </GlobalContextProvider>,
     );
 
     expect(getByText('Change layout')).toBeInTheDocument();
@@ -87,41 +103,51 @@ describe('QuickJump Component', () => {
 
   test('Renders correctly with provided items', () => {
     const { getByText } = render(
-      <QuickJump
-        activeItem={0}
-        items={items}
+      <GlobalContextProvider
         theme={theme}
-        onActivateItem={onActivateItem}
-        isDarkMode={isDarkMode}
-        position={position}
-      />,
+        buttonTexts={getDefaultButtonTexts()}
+      >
+        <QuickJump
+          activeItem={0}
+          items={items}
+          theme={theme}
+          onActivateItem={onActivateItem}
+          isDarkMode={isDarkMode}
+          position={position}
+        />
+      </GlobalContextProvider>,
     );
 
     // Add your assertions here
 
-    expect(getByText('Jump to a date')).toBeInTheDocument();
+    expect(getByText('Jump to')).toBeInTheDocument();
 
-    fireEvent.click(getByText('Jump to a date'));
+    fireEvent.click(getByText('Jump to'));
 
     expect(getByText('Item 1')).toBeInTheDocument();
     expect(getByText('Item 2')).toBeInTheDocument();
   });
 
   test('Handles item activation correctly', () => {
     const { getByText } = render(
-      <QuickJump
-        activeItem={0}
-        items={items}
+      <GlobalContextProvider
         theme={theme}
-        onActivateItem={onActivateItem}
-        isDarkMode={isDarkMode}
-        position={position}
-      />,
+        buttonTexts={getDefaultButtonTexts()}
+      >
+        <QuickJump
+          activeItem={0}
+          items={items}
+          theme={theme}
+          onActivateItem={onActivateItem}
+          isDarkMode={isDarkMode}
+          position={position}
+        />
+      </GlobalContextProvider>,
     );
 
-    expect(getByText('Jump to a date')).toBeInTheDocument();
+    expect(getByText('Jump to')).toBeInTheDocument();
 
-    fireEvent.click(getByText('Jump to a date'));
+    fireEvent.click(getByText('Jump to'));
 
     // Simulate clicking on an item
     fireEvent.click(getByText('Item 1'));

diff --git a/src/components/timeline/timeline-popover-elements.tsx b/src/components/timeline/timeline-popover-elements.tsx
@@ -31,7 +31,7 @@ const LayoutSwitcher: FunctionComponent<LayoutSwitcherProp> = ({
   isDarkMode,
   position,
 }: LayoutSwitcherProp) => {
-  const { showAllCardsHorizontal } = useContext(GlobalContext);
+  const { showAllCardsHorizontal, buttonTexts } = useContext(GlobalContext);
 
   const activeTimelineMode = useMemo(
     () => mode,
@@ -81,7 +81,7 @@ const LayoutSwitcher: FunctionComponent<LayoutSwitcherProp> = ({
 
   return (
     <PopOver
-      placeholder="Change layout"
+      placeholder={buttonTexts.changeLayout}
       position={position}
       theme={theme}
       isDarkMode={isDarkMode}
@@ -107,9 +107,10 @@ const QuickJump: FunctionComponent<QuickJumpProp> = ({
   isDarkMode,
   position,
 }: QuickJumpProp) => {
+  const {buttonTexts} = useContext(GlobalContext);
   return (
     <PopOver
-      placeholder="Jump to a date"
+      placeholder={buttonTexts.jumpTo}
       position={position}
       theme={theme}
       width={'400px'}

diff --git a/src/models/TimelineModel.ts b/src/models/TimelineModel.ts
@@ -60,8 +60,10 @@ export type TimelineProps = {
 
   // custom button texts
   buttonTexts?: {
+    changeLayout?: string;
     dark?: string;
     first: string;
+    jumpTo?: string;
     last: string;
     light?: string;
     next?: string;

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -28,8 +28,10 @@ export const getDefaultClassNames = () => ({
 });
 
 export const getDefaultButtonTexts = () => ({
+  changeLayout: 'Change layout',
   dark: 'Switch to Dark Mode',
   first: 'Go to First',
+  jumpTo: 'Jump to',
   last: 'Go to Last',
   light: 'Switch to Light Mode',
   next: 'Next',

diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
@@ -44,8 +44,10 @@ describe('Utility Functions', () => {
 
   it('getDefaultButtonTexts should return default button texts', () => {
     expect(getDefaultButtonTexts()).toEqual({
+      changeLayout: 'Change layout',
       dark: 'Switch to Dark Mode',
       first: 'Go to First',
+      jumpTo: 'Jump to',
       last: 'Go to Last',
       light: 'Switch to Light Mode',
       next: 'Next',