messing around with own testing file

Author: minzo-kim

src/app/__tests__zo/ZoTest.test.tsx

@@ -1,11 +1,13 @@
 // purpose of this file is to start testing front end/components using RTL
 import React from 'react';
-import { render, screen } from '@testing-library/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 Header from './ZoTest';
 import MainContainer from '../containers/MainContainer';
 import App from '../components/App';
 import SwitchAppDropdown from '../components/SwitchApp';
+import { useStoreContext } from '../store';
+import Dropdown from '../components/Dropdown';
 
 // notes: beforeAll? can render in here before then testing
 // after render, can check if the element that has been rendered has props of testing data.
@@ -14,53 +16,44 @@ import SwitchAppDropdown from '../components/SwitchApp';
 // but the component itself doesnt seem like it's in ts?
 
 // Instrinsic Attributes type is a built in TS type that represents defualt attributes like id, className, style
-// so maybe switchappdropdown needs be assigned a type instead of auto assigned intrinsic? 
+// so maybe switchappdropdown needs be assigned a type instead of auto assigned intrinsic?
+// jest.mock('../store');
 
-describe('Tests for components', () => {
-  describe('Testing Switchapp', () => {
-    let dropdown;
-    const props = {
-      currTab: {
-        label: 'Testing',
-        value: 12353,
-      },
-      styles: {},
-      options: [],
-    };
-    test('Testing', () => {
-      render(<SwitchAppDropdown value= />);
-    });
-  });
-});
-
-// return (
-//   <Select
-//     className='tab-select-container'
-//     classNamePrefix='tab-select'
-//     value={currTab}
-//     styles={customStyles}
-//     onChange={(e) => {
-//       dispatch(setTab(parseInt(e.value, 10)));
-//     }}
-//     options={tabsArray}
-//   />
-// );
-// describe('LabeledText', () => {
-//   let text;
-//   const props = {
-//     label: 'Mega',
-//     text: 'Markets',
+// describe('Test for switchapp file', () => {
+//   const state = {
+//     currentTab: 100,
+//     tabs: {
+//       100: {
+//         snapshots: [1, 2, 3, 4],
+//         viewIndex: 1,
+//         sliderIndex: 1,
+//         title: 'hello testing',
+//       },
+//     },
+//   };
+//   const dropdownCurrTabLabel = {
+//     value: 100,
+//     label: 'component',
 //   };
+//   // create a mock function, passed as param to mocked "useSToreContext" implementation
+//   const dispatch = jest.fn();
 
-//   beforeAll(() => {
-//     text = render(<LabeledText {...props} />)
+//   useStoreContext.mockImplementation(() => [state, dispatch]);
 
-//   });
+//   // beforeEach(() => {
+//   //   render(<SwitchAppDropdown />);
+//   //   // mock clear to clear data in between each assertion
+//   //   dispatch.mockClear;
+//   // });
+
+//   // describe('switchapp component render test', () => {
+//   //   fireEvent.change(screen.getByTestId('tab-select-container'), {});
+//   // });
 
-//   test('Renders the passed-in text with the label in bold', () => {
-//     expect(text.getByText("Mega:").nextSibling).toHaveTextContent('Markets');
-//     expect(text.getByText('Mega:')).toHaveStyle('font-weight: bold')
+//   it('SwitchApp component renders', () => {
+//     render(<SwitchAppDropdown />);
+//     screen.debug();
+//     // expect(screen.getByTestId('tab-select-container')).toHaveClass('tab-select-container');
+//     // expect(screen.getByTestId('tab-select-container')).toHaveValue(dropdownCurrTabLabel);
 //   });
-// console.log('currTab', currTab);
-// console.log('customStyles', customStyles);
-// console.log('tabsArray', tabsArray);
+// });