Issue #733 dont use index for keys testcases

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -204,7 +204,7 @@
     "transformIgnorePatterns": [
       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
       "^.+\\.module\\.(css|sass|scss)$",
-      "node_modules\/(?!axios)"
+      "node_modules/(?!axios)"
     ],
     "modulePaths": [
       "src"

src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterContent.js

@@ -25,7 +25,7 @@ let Tags = ({data, handleDelete}) => {
   }
 
   return (
-    <Box style={boxstyle} data-testid="tag">
+    <Box style={boxstyle} data-testid="ChapterContent-test-tag">
       <Typography style={tagstyle}>{data}</Typography>
       <Cancel
         style={tagstyle}
@@ -103,11 +103,9 @@ const ChapterContent = ({
           placeholder={tags.length < 5 ? "Enter tags" : ""} // tagging specific parts of the book ie. solutions
         />  
         <CTFragment alignItCenter>
-          {tags.map((data) => {
-            const uuid = uuidv4();
-            return (
-              <Tags data={data} handleDelete={handleDelete} key={`tag-${id}-${uuid}`} />
-            )})}
+          {tags.map((data) => 
+            (<Tags data={data} handleDelete={handleDelete} key={`tag-${id}-${uuidv4()}`} />)
+          )}
         </CTFragment>
 
 

src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterContent.test.js

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+// TypeError: Cannot read properties of undefined (reading '__buildHTMLFromChapter')
+// (src/screens/EPub/controllers/file-builders/EPubParser.js:6:46)
+import { v4 as uuidv4 } from 'uuid';
+import ChapterContent from './ChapterContent';
+
+const test_uuid = '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d';
+
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn(() => test_uuid),
+  };
+});
+
+
+describe('ChapterContent Component', () => {
+    const mockDispatch = jest.fn();
+    const mockOnInsert = jest.fn();
+    const mockOnRemove = jest.fn();
+    const mockOnTextChange = jest.fn();
+    const mockOnImageChange = jest.fn();
+
+    const props = {
+      id: 'ch-content-12345-uuid-0',
+      key: 'ch-content-12345-uuid-12345',
+      content: 'Sample text content',
+      index: 0,
+      dispatch: mockDispatch,
+      onRemove: mockOnRemove,
+      onTextChange: mockOnTextChange,
+      onImageChange: mockOnImageChange,
+      onInsert: mockOnInsert,
+    };
+
+    it('should render text content correctly', () => {
+        render(<ChapterContent {...props} />);
+
+        expect(screen.getByText('Sample text content')).toBeVisible();
+      });
+
+    it('should render Tags components with correct keys', () => {
+      render(<ChapterContent {...props} />);
+
+      const tags = screen.getAllByTestId('ChapterContent-test-tag');
+      tags.forEach((tag) => {
+        expect(tag).toHaveAttribute('key', `tag-${props.key}-${test_uuid}`);
+      });
+    });
+  });

src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterInfo.js

@@ -60,12 +60,11 @@ function ChapterInfo({ chapter, currChIndex, dispatch }) {
         onSave={onSaveTitle}
       />
 
-      {contents.map((content, index) => { 
-        const uuid = uuidv4();
-        return (
+      {contents.map((content, index) => 
+        (
           <ChapterContent
             id={`ch-content-${id}-${index}`}
-            key={`ch-content-${id}-${uuid}`}
+            key={`ch-content-${id}-${uuidv4()}`}
             index={index}
             condition={condition}
             dispatch={dispatch}
@@ -75,7 +74,7 @@ function ChapterInfo({ chapter, currChIndex, dispatch }) {
             onTextChange={onTextChange(index)}
             onImageChange={onImageChange(index)}
           />
-        )})}
+        ))}
 
       <ChapterNewContent onInsert={onInsert(contents.length)} />
     </CTFragment>

src/screens/EPub/views/EditEPubChapter/ChapterEditor/ChapterInfo.test.js

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { v4 as uuidv4 } from 'uuid';
+import ChapterInfo from './ChapterInfo';
+
+const test_uuid = '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d';
+
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn(() => test_uuid),
+  };
+});
+
+describe('ChapterInfo Component', () => {
+    const baseProps = {
+        chapter: { id: 'chapter-id-1', title: 'Sample Chapter', contents: ["content 1", "content 2"], condition: "condition"},
+        currChIndex: 0,
+        dispatch: jest.fn()
+    };
+
+  it('should render ChapterInfo components with correct keys', () => {
+    // Invariant Violation: Could not find "store"
+    render(<ChapterInfo {...baseProps} />);
+
+    const contents = screen.getAllByTestId('ChapterInfo-test-tag');
+    contents.forEach((content) => {
+      expect(content).toHaveAttribute('key', `ch-content-chapter-id-1-${test_uuid}`);
+    });
+  });
+});

src/screens/EPub/views/EditEPubChapter/ChapterEditor/SubChapterItem.js

@@ -67,20 +67,19 @@ function SubChapterItem({
         onSave={onSaveTitle}
       />
 
-      {contents.map((content, index) => { 
-        const uuid = uuidv4();
-        return (
+      {contents.map((content, index) => 
+        (
           <ChapterContent
             id={`sch-content-${id}-${index}`}
-            key={`sch-content-${id}-${uuid}`}
+            key={`sch-content-${id}-${uuidv4()}`}
             index={index}
             content={content}
             onInsert={onInsert(index)}
             onRemove={onRemove(index)}
             onTextChange={onTextChange(index)}
             onImageChange={onImageChange(index)}
           />
-        )})}
+        ))}
 
       <ChapterNewContent index={subChapter.contents.length} onInsert={onInsert(contents.length)} />
     </CTFragment>

src/screens/EPub/views/EditEPubChapter/ChapterEditor/SubChapterItem.test.js

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { v4 as uuidv4 } from 'uuid';
+import SubChapterItem from './SubChapterItem';
+
+const test_uuid = '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d';
+
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn(() => test_uuid),
+  };
+});
+
+describe('SubChapterItem Component', () => {
+    const baseProps = {
+        subChapter: { title: "title", id: 'chapter-id-1', contents : ["content 1", "content 2"] },
+        subChapterIndex: 0,
+        currChIndex: 0, 
+        dispatch: jest.fn()
+    };
+
+  it('should render SubChapterItem components with correct keys', () => {
+    // Invariant Violation: Could not find "store"
+    render(<SubChapterItem {...baseProps} />);
+
+    const contents = screen.getAllByTestId('SubChapterItem-test-tag');
+    contents.forEach((content) => {
+      expect(content).toHaveAttribute('key', `sch-content-chapter-id-1-${test_uuid}}`);
+    });
+  });
+});

src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js

@@ -247,10 +247,9 @@ function INoteChapter ({
           </CTFragment>
 
         ) : (// If the chapter has elements, then iterate through all of them
-          chapter.contents.map((content, itemIdx) => { 
-            const uuid = uuidv4();
-            return (
-              <CTFragment key={`ch-content-${chapter.id}-${uuid}`}>
+          chapter.contents.map((content, itemIdx) => 
+            (
+              <CTFragment key={`ch-content-${chapter.id}-${uuidv4()}`}>
                 <CTFragment className="item-actions">
                   {mergeChapterBtnElement(itemIdx)}
                   {splitBtnElement(itemIdx)}
@@ -306,7 +305,7 @@ function INoteChapter ({
                   {watchVideoElement(chapter.contents.length)}
                 </CTFragment>)}
               </CTFragment>
-            )}))}
+            )))}
       </CTFragment>
 
       {insertType !== null && (

src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.test.js

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+// TypeError: Cannot read properties of undefined (reading '__buildHTMLFromChapter')
+// (src/screens/EPub/controllers/file-builders/EPubParser.js:6:46)
+import { v4 as uuidv4 } from 'uuid';
+import INoteChapter from './INoteChapter';
+
+const test_uuid = '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d';
+
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn(() => test_uuid),
+  };
+});
+
+describe('INoteChapter Component', () => {
+    const baseProps = {
+        chapter: {id: "chapter-id-1", title: "Sample title"},
+        chIdx: 0,
+        images: [],
+        dispatch: jest.fn()
+    };
+
+  it('should render INoteChapter components with correct keys', () => {
+    render(<INoteChapter {...baseProps} />);
+
+    const contents = screen.getAllByTestId('content');
+    contents.forEach((content) => {
+      expect(content).toHaveAttribute('key', `ch-content-chapter-id-1-${test_uuid}}`);
+    });
+  });
+});