Module manager tests (#138)

Author: RohanSGX

src/Component/Themes/ChooseCheckboxQuestions.test.js

@@ -0,0 +1,165 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { Router } from "react-router-dom";
+import { createMemoryHistory } from "history";
+import ChooseCheckboxQuestions from "./ChooseCheckboxQuestions";
+
+const mockChangeStage = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Link: ({ children, onClick }) => (
+    <div onClick={onClick} role="link">
+      {children}
+    </div>
+  ),
+}));
+
+const mockProps = {
+  match: {
+    params: {
+      levelIndex: "1",
+    },
+  },
+  data: {
+    title: "Choose the correct options",
+    content: {
+      questionTitle: "What are the primary colors?",
+      checkBoxesOption: [
+        { content: "Red", bgcolor: "#ffffff" },
+        { content: "Blue", bgcolor: "#ffffff" },
+        { content: "Green", bgcolor: "#ffffff" },
+      ],
+      colors: {
+        checked: "#00ff00",
+        unChecked: "#ffffff",
+        box: "#cccccc",
+      },
+    },
+  },
+  changeStage: mockChangeStage,
+  stage: 1,
+};
+
+describe("ChooseCheckboxQuestions", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  it("renders title and question content correctly", () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Router history={history}>
+        <ChooseCheckboxQuestions {...mockProps} />
+      </Router>
+    );
+
+    expect(getByText("Choose the correct options")).toBeInTheDocument();
+    expect(getByText("What are the primary colors?")).toBeInTheDocument();
+    expect(getByText("Red")).toBeInTheDocument();
+    expect(getByText("Blue")).toBeInTheDocument();
+    expect(getByText("Green")).toBeInTheDocument();
+  });
+
+  it("selects and deselects options", () => {
+    const history = createMemoryHistory();
+    const { getByText, container } = render(
+      <Router history={history}>
+        <ChooseCheckboxQuestions {...mockProps} />
+      </Router>
+    );
+
+    fireEvent.click(getByText("Red"));
+    fireEvent.click(getByText("Blue"));
+    fireEvent.click(getByText("Red")); // deselect Red
+
+    const nextButton = container.querySelector(".forward-step img");
+    fireEvent.click(nextButton);
+
+    const stored = JSON.parse(localStorage.getItem("1_selectedData"));
+    expect(stored).toEqual(null);
+    expect(mockChangeStage).toHaveBeenCalledWith("Next", 1);
+  });
+
+  it("saves data and calls changeStage with 'Next'", () => {
+    const history = createMemoryHistory();
+    const { getByText, container } = render(
+      <Router history={history}>
+        <ChooseCheckboxQuestions {...mockProps} />
+      </Router>
+    );
+
+    fireEvent.click(getByText("Green"));
+    const nextButton = container.querySelector(".forward-step img");
+    fireEvent.click(nextButton);
+
+    const stored = JSON.parse(localStorage.getItem("1_selectedData"));
+    expect(stored).toEqual(null);
+    expect(mockChangeStage).toHaveBeenCalledWith("Next", 1);
+  });
+
+  it("loads selected data from localStorage", () => {
+    localStorage.setItem("1_selectedData", JSON.stringify(["Red", "Green"]));
+
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Router history={history}>
+        <ChooseCheckboxQuestions {...mockProps} />
+      </Router>
+    );
+
+    // These will still appear as normal text, but you can verify visually if needed.
+    expect(getByText("Red")).toBeInTheDocument();
+    expect(getByText("Green")).toBeInTheDocument();
+  });
+
+  it("calls changeStage with 'Previous' on back click", () => {
+    const history = createMemoryHistory();
+    const { container } = render(
+      <Router history={history}>
+        <ChooseCheckboxQuestions {...mockProps} />
+      </Router>
+    );
+
+    const backButton = container.querySelector(".col-2 img");
+    fireEvent.click(backButton);
+
+    expect(mockChangeStage).toHaveBeenCalledWith("Previous", 1);
+  });
+
+  it("adds and removes items from selectedData state", () => {
+    const mockProps = {
+      match: { params: { levelIndex: "test-level" } },
+      data: {
+        title: "",
+        content: {
+          questionTitle: "",
+          checkBoxesOption: [],
+          colors: { checked: "", unChecked: "", box: "" },
+        },
+      },
+      changeStage: jest.fn(),
+      stage: 0,
+    };
+
+    const ref = React.createRef();
+
+    render(<ChooseCheckboxQuestions {...mockProps} ref={ref} />);
+
+    // Call pushData via ref
+    expect(ref.current.state.selectedData).toEqual([]);
+
+    ref.current.pushData("Red");
+    expect(ref.current.state.selectedData).toEqual(["Red"]);
+
+    ref.current.pushData("Blue");
+    expect(ref.current.state.selectedData).toEqual(["Red", "Blue"]);
+
+    ref.current.pushData("Red");
+    expect(ref.current.state.selectedData).toEqual(["Blue"]);
+
+    ref.current.pushData("Blue");
+    expect(ref.current.state.selectedData).toEqual([]);
+  });
+});

src/Component/Themes/CircleWithInfoAnimations.js

@@ -70,7 +70,7 @@ class CircleWithInfoAnimations extends React.Component {
           <div className="col-12" style={{ margin: 0, padding: 0 }}>
             <div className="row mt-4 ml-0">
               <div className="col-2">
-                <Link onClick={() => this.props.changeStage("Previous", stage)}>
+                <Link data-testid="back-link" onClick={() => this.props.changeStage("Previous", stage)}>
                   <img
                     style={{ width: 48, height: 48 }}
                     src={backImage}
@@ -166,6 +166,7 @@ class CircleWithInfoAnimations extends React.Component {
                               onClick={() => {}}
                             >
                               <span
+                              data-testid="circle-name-1"
                                 style={{
                                   backgroundColor: this.state.selectColor_1,
                                   fontWeight: "700",
@@ -214,6 +215,7 @@ class CircleWithInfoAnimations extends React.Component {
                             }}
                           >
                             <span
+                            data-testid="circle-name-2"
                               style={{
                                 backgroundColor: this.state.selectColor_2,
                                 color: "white",
@@ -231,6 +233,7 @@ class CircleWithInfoAnimations extends React.Component {
                     </div>
                     {this.state.ImageView === 1 && this.state.showIcon ? (
                       <Link
+                      data-testid="overlay-close"
                         onClick={() => this.setState({ showIcon: false })}
                         style={{ zIndex: 2 }}
                       >
@@ -289,6 +292,7 @@ class CircleWithInfoAnimations extends React.Component {
                     />
                     <div style={{ width: "100%", whiteSpace: "nowrap" }}>
                       <span
+                      data-testid="circle-name-3"
                         style={{
                           backgroundColor: this.state.selectColor_3,
                           color: "white",
@@ -324,6 +328,7 @@ class CircleWithInfoAnimations extends React.Component {
         <div className="forward-step">
           {this.state.currentIndex === 1 ? (
             <Link
+            data-testid="forward-link"
               onClick={() => {
                 if (this.state.ImageView) {
                   this.props.changeStage("Next", stage);

src/Component/Themes/CircleWithInfoAnimations.test.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import CircleWithInfoAnimations from './CircleWithInfoAnimations';
+
+// Mock Link from react-router-dom
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Link: ({ children, onClick, ...props }) => (
+    <div onClick={onClick} data-testid={props['data-testid'] || 'mock-link'}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.useFakeTimers();
+
+const defaultProps = {
+  stage: 0,
+  changeStage: jest.fn(),
+  data: {
+    title: 'Test Title',
+    content: {
+      text: [
+        { value: 'Test Line 1', style: {} },
+        { value: 'Test Line 2', style: { color: 'blue' } },
+      ],
+      circles: [
+        { name: 'Inner Circle', color: '#ff0000' },
+        { name: 'Middle Circle', color: '#00ff00' },
+        { name: 'Outer Circle', color: '#0000ff' },
+      ],
+      image: { fileName: 'testImage', fileType: 'png' },
+    },
+  },
+};
+
+describe('CircleWithInfoAnimations', () => {
+  let ref;
+  let instance;
+
+  beforeEach(() => {
+    ref = React.createRef();
+    render(
+      <MemoryRouter>
+        <CircleWithInfoAnimations {...defaultProps} ref={ref} />
+      </MemoryRouter>
+    );
+    instance = ref.current;
+  });
+
+  test('renders title and text content', () => {
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Line 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Line 2')).toBeInTheDocument();
+  });
+
+  test('initial state is correct', () => {
+    expect(instance.state.currentIndex).toBe(0);
+    expect(instance.state.ImageView).toBe(false);
+    expect(instance.state.showIcon).toBe(true);
+  });
+
+  test('increments currentIndex after timeout', () => {
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(instance.state.currentIndex).toBe(1);
+  });
+
+  test('renders circle names after currentIndex = 1', () => {
+    act(() => {
+      instance.setState({ currentIndex: 1 });
+    });
+
+    expect(screen.getByTestId('circle-name-1')).toHaveTextContent('Inner Circle');
+    expect(screen.getByTestId('circle-name-2')).toHaveTextContent('Middle Circle');
+    expect(screen.getByTestId('circle-name-3')).toHaveTextContent('Outer Circle');
+  });
+
+  test('back button triggers changeStage with "Previous"', () => {
+    const backButton = screen.getByTestId('back-link');
+    fireEvent.click(backButton);
+    expect(defaultProps.changeStage).toHaveBeenCalledWith('Previous', 0);
+  });
+
+  test('forward button toggles ImageView on first click', () => {
+    act(() => {
+      instance.setState({ currentIndex: 1 });
+    });
+
+    const forwardLink = screen.getByTestId('forward-link');
+    fireEvent.click(forwardLink);
+    expect(instance.state.ImageView).toBe(true);
+  });
+
+  test('forward button triggers changeStage on second click', () => {
+    act(() => {
+      instance.setState({ currentIndex: 1, ImageView: true });
+    });
+
+    const forwardLink = screen.getByTestId('forward-link');
+    fireEvent.click(forwardLink);
+    expect(defaultProps.changeStage).toHaveBeenCalledWith('Next', 0);
+  });
+
+  test('image overlay can be closed by clicking icon', () => {
+  act(() => {
+    instance.setState({ currentIndex: 1, ImageView: 1, showIcon: true });
+  });
+
+  const overlayClose = screen.getByTestId('overlay-close');
+  fireEvent.click(overlayClose);
+
+  expect(instance.state.showIcon).toBe(false);
+});
+});

src/Component/Themes/DropToSelection.js

@@ -281,7 +281,7 @@ return true
                 <div className="col-12" style={{ margin: 0, padding: 0 }}>
                     <div className="row mt-5 ml-0">
                         <div className="col-2">
-                            <Link onClick={() => {
+                            <Link to="#" data-testid="previous" onClick={() => {
                                 this.selectedView()
                                 if (this.props.themeType === "StoryCard") {
                                     this.props.changeindex('Previous', stage)
@@ -327,7 +327,7 @@ return true
                         marginLeft: 50, position: 'absolute',
                     }}>
 
-                        <img id="drag1" draggable="true"
+                        <img data-testid="draggable-image" id="drag1" draggable="true"
                             onDragStart={(e) => { 
                                 console.log(e)
                                 this.drag(e) }} onDragEnd={(e) => { 
@@ -455,7 +455,7 @@ return true
                                                 }
 
                                                 if (anotherChoice === 4) {
-                                                    this.props.history.push('/' + MyConstant.keyList.projectUrl + '/home/')
+                                                    this.props.history?.push('/' + MyConstant.keyList.projectUrl + '/home/')
                                                 }
 
 
@@ -521,7 +521,7 @@ return true
                             </div>
                         </div>
 
-                        <div id="Red" onDrop={(event) => { this.drop(event) }} onDragOver={(event) => { this.allowDrop(event) }} style={{ marginTop: '30%' }} className="col-3">
+                        <div id="Red" data-testid="drop-red" onDrop={(event) => { this.drop(event) }} onDragOver={(event) => { this.allowDrop(event) }} style={{ marginTop: '30%' }} className="col-3">
                             {this.state.boderView ?
                                 <div style={{ border: "2px dotted white", position: "absolute", marginLeft: -10, marginTop: "45%", width: 75, height: 80, borderRadius: 75 / 2 }}> </div>
                                 : null}
@@ -533,7 +533,7 @@ return true
 
             </div>
             <div style={{ position: 'fixed', bottom: window.innerHeight / 15, right: '5%', zIndex: 3 }} >
-                <Link onClick={() => {
+                <Link data-testid="next-button" to="#" onClick={() => {
                     if (this.state.imageDraged) {
                         this.setState({ modelView: true, show_con: "show", display_view: "block", })
                     }