added testing to dropdown, travelcontainer, edited travelcontainer component

Author: minzo-kim

src/app/__tests__zo/Dropdown.test.tsx

@@ -0,0 +1,63 @@
+// purpose of this file is to start testing front end/components using RTL
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+
+import Dropdown from '../components/Dropdown';
+
+// interface DropdownProps {
+//   selectedSpeed: { value: number; label: string };
+//   speeds: { value: number; label: string }[];
+//   setSpeed: () => void;
+// }
+
+describe('Dropdown test', () => {
+  const speeds = [
+    { value: 1, label: 'test1' },
+    { value: 2, label: 'test2' },
+    { value: 3, label: 'test3' },
+  ];
+  //   make a hook call into a jest mock
+  const setSpeed = jest.fn();
+
+  //   test 1: test to see if it renders the label correctly
+  test('renders Dropdown with correct info', () => {
+    // find a specific speed from array. could be testing each? one for now.
+    const currSpeed = speeds[0];
+    // you pass in what is expected from TS, passed into Dropdown NOT the return statement.
+    // in this case, the dropdownprops interface.
+    // assign it to a container which is the document i guess?
+    const { container } = render(
+      <Dropdown speeds={speeds} setSpeed={setSpeed} selectedSpeed={currSpeed} />,
+    );
+    // then we can query the container like a normal dom, with query selector
+    expect(container.querySelector('.react-select__single-value')).toHaveTextContent('test1');
+    // want to test for speeds but not showing up?
+    // screen.debug is only what is rendered, so no functions
+    // test to see if setSpeed is called
+    //
+    // screen.debug();
+  });
+
+  //   test 2: test to see if functions are called properly on changes.
+  //   test('setSpeed mock function is called correctly when speed is changed', () => {
+  //     const currSpeed = speeds[0];
+  //     const { container } = render(
+  //       <Dropdown speeds={speeds} setSpeed={setSpeed} selectedSpeed={currSpeed} />,
+  //     );
+  //     // grab the dropdown
+  //     const dropdown = container.querySelector('.react-select__input');
+  //     // console.log(dropdown);
+  //     // select new speed from speeds arr
+  //     fireEvent.mouseDown(dropdown);
+  //     // const newSpeed = speeds[1];
+  //     const newSpeed = container.querySelector('[data-value="2"]');
+  //     // console.log('new speed', newSpeed);
+  //     fireEvent.click(newSpeed);
+  //     // check to see that setspeeds has been called with the new speed.
+  //     expect(setSpeed).toHaveBeenCalled();
+  //     expect(setSpeed).toHaveBeenCalledWith(speeds[1]);
+
+  //     // check to see if new speed is rendered on the dom or something
+  //   });
+});

src/app/__tests__zo/TravelContainer.test.tsx

@@ -0,0 +1,105 @@
+/// in progress
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import TravelContainer from '../containers/TravelContainer';
+import MainSlider from '../components/MainSlider';
+// import {mockMainSlider} from '../components/__mocks__/MainSlider'
+import { useStoreContext } from '../store';
+import { TravelContainerProps } from '../components/FrontendTypes';
+import MainContainer from '../containers/MainContainer';
+import Dropdown from '../components/Dropdown';
+
+const state = {
+  tabs: {
+    87: {
+      snapshots: [0, 1, 2, 3], // because snapshot index starts at 0
+      sliderIndex: 3,
+      playing: false,
+    },
+  },
+  currentTab: 87,
+};
+
+// mock play?
+const play = jest.fn(() => console.log('legit'));
+// play.mockImplementation(() => console.log('legit'));
+
+const dispatch = jest.fn();
+useStoreContext.mockImplementation(() => [state, dispatch]);
+
+// jest.mock mocks a module - all exports of this module are basically set to jest.fn()
+jest.mock('../store');
+
+// mocking the Mainslider component to return div with MockSlider in it
+const mockSlider = jest.fn();
+jest.mock('../components/MainSlider', () => (props) => {
+  mockSlider(props);
+  return <div>MockSlider</div>;
+});
+const mockDropDown = jest.fn();
+
+// mocking the dropdown component to return div with mockDropDown in it
+jest.mock('../components/Dropdown', () => (props) => {
+  mockDropDown(props);
+  return <div>mockDropDown</div>;
+});
+
+describe('testing the TravelContainer module', () => {
+  // nested blocks.
+  // high level block, test that the play button exists, slider gets renders, dropdown gets rendered.
+  // nested: play button. when paused vs not. starts at a condition, then pressed is changed into another condition.
+
+  // before each, clear usestorcontext and dispatch
+  beforeEach(() => {
+    useStoreContext.mockClear(); // need to think about if mockClear is the correct item here
+    dispatch.mockClear();
+    render(<TravelContainer snapshotsLength={0} />);
+  });
+
+  // screen.debug();
+
+  test('first button contains text Play', () => {
+    let buttons = screen.getAllByRole('button');
+    // console.log('this is buttons', buttons);
+    expect(buttons[0]).toHaveTextContent('Play');
+    // screen.debug();
+  });
+
+  test('MainSlider exists in document', () => {
+    expect(screen.getByText('MockSlider')).toBeInTheDocument();
+  });
+  test('Dropdown exists in document', () => {
+    expect(screen.getByText('mockDropDown')).toBeInTheDocument();
+  });
+});
+
+describe('Testing play/pause button', () => {
+  test('Play button is rendered', () => {
+    render(<TravelContainer snapshotsLength={0} />);
+    const playButton = screen.getByTestId('play-button-test');
+    expect(playButton).toBeInTheDocument();
+  });
+  test('Play initially says Play', () => {
+    render(<TravelContainer snapshotsLength={0} />);
+    const playButton = screen.getByTestId('play-button-test');
+    expect(playButton.textContent).toBe('Play');
+  });
+  test('Play says Pause when `Playing` is set to False', () => {
+    state.tabs[87].playing = true;
+    render(<TravelContainer snapshotsLength={0} />);
+    const playButton = screen.getByTestId('play-button-test');
+    expect(playButton.textContent).toBe('Pause');
+    // manually reset to default test state?
+    state.tabs[87].playing = false;
+  });
+  // make an onclick that changes state?
+  // test('clicking button changes state', () => {
+  //   render(<TravelContainer snapshotsLength={0} />);
+  //   const playButton = screen.getByTestId('play-button-test');
+  //   fireEvent.click(playButton);
+  //   // render(<TravelContainer snapshotsLength={0} />);
+  //   expect(state.tabs[87].playing).toBe(true);
+  // });
+});

src/app/containers/TravelContainer.tsx

@@ -20,7 +20,7 @@ const speeds: {
   { value: 2000, label: '0.5x' },
   { value: 1000, label: '1.0x' },
   { value: 500, label: '2.0x' },
-];  
+];
 
 // start slider movement
 function play(
@@ -62,6 +62,7 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       <button
         className='play-button'
         type='button'
+        data-testid='play-button-test'
         onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
       >
         {playing ? 'Pause' : 'Play'}