Skip to content

Commit ea02a9a

Browse files
AndrewByunAndrewByun
authored
Merge pull request #22 from oslabs-beta/featurekelvin
Featurekelvin
2 parents 36ea43d + 362b1a1 commit ea02a9a

File tree

5 files changed

+202
-89
lines changed

5 files changed

+202
-89
lines changed

‎src/app/RTKslices.tsx

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const findName = (index, obj) => {
2424
objChildArray.push(findName(index, objChild));
2525
}
2626
}
27+
console.log(objChildArray);
2728
// eslint-disable-next-line no-restricted-syntax
2829
for (const objChildName of objChildArray) {
2930
if (objChildName) {
@@ -170,17 +171,44 @@ export const mainSlice = createSlice({
170171

171172
changeView: (state, action) => {
172173
const {tabs, currentTab} = state;
174+
console.log('this is state:', current(state))
175+
console.log('this is tabs:', current(tabs))
176+
console.log('this is currentabs:', currentTab)
177+
console.log('this is tabs[currentab]', current(tabs[currentTab]))
173178
const {viewIndex} = tabs[currentTab] || {};
174-
179+
console.log('hi this is viewIndex:', viewIndex);
180+
console.log('this is action payload', action.payload)
175181
tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
182+
// if (viewIndex === action.payload) tabs[currentTab].viewIndex = -1;
183+
// else tabs[currentTab].viewIndex = action.payload;
184+
// tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
185+
186+
// case types.CHANGE_VIEW: {
187+
// // unselect view if same index was selected
188+
// // console.log('action:', action)
189+
// // console.log('state: ', state)
190+
// if (viewIndex === action.payload) tabs[currentTab].viewIndex = -1;
191+
// else tabs[currentTab].viewIndex = action.payload;
192+
// // update currLocation
193+
// // tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
194+
// break;
195+
// }
196+
176197
},
177198

178199
changeSlider: (state, action) => {
179200
const { port, currentTab, tabs } = state;
180201
const { hierarchy, snapshots } = tabs[currentTab] || {};
181202

203+
console.log('this is PORT', port);
204+
console.log('this is hierarchy', current(hierarchy));
205+
console.log('this is SNapshots', current(snapshots));
206+
182207
const nameFromIndex = findName(action.payload, hierarchy);
183208

209+
console.log('this is action payload', action.payload);
210+
console.log('this is nameFromIndex', nameFromIndex);
211+
184212
port.postMessage({
185213
action: 'jumpToSnap',
186214
payload: snapshots[action.payload],
@@ -412,7 +440,6 @@ export const mainSlice = createSlice({
412440
// Runs if series name input box is active.
413441
// Updates chrome local storage with the newly saved series. Console logging the seriesArray grabbed from local storage may be helpful.
414442
if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
415-
416443
let seriesArray: any = localStorage.getItem('project');
417444
seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
418445
newSeries.name = newSeriesName;

‎src/app/__tests__/ActionContainer.test.tsx

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
22
/* eslint-disable react/jsx-filename-extension */
33
import React from 'react';
4-
import { render, screen, fireEvent } from '@testing-library/react';
4+
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
55
import '@testing-library/jest-dom/extend-expect';
66
import ActionContainer from '../containers/ActionContainer';
7-
import { useStoreContext } from '../store';
7+
// import { useStoreContext } from '../store';
88
import TravelContainer from '../containers/TravelContainer';
9+
import { Provider, useDispatch, useSelector } from 'react-redux';
10+
import { store } from '../RTKstore';
11+
//so far i have imported provider, usedispatch, useselector, and store
12+
//wrapped components in provider
13+
14+
const render = component => rtlRender(
15+
<Provider store={store}>
16+
{component}
17+
</Provider>
18+
)
919

1020
const state = {
1121
tabs: {
@@ -105,14 +115,36 @@ const state = {
105115
},
106116
currentTab: 87,
107117
};
108-
118+
//creates jest mock function to simulate behavior of functions/methods
109119
const dispatch = jest.fn();
120+
121+
//TESTING OUR CODE HERRE
122+
123+
124+
125+
126+
//ORGINAL CODE HERE
127+
110128
jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
111129
jest.mock('../store');
112130

131+
//jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());:
132+
//This line spies on the useEffect function from React, replacing it with a mocked implementation that returns an empty Jest mock function,
133+
//effectively disabling its actual side effects during testing.
134+
135+
//jest.mock('../store');:
136+
//This line mocks the import of a module located at '../store', which can be useful to isolate components from real Redux store behavior
137+
//and provide custom mock behavior for testing purposes.
138+
139+
113140
const mockeduseStoreContext = jest.mocked(useStoreContext);
114141
mockeduseStoreContext.mockImplementation(() => [state, dispatch]);
142+
// jest.mocked(useStoreContext): This part of the code uses Jest's jest.mocked function to create a mocked version of the useStoreContext function. The jest.mocked function is used to mock functions and methods. It creates a mock that can be configured with custom behavior.
115143

144+
// mockeduseStoreContext.mockImplementation(() => [state, dispatch]): After creating the mock, this line configures the mock to implement a specific behavior. In this case, it specifies that when useStoreContext is called, it should return an array containing two values: state and dispatch.
145+
146+
147+
////////////////////////////////////////////////////////////////////////////////////
116148
const MockRouteDescription = jest.fn();
117149
jest.mock('../components/RouteDescription', () => () => {
118150
MockRouteDescription();
@@ -129,37 +161,43 @@ describe('unit testing for ActionContainer', () => {
129161
beforeEach(() => {
130162
mockeduseStoreContext.mockClear();
131163
dispatch.mockClear();
132-
render(<ActionContainer actionView={true} />);
164+
render(
165+
<ActionContainer actionView={true} />
166+
)
133167
});
134168

135169
test('Expect top arrow to be rendered', () => {
136170
expect(screen.getByRole('complementary')).toBeInTheDocument();
137171
});
138172

139-
test('Expect RouteDescription to be rendered', () => {
140-
expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
141-
});
173+
// test('Expect RouteDescription to be rendered', () => {
174+
// expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
175+
// });
142176

143-
test('Expect SwitchApp to be rendered', () => {
144-
expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
145-
});
177+
// test('Expect SwitchApp to be rendered', () => {
178+
// expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
179+
// });
146180

147-
test('Click works on clear button', () => {
148-
fireEvent.click(screen.getAllByRole('button')[0]);
149-
expect(dispatch).toHaveBeenCalledTimes(1);
150-
});
151-
});
181+
// test('Click works on clear button', () => {
182+
// fireEvent.click(screen.getAllByRole('button')[0]);
183+
// expect(dispatch).toHaveBeenCalledTimes(1);
184+
// });
185+
// });
152186

153-
describe('integration testing for ActionContainer', () => {
154-
beforeEach(() => {
155-
mockeduseStoreContext.mockClear();
156-
dispatch.mockClear();
157-
render(<ActionContainer actionView={true} />);
158-
render(<TravelContainer snapshotsLength={0} />);
159-
});
187+
// describe('integration testing for ActionContainer', () => {
188+
// beforeEach(() => {
189+
// mockeduseStoreContext.mockClear();
190+
// dispatch.mockClear();
191+
// render(
192+
// <ActionContainer actionView={true} />
193+
// )
194+
// render(
195+
// <TravelContainer snapshotsLength={0} />
196+
// )
197+
// });
160198

161-
test('Slider resets on clear button', () => {
162-
fireEvent.click(screen.getAllByRole('button')[0]);
163-
expect(screen.getByRole('slider')).toHaveStyle('left: 0');
164-
});
199+
// test('Slider resets on clear button', () => {
200+
// fireEvent.click(screen.getAllByRole('button')[0]);
201+
// expect(screen.getByRole('slider')).toHaveStyle('left: 0');
202+
// });
165203
});

‎src/app/__tests__/action.test.tsx

Lines changed: 95 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
import React from 'react';
2-
import { render, screen, fireEvent } from '@testing-library/react';
3-
import user from '@testing-library/user-event';
2+
import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
3+
// import user from '@testing-library/user-event'; //might be unused
44
import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions (ex toHaveTextContent)
55
import Action from '../components/Action';
6-
import { changeView, changeSlider } from '../actions/actions';
6+
import { changeView, changeSlider } from '../RTKslices';
7+
import { Provider, useDispatch } from 'react-redux';
8+
import { store } from '../RTKstore'; //importing store for testing to give us access to Redux Store we configured
9+
710

811
// @ts-ignore
912
Action.cleanTime = jest.fn().mockReturnValue();
1013

11-
describe('unit testing for Action.tsx', () => {
14+
const render = component => rtlRender(
15+
<Provider store={store}>
16+
{component}
17+
</Provider>
18+
)
19+
20+
21+
describe('Unit testing for Action.tsx', () => {
1222
const props = {
1323
key: 'actions2',
1424
selected: true,
@@ -36,65 +46,100 @@ describe('unit testing for Action.tsx', () => {
3646
});
3747

3848
describe('When a component is shown on the page', () => {
39-
test('Action snapshot should be shown as Snapshot: 3.0', () => {
40-
render(<Action {...props} />);
41-
expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
42-
});
49+
// test('Action snapshot should be shown as Snapshot: 3.0', () => {
50+
// render(
51+
// <Action {...props} />
52+
// );
53+
// expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
54+
// });
4355

44-
test('two buttons with time and Current when not at current snapshot', () => {
45-
props.isCurrIndex = true;
46-
render(<Action {...props} />);
47-
expect(screen.getAllByRole('button')).toHaveLength(2);
48-
expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50');
49-
expect(screen.getAllByRole('button')[1]).toHaveTextContent('Current');
50-
});
56+
// test('Two buttons with Time and Current when not at current snapshot', () => {
57+
// props.isCurrIndex = true;
58+
// render(
59+
// <Action {...props} />
60+
// );
61+
// expect(screen.getAllByRole('button')).toHaveLength(2);
62+
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('+00:03.50');
63+
// expect(screen.getAllByRole('button')[1]).toHaveTextContent('Current');
64+
// });
5165

52-
test('Action snapshot should be shown as Snapshot: 3.0', () => {
53-
render(<Action {...props} />);
54-
expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
55-
});
66+
// test('Action snapshot should be shown as Snapshot: 3.0', () => {
67+
// render(
68+
// <Action {...props} />
69+
// );
70+
// expect(screen.getByPlaceholderText('Snapshot: 3.0')).toBeInTheDocument();
71+
// });
5672

57-
test("when there's no duration data", () => {
58-
props.componentData = undefined;
59-
render(<Action {...props} />);
60-
expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');
61-
});
73+
// test("When there is no duration data", () => {
74+
// props.componentData = undefined;
75+
// render(
76+
// <Action {...props} />
77+
// );
78+
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('NO TIME');
79+
// });
6280

63-
test('When actualDuration exceeds 60, time should be formatted correctly', () => {
64-
props.componentData.actualDuration = 75;
65-
render(<Action {...props} />);
66-
expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00');
67-
});
81+
// test('When actualDuration exceeds 60, time should be formatted correctly', () => {
82+
// props.componentData.actualDuration = 75;
83+
// render(
84+
// <Action {...props} />
85+
// );
86+
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('+01:15.00');
87+
// });
6888

69-
test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => {
70-
render(<Action {...props} />);
71-
fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38});
72-
expect(props.handleOnkeyDown).toHaveBeenCalled();
73-
});
89+
// test('Using the ArrowUp key on Action snapshot should trigger handleOnKeyDown', () => {
90+
// render(
91+
// <Action {...props} />
92+
// );
93+
// fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowUp', code: 'ArrowUp', charCode: 38});
94+
// expect(props.handleOnkeyDown).toHaveBeenCalled();
95+
// });
7496

75-
test('Using the ArrowDown key on Action snapshot should trigger handleOnKeyDown', () => {
76-
render(<Action {...props} />);
77-
fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowDown', code: 'ArrowDown', charCode: 40});
78-
expect(props.handleOnkeyDown).toHaveBeenCalled();
79-
});
97+
// test('Using the ArrowDown key on Action snapshot should trigger handleOnKeyDown', () => {
98+
// render(
99+
// <Action {...props} />
100+
// );
101+
// fireEvent.keyDown(screen.getByRole('presentation'), {key: 'ArrowDown', code: 'ArrowDown', charCode: 40});
102+
// expect(props.handleOnkeyDown).toHaveBeenCalled();
103+
// });
80104

81-
test('Using the Enter key on Action snapshot should trigger handleOnKeyDown', () => {
82-
render(<Action {...props} />);
83-
fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13});
84-
expect(props.handleOnkeyDown).toHaveBeenCalled();
85-
});
105+
// test('Using the Enter key on Action snapshot should trigger handleOnKeyDown', () => {
106+
// render(
107+
// <Action {...props} />
108+
// );
109+
// fireEvent.keyDown(screen.getByRole('presentation'), {key: 'Enter', code: 'Enter', charCode: 13});
110+
// expect(props.handleOnkeyDown).toHaveBeenCalled();
111+
// });
86112

87-
test('Clicking the snapshot should trigger onClick', () => {
88-
render(<Action {...props} />);
89-
fireEvent.click(screen.getByRole('presentation'));
90-
expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));;
91-
});
113+
// test('Clicking the snapshot should trigger onClick', () => {
114+
// render(
115+
// <Action {...props} />
116+
// )
117+
// fireEvent.click(screen.getByRole('presentation'));
118+
// expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));;
119+
// });
92120

93121
test('Clicking Jump button should trigger changeSlider and changeView', () => {
94-
render(<Action {...props} />);
122+
render(
123+
<Action {...props} />
124+
);
95125
fireEvent.click(screen.getAllByRole('button')[1]);
96126
expect(props.dispatch).toHaveBeenCalledWith(changeSlider(props.index));
97127
expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));
98128
});
99129
});
100130
});
131+
132+
//these were the tests for 9 and 10 before our changes... in progress
133+
134+
// test('Clicking the snapshot should trigger onClick', () => {
135+
// render(<Action {...props} />);
136+
// fireEvent.click(screen.getByRole('presentation'));
137+
// expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));;
138+
// });
139+
140+
// test('Clicking Jump button should trigger changeSlider and changeView', () => {
141+
// render(<Action {...props} />);
142+
// fireEvent.click(screen.getAllByRole('button')[1]);
143+
// expect(props.dispatch).toHaveBeenCalledWith(changeSlider(props.index));
144+
// expect(props.dispatch).toHaveBeenCalledWith(changeView(props.index));
145+
// });

‎src/app/containers/ActionContainer.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,10 @@ function ActionContainer(props): JSX.Element {
6262
obj.stateSnapshot.children[0].state && // with a 'state'
6363
obj.stateSnapshot.children[0].name // and a 'name'
6464
) {
65-
const newObj: Record<string, unknown> = { // we create a new Record object (whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type) and populate it's properties with relevant values from our argument 'obj'.
65+
const newObj: Record<string, unknown> = {
66+
// we create a new Record object (whose property keys are Keys and whose property values are Type.
67+
//This utility can be used to map the properties of a type to another type) and populate it's properties with
68+
//relevant values from our argument 'obj'.
6669
index: obj.index,
6770
displayName: `${obj.name}.${obj.branch}`,
6871
state: obj.stateSnapshot.children[0].state,

0 commit comments

Comments
 (0)