Skip to content

Commit bb062a6

Browse files
Luis-KM-LoLuis-KM-Lo
authored
Merge pull request #51 from oslabs-beta/v4_stage
V4 stage
2 parents 63b4084 + 6b15736 commit bb062a6

File tree

6 files changed

+199
-154
lines changed

6 files changed

+199
-154
lines changed

‎src/components/ReduxTestComponent/ActionCreator/ActionCreator.jsx‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,29 +48,17 @@ const ActionCreator = ({ actionCreator, index }) => {
4848
<h3>Action Creator</h3>
4949
</div>
5050

51-
{/* <div id={styles.filesFlexBox}>
51+
<div id={styles.filesFlexBox}>
5252
<div id={styles.files}>
53-
<label htmlFor='actionsFolder'>Import Actions From</label>
54-
<SearchInput
55-
options={Object.keys(filePathMap)}
56-
dispatch={dispatchToReduxTestCase}
57-
updateActionsFilePath={updateActionsFilePath}
58-
id={actionCreator.id}
59-
filePathMap={filePathMap}
60-
/>
61-
</div>
62-
63-
<div id={styles.files}>
64-
<label htmlFor='typesFolder'>Import Action Types From</label>
65-
<SearchInput
66-
options={Object.keys(filePathMap)}
67-
dispatch={dispatchToReduxTestCase}
68-
updateTypesFilePath={updateTypesFilePath}
69-
id={actionCreator.id}
70-
filePathMap={filePathMap}
53+
<label htmlFor='it'>It should...</label>
54+
<input
55+
type='text'
56+
id='it'
57+
onChange={(e) => handleChangeActionCreatorFields(e, 'it')}
58+
placeholder='e.g.should return expected action'
7159
/>
7260
</div>
73-
</div> */}
61+
</div>
7462

7563
<div id={styles.actionFlexBox}>
7664
<div id={styles.actions}>

‎src/components/ReduxTestComponent/Thunk/Thunk.jsx‎

Lines changed: 96 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,7 @@ import { Draggable } from 'react-beautiful-dnd';
33
import styles from './Thunk.module.scss';
44
import { GlobalContext } from '../../../context/reducers/globalReducer';
55
import { ReduxTestCaseContext } from '../../../context/reducers/reduxTestCaseReducer';
6-
import {
7-
deleteAsync,
8-
updateAsync,
9-
updateActionsFilePath,
10-
updateTypesFilePath,
11-
} from '../../../context/actions/reduxTestCaseActions';
12-
import ToolTipAsync from '../../ToolTip/ToolTipAsync';
13-
import SearchInput from '../../SearchInput/SearchInput';
6+
import { deleteAsync, updateAsync } from '../../../context/actions/reduxTestCaseActions';
147

158
const closeIcon = require('../../../assets/images/close.png');
169
const dragIcon = require('../../../assets/images/drag-vertical.png');
@@ -45,41 +38,96 @@ const Async = ({ async, index }) => {
4538
<img src={dragIcon} alt='drag' />
4639
<h3>Asynchronous Action Creator</h3>
4740
</div>
41+
<div id={styles.groupFlexbox}>
42+
<div id={styles.labelInput}>
43+
<label htmlFor='it'>It should...</label>
44+
<input
45+
type='text'
46+
name='it'
47+
placeholder='eg/ should return expected action'
48+
onChange={(e) => handleChangeAsyncFields(e, 'it')}
49+
/>
50+
</div>
51+
</div>
4852

49-
{/* <div id={styles.groupFlexbox}>
53+
<div id={styles.groupFlexbox}>
5054
<div id={styles.labelInput}>
51-
<label htmlFor='actionsFile'>Import Actions From</label>
52-
<SearchInput
53-
options={Object.keys(filePathMap)}
54-
dispatch={dispatchToReduxTestCase}
55-
updateActionsFilePath={updateActionsFilePath}
56-
id={async.id}
57-
filePathMap={filePathMap}
55+
<label htmlFor='asyncFunction'>Thunk Action Creator</label>
56+
<input
57+
type='text'
58+
name='asyncFunction'
59+
onChange={(e) => handleChangeAsyncFields(e, 'asyncFunction')}
5860
/>
5961
</div>
6062

6163
<div id={styles.labelInput}>
62-
<label htmlFor='typesFile'>Import Actions Types From</label>
63-
<SearchInput
64-
options={Object.keys(filePathMap)}
65-
dispatch={dispatchToReduxTestCase}
66-
updateTypesFilePath={updateTypesFilePath}
67-
id={async.id}
68-
filePathMap={filePathMap}
64+
<label htmlFor='actionType'>Action Type Of Expected Action</label>
65+
<input
66+
type='text'
67+
id='actionType'
68+
onChange={(e) => handleChangeAsyncFields(e, 'actionType')}
69+
placeholder='e.g. ADD_TODO'
6970
/>
7071
</div>
71-
</div> */}
72+
</div>
7273

7374
<div id={styles.groupFlexbox}>
7475
<div id={styles.labelInput}>
75-
<label htmlFor='asyncFunction'>Async Function</label>
76+
<label htmlFor='expectedArg'>argument 1</label>
77+
<div id={styles.inputFlexBox}>
78+
<input
79+
type='text'
80+
name='expectedArg'
81+
placeholder='e.g. response'
82+
onChange={(e) => handleChangeAsyncFields(e, 'expectedArg')}
83+
/>
84+
</div>
85+
</div>
86+
<div id={styles.dropdownWrapper}>
87+
<label htmlFor='responseType'>Type</label>
88+
<div id={styles.dropdownFlex}>
89+
<select
90+
id='responseType'
91+
value={async.responseType}
92+
onChange={(e) => handleChangeAsyncFields(e, 'responseType')}
93+
>
94+
<option value='' />
95+
<option value='word'>word</option>
96+
<option value='words'>words</option>
97+
<option value='number'>number</option>
98+
<option value='arrayElement'>arrayElement</option>
99+
<option value='objectElement'>objectElement</option>
100+
</select>
101+
</div>
102+
</div>
103+
<div id={styles.labelInput}>
104+
<label htmlFor='payloadKey'>argument 2</label>
76105
<input
77106
type='text'
78-
name='asyncFunction'
79-
onChange={(e) => handleChangeAsyncFields(e, 'asyncFunction')}
107+
id='payloadKey'
108+
onChange={(e) => handleChangeAsyncFields(e, 'payloadKey')}
109+
placeholder='e.g. todo'
80110
/>
81111
</div>
112+
<div id={styles.dropdownWrapper}>
113+
<label htmlFor='payloadType'>Type</label>
114+
<div id={styles.dropdownFlex}>
115+
<select
116+
id='payloadType'
117+
onChange={(e) => handleChangeAsyncFields(e, 'payloadType')}
118+
>
119+
<option value='' />
120+
<option value='word'>word</option>
121+
<option value='words'>words</option>
122+
<option value='number'>number</option>
123+
<option value='arrayElement'>arrayElement</option>
124+
<option value='objectElement'>objectElement</option>
125+
</select>
126+
</div>
127+
</div>
128+
</div>
82129

130+
<div id={styles.groupFlexbox}>
83131
<div id={styles.dropdownWrapper}>
84132
<label htmlFor='method'>Method</label>
85133
<div id={styles.dropdownFlex}>
@@ -109,75 +157,30 @@ const Async = ({ async, index }) => {
109157
</div>
110158
</div>
111159

112-
<div id={styles.groupFlexbox}>
113-
<div id={styles.labelInput}>
114-
<label htmlFor='requestBody'>Request Body</label>
115-
<div id={styles.inputFlexBox}>
116-
<input
117-
type='text'
118-
name='requestBody'
119-
onChange={(e) => handleChangeAsyncFields(e, 'requestBody')}
120-
/>
121-
<span id={styles.hastooltip} role='tooltip'>
122-
<img src={questionIcon} alt='help' />
123-
<span id={styles.tooltip}>
124-
<ToolTipAsync toolTipType={`object`} />
125-
</span>
126-
</span>
160+
{async.responseType === 'object' ? (
161+
<div id={styles.groupFlexbox}>
162+
<div id={styles.labelInput}>
163+
<label htmlFor='responseKey'>Response Key</label>
164+
<div id={styles.inputFlexBox}>
165+
<input
166+
type='text'
167+
name='responseKey'
168+
onChange={(e) => handleChangeAsyncFields(e, 'responseKey')}
169+
/>
170+
</div>
127171
</div>
128-
</div>
129-
130-
<div id={styles.labelInput}>
131-
<label htmlFor='store'>Store</label>
132-
<div id={styles.inputFlexBox}>
133-
<input
134-
type='text'
135-
name='store'
136-
onChange={(e) => handleChangeAsyncFields(e, 'store')}
137-
/>
138-
<span id={styles.hastooltip} role='tooltip'>
139-
<img src={questionIcon} alt='help' />
140-
<span id={styles.tooltip}>
141-
<ToolTipAsync toolTipType={`object`} />
142-
</span>
143-
</span>
172+
<div id={styles.labelInput}>
173+
<label htmlFor='responseValue'>Response Value</label>
174+
<div id={styles.inputFlexBox}>
175+
<input
176+
type='text'
177+
name='responseValue'
178+
onChange={(e) => handleChangeAsyncFields(e, 'responseValue')}
179+
/>
180+
</div>
144181
</div>
145182
</div>
146-
</div>
147-
148-
<div id={styles.groupFlexbox}>
149-
<div id={styles.dropdownWrapper}>
150-
<label htmlFor='matcher'>Matcher</label>
151-
<div id={styles.dropdownFlex}>
152-
<select
153-
id='matcher'
154-
value={async.matcher}
155-
onChange={(e) => handleChangeAsyncFields(e, 'matcher')}
156-
>
157-
<option value='' />
158-
<option value='toEqual'>toEqual</option>
159-
<option value='toContainEqual'>toContainEqual</option>
160-
</select>
161-
</div>
162-
</div>
163-
164-
<div id={styles.labelInput}>
165-
<label htmlFor='expectedResponse'>Expected Response</label>
166-
<div id={styles.inputFlexBox}>
167-
<input
168-
type='text'
169-
name='expectedResponse'
170-
onChange={(e) => handleChangeAsyncFields(e, 'expectedResponse')}
171-
/>
172-
<span id={styles.hastooltip} role='tooltip'>
173-
<img src={questionIcon} alt='help' />
174-
<span id={styles.tooltip}>
175-
<ToolTipAsync toolTipType={`expectedResponse`} />
176-
</span>
177-
</span>
178-
</div>
179-
</div>
180-
</div>
183+
) : null}
181184
</div>
182185
)}
183186
</Draggable>

‎src/components/TestCase/ReduxTestStatements.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const ReduxTestStatements = () => {
7979
updateActionsFilePath,
8080
null,
8181
'action-creator',
82-
'Import Actions from'
82+
'Import Action Creators From'
8383
);
8484
aCImports = (
8585
<div id={styles.reducerNameFlexBox}>
@@ -102,7 +102,7 @@ const ReduxTestStatements = () => {
102102
updateActionsFilePath,
103103
null,
104104
'async',
105-
'Import Actions from'
105+
'Import Action Creators From'
106106
);
107107
asyncImports = (
108108
<div id={styles.reducerNameFlexBox}>

‎src/context/reducers/reduxTestCaseReducer.ts‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const createActionCreator = () => {
4040
actionType: '',
4141
payloadKey: null,
4242
payloadType: null,
43+
it: '',
4344
};
4445
};
4546
const createAsync = () => {
@@ -54,10 +55,16 @@ const createAsync = () => {
5455
asyncFunction: '',
5556
method: '',
5657
route: '',
57-
requestBody: '',
58+
// requestBody: '',
5859
store: '',
5960
matcher: '',
60-
expectedResponse: '',
61+
status: '',
62+
actionType: '',
63+
payloadKey: '',
64+
payloadType: '',
65+
responseKey: '',
66+
responseValue: '',
67+
it: '',
6168
};
6269
};
6370
const createReducer = () => {
@@ -146,6 +153,7 @@ export const reduxTestCaseReducer = (state = reduxTestCaseState, action: any) =>
146153
statement.payloadKey = action.payload.payloadKey;
147154
statement.payloadType = action.payload.payloadType;
148155
statement.actionType = action.payload.actionType;
156+
statement.it = action.payload.it;
149157
}
150158
return statement;
151159
});
@@ -174,10 +182,18 @@ export const reduxTestCaseReducer = (state = reduxTestCaseState, action: any) =>
174182
statement.typesFilePath = action.payload.typesFilePath;
175183
statement.method = action.payload.method;
176184
statement.route = action.payload.route;
177-
statement.requestBody = action.payload.requestBody;
185+
// statement.requestBody = action.payload.requestBody;
178186
statement.store = action.payload.store;
179187
statement.matcher = action.payload.matcher;
180-
statement.expectedResponse = action.payload.expectedResponse;
188+
statement.status = action.payload.status;
189+
statement.actionType = action.payload.actionType;
190+
statement.payloadKey = action.payload.payloadKey;
191+
statement.payloadType = action.payload.payloadType;
192+
statement.responseKey = action.payload.responseKey;
193+
statement.responseValue = action.payload.responseValue;
194+
statement.responseType = action.payload.responseType;
195+
statement.it = action.payload.it;
196+
statement.expectedArg = action.payload.expectedArg;
181197
}
182198
return statement;
183199
});

0 commit comments

Comments
 (0)