Skip to content

Commit a15d5d8

Browse files
bielchristobielchristo
authored
Merge pull request #19 from annieshinn/draggableReact
Implement Drag and Drop (DnD) in React Test Case
2 parents 733e060 + 050fb9a commit a15d5d8

File tree

6 files changed

+335
-242
lines changed

6 files changed

+335
-242
lines changed

‎src/components/ReactTestComponent/DescribeRenderer/DescribeRenderer.jsx‎

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef, useEffect } from 'react';
2-
import ItRenderer from '../ItRenderer/ItRenderer';
3-
// import { Draggable } from 'react-beautiful-dnd';
42
import cn from 'classnames';
3+
import { Draggable, Droppable } from 'react-beautiful-dnd';
4+
import ItRenderer from '../ItRenderer/ItRenderer';
55
import styles from './DescribeRenderer.module.scss';
66
import { deleteDescribeBlock, addItstatement } from '../../../context/actions/reactTestCaseActions';
77

@@ -12,7 +12,6 @@ const DescribeRenderer = ({
1212
describeBlocks,
1313
itStatements,
1414
statements,
15-
draggableStatements,
1615
handleChangeDescribeText,
1716
handleChangeItStatementText,
1817
type,
@@ -34,90 +33,75 @@ const DescribeRenderer = ({
3433
dispatcher(addItstatement(describeId));
3534
};
3635

37-
return draggableStatements.map((id, i) => {
36+
return describeBlocks.allIds.map((id, i) => {
3837
return (
39-
<div id={styles.describeBlock} key={i}>
40-
<label htmlFor='describe-label' className={styles.describeLabel}>
41-
Describe Block
42-
</label>
43-
44-
<i
45-
onClick={deleteDescribeBlockHandleClick}
46-
id={id}
47-
className={cn('far fa-window-close', styles.describeClose)}
48-
></i>
49-
<input
50-
ref={testDescription}
51-
id={id}
52-
className={styles.describeInput}
53-
name='describe-label'
54-
type='text'
55-
placeholder={'The component has basic functionality'}
56-
value={describeBlocks.byId[id].text || ''}
57-
onChange={handleChangeDescribeText}
58-
/>
59-
<div className={styles.separator}></div>
60-
<ItRenderer
61-
type={type}
62-
key={`it-${id}-${i}`}
63-
itStatements={itStatements}
64-
statements={statements}
65-
describeId={id}
66-
handleChangeItStatementText={handleChangeItStatementText}
67-
/>
68-
<div className={styles.buttonContainer}>
69-
<button className={styles.addIt} id={id} onClick={addItStatementHandleClick}>
70-
+It Statement
71-
</button>
72-
</div>
73-
</div>
74-
);
75-
});
76-
};
77-
78-
export default DescribeRenderer;
79-
80-
{
81-
/* <Draggable draggableId={`draggable-${id}-${i}`} index={i}>
38+
<Draggable
39+
key={id}
40+
draggableId={id}
41+
index={i}
42+
type="describe"
43+
>
8244
{(provided) => (
8345
<div
46+
id={styles.describeBlock}
8447
ref={provided.innerRef}
8548
{...provided.draggableProps}
8649
{...provided.dragHandleProps}
87-
id={styles.describeBlock}
88-
className={styles.describeBlock}
8950
>
9051
<label htmlFor='describe-label' className={styles.describeLabel}>
9152
Describe Block
9253
</label>
54+
9355
<i
9456
onClick={deleteDescribeBlockHandleClick}
9557
id={id}
9658
className={cn('far fa-window-close', styles.describeClose)}
9759
></i>
9860
<input
61+
ref={testDescription}
9962
id={id}
10063
className={styles.describeInput}
10164
name='describe-label'
10265
type='text'
10366
placeholder={'The component has basic functionality'}
104-
defaultValue={''}
10567
value={describeBlocks.byId[id].text || ''}
10668
onChange={handleChangeDescribeText}
10769
/>
10870
<div className={styles.separator}></div>
109-
<ItRenderer
110-
type={type}
111-
key={`it-${id}-${i}`}
112-
itStatements={itStatements}
113-
statements={statements}
114-
describeId={id}
115-
handleChangeItStatementText={handleChangeItStatementText}
116-
/>
71+
72+
<Droppable
73+
droppableId={"droppableReactIt" + id}
74+
type={id}
75+
>
76+
{(innerProvided) => (
77+
<div
78+
ref={innerProvided.innerRef}
79+
{...innerProvided.droppableProps}
80+
>
81+
{/* {JSON.stringify(provided)} */}
82+
<ItRenderer
83+
type={type}
84+
key={`it-${id}-${i}`}
85+
itStatements={itStatements}
86+
statements={statements}
87+
describeId={id}
88+
handleChangeItStatementText={handleChangeItStatementText}
89+
/>
90+
{innerProvided.placeholder}
91+
</div>
92+
)}
93+
</Droppable>
11794
<div className={styles.buttonContainer}>
118-
<button className={styles.addIt} id={id} onClick={addItStatementHandleClick}>+It Statement</button>
95+
<button className={styles.addIt} id={id} onClick={addItStatementHandleClick}>
96+
+It Statement
97+
</button>
11998
</div>
12099
</div>
100+
121101
)}
122-
</Draggable> */
123-
}
102+
</Draggable>
103+
);
104+
});
105+
};
106+
107+
export default DescribeRenderer;

‎src/components/ReactTestComponent/ItRenderer/ItRenderer.jsx‎

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useContext } from 'react';
22
import cn from 'classnames';
3+
import { Draggable } from 'react-beautiful-dnd';
34
import ReactTestStatements from '../../TestCase/ReactTestStatements';
45
import CustomInput from '../CustomInput/CustomInput';
56
import {
@@ -20,11 +21,6 @@ const ItRenderer = ({
2021
}) => {
2122
const [, dispatchToReactTestCase] = useContext(ReactTestCaseContext);
2223

23-
// filter out ids not belonging to the correct describe block
24-
const filteredIds = itStatements.allIds.filter((id) => {
25-
return itStatements.byId[id].describeId === describeId;
26-
});
27-
2824
const addRenderHandleClick = (e) => {
2925
const itId = e.target.id;
3026
dispatchToReactTestCase(addRender(describeId, itId));
@@ -42,49 +38,62 @@ const ItRenderer = ({
4238
const itId = e.target.id;
4339
dispatchToReactTestCase(addAssertion(describeId, itId));
4440
};
45-
4641

47-
return filteredIds.map((id, i) => (
48-
<div id={styles.ItRenderer} key={i}>
49-
<i
50-
onClick={deleteItStatementHandleClick}
51-
id={id}
52-
className={cn(styles.itClose, 'far fa-window-close')}
53-
></i>
54-
<CustomInput
55-
key={`input-${id}-${i}`}
56-
id={id}
57-
label={'The component should...'}
58-
placeholder={'Button component renders correctly...'}
59-
value={itStatements.byId[id].text}
60-
handleChange={handleChangeItStatementText}
61-
/>
62-
<hr />
63-
<ReactTestStatements
64-
key={`statement-${id}-${i}`}
65-
statements={statements}
66-
itId={id}
67-
describeId={describeId}
68-
/>
69-
<div>
70-
{type === 'react' && (
71-
<div className={styles.buttonsContainer}>
72-
<button id={id} onClick={addRenderHandleClick} className={styles.reactButton}>
73-
<i className='fas fa-plus'></i>
74-
Render
75-
</button>
76-
<button id={id} onClick={addActionHandleClick} className={styles.reactButton}>
77-
<i className='fas fa-plus'></i>
78-
Action
79-
</button>
80-
<button id={id} onClick={addAssertionHandleClick} className={styles.reactButton}>
81-
<i className='fas fa-plus'></i>
82-
Assertion
83-
</button>
42+
return itStatements.allIds[describeId].map((id, i) => (
43+
<Draggable
44+
key={id}
45+
draggableId={id}
46+
index={i}
47+
// type={describeId} // passed down automatically
48+
>
49+
{(provided) => (
50+
<div
51+
id={styles.ItRenderer}
52+
ref={provided.innerRef}
53+
{...provided.draggableProps}
54+
{...provided.dragHandleProps}
55+
>
56+
<i
57+
onClick={deleteItStatementHandleClick}
58+
id={id}
59+
className={cn(styles.itClose, 'far fa-window-close')}
60+
></i>
61+
<CustomInput
62+
key={`input-${id}-${i}`}
63+
id={id}
64+
label={'The component should...'}
65+
placeholder={'Button component renders correctly...'}
66+
value={itStatements.byId[id].text}
67+
handleChange={handleChangeItStatementText}
68+
/>
69+
<hr />
70+
<ReactTestStatements
71+
key={`statement-${id}-${i}`}
72+
statements={statements}
73+
itId={id}
74+
describeId={describeId}
75+
/>
76+
<div>
77+
{type === 'react' && (
78+
<div className={styles.buttonsContainer}>
79+
<button id={id} onClick={addRenderHandleClick} className={styles.reactButton}>
80+
<i className='fas fa-plus'></i>
81+
Render
82+
</button>
83+
<button id={id} onClick={addActionHandleClick} className={styles.reactButton}>
84+
<i className='fas fa-plus'></i>
85+
Action
86+
</button>
87+
<button id={id} onClick={addAssertionHandleClick} className={styles.reactButton}>
88+
<i className='fas fa-plus'></i>
89+
Assertion
90+
</button>
91+
</div>
92+
)}
8493
</div>
85-
)}
86-
</div>
87-
</div>
94+
</div>
95+
)}
96+
</Draggable>
8897
));
8998
};
9099

0 commit comments

Comments
 (0)