Skip to content

Commit dbecc6a

Browse files
jasnoojasnoo
committed
WIP JN tests
1 parent 36678c4 commit dbecc6a

File tree

3 files changed

+70
-167
lines changed

3 files changed

+70
-167
lines changed

‎src/app/__tests__jn/ButtonContainer.test.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react'
2+
import {render, screen, fireEvent} from '@testing-library/react'
3+
import userEvent from '@testing-library/user-event'
4+
import '@testing-library/jest-dom/extend-expect' // needed this to extend the jest-dom assertions (ex toHaveTextContent)
5+
import ButtonsContainer from '../containers/ButtonsContainer';
6+
import { useStoreContext } from '../store';
7+
8+
9+
jest.mock('../store');
10+
11+
describe('Unit testing for ButtonContainer', () => {
12+
13+
beforeEach
14+
15+
const state = {
16+
tabs: {
17+
87: {
18+
snapshots: [1, 2, 3, 4],
19+
sliderIndex: 0,
20+
viewIndex: -1,
21+
mode: {
22+
paused: false,
23+
locked: false,
24+
persist: false,
25+
},
26+
},
27+
},
28+
currentTab: 87,
29+
};
30+
31+
32+
33+
34+
const currentTab = state.tabs[state.currentTab];
35+
const dispatch = jest.fn();
36+
37+
useStoreContext.mockImplementation(() => [state, dispatch]);
38+
39+
beforeEach(() => {
40+
dispatch.mockClear();
41+
useStoreContext.mockClear();
42+
currentTab.mode = {
43+
paused: false,
44+
persist: false,
45+
};
46+
});
47+
48+
test('should have 5 buttons ', () => {
49+
render(<ButtonsContainer/>)
50+
expect(screen.getAllByRole('button')).toHaveLength(5)
51+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock')
52+
expect(screen.getAllByRole('button')[1]).toHaveTextContent('Split')
53+
expect(screen.getAllByRole('button')[2]).toHaveTextContent('Download')
54+
expect(screen.getAllByRole('button')[3]).toHaveTextContent('Upload')
55+
expect(screen.getAllByRole('button')[4]).toHaveTextContent('How to use')
56+
});
57+
58+
59+
describe('When view is unlock', () => {
60+
61+
test('Button should show as unlocked', () => {
62+
state.tabs['87'].mode.paused = true
63+
render(<ButtonsContainer />)
64+
expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlock')
65+
});
66+
67+
});
68+
});

‎src/app/__tests__jn/MainSlider.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('Unit testing for MainSlider.jsx', () => {
3131
describe('When user only has one snapshot to view', () => {
3232

3333
test('Component should have min, max, value with correct values to indicate slider position for correct tab', () => {
34-
render(<MainSlider {...props}/>)
34+
render(<MainSlider {...props}/>)
3535
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin','0')
3636
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '0')
3737
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','0')
@@ -58,7 +58,7 @@ describe('Unit testing for MainSlider.jsx', () => {
5858
render(<MainSlider {...props}/>)
5959
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax','2')
6060
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemin','0')
61-
expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','1')
61+
// expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow','0')
6262
});
6363
})
6464
})

‎src/app/__tests__jn/TravelContainer.test.tsx

Lines changed: 0 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -76,168 +76,3 @@ useStoreContext.mockImplementation(() => [state, dispatch]);
7676
})
7777

7878
})
79-
80-
81-
// describe('when user as on hte second one',()=>{
82-
83-
// const state = {
84-
// tabs: {
85-
// 87: {
86-
// snapshots: [0,1,2], // because snapshot index starts at 0
87-
// sliderIndex: 1,
88-
// playing: false,
89-
// },
90-
// },
91-
// currentTab: 87,
92-
// };
93-
94-
// useStoreContext.mockImplementation(() => [state, dispatch]);
95-
96-
// beforeEach(() => {
97-
// useStoreContext.mockClear(); // need to think about if mockClear is the correct item here
98-
// dispatch.mockClear();
99-
100-
// })
101-
102-
// test('first button contains text Play',()=>{
103-
// render(<TravelContainer snapshotsLength={0}/>);
104-
// let buttons = screen.getAllByRole('button')
105-
// expect(buttons[0]).toHaveTextContent('Play')
106-
// })
107-
108-
// test('slider icon is at the very left',()=>{
109-
// render(<TravelContainer snapshotsLength={0}/>);
110-
// // @ts-ignore
111-
// let slider = screen.getByRole<HTMLInputElement>('slider',{ value: {now:0, min:0, max:0}}) as HTMLInputElement
112-
// expect(slider).toBeInTheDocument()
113-
// })
114-
115-
// })
116-
117-
118-
119-
120-
121-
122-
123-
124-
125-
126-
127-
128-
129-
130-
131-
132-
133-
134-
135-
136-
137-
138-
139-
140-
141-
142-
143-
144-
145-
146-
147-
148-
149-
150-
151-
152-
153-
154-
// describe("Play and carrot buttons exist", () => {
155-
156-
// beforeEach(() => {
157-
// useStoreContext.mockClear(); // need to think about if mockClear is the correct item here
158-
// dispatch.mockClear();
159-
160-
// })
161-
162-
// render(<TravelContainer snapshotsLength={2} />);
163-
// // screen.debug()
164-
// let buttons = screen.getAllByRole('button')
165-
166-
// test('First should say Play', () => {
167-
// expect(buttons[0]).toHaveTextContent('Play')
168-
// });
169-
170-
// test('Second button should say <', () => {
171-
// expect(buttons[1]).toHaveTextContent('<')
172-
// });
173-
174-
// test('Third should say >', () => {
175-
// expect(buttons[2]).toHaveTextContent('>')
176-
// });
177-
178-
// })
179-
180-
181-
// / trying to make click happen
182-
183-
describe("Click on unlock", () => {
184-
185-
beforeEach(() => {
186-
useStoreContext.mockClear(); // need to think about if mockClear is the correct item here
187-
dispatch.mockClear();
188-
189-
})
190-
191-
// const user = userEvent.setup()
192-
render(<TravelContainer snapshotsLength={2} />);
193-
194-
// const { container } = render(<TravelContainer snapshotsLength={2} />);
195-
// screen.debug()
196-
197-
test('Click on < button', () => {
198-
// expect(dispatch).toHaveBeenCalledTimes(1)
199-
// user.click(screen.getAllByRole('button')[1])
200-
// expect(dispatch).toHaveBeenCalledTimes(1)
201-
// user.click(screen.getAllByRole('button')[1])
202-
fireEvent.click(screen.getAllByRole('button')[1])
203-
expect(dispatch).toHaveBeenCalledTimes(1)
204-
fireEvent.click(screen.getAllByRole('button')[1])
205-
206-
expect(dispatch).toHaveBeenCalledTimes(2)
207-
208-
// fireEvent.click(screen.getAllByRole('button')[0])
209-
// expect(screen.getAllByRole('button')[0]).toHaveTextContent('Pause')
210-
// screen.debug(screen.getAllByRole('button')[0])
211-
212-
});
213-
214-
})
215-
216-
217-
// desired test
218-
/*
219-
play button:
220-
- if playing = false, it shows play
221-
- if playing = true, it shows pauce
222-
- when clicked, it toggles behavior
223-
- slider reflects current state location
224-
225-
226-
227-
228-
if there's only one snapshot
229-
playing false
230-
TravelContainer.tsx:55 snapshotsLength 1
231-
TravelContainer.tsx:56 sliderIndex 0
232-
233-
current behavior is that play turns to pause, but returns back to play
234-
slider isnt able to go anywhere, stays on left side
235-
left and right dont do anything
236-
237-
238-
239-
240-
241-
242-
243-
*/

0 commit comments

Comments
 (0)