Skip to content

Commit f8c2390

Browse files
BerghoerBerghoer
authored
Merge pull request #14 from oslabs-beta/v4_stage
V4 stage
2 parents 0698f47 + 3422f5a commit f8c2390

File tree

7 files changed

+217
-28
lines changed

7 files changed

+217
-28
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"eslint.enable": false
3+
}

‎src/components/EditorView/EditorView.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React, { useContext } from 'react';
22
import MonacoEditor from 'react-monaco-editor';
33
import { GlobalContext } from '../../context/reducers/globalReducer';
44
import { editor } from 'monaco-editor';
5+
import { updateFile } from '../../context/actions/globalActions';
56

67
const Editor = () => {
7-
let [{ displayedFileCode, file }] = useContext(GlobalContext);
8+
let [{ displayedFileCode, file }, dispatchToGlobal] = useContext(GlobalContext);
89
if (file.length > 0) displayedFileCode = file;
910
const options = {
1011
selectOnLineNumbers: true,
@@ -20,6 +21,10 @@ const Editor = () => {
2021
editor.setTheme('light-dark');
2122
};
2223

24+
// const updatafile = (newValue, e) => {
25+
// dispatchToGlobal(updateFile(newValue));
26+
// };
27+
2328
return (
2429
<div>
2530
<MonacoEditor
@@ -29,6 +34,7 @@ const Editor = () => {
2934
value={displayedFileCode ? displayedFileCode : '// Open a file to view your code.'}
3035
options={options}
3136
editorDidMount={editorDidMount}
37+
// onChange={updatafile}
3238
/>
3339
</div>
3440
);

‎src/components/OpenFolder/OpenFolderButton.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ const OpenFolder = () => {
4343
};
4444

4545
//reads contents within the selected directory and checks if it is a file/folder
46-
const generateFileTreeObject = directoryPath => {
47-
const fileArray = electronFs.readdirSync(directoryPath).map(fileName => {
46+
const generateFileTreeObject = (directoryPath) => {
47+
const fileArray = electronFs.readdirSync(directoryPath).map((fileName) => {
4848
//replace backslashes for Windows OS
4949
directoryPath = directoryPath.replace(/\\/g, '/');
5050
let filePath = `${directoryPath}/${fileName}`;
@@ -58,7 +58,7 @@ const OpenFolder = () => {
5858
if (file.fileName !== 'node_modules' && file.fileName !== '.git') {
5959
if (fileData.isDirectory()) {
6060
file.files = generateFileTreeObject(file.filePath);
61-
file.files.forEach(file => {
61+
file.files.forEach((file) => {
6262
let javaScriptFileTypes = ['js', 'jsx', 'ts', 'tsx'];
6363
let fileType = file.fileName.split('.')[1];
6464
if (javaScriptFileTypes.includes(fileType)) {

‎src/components/TestCase/HooksTestCase.tsx

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { useContext } from 'react';
22
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
3+
import { GlobalContext } from '../../context/reducers/globalReducer';
4+
import { createFile } from '../../context/actions/globalActions';
35
import styles from './TestCase.module.scss';
46
import { HooksTestCaseContext } from '../../context/reducers/hooksTestCaseReducer';
57
import {
@@ -10,12 +12,17 @@ import HooksTestMenu from '../TestMenu/HooksTestMenu';
1012
import HooksTestStatements from './HooksTestStatements';
1113
import { HooksStatements } from '../../utils/hooksTypes';
1214
import HooksHelpModal from '../TestHelpModals/HooksHelpModal';
15+
const remote = window.require('electron').remote;
16+
const beautify = remote.require('js-beautify');
17+
const path = remote.require('path');
1318

1419
const HooksTestCase = () => {
1520
const [{ hooksTestStatement, hooksStatements, modalOpen }, dispatchToHooksTestCase] = useContext(
1621
HooksTestCaseContext
1722
);
1823

24+
const [{ projectFilePath }, dispatchToGlobal] = useContext<any>(GlobalContext);
25+
1926
const handleUpdateHooksTestStatement = (e: React.ChangeEvent<HTMLInputElement>) => {
2027
dispatchToHooksTestCase(updateHooksTestStatement(e.target.value));
2128
};
@@ -41,12 +48,150 @@ const HooksTestCase = () => {
4148
);
4249
dispatchToHooksTestCase(updateStatementsOrder(reorderedStatements));
4350
};
51+
let testFileCode = 'import React from "react";';
52+
const generatHookFile = () => {
53+
return (
54+
addHooksImportStatements(),
55+
addHooksTestStatements(),
56+
(testFileCode = beautify(testFileCode, {
57+
indent_size: 2,
58+
space_in_empty_paren: true,
59+
e4x: true,
60+
}))
61+
);
62+
};
63+
64+
const addHooksImportStatements = () => {
65+
hooksStatements.forEach((statement: any) => {
66+
switch (statement.type) {
67+
case 'hook-updates':
68+
return addRenderHooksImportStatement(), createPathToHooks(statement);
69+
case 'hookRender':
70+
return addRenderHooksImportStatement(), createPathToHooks(statement);
71+
case 'context':
72+
return addContextImportStatements(), createPathToContext(statement);
73+
default:
74+
return statement;
75+
}
76+
});
77+
testFileCode += '\n';
78+
};
79+
80+
const addHooksTestStatements = () => {
81+
testFileCode += `\n test('${hooksTestStatement}', () => {`;
82+
hooksStatements.forEach((statement: any) => {
83+
switch (statement.type) {
84+
case 'hook-updates':
85+
return addHookUpdates(statement);
86+
case 'hookRender':
87+
return addHookRender(statement);
88+
case 'context':
89+
return addContext(statement);
90+
default:
91+
return statement;
92+
}
93+
});
94+
testFileCode += '});';
95+
testFileCode += '\n';
96+
};
97+
98+
// Hooks Import Statements
99+
const addRenderHooksImportStatement = () => {
100+
if (!testFileCode.includes(`import '@testing-library/jest-dom/extend-expect';`)) {
101+
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
102+
}
103+
if (!testFileCode.includes(`import { renderHook, act } from '@testing-library/react-hooks';`)) {
104+
testFileCode += `import { renderHook, act } from '@testing-library/react-hooks';`;
105+
}
106+
};
107+
108+
// Hooks Filepath
109+
const createPathToHooks = (statement: any) => {
110+
let filePath = path.relative(projectFilePath, statement.hookFilePath);
111+
filePath = filePath.replace(/\\/g, '/');
112+
testFileCode += `import ${statement.hook} from '../${filePath}';`;
113+
};
114+
115+
// Context Import Statements
116+
const addContextImportStatements = () => {
117+
if (!testFileCode.includes(`import '@testing-library/jest-dom/extend-expect';`)) {
118+
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
119+
}
120+
if (!testFileCode.includes(`import { render } from '@testing-library/react';`)) {
121+
testFileCode += `import { render } from '@testing-library/react';`;
122+
}
123+
};
124+
125+
// Context Filepath
126+
const createPathToContext = (statement: any) => {
127+
let filePath = path.relative(projectFilePath, statement.contextFilePath);
128+
filePath = filePath.replace(/\\/g, '/');
129+
testFileCode += `import { ${statement.providerComponent}, ${statement.consumerComponent}, ${statement.context} } from '../${filePath}';`;
130+
};
131+
132+
// Hook: Updates Jest Test Code
133+
const addHookUpdates = (hookUpdates: any) => {
134+
testFileCode += `const {result} = renderHook (() => ${hookUpdates.hook}());
135+
act(() => {
136+
result.current.${hookUpdates.callbackFunc}();
137+
});
138+
expect(result.current.${hookUpdates.managedState}).toBe(${hookUpdates.updatedState})`;
139+
};
140+
141+
// Hook: Renders Jest Test Code
142+
const addHookRender = (hookRender: any) => {
143+
testFileCode += `const {result} = renderHook(() => ${hookRender.hook}(${hookRender.parameterOne}))
144+
expect(result.current.${hookRender.returnValue}).toBe(${hookRender.expectedReturnValue})`;
145+
};
146+
147+
// Context Jest Test Code
148+
const addContext = (context: any) => {
149+
if (context.queryValue === 'shows_default_value') {
150+
testFileCode += `const mockValue = {Data: '${context.values}'}
151+
const { ${context.querySelector} } = render(<${context.consumerComponent}/>)
152+
expect(${context.querySelector}(mockValue.Data)).${context.queryVariant}('${context.values}')`;
153+
}
154+
if (context.queryValue === 'shows_value_from_provider') {
155+
testFileCode += `const mockValue = {Data: '${context.values}'}
156+
const { ${context.querySelector} } = render (
157+
<${context.context}.Provider value={mockValue}>
158+
<${context.consumerComponent}/>
159+
</${context.context}.Provider>
160+
)
161+
expect(${context.querySelector}(mockValue.Data)).${context.queryVariant}('${context.values}')`;
162+
}
163+
if (context.queryValue === 'component_provides_context_value') {
164+
testFileCode += `const mockValue = {Data: '${context.values}'}
165+
const { ${context.querySelector} } = render (
166+
<${context.providerComponent} value={mockValue}>
167+
<${context.context}.Consumer>
168+
{value => <span>Recieved: {value} </span>}
169+
<${context.context}.Consumer/>
170+
</${context.providerComponent}>
171+
)
172+
expect(${context.querySelector}(/^Recieved:/).textContent).${context.queryVariant}('${context.values}')`;
173+
}
174+
if (context.queryValue === 'renders_providers_+_consumers_normally') {
175+
testFileCode += `const mockValue = {Data: '${context.values}'}
176+
const { ${context.querySelector} } = render (
177+
<${context.providerComponent} value={mockValue}>
178+
<${context.consumerComponent}/>
179+
</${context.providerComponent}>
180+
)
181+
expect(${context.querySelector}(mockValue.Data).textContent).${context.queryVariant}('${context.values}')`;
182+
}
183+
};
184+
185+
const fileHandle = () => {
186+
dispatchToGlobal(createFile(generatHookFile()));
187+
};
44188

45189
return (
46190
<div>
47191
<div id='head'>
48192
<HooksTestMenu dispatchToHooksTestCase={dispatchToHooksTestCase} />
49193
</div>
194+
<button onClick={fileHandle}>save me</button>
50195
{modalOpen ? <HooksHelpModal /> : null}
51196
<div id={styles.testMockSection}>
52197
<section id={styles.testCaseHeader}>

‎src/components/TestCase/ReduxTestCase.tsx

Lines changed: 47 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,55 @@ const ReduxTestCase = () => {
115115
};
116116

117117
const addAsyncImportStatement = () => {
118-
testFileCode += `import '@testing-library/jest-dom/extend-expect';
119-
import configureMockStore from 'redux-mock-store';
118+
if (!testFileCode.includes(`import '@testing-library/jest-dom/extend-expect';`)) {
119+
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
120+
}
121+
if (
122+
!testFileCode.includes(`import configureMockStore from 'redux-mock-store';
123+
import thunk from 'redux-thunk';
124+
import fetchMock from 'fetch-mock';`)
125+
) {
126+
testFileCode += `import configureMockStore from 'redux-mock-store';
120127
import thunk from 'redux-thunk';
121128
import fetchMock from 'fetch-mock';`;
129+
}
130+
};
131+
132+
const addAsyncVariables = () => {
133+
if (
134+
!testFileCode.includes(`\n const middlewares = [thunk];
135+
const mockStore = configureMockStore(middlewares);`)
136+
) {
137+
testFileCode += `\n const middlewares = [thunk];
138+
const mockStore = configureMockStore(middlewares);`;
139+
}
140+
};
141+
142+
// AC Import Statements
143+
const addActionCreatorImportStatement = () => {
144+
if (!testFileCode.includes(`import { fake } from 'test-data-bot';`)) {
145+
testFileCode += `import { fake } from 'test-data-bot';`;
146+
}
147+
if (!testFileCode.includes(`import '@testing-library/jest-dom/extend-expect';`)) {
148+
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
149+
}
150+
};
151+
152+
// Reducer Import Statements
153+
const addReducerImportStatement = () => {
154+
if (!testFileCode.includes(`import { render } from '@testing-library/react';`)) {
155+
testFileCode += `import { render } from '@testing-library/react';`;
156+
}
157+
if (!testFileCode.includes(`import '@testing-library/jest-dom/extend-expect';`)) {
158+
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
159+
}
160+
};
161+
162+
// Middleware Import Statements
163+
const addMiddlewareImportStatement = () => {
164+
if (!testFileCode.includes(`import '@testing-library/jest-dom/extend-expect';`)) {
165+
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
166+
}
122167
};
123168

124169
const createPathToActions = (statement: any) => {
@@ -148,28 +193,6 @@ const ReduxTestCase = () => {
148193
testFileCode += `import * as middleware from '../${filePath}';`;
149194
};
150195

151-
const addAsyncVariables = () => {
152-
testFileCode += `\n const middlewares = [thunk];
153-
const mockStore = configureMockStore(middlewares);`;
154-
};
155-
156-
// AC Import Statements
157-
const addActionCreatorImportStatement = () => {
158-
testFileCode += `import { fake } from 'test-data-bot';
159-
import '@testing-library/jest-dom/extend-expect'`;
160-
};
161-
162-
// Reducer Import Statements
163-
const addReducerImportStatement = () => {
164-
testFileCode += `import { render } from '@testing-library/react';
165-
import '@testing-library/jest-dom/extend-expect';`;
166-
};
167-
168-
// Middleware Import Statements
169-
const addMiddlewareImportStatement = () => {
170-
testFileCode += `import '@testing-library/jest-dom/extend-expect';`;
171-
};
172-
173196
const addReducer = (reducer: any) => {
174197
testFileCode += `expect(${reducer.reducerName}(${reducer.initialState},{${reducer.reducerAction}})).toEqual(${reducer.expectedState})`;
175198
};

‎src/context/actions/globalActions.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const actionTypes = {
1313
SET_PROJECT_FILE_PATH: 'SET_PROJECT_FILE_PATH',
1414
SET_FILE_PATH_MAP: 'SET_FILE_PATH_MAP',
1515
CREATE_FILE_SHOW: 'CREATE_FILE_SHOW',
16+
UPDATE_FILE_SHOW: 'UPDATE_FILE_SHOW',
1617
OPEN_BROWSER_DOCS: 'OPEN_BROWSER_DOCS',
1718
CLOSE_BROWSER_DOCS: 'CLOSE_BROWSER_DOCS',
1819
};
@@ -80,6 +81,10 @@ export const createFile = (testString) => ({
8081
testString,
8182
});
8283

84+
export const updateFile = (testString) => ({
85+
type: actionTypes.UPDATE_FILE_SHOW,
86+
testString,
87+
});
8388
export const openBrowserDocs = (docsUrl) => ({
8489
type: actionTypes.OPEN_BROWSER_DOCS,
8590
docsUrl,

‎src/context/reducers/globalReducer.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export const globalReducer = (state, action) => {
7373
return {
7474
...state,
7575
displayedFileCode,
76+
file: '',
7677
};
7778
case actionTypes.TOGGLE_FOLDER_VIEW:
7879
const isFolderOpen = { ...state.isFolderOpen };
@@ -105,6 +106,12 @@ export const globalReducer = (state, action) => {
105106
...state,
106107
file,
107108
};
109+
case actionTypes.UPDATE_FILE_SHOW:
110+
const fileUp = action.testString;
111+
return {
112+
...state,
113+
file: fileUp,
114+
};
108115
case actionTypes.OPEN_BROWSER_DOCS:
109116
const docsUrl = action.docsUrl;
110117
return {

0 commit comments

Comments
 (0)