15 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/stylesheets/components/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'describeblock';
2 | @import 'filetree';
3 | @import 'folderupload';
4 | @import 'testbuilder';
5 | @import 'testblock';
6 | @import 'fileviewer';
7 | @import 'maincontent';
8 | @import 'itstatement';
9 | @import 'expectstatement';
10 | @import 'reuploaddirectory';
11 | @import 'proploader';
12 |
13 |
14 | $primary: #032539;
15 | $secondary: #1c768f;
16 | $fg: #FA991C;
17 | $bg: #FBF3F2;
18 |
19 | body {
20 | margin: 0;
21 | padding: 0;
22 | height:100vh;
23 | width: 100vw;
24 | }
25 |
--------------------------------------------------------------------------------
/assets/icons/file_type_eslint.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/stylesheets/components/_testbuilder.scss:
--------------------------------------------------------------------------------
1 | $primary: #032539;
2 | $secondary: #1c768f;
3 | $fg: #FA991C;
4 | $bg: #FBF3F2;
5 |
6 | .testBuilder {
7 | border: 1px solid $primary;
8 | background: $primary;
9 | border-radius: 3em;
10 | box-shadow: 2px 2px 12px $primary;
11 | .addtestbutton {
12 | display:flex;
13 | justify-content: center;
14 | align-items: center;
15 | padding-bottom: 1em;
16 | .adddescribe {
17 | color: $primary;
18 | font-size: 20px;
19 | border: none;
20 | border-radius: 1em;
21 | padding: .25em .5em;
22 | }
23 | }
24 | }
--------------------------------------------------------------------------------
/__tests__/app.test.tsx:
--------------------------------------------------------------------------------
1 | import { shallow, mount, render } from 'enzyme';
2 | import * as React from 'react';
3 | import { App } from '../src/app';
4 | import { FolderUpload } from '../src/components/FolderUpload'
5 |
6 | const wrapper = shallow(
10 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/assets/icons/file_type_config.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/icons/file_type_light_config.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/CodeViewer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector } from "react-redux";
3 | import { ProjectTestCode } from "./ProjectTestCode";
4 | import { FileViewer } from "./FileViewer";
5 |
6 | export const CodeViewer: React.FC = () => {
7 | const codeViewer = useSelector((state: any) => state.codeViewer);
8 | const codeViewerChecker = useSelector(
9 | (state: any) => state.codeViewerChecker
10 | );
11 | // using fragment (<>) shorthand over React.Fragment
12 | return codeViewer === false ? (
13 | <>
14 |
11 |
13 |
14 |
27 |
15 |
18 | PROJECT DIRECTORY
16 |
19 |
22 | TEST BUILDER
20 |
23 |
26 | CODE VIEWER
24 |
15 |
21 |
22 | ) : codeViewerChecker ? (
23 | No File Displayed
16 |17 | Click on Generate Tests or a file in the project directory to view its 18 | code 19 |
20 |
43 |
49 | );
50 | });
51 | return tester;
52 | }
53 |
54 | return generatedTestCode === "" ? (
55 | <> // fragment shorthand
56 | ) : (
57 |
44 | {beginSpaces}
45 | {spaces}
46 | {ele}{" "}
47 |
48 |
58 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/assets/icons/file_type_reactjs.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/icons/file_type_reactts.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/icons/file_type_reacttemplate.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/FileViewer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import fs from "fs";
4 | import { ClearFile } from "../reduxComponents/actions/actions";
5 |
6 | export const FileViewer: React.FC = () => {
7 | const dispatch = useDispatch();
8 | const fileViewPath = useSelector((state: any) => state.fileToView);
9 | const clearFileInStore = () => dispatch(ClearFile());
10 |
11 | function clearFile() {
12 | clearFileInStore();
13 | }
14 |
15 | function pathToText() {
16 | const fileContent = fs.readFileSync(fileViewPath);
17 | const x: any = fileContent.toString();
18 | let counter = 0;
19 | for (let space = 0; space < x.length - 1; space++) {
20 | if (x[space] === " " && x[space + 1] === " ") {
21 | counter++;
22 | }
23 | }
24 |
25 | // move all in line styles into the css file
26 | const tester = x.split("\n").map((ele: string, id: number) => {
27 | let start = 0;
28 | while (ele[start] === " ") {
29 | start++;
30 | }
31 | let spaces = "";
32 | for (let i = 0; i < Math.floor(start / 2); i++) {
33 | spaces += "\t";
34 | }
35 | let begin = 5 - id.toString().length;
36 | let beginSpaces = id.toString();
37 | while (begin > 0) {
38 | beginSpaces += " ";
39 | begin--;
40 | }
41 | return (
42 |
59 |
62 |
63 | {pathToText()}
64 |
43 |
49 | );
50 | });
51 | return tester;
52 | }
53 |
54 | return fileViewPath === "" ? (
55 | <> // fragment shorthand over React.Fragment
56 | ) : (
57 |
44 | {beginSpaces}
45 | {spaces}
46 | {ele}{" "}
47 |
48 |
58 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/src/stylesheets/components/_testblock.scss:
--------------------------------------------------------------------------------
1 | $primary: #032539;
2 | $secondary: #1c768f;
3 | $fg: #FA991C;
4 | $bg: #FBF3F2;
5 |
6 | .testBlock{
7 | width: 100vw;
8 | height: 10vh;
9 | display: flex;
10 | align-items: center;
11 | background: $primary;
12 | box-shadow: 10px 15px orange;
13 | .catalysticon {
14 | width: 4.5em;
15 | height: 3em;
16 | margin-left: 1em;
17 | }
18 | .headerbar {
19 | display: flex;
20 | width: 95vw;
21 | align-items: center;
22 | justify-content: space-between;
23 | button {
24 | background: $primary;
25 | color:$bg;
26 | align-items: center;
27 | font-size: 24px;
28 | border: none;
29 | border-radius: 1.25em;
30 | padding: .25em .6em;
31 | }
32 | .headerlist {
33 | display: flex;
34 | list-style: none;
35 | padding-left: 0;
36 | margin-left: 0em;
37 | li {
38 | padding: 0em 1em;
39 | color: $bg;
40 | .generatetests {
41 | overflow: hidden;
42 | background: linear-gradient(to right, $fg, $fg 50%, $bg 50%);
43 | background-clip: text;
44 | -webkit-background-clip: text;
45 | -webkit-text-fill-color: transparent;
46 | background-size: 200% 100%;
47 | background-position: 100%;
48 | transition: background-position 275ms ease;
49 | }
50 | .generatetests:hover {
51 | background-position: 0 100%;
52 | }
53 | }
54 | }
55 | .iconlist {
56 | display: flex;
57 | list-style: none;
58 | padding-left: 0;
59 | margin: 0em 1em;
60 | height: 36px;
61 | li {
62 | margin: 0em .5em;
63 | color: $bg;
64 | a, a:hover, a:focus {
65 | text-decoration: none;
66 | color: inherit;
67 | .fa-github {
68 | font-size: 32px;
69 | }
70 | .fa-globe-americas {
71 | font-size: 32px;
72 | }
73 | .fa-question-circle {
74 | font-size: 32px;
75 | }
76 | }
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/electron/main.ts:
--------------------------------------------------------------------------------
1 | import { app, BrowserWindow } from 'electron';
2 | import * as path from 'path';
3 | import * as url from 'url';
4 | import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS} from 'electron-devtools-installer';
5 |
6 | // keep a global reference of the window object, if you don't, the window will
7 | // be closed automatically when the javascript object is garbage collected
8 |
9 | let mainWindow: Electron.BrowserWindow | null;
10 |
11 |
12 | function createWindow() {
13 | // create the browser window
14 | mainWindow = new BrowserWindow({
15 | width: 1920,
16 | height: 1080,
17 | webPreferences: {
18 | nodeIntegration: true,
19 | // this allows us to access remote in other files of the app
20 | enableRemoteModule: true
21 | },
22 | icon: path.resolve(__dirname, '../assets/catalyst_icons/CatalystDockIconLarge-04.png')
23 | });
24 |
25 | if (process.platform === 'darwin') {
26 | app.dock.setIcon(path.resolve(__dirname, '../assets/catalyst_icons/CatalystDockIconLarge-04.png'));
27 | }
28 | if (process.env.NODE_ENV === 'development') {
29 | mainWindow.loadURL(`http://localhost:4000`);
30 |
31 | } else {
32 | const urlToLoad = url.format({
33 | pathname: path.resolve(__dirname, '../dist/renderer/index.html'),
34 | protocol: 'file:',
35 | slashes: true
36 | });
37 | mainWindow.loadURL(urlToLoad);
38 | };
39 |
40 |
41 |
42 | // emitted when the window is closed
43 | mainWindow.on('closed', () => {
44 | // derefernece the window object, normally windows are stored in an array if app
45 | // supports multi windows, this is the time when you should delete the corresponding element
46 | mainWindow = null;
47 | });
48 | }
49 |
50 | app.on('ready', () => {
51 | // calling installExtension func after the ready event was emitted by app
52 | // on the different extensions by looping through array of them
53 | [REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS].forEach(extension => {
54 | installExtension(extension)
55 | .then((name) => console.log(`Added Extension: ${name}`))
56 | .catch((err) => console.log('An error occurred: ', err));
57 | });
58 | // once extensions are looped through, invoking createWindow method
59 | createWindow();
60 | });
61 |
62 |
63 | app.allowRendererProcessReuse = true;
64 |
--------------------------------------------------------------------------------
/src/reduxComponents/actions/actions.ts:
--------------------------------------------------------------------------------
1 | import * as types from "../constants/actionTypes";
2 |
3 | export const ConstructFileTree = (files: []) => ({
4 | type: types.CONSTRUCT_FILETREE,
5 | payload: files,
6 | });
7 |
8 | export const SetFileView = (filePath: any) => ({
9 | type: types.SET_FILE_VIEW,
10 | payload: filePath,
11 | });
12 |
13 | export const ToggleFolder = (filePath: string) => ({
14 | type: types.TOGGLE_FOLDER,
15 | payload: filePath,
16 | });
17 |
18 | export const UpdateKeyOfExpect = () => ({
19 | type: types.UPDATE_KEY_OF_EXPECT,
20 | payload: "",
21 | });
22 |
23 | export const UpdateData = (data: any) => ({
24 | type: types.UPDATE_DATA,
25 | payload: data,
26 | });
27 |
28 | export const UpdateKeyOfDescribe = () => ({
29 | type: types.UPDATE_KEY_OF_DESCRIBE,
30 | payload: "",
31 | });
32 |
33 | export const UpdateKeyOfIt = () => ({
34 | type: types.UPDATE_KEY_OF_IT,
35 | payload: "",
36 | });
37 |
38 | export const UpdateItObj = (data: any) => ({
39 | type: types.UPDATE_IT_OBJ,
40 | payload: data,
41 | });
42 |
43 | export const UpdateDescribe = (data: any) => ({
44 | type: types.UPDATE_DESCRIBE,
45 | payload: data,
46 | });
47 |
48 | export const UpdateComponentName = (name: any) => ({
49 | type: types.UPDATE_COMPONENT_NAME,
50 | payload: name,
51 | });
52 |
53 | export const ClearFile = () =>({
54 | type: types.CLEAR_FILE,
55 | });
56 |
57 | export const deleteExpect = (data: any) => ({
58 | type: types.DELETE_EXPECT,
59 | payload: data,
60 | });
61 |
62 | export const removeFromIt = (data: any) => ({
63 | type: types.REMOVE_FROM_IT,
64 | payload: data,
65 | });
66 |
67 | export const SetProjectPath = (filePath: string) => ({
68 | type: types.SET_PROJECT_PATH,
69 | payload: filePath,
70 | });
71 |
72 | export const UpdateItStatement = (data: any) => ({
73 | type: types.UPDATE_IT_STATEMENT,
74 | payload: data,
75 | });
76 |
77 | export const RefreshState = () => ({
78 | type: types.REFRESH_STATE,
79 | });
80 |
81 | export const UpdateDescribeBoolean = (data: any) => ({
82 | type: types.UPDATE_DESCRIBE_BOOLEAN,
83 | payload: data,
84 | });
85 |
86 | export const ViewTestCode = (data: string) => ({
87 | type: types.SHOW_TESTCODE,
88 | payload: data,
89 | });
90 |
91 | export const RemoveTestCode = () => ({
92 | type: types.REMOVE_TESTCODE,
93 | });
94 |
--------------------------------------------------------------------------------
/src/components/ReuploadDirectory.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { remote } from "electron";
3 | import { useDispatch } from "react-redux";
4 | import { FileTree } from "./FolderUpload";
5 | import {
6 | ConstructFileTree,
7 | SetProjectPath,
8 | RefreshState,
9 | } from "../reduxComponents/actions/actions";
10 |
11 | export const ReuploadDirectory: React.FC = () => {
12 | const dispatch = useDispatch();
13 | // creates dispatch that will send file path as an action payload to reducer
14 | const constructFileTree = (files: any) => dispatch(ConstructFileTree(files));
15 | const setFilePath = (filePath: any) => dispatch(SetProjectPath(filePath));
16 | const refreshState = () => dispatch(RefreshState());
17 |
18 | const { dialog } = remote;
19 | async function uploadFolder() {
20 | // allows users to upload a folder
21 | const Project = await dialog.showOpenDialog(
22 | // sets opendirectory (allows directories to be selected) to be the feature that dialog uses
23 | {
24 | properties: ["openDirectory"],
25 | // the types of files that will be displayed or selected
26 | filters: [
27 | { name: "Javascript Files", extensions: ["js", "jsx"] },
28 | { name: "Typescript Files", extensions: ["ts", "tsx"] },
29 | { name: "HTML Files", extensions: ["html"] },
30 | ],
31 | message: "Choose a Project to Create Tests for:",
32 | }
33 | );
34 |
35 | // if the user cancels the action then undefined will be returned
36 | // if the user successfully completes the action then a string array will be returned
37 | // Project is an object that holds canceled (boolean to check if it was cancelled) and filePaths (array of filepaths)
38 | if (Project && !Project.canceled) {
39 | // holds the directory of the project that was selected
40 | let projectDirectory = Project.filePaths[0];
41 |
42 | // use regex to find all \ in the case of a windows user and replace with /
43 | projectDirectory = projectDirectory.replace(/\\/g, "/");
44 |
45 | // will create a new FileTree object for the root directory
46 | const rootTree = new FileTree(projectDirectory, "root");
47 |
48 | // will return an array of FileTree objects along with any children associated with it
49 | const fileTree = rootTree.createTree(projectDirectory);
50 |
51 | // dispatch call to refresh state
52 | refreshState();
53 | // dispatches fileTree to reducer
54 | constructFileTree(fileTree);
55 | // setting file path of project to access later by sending projectDirectory to store
56 | setFilePath(projectDirectory);
57 | }
58 | }
59 |
60 | return (
61 |
59 |
62 |
63 |
64 | 63 |
65 |
67 | {pathToText()}
66 |
62 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/assets/icons/file_type_babel2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | ## What is Catalyst?
4 |
5 | Catalyst is an application which allows developers to generate unit test cases for components utilizing the Jest framework and Javascript's Enzyme testing utility. With its interactive GUI, the creation of test code can be completed with just a few clicks.
6 |
7 | Catalyst is currently in beta and compatible for use with React 16.
8 |
9 | ## Installation
10 |
11 | First download the app [here](https://www.catalystjs.com/)
12 |
13 | Or you can also get started by cloning the repo using
14 |
15 | git clone https://github.com/oslabs-beta/Catalyst.git
16 |
17 | - Once you have the repo on your system, install all the dependencies using:
18 |
19 | npm install
20 |
21 | - After that is completed, you can open our app using:
22 |
23 | npm run dev
24 |
25 | Prior to running exported tests, Jest, Enzyme, and Enzyme Adapter for React 16 must be installed.
26 | To do this, enter the following line in the command line interface of your project's directory:
27 |
28 | npm install --save-dev jest enzyme enzyme-adapter-react-16
29 |
30 | ## How to use
31 |
32 | 1. Select the root folder for the project you would like to create tests for.
33 |
34 | 
35 |
36 | Opitonally, you can select which file you want to generate tests for and preview the component of choice on the right.
37 |
38 | 
39 |
40 | 2. Using our interactive GUI, choose from Enzyme's matcher API and fill in their respective selectors. If the selected matcher does not require a selector input, leave blank. Additionally, selector input box can be the value of your choosing. Once completed, click the 'Generate Tests' button to preview your test code.
41 |
42 | 
43 |
44 | 3. If satisfied, click the 'Export Test Code' button, name your
45 | file, and select the save button to save the generated code in your project. Catalyst will save this file in a \_\_tests\_\_ folder for you automatically if it doesn't already exist.
46 |
47 | 
48 |
49 | 4. Icons located in the right corner of application open additional windows with links to Catalyst's Github, Enzyme's official documentation, and a Enzyme Cheat Sheet.
50 |
51 | ## Contributing
52 |
53 | This project is still very early in development, so please inform our team of any issues found in the application or if you have any suggestions.
54 | Feel free to reach out to the development team if you'd like to make a pull requrest to add new features to this project.
55 |
56 | ## License
57 | Distributed under the MIT License. See LICENSE for more information.
58 |
59 | ## Authors
60 |
61 | > Jon Ascencio [jascenc1](https://github.com/jascenc1) ·
62 | > Danny Chung [chungdanny64](https://github.com/chungdanny64) ·
63 | > Gavin Crews [gcrews1894](https://github.com/gcrews1894) ·
64 | > Jarryl Oquias [jaroqui17](https://github.com/jaroqui17)
65 |
--------------------------------------------------------------------------------
/src/components/FileTree.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import * as electronFs from "fs";
4 | import { SetFileView, ToggleFolder } from "../reduxComponents/actions/actions";
5 | import FILE_ICONS from "../icons/icons";
6 |
7 | export const FileTree: React.FC = () => {
8 | const dispatch = useDispatch();
9 | // obtains the filetree from the store
10 | const fileTree = useSelector((state: any) => state.fileTree);
11 | // obtains the folder status from the store
12 | const isOpen = useSelector((state: any) => state.toggleFolder);
13 | // dispatches an action to set the file that will be viewed
14 | const setFileInRedux = (checker: any) => dispatch(SetFileView(checker));
15 | // dispatches an action to set the folder to open or not
16 | const toggleFolder = (filePath: string) => dispatch(ToggleFolder(filePath));
17 |
18 | // onclick function to set invoke the function to dispatch an action
19 | function setFileView(event: any) {
20 | // file path is saved as the id of the button
21 | setFileInRedux(event.target.id);
22 | }
23 |
24 | // func will strip extension ending from files which will be used as the key for the imported object that holds images for
25 | // those specific file icons
26 | const extensionGrabber = (ext: string) => {
27 | if (ext.split(".")[1] === undefined) {
28 | return "folder";
29 | }
30 | if (ext.split(".")[ext.split(".").length - 1].includes("babel")) {
31 | return "babel";
32 | }
33 | if (
34 | ext
35 | .split(".")
36 | [ext.split(".").length - 1].includes(
37 | "eslint" || ext.split(".")[1].includes("eslint")
38 | )
39 | ) {
40 | return "eslint";
41 | }
42 | return ext.split(".")[ext.split(".").length - 1];
43 | };
44 |
45 | // sending filepath to reducer to keep track of which folder is clicked on. if set to a global state then it will
46 | // toggle true and false on each click of the directory
47 | const handleToggle = (filePath: string) => {
48 | toggleFolder(filePath);
49 | };
50 |
51 | const traverseFileTree = (files: []) => {
52 | return (
53 | -
54 | {files.map((file: any, id: number) => {
55 | const extension = extensionGrabber(file.name);
56 | const checker = electronFs.statSync(file.filepath);
57 |
58 | if (checker.isDirectory()) {
59 | return (
60 |
- 61 | handleToggle(file.filepath)} 65 | > 66 | {FILE_ICONS[extension]} 67 | {file.name} 68 | 69 | {isOpen[file.filepath] && traverseFileTree(file.children)} 70 | 71 | ); 72 | } 73 | return ( 74 |
- 75 | 76 | {FILE_ICONS[extension]} 77 | {file.name} 78 | 79 | {file.children.length > 0 && traverseFileTree(file.children)} 80 | 81 | ); 82 | })} 83 |
43 | {/* */}
44 |
45 |
46 |
53 |
54 | );
55 |
56 | temp.current = temp.current.concat([prop]);
57 | updatePropArray([...propArray, prop]);
58 | updateCount(count + 1);
59 | }
60 | }
61 |
62 | // deletes the selected key value field
63 | function test(event: React.MouseEvent
93 |
103 |
104 | ) : (
105 |
106 |
116 | {displayArray}
117 |
118 |
119 |
120 | );
121 | };
122 |
--------------------------------------------------------------------------------
/src/components/ExportTestCode.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | // eslint-disable-next-line import/no-extraneous-dependencies
4 | import { remote } from "electron";
5 | import * as electronFs from "fs";
6 | import path from "path";
7 | import { ViewTestCode } from "../reduxComponents/actions/actions";
8 | import { generateTestCode } from "../utils/globalCodeGenerator";
9 |
10 | const { dialog } = remote;
11 |
12 | export const ExportTestCode: React.FC = () => {
13 | // get generated TestCode from Global Store
14 | const generatedTestCode = useSelector(
15 | (state: any) => state.generatedTestCode
16 | );
17 | // get users project file path from store to aid in exporting generated test code to their machine
18 | const projectFilePath = useSelector((state: any) => state.filePathOfProject);
19 |
20 | const dispatch = useDispatch();
21 | // generated testCode from GUI is dispactched to store to be displayed in viewer
22 | const viewTestCode = (data: string) => dispatch(ViewTestCode(data));
23 |
24 | // helper function that will open browser window and default to a __tests__ directory for generated test code placement
25 | const openDialog = (userFilePath: string, testCode: string) => {
26 | // normalizing filePath to work cross-platform
27 | const filePath = path.normalize(`${userFilePath}/__tests__/`);
28 | dialog
29 | .showSaveDialog({
30 | title: "Please name your Test File",
31 | defaultPath: filePath, // can add location to save file on users directory
32 | filters: [
33 | {
34 | name: "Test Files",
35 | extensions: ["test"],
36 | },
37 | ],
38 | message: "Choose location",
39 | properties: ["createDirectory"],
40 | })
41 | .then((file) => {
42 | // stating whether dialog operation was cancelled or not
43 | if (!file.canceled) {
44 | // creating and writing to the generated.test file, adding js extension for enzyme compatibility
45 | electronFs.writeFile(
46 | `${file.filePath?.toString()}.js`,
47 | testCode,
48 | (err) => {
49 | if (err) {
50 | // eslint-disable-next-line no-console
51 | console.log(err.message);
52 | }
53 | // eslint-disable-next-line no-console
54 | console.log("saved");
55 | }
56 | );
57 | }
58 | })
59 | .catch((err) => {
60 | // eslint-disable-next-line no-console
61 | console.log(err);
62 | });
63 | };
64 |
65 | // determing if directory __tests__ exists already
66 | const exportTestCode = (userFilePath: string, testCode: string) => {
67 | // if __tests__ directory does not exist then create one and write generated test code into that newly created directory
68 | if (!electronFs.existsSync(`${userFilePath}/__tests__`)) {
69 | electronFs.mkdirSync(`${userFilePath}/__tests__`);
70 | openDialog(userFilePath, testCode);
71 | }
72 | // if __tests__ directory does exist then just generate another file into that directory
73 | else {
74 | openDialog(userFilePath, testCode);
75 | }
76 | };
77 |
78 | const exportCodeToDirectory = () => {
79 | if (generatedTestCode === "") {
80 | // if user logs in and does not want to visualize code, helper function will create test code
81 | // this test code will be sent to store as well as be exported
82 | const testCode = generateTestCode();
83 | // open window to export file
84 | exportTestCode(projectFilePath, testCode);
85 | // dispatch generated code to store to be seen on side panel
86 | viewTestCode(testCode);
87 | } else {
88 | const testCode = generateTestCode();
89 | // if user clicked on generat code before exporting code, it will be pulled from store
90 | exportTestCode(projectFilePath, testCode);
91 | viewTestCode(testCode);
92 | }
93 | };
94 |
95 | return (
96 |
97 |
100 |
101 | );
102 | };
103 |
--------------------------------------------------------------------------------
/src/components/DescribeBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { ItStatement } from "./ItStatement";
4 | import { PropLoader } from "./PropLoader";
5 | import {
6 | UpdateKeyOfIt,
7 | UpdateDescribe,
8 | UpdateComponentName,
9 | } from "../reduxComponents/actions/actions";
10 |
11 | interface Props {
12 | describeProp: string;
13 | removeDescribe: (id: number) => boolean;
14 | }
15 |
16 | export const DescribeBlock: React.FC
97 |
100 |
121 | );
122 | };
123 |
--------------------------------------------------------------------------------
/src/components/ItStatement.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import {
4 | UpdateData,
5 | UpdateItObj,
6 | UpdateItStatement,
7 | } from "../reduxComponents/actions/actions";
8 | import { ExpectStatement } from "./ExpectStatement";
9 |
10 | interface Props {
11 | itProp: string;
12 | id: any;
13 | removeIt: (id: number) => boolean;
14 | }
15 |
16 | export const ItStatement: React.FC
101 |
109 | 115 | {arrayOfIt} 116 |
117 |
120 | Describe Block
102 | addComponentName(e.target.value)} 106 | placeholder="Please enter component name:" 107 | /> 108 |109 | 115 | {arrayOfIt} 116 |
102 | {
106 | updateItStatement(e.target?.value);
107 | }}
108 | />
109 |
112 | {arrayOfExpect}
113 |
116 |
117 | );
118 | };
119 |
--------------------------------------------------------------------------------
/src/reduxComponents/reducers/reducer.ts:
--------------------------------------------------------------------------------
1 | import * as types from "../constants/actionTypes";
2 |
3 | const initialState = {
4 | fileTree: [],
5 | fileToView: "",
6 | toggleFolder: {},
7 | filePathOfProject: "",
8 | generatedTestCode: "",
9 |
10 | describes: {},
11 | its: {},
12 | expects: {},
13 |
14 | keyOfDescribe: 0,
15 | keyOfIt: 0,
16 | keyOfExpect: 0,
17 | componentObj: {},
18 | itInputObj: {},
19 |
20 | describePropBoolean: {},
21 | codeViewer: false,
22 | codeViewerChecker: true,
23 | };
24 |
25 | export const reducer = (state: any = initialState, action: any) => {
26 | switch (action.type) {
27 | case types.CONSTRUCT_FILETREE:
28 | return {
29 | ...state,
30 | fileTree: action.payload,
31 | };
32 |
33 | case types.SET_FILE_VIEW:
34 | return {
35 | ...state,
36 | codeViewer: true,
37 | fileToView: action.payload,
38 | codeViewerChecker: true,
39 | };
40 |
41 | case types.TOGGLE_FOLDER:
42 | // creating an object that will hold the file path of each directory and will toggle from T to F
43 | // important as we can now keep track of whether that specifc directory/filepath has been clicked or not
44 | const toggleFolder = { ...state.toggleFolder };
45 | toggleFolder[action.payload] = !toggleFolder[action.payload];
46 | return {
47 | ...state,
48 | toggleFolder,
49 | };
50 |
51 | case types.UPDATE_KEY_OF_EXPECT:
52 | return {
53 | ...state,
54 | keyOfExpect: state.keyOfExpect + 1,
55 | };
56 |
57 | case types.UPDATE_KEY_OF_IT:
58 | return {
59 | ...state,
60 | keyOfIt: state.keyOfIt + 1,
61 | };
62 |
63 | case types.UPDATE_DATA:
64 | return {
65 | ...state,
66 | expects: action.payload,
67 | };
68 |
69 | case types.UPDATE_IT_OBJ:
70 | return {
71 | ...state,
72 | its: action.payload,
73 | };
74 |
75 | case types.UPDATE_KEY_OF_DESCRIBE:
76 | return {
77 | ...state,
78 | keyOfDescribe: state.keyOfDescribe + 1,
79 | };
80 |
81 | case types.UPDATE_DESCRIBE:
82 | return {
83 | ...state,
84 | describes: action.payload,
85 | };
86 |
87 | case types.UPDATE_COMPONENT_NAME:
88 | return {
89 | ...state,
90 | componentObj: action.payload,
91 | };
92 |
93 | case types.UPDATE_IT_STATEMENT:
94 | return {
95 | ...state,
96 | itInputObj: action.payload,
97 | };
98 |
99 | case types.CLEAR_FILE:
100 | return {
101 | ...state,
102 | codeViewer: false,
103 | codeViewerChecker: false,
104 | fileToView: "",
105 | };
106 |
107 | case types.DELETE_EXPECT:
108 | const { expects } = state;
109 | const id = action.payload.toString();
110 | delete expects[`${id}`];
111 | return {
112 | ...state,
113 | expects,
114 | };
115 |
116 | case types.REMOVE_FROM_IT:
117 | return {
118 | ...state,
119 | };
120 |
121 | case types.SET_PROJECT_PATH:
122 | return {
123 | ...state,
124 | filePathOfProject: action.payload,
125 | };
126 |
127 | case types.REFRESH_STATE:
128 | return {
129 | fileTree: [],
130 | fileToView: "",
131 | toggleFolder: {},
132 | filePathOfProject: "",
133 | generatedTestCode: "",
134 |
135 | describes: {},
136 | its: {},
137 | expects: {},
138 |
139 | keyOfDescribe: 0,
140 | keyOfIt: 0,
141 | keyOfExpect: 0,
142 | componentObj: {},
143 | itInputObj: {},
144 | describePropBoolean: {},
145 | codeViewer: false,
146 | codeViewerChecker: true,
147 | };
148 |
149 | case types.UPDATE_DESCRIBE_BOOLEAN:
150 | return {
151 | ...state,
152 | describePropBoolean: action.payload,
153 | };
154 |
155 | case types.SHOW_TESTCODE:
156 | return {
157 | ...state,
158 | codeViewer: true,
159 | codeViewerChecker: false,
160 | generatedTestCode: action.payload,
161 | };
162 |
163 | case types.REMOVE_TESTCODE:
164 | return {
165 | ...state,
166 | codeViewer: false,
167 | codeViewerChecker: true,
168 | generatedTestCode: "",
169 | };
170 |
171 | default:
172 | return state;
173 | }
174 | };
175 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "catalyst",
3 | "productName": "Catalyst",
4 | "version": "0.0.1",
5 | "description": "Catalyst will simplify the generation of unit tests for React framework with an emphasis on enzyme",
6 | "main": "dist/main.js",
7 | "scripts": {
8 | "dev:electron": "cross-env NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
9 | "dev:react": "cross-env NODE_ENV=development webpack serve --config webpack.react.config.js --mode development",
10 | "prod:electron": "cross-env NODE_ENV=production webpack --config webpack.electron.config.js --mode production && electron .",
11 | "prod:react": "cross-env NODE_ENV=production webpack --config webpack.react.config.js --mode production",
12 | "dev": " concurrently \"npm run dev:electron\" \"npm run dev:react\"",
13 | "prod": "npm run prod:react && npm run prod:electron",
14 | "test": "jest",
15 | "testall": "jest --converge",
16 | "build-installer": "electron-builder",
17 | "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
18 | "lint": "eslint --fix src/**/*.{js,jsx,ts,tsx}"
19 | },
20 | "build": {
21 | "appId": "com.oslabs.catalyst",
22 | "productName": "Catalyst",
23 | "directories": {
24 | "output": "builder",
25 | "buildResources": "assets"
26 | },
27 | "files": [
28 | "dist/**/*",
29 | "node_modules/**/*",
30 | "assets/**/*"
31 | ],
32 | "win": {
33 | "target": [
34 | "nsis"
35 | ],
36 | "icon": "/assets/icon.png"
37 | },
38 | "nsis": {
39 | "oneClick": false,
40 | "allowToChangeInstallationDirectory": true
41 | },
42 | "mac": {
43 | "target": [
44 | "dmg"
45 | ],
46 | "icon": "assets/icon.png",
47 | "category": "public.app-category.Developer-tools",
48 | "identity": null
49 | },
50 | "dmg": {
51 | "background": "assets/CatalystInstallBG-05.tif",
52 | "icon": "assets/icon.png",
53 | "iconSize": 100,
54 | "window": {
55 | "width": 544,
56 | "height": 408
57 | },
58 | "contents": [
59 | {
60 | "x": 105,
61 | "y": 250
62 | },
63 | {
64 | "x": 440,
65 | "y": 250,
66 | "type": "link",
67 | "path": "/Applications"
68 | }
69 | ]
70 | }
71 | },
72 | "repository": {
73 | "type": "git",
74 | "url": "git+https://github.com/chungdanny64/Catalyst.git"
75 | },
76 | "keywords": [],
77 | "author": "Catalyst",
78 | "license": "MIT",
79 | "bugs": {
80 | "url": "https://github.com/chungdanny64/Catalyst/issues"
81 | },
82 | "dependencies": {
83 | "@babel/runtime": "^7.12.5",
84 | "@types/jest": "^26.0.15",
85 | "@types/react": "^16.9.56",
86 | "@types/react-dom": "^16.9.9",
87 | "@types/react-select": "^3.0.27",
88 | "concurrently": "^5.3.0",
89 | "cross-env": "^7.0.2",
90 | "dotenv": "^8.2.0",
91 | "html-webpack-plugin": "^4.5.0",
92 | "jest": "^26.6.3",
93 | "jquery": "^3.5.1",
94 | "react": "^17.0.1",
95 | "react-dom": "^17.0.1",
96 | "react-redux": "^7.2.2",
97 | "react-select": "^3.1.1",
98 | "redux": "^4.0.5",
99 | "redux-devtools-extension": "^2.13.8",
100 | "typescript": "^4.0.5"
101 | },
102 | "devDependencies": {
103 | "@babel/core": "^7.12.3",
104 | "@babel/plugin-proposal-class-properties": "^7.12.1",
105 | "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
106 | "@babel/plugin-transform-runtime": "^7.12.1",
107 | "@babel/preset-env": "^7.12.1",
108 | "@babel/preset-react": "^7.12.5",
109 | "@babel/preset-typescript": "^7.12.1",
110 | "@types/enzyme": "^3.10.8",
111 | "@types/jquery": "^3.5.4",
112 | "@types/react-redux": "^7.1.11",
113 | "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
114 | "babel-loader": "^8.2.1",
115 | "css-loader": "^5.0.1",
116 | "electron": "^11.0.4",
117 | "electron-builder": "^22.9.1",
118 | "electron-devtools-installer": "^3.1.1",
119 | "enzyme": "^3.11.0",
120 | "enzyme-to-json": "^3.6.1",
121 | "eslint": "^7.15.0",
122 | "eslint-config-airbnb-typescript-prettier": "^4.1.0",
123 | "file-loader": "^6.2.0",
124 | "prettier": "^2.2.1",
125 | "sass": "^1.30.0",
126 | "sass-loader": "^10.1.0",
127 | "style-loader": "^2.0.0",
128 | "ts-jest": "^26.4.4",
129 | "ts-loader": "^8.0.11",
130 | "typings-for-css-modules-loader": "^1.7.0",
131 | "url-loader": "^4.1.1",
132 | "webpack": "^5.10.0",
133 | "webpack-cli": "^4.2.0",
134 | "webpack-dev-server": "^3.11.0"
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/src/components/FolderUpload.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { remote } from "electron";
3 | import * as electronFs from "fs";
4 | import { useDispatch } from "react-redux";
5 | import {
6 | ConstructFileTree,
7 | SetProjectPath,
8 | } from "../reduxComponents/actions/actions";
9 | import catalystLogo from "../../assets/catalyst_icons/Catalystfull-02.png";
10 |
11 | export class FileTree {
12 | filepath: string;
13 |
14 | name: string;
15 |
16 | children: FileTree[];
17 |
18 | constructor(filepath: string, name: string) {
19 | this.filepath = filepath;
20 | this.name = name;
21 | this.children = [];
22 | }
23 |
24 | // directory will be root directory path
25 | createTree(directory: string): FileTree[] {
26 | let treeElements: FileTree[] = [];
27 |
28 | // readdirSync will return all the names of the files in the directory as an array
29 | electronFs.readdirSync(directory).forEach((fileName: string) => {
30 | if (
31 | fileName !== ".git" &&
32 | fileName !== "node_modules" &&
33 | fileName !== "dist" &&
34 | fileName !== "assets" &&
35 | fileName !== ".DS_Store" &&
36 | fileName !== ".eslintrc" &&
37 | fileName !== "README.md" &&
38 | fileName !== "package-lock.json" &&
39 | fileName !== "package.json" &&
40 | fileName !== ".gitignore" &&
41 | fileName !== "build" &&
42 | fileName !== ".vscode" &&
43 | fileName !== "webpack.config"
44 | ) {
45 | const fileInfo = new FileTree(`${directory}/${fileName}`, fileName);
46 |
47 | // statsync will return an object with properties of the filepath indicated
48 | const moreFileInfo = electronFs.statSync(fileInfo.filepath);
49 |
50 | // if the file that is currently at is a directory it will append the children to it
51 | if (moreFileInfo.isDirectory()) {
52 | fileInfo.children = fileInfo.createTree(fileInfo.filepath);
53 | }
54 |
55 | treeElements.push(fileInfo);
56 | }
57 | });
58 | return treeElements;
59 | }
60 | }
61 |
62 | export const FolderUpload: React.FC = () => {
63 | const dispatch = useDispatch();
64 | // creates dispatch that will send file path as an action payload to reducer
65 | const constructFileTree = (files: any) => dispatch(ConstructFileTree(files));
66 | const setFilePath = (filePath: any) => dispatch(SetProjectPath(filePath));
67 |
68 | const { dialog } = remote;
69 | async function uploadFolder() {
70 | // allows users to upload a folder
71 | const Project = await dialog.showOpenDialog(
72 | // sets opendirectory (allows directories to be selected) to be the feature that dialog uses
73 | {
74 | properties: ["openDirectory"],
75 | // the types of files that will be displayed or selected
76 | filters: [
77 | { name: "Javascript Files", extensions: ["js", "jsx"] },
78 | { name: "Typescript Files", extensions: ["ts", "tsx"] },
79 | { name: "HTML Files", extensions: ["html"] },
80 | ],
81 | message: "Choose a Project to Create Tests for:",
82 | }
83 | );
84 |
85 | // if the user cancels the action then undefined will be returned
86 | // if the user successfully completes the action then a string array will be returned
87 | // Project is an object that holds canceled (boolean to check if it was cancelled) and filePaths (array of filepaths)
88 | if (Project && !Project.canceled) {
89 | // holds the directory of the project that was selected
90 | let projectDirectory = Project.filePaths[0];
91 |
92 | // use regex to find all \ in the case of a windows user and replace with /
93 | projectDirectory = projectDirectory.replace(/\\/g, "/");
94 |
95 | // will create a new FileTree object for the root directory
96 | const rootTree = new FileTree(projectDirectory, "root");
97 |
98 | // will return an array of FileTree objects along with any children associated with it
99 | const fileTree = rootTree.createTree(projectDirectory);
100 | // dispatches fileTree to reducer
101 | constructFileTree(fileTree);
102 | // setting file path of project to access later by sending projectDirectory to store
103 | setFilePath(projectDirectory);
104 | }
105 | }
106 |
107 | return (
108 |
109 |
123 | );
124 | };
125 |
--------------------------------------------------------------------------------
/src/components/TestBuilder.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { DescribeBlock } from "./DescribeBlock";
4 | import {
5 | UpdateItObj,
6 | UpdateKeyOfDescribe,
7 | UpdateData,
8 | UpdateDescribe,
9 | UpdateDescribeBoolean,
10 | } from "../reduxComponents/actions/actions";
11 |
12 | export const TestBuilder: React.FC = () => {
13 | const dispatch = useDispatch();
14 |
15 | const describesFromStore = useSelector((state: any) => state.describes);
16 | const itFromStore = useSelector((state: any) => state.its);
17 | const expectFromStore = useSelector((state: any) => state.expects);
18 | const describeIndex = useSelector((state: any) => state.keyOfDescribe);
19 | const itIndex = useSelector((state: any) => state.keyOfIt);
20 | const describeBool = useSelector((state: any) => state.describePropBoolean);
21 | const fileTree = useSelector((state: any) => state.fileTree);
22 | const propBool = useSelector((state: any) => state.describePropBoolean);
23 |
24 | const updateDescribeIndex = () => dispatch(UpdateKeyOfDescribe());
25 | const updateIt = (data: any) => dispatch(UpdateItObj(data));
26 | const updateExpects = (data: any) => dispatch(UpdateData(data));
27 | const updateDescribe = (data: any) => dispatch(UpdateDescribe(data));
28 | const updateDescribeBool = (data: any) =>
29 | dispatch(UpdateDescribeBoolean(data));
30 |
31 | const [describes, updateDescribes] = useState([]);
32 |
33 | const storeval: { [k: string]: any } = {};
34 | storeval[`${itIndex}`] = "";
35 |
36 | useEffect(() => {
37 | const x: { [k: string]: any } = {};
38 | // create a new Describe block to be rendered. Will be inital describe
39 | x[`${describeIndex}`] = (
40 |
110 | 
111 |
112 |
113 |
122 | Make tests quickly
114 |No coding necessary
115 | 121 |
108 |
117 | );
118 | };
119 |
--------------------------------------------------------------------------------
/src/utils/globalCodeGenerator.ts:
--------------------------------------------------------------------------------
1 | import * as electronFs from "fs";
2 | import { store } from "../reduxComponents/store";
3 |
4 | export function generateTestCode() {
5 | const currentState = store.getState();
6 |
7 | const describeGlobal = currentState.describes;
8 | const itsGlobal = currentState.its;
9 | const expectGlobal = currentState.expects;
10 | const describeInputGlobal = currentState.componentObj;
11 | const itInputGlobal = currentState.itInputObj;
12 | const { describePropBoolean } = currentState;
13 | const { fileTree } = currentState;
14 |
15 | const keysOfDescribe = Object.keys(describeGlobal);
16 |
17 | function findFile(fileTree: any, name: string): string {
18 | for (const x of fileTree) {
19 | const file = electronFs.statSync(x.filepath);
20 | if (file.isDirectory()) {
21 | const find = findFile(x.children, name);
22 | if (find !== "") {
23 | return find;
24 | }
25 | } else if (
26 | x.name.toLowerCase().includes(name) &&
27 | !x.name.toLowerCase().includes("_")
28 | ) {
29 | return x.filepath;
30 | }
31 | }
32 | return "";
33 | }
34 |
35 | // console.log(tree)
36 | let finalString = "";
37 | finalString += `import React from 'react';\nimport { configure, shallow } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\n\nconfigure({ adapter: new Adapter() });\n\n`;
38 |
39 | // inserts the correct import statement for each component
40 | for (const i of keysOfDescribe) {
41 | let fileLocation = findFile(
42 | fileTree,
43 | `${describeInputGlobal[i]}`.trim().toLowerCase()
44 | );
45 | if (fileLocation !== "") {
46 | // let relativePath = path.relative(process.cwd(), fileLocation);
47 | // console.log(relativePath, 'this is relativePath');
48 | fileLocation = fileLocation.replace(".jsx", "");
49 | finalString += `import ${describeInputGlobal[i]} from \'${fileLocation}\'; \n\n`;
50 | }
51 | }
52 |
53 | // obtains all the prop fields from the dom and puts it into an array of html elements
54 | const allProps: HTMLCollectionOf
109 | {describes}
110 |
111 |
112 |
115 |
116 |
136 | 
137 |
182 | );
183 | };
184 |
--------------------------------------------------------------------------------
/src/components/ExpectStatement.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { useDispatch, useSelector } from "react-redux";
3 | import {
4 | UpdateData,
5 | UpdateKeyOfExpect,
6 | deleteExpect,
7 | } from "../reduxComponents/actions/actions";
8 |
9 | interface Props {
10 | id: string;
11 | remove: (x: number) => boolean;
12 | }
13 |
14 | export const ExpectStatement: React.FC
138 |
181 | -
139 |
-
140 |
141 |
142 | - 143 | 146 | 147 |
-
148 |
149 |
150 |
-
152 |
- 153 | 158 | 159 | 160 | 161 |
- 162 | 167 | 168 | 169 | 170 |
- 171 | 176 | 177 | 178 | 179 |
217 |
267 | );
268 | };
269 |
--------------------------------------------------------------------------------
218 |
219 |
222 |
223 | 251 |
252 |
253 | 223 | 251 |
254 |
264 |
265 |
266 |