3 |
4 | _"EEQL is a standalone test creation suite that constructs reliable endpoint tests for both GraphQL and RESTful API's."_.
5 |
6 | 
21 | 
34 | 
45 |
11 |
12 |
15 |
16 |
17 |
21 | );
22 | };
23 |
24 | export default NavBar;
25 |
--------------------------------------------------------------------------------
/src/components/PortUpdate/PortUpdate.scss:
--------------------------------------------------------------------------------
1 |
2 | .aws-btn {
3 | font-family: Arial, Helvetica, sans-serif;
4 | --button-default-height: 50px;
5 | --button-default-font-size: 14px;
6 | --button-default-border-radius: 7px;
7 | --button-horizontal-padding: 25px;
8 | --button-raise-level: 7px;
9 | --button-hover-pressure: 3;
10 | --transform-speed: 0.175s;
11 | --button-primary-color: #32c2b5;
12 | --button-primary-color-dark: #167970;
13 | --button-primary-color-light: #000000;
14 | --button-primary-color-hover: #b1ece6;
15 | --button-primary-border: 0px solid #ffffff;
16 | --button-secondary-color: #f8ac40;
17 | --button-secondary-color-dark: #7e5011;
18 | --button-secondary-color-light: #000000;
19 | --button-secondary-color-hover: #ffd9a3;
20 | --button-secondary-border: none;
21 | --button-anchor-color: #b30000;
22 | --button-anchor-color-dark: #791616;
23 | --button-anchor-color-light: #000000;
24 | --button-anchor-color-hover: #ff0000;
25 | --button-anchor-border: 1px solid #922a2a;
26 | }
--------------------------------------------------------------------------------
/src/components/PortUpdate/PortUpdate.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | /* eslint-disable import/no-unresolved */ // ! Be careful
3 |
4 | import React, { useContext, useState } from "react";
5 | import { StateContext } from "../../provider/StateProvider";
6 | import "./PortUpdate.scss";
7 | import { Link } from "react-router-dom";
8 | import Input from "../../../node_modules/@material-ui/core/Input";
9 | // @ts-ignore
10 | import "react-awesome-button/dist/styles.scss";
11 | // @ts-ignore
12 | import { AwesomeButton } from "react-awesome-button";
13 |
14 | const { remote } = window.require("electron");
15 | const fs = remote.require("fs");
16 |
17 | const PortUpdate = () => {
18 | const { activePortHandler, activePort }: any = useContext(StateContext);
19 | const [newPort, newPortHandler] = useState(false);
20 |
21 | let submitPort = () => {
22 | newPortHandler(false);
23 | };
24 |
25 | let updatePort = (e) => {
26 | if (newPort === false) {
27 | newPortHandler(true);
28 | } else {
29 | activePortHandler(e.target.value);
30 | }
31 | };
32 |
33 | if (newPort === false)
34 | return (
35 |
42 | );
43 | else
44 | return (
45 |
59 | );
60 | };
61 |
62 | export default PortUpdate;
63 |
--------------------------------------------------------------------------------
/src/components/TestSuite/GraphQLEndpoint/GraphQLEndpoint.scss:
--------------------------------------------------------------------------------
1 | // h4 {
2 | // font-size: 14px;
3 | // }
4 |
5 | .gql-endpoint {
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: space-evenly;
9 | color: rgb(216, 216, 216);
10 |
11 | }
12 |
13 | #test-title {
14 | padding: 8px;
15 | }
16 |
17 | #server-button {
18 | padding-top: 10px;
19 | padding-bottom: 10px;
20 | }
21 |
22 | // #operationIsMutation {
23 | // color: green;
24 | // background-color: yellow;
25 | // }
26 |
27 | // .file {
28 | // align-self: flex-start;
29 | // }
30 |
31 | // .test {
32 | // align-self: center;
33 | // }
34 |
35 | // .code {
36 | // align-self: flex-end;
37 | // }
--------------------------------------------------------------------------------
/src/components/TestSuite/GraphQLEndpoint/GraphQLEndpoint.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from "react";
2 | // import GraphQL from "graphql";
3 | // @ts-ignore
4 | import { TestContext } from "../../../provider/TestProvider";
5 | import { StateContext } from "../../../provider/StateProvider";
6 | import Input from "../../../../node_modules/@material-ui/core/Input";
7 | import "./GraphQLEndpoint.scss";
8 | // @ts-ignore
9 | import { AwesomeButtonProgress } from "react-awesome-button";
10 |
11 | import Switch, { SwitchClassKey, SwitchProps } from '@material-ui/core/Switch';
12 | import Grid from '@material-ui/core/Grid';
13 | import { green } from '@material-ui/core/colors'
14 | import { withStyles } from '@material-ui/core/styles'
15 |
16 | const { remote } = window.require("electron");
17 | const GraphQl = () => {
18 | const { test, testHandler }: any = useContext(TestContext);
19 | const { activePort, activeFile, setActiveFile }: any = useContext(
20 | StateContext
21 | );
22 | const [operationIsMutation, setOperationIsMutation] = useState(false);
23 | const [operationIsValid, setOperationIsValid] = useState(false);
24 |
25 | // variable denoting current file in file operations
26 | let current;
27 |
28 |
29 | // handler for adding schema path to state
30 | const getSchemaPath = () => {
31 | remote.dialog
32 | .showOpenDialog({
33 | properties: ["openFile"],
34 | message: "Please choose your schema file",
35 | })
36 | .then((files: any) => {
37 | if (!files.cancelled) {
38 | current = files.filePaths[0];
39 | testHandler("schemaFile", current);
40 | }
41 | });
42 | };
43 |
44 | // handler for adding resolver path to state
45 | const getResolverPath = () => {
46 | remote.dialog
47 | .showOpenDialog({
48 | properties: ["openFile"],
49 | message: "Please choose your resolver file",
50 | })
51 | .then((files: any) => {
52 | if (!files.cancelled) {
53 | current = files.filePaths[0];
54 | testHandler("resolverFile", current);
55 | }
56 | });
57 | };
58 |
59 | // handler for adding data from input fields to state
60 | const inputHandler = (e: React.ChangeEvent
102 |
103 |
204 | );
205 | };
206 |
207 | export default GraphQl;
--------------------------------------------------------------------------------
/src/components/TestSuite/GraphQLEndpoint/MockSchema.js:
--------------------------------------------------------------------------------
1 | import { gql } from "@apollo/client";
2 | //gql function to parse the query string into a query document.
3 |
4 | export const dummyQuery = gql`
5 | query starwars {
6 | people {
7 | id
8 | name
9 | birth_year
10 | films {
11 | title
12 | }
13 | }
14 | }
15 | `;
16 |
17 | export function StarWars({ name }) {
18 | const { loading, error, data } = useQuery(dummyQuery, {
19 | variables: { name },
20 | });
21 | if (loading) return GraphQL Test Builder
104 |
105 |
140 | {/* input for describe/it description */}
141 |
148 |
149 | {/* switch for valid/invalid operation */}
150 |
151 | Valid Operation
152 |
153 |
159 | Invalid Operation
160 |
161 |
162 | {/* input for query/mutation text */}
163 |
172 |
173 | {/* switch for query/mutation */}
174 |
175 | Query
176 |
177 |
183 | Mutation
184 |
185 |
186 | {/* conditionally render input where user enters data to be fed to the mutation. */}
187 | {(operationIsMutation) ?
188 |
198 | :
199 | null
200 | }
201 |
202 |
203 | 202 |
Loading!
; 22 | if (error) returnError ;3
; 23 | 24 | return ( 25 |26 | {data.people.name} was born in {data.people.year} 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/components/TestSuite/RestEndpoint/RestEndpoint.scss: -------------------------------------------------------------------------------- 1 | // h4 { 2 | // font-size: 14px; 3 | // } 4 | 5 | .rest-endpoint { 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: space-evenly; 9 | color: rgb(216, 216, 216); 10 | 11 | } 12 | 13 | #test-title { 14 | padding: 8px; 15 | } 16 | #server-button { 17 | padding-top: 10px; 18 | padding-bottom: 10px; 19 | } 20 | 21 | // .file { 22 | // align-self: flex-start; 23 | // } 24 | 25 | // .test { 26 | // align-self: center; 27 | // } 28 | 29 | // .code { 30 | // align-self: flex-end; 31 | // } 32 | 33 | -------------------------------------------------------------------------------- /src/components/TestSuite/RestEndpoint/RestEndpoint.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { TestContext } from "../../../provider/TestProvider"; 3 | import { StateContext } from "../../../provider/StateProvider"; 4 | import "./RestEndpoint.scss"; 5 | import Input from "../../../../node_modules/@material-ui/core/Input"; 6 | // @ts-ignore 7 | import { AwesomeButtonProgress } from "react-awesome-button"; 8 | const { remote } = window.require("electron"); 9 | 10 | const RestEndpoint = () => { 11 | const { test, testHandler }: any = useContext(TestContext); 12 | const { activePort, activeFile, setActiveFile }: any = useContext( 13 | StateContext 14 | ); 15 | const [local, localhandler] = useState({}); 16 | let current; 17 | 18 | //Add methods to methodOptions array, and create options to be rendered in select/dropdown element 19 | const methods = ["GET", "POST", "PUT", "DELETE"]; 20 | const methodOptions = []; 21 | for (let a = 0; a < methods.length; a++) { 22 | methodOptions.push( 23 | 26 | ); 27 | } 28 | const getPath = () => { 29 | remote.dialog 30 | .showOpenDialog({ 31 | properties: ["openFile"], 32 | message: "Please choose your server file", 33 | }) 34 | .then((files: any) => { 35 | if (!files.cancelled) { 36 | current = files.filePaths[0]; 37 | inputHandler(null); 38 | } 39 | }); 40 | }; 41 | 42 | //handler for state to reflect entires in a select tag 43 | const selectHandler = (e: any): void => { 44 | const dropdownId = e.target.id; 45 | const dropdown = document.getElementById(dropdownId) as HTMLSelectElement; 46 | const selection = dropdown.options[dropdown.selectedIndex].text; 47 | testHandler(dropdownId, selection); 48 | }; 49 | 50 | //handler for state to reflect entries in an input tag 51 | const inputHandler = (e: React.ChangeEvent
60 |
61 |
133 | );
134 | };
135 |
136 | export default RestEndpoint;
137 |
--------------------------------------------------------------------------------
/src/components/TestSuite/Supertest.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | const request = require("supertest");
3 | const fs = require("fs");
4 | const path = require("path");
5 | // const app = require('app');
6 | import { TestContext } from "../../provider/TestProvider";
7 | import { StateContext } from "../../provider/StateProvider";
8 |
9 | const { test, monacoPoster } = useContext(TestContext);
10 | const { activePort } = useContext(StateContext);
11 | const db = "./db/markets.js";
12 |
13 | // if element selected is strictly equal to POST, the post request test should run
14 | if (test.methodSelect === "POST") {
15 | //POST request test
16 | //describe syntax
17 | describe(`${db}`, () => {
18 | //it syntax
19 | it(`${test.expectedRes}`, (done) => {
20 | //request
21 | request(activePort)
22 | //post method
23 | .post(test.serverApp)
24 | //send method
25 | .send(`value is equivalent to ${outputDropdown.selectedIndex.text}`)
26 | //expect method
27 | .expect(res.status)
28 | .to.be.equal(200)
29 | //done method
30 | .done();
31 | });
32 | });
33 | }
34 |
35 | const str = `${test.expectedRes} `;
36 | monacoPoster(str);
37 | // console.log(str)
38 |
39 | // if element selected is strictly equal to GET, the get request test should run
40 | if (document.getElementById("methodSelect") === "GET") {
41 | //GET request test
42 | //describe syntax
43 | describe(`${db}`, () => {
44 | //it syntax
45 | it(`${test.expectedRes}`, (done) => {
46 | request(activePort)
47 | //get method
48 | .get(test.serverApp)
49 | //set method
50 | .set({
51 | Accept: "application/json",
52 | })
53 | //expect method
54 | .expect({
55 | "Content-Type": "json",
56 | })
57 | //done method
58 | .done();
59 | });
60 | });
61 | }
62 |
63 | // if element selected is strictly equal to PUT, the put request test should run
64 | if (document.getElementById("methodSelect") === "PUT") {
65 | //PUT request test
66 | //describe syntax
67 | describe(`${db}`, () => {
68 | //it syntax
69 | it(`${test.expectedRes}`, (done) => {
70 | request(activePort)
71 | //get method
72 | .put(test.serverApp)
73 | //set method
74 | .set({
75 | Accept: "application/json",
76 | })
77 | //expect method
78 | .expect({
79 | "Content-Type": "json",
80 | })
81 | //done method
82 | .done();
83 | });
84 | });
85 | }
86 |
87 | // if element selected is strictly equal to DELETE, the delete request test should run
88 | if (document.getElementById("methodSelect") === "DELETE") {
89 | //DELETE request test
90 | describe(`${db}`, () => {
91 | //it syntax
92 | it(`${test.expectedRes}`, (done) => {
93 | request(activePort)
94 | //get method
95 | .delete(test.serverApp)
96 | //set method
97 | .set({
98 | Accept: "application/json",
99 | })
100 | //expect method
101 | .expect({
102 | "Content-Type": "json",
103 | })
104 | //done method
105 | .done();
106 | });
107 | });
108 | }
109 |
110 | export default TestSuite;
111 |
--------------------------------------------------------------------------------
/src/components/TestSuite/TestBuilder/TestBuilder.scss:
--------------------------------------------------------------------------------
1 | // h3 {
2 | // font-size: 14px;
3 | // }
4 |
5 | // .test-builder {
6 | // display: grid;
7 | // justify-content: center;
8 | // color: rgb(216, 216, 216);
9 | // width: 15vw;
10 | // }
11 |
12 | // .file {
13 | // align-self: flex-start;
14 | // }
15 |
16 | // .test {
17 | // align-self: center;
18 | // }
19 |
20 | // .code {
21 | // align-self: flex-end;
22 | // }
23 | .test-builder {
24 | font-family: Arial, Helvetica, sans-serif;
25 | border: solid 2px rgb(255, 214, 163);
26 | padding: 40px 40px 40px 40px;
27 | text-align: center;
28 | }
29 |
30 |
31 | .aws-btn {
32 | font-family: Arial, Helvetica, sans-serif;
33 | padding: 2px;
34 | margin: 5px;
35 | --button-default-height: 50px;
36 | --button-default-font-size: 14px;
37 | --button-default-border-radius: 7px;
38 | --button-horizontal-padding: 25px;
39 | --button-raise-level: 7px;
40 | --button-hover-pressure: 3;
41 | --transform-speed: 0.175s;
42 | --button-primary-color: #32c2b5;
43 | --button-primary-color-dark: #167970;
44 | --button-primary-color-light: #000000;
45 | --button-primary-color-hover: #b1ece6;
46 | --button-primary-border: 0px solid #ffffff;
47 | --button-secondary-color: #f8ac40;
48 | --button-secondary-color-dark: #7e5011;
49 | --button-secondary-color-light: #000000;
50 | --button-secondary-color-hover: #ffd9a3;
51 | --button-secondary-border: none;
52 | --button-anchor-color: #b30000;
53 | --button-anchor-color-dark: #791616;
54 | --button-anchor-color-light: #000000;
55 | --button-anchor-color-hover: #ff0000;
56 | --button-anchor-border: 1px solid #922a2a;
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/TestSuite/TestBuilder/TestBuilder.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { TestContext } from "../../../provider/TestProvider";
3 | import { StateContext } from "../../../provider/StateProvider";
4 | import "./TestBuilder.scss";
5 | import RestEndpoint from "../RestEndpoint/RestEndpoint";
6 | import GraphQl from "../GraphQLEndpoint/GraphQLEndpoint";
7 | import RestTestCreation from "../TestGeneration/RestTestCreation";
8 | import graphQLTestCreation from "../TestGeneration/graphQLTestCreation"
9 | import Input from "../../../../node_modules/@material-ui/core/Input";
10 | import FileUpdate from "../../FileUpdate/FileUpdate"
11 |
12 | // import {ReactDOM, render} from 'react-dom'
13 | // @ts-ignore
14 | import { AwesomeButton, AwesomeButtonProgress } from "react-awesome-button";
15 |
16 |
17 | const { remote } = window.require("electron");
18 | const fs = remote.require("fs");
19 | let directoryArray;
20 | let fileArray;
21 |
22 | const TestBuilder = () => {
23 | const { test, testHandler, resetHandler }: any = useContext(TestContext);
24 | const {
25 | userPath,
26 | activeFile,
27 | activeFileHandler,
28 | updateTreeHandler,
29 | fileTreeHandler,
30 | pathHandler,
31 | fileTree,
32 | updateTree,
33 | }: any = useContext(StateContext);
34 | const [local, localhandler] = useState(true);
35 | const [testName, testNameHandler] = useState('');
36 |
37 | const generateFileTree = (dir) => {
38 | let getDirectory = (current) => {
39 | directoryArray = fs
40 | .readdirSync(current)
41 | .filter((file) => file !== "node_modules" && file[0] !== ".");
42 | if (directoryArray.filter((file, i) => !file.includes("")) == []) {
43 | return directoryArray;
44 | }
45 | };
46 | getDirectory(dir);
47 |
48 | fileArray = directoryArray.map((name: string) => {
49 | let path = dir;
50 | path = `${path}/${name}`;
51 | const file: any = { path, name, files: [] };
52 |
53 | if (!file.name.includes(".")) {
54 | file.files = generateFileTree(file.path);
55 | }
56 | return file;
57 | });
58 | fileTreeHandler(fileArray);
59 | return fileArray;
60 | };
61 |
62 | const clicker = () => {
63 | // gather current value from all fields.
64 | // serverApp, expectedRes, methodSelect, desiredEndpoint, inputData, outputData, headerInfo
65 | let selectFieldsArray = ["methodSelect"];
66 |
67 | let inputFieldsArray = [
68 | "serverApp",
69 | "expectedRes",
70 | "desiredEndpoint",
71 | "inputData",
72 | "outputData",
73 | "headerInfo",
74 | ];
75 | // iterate through all dropdowns (select is the formal name) to extract current selected value, and store that selection in our state
76 | for (let i = 0; i < selectFieldsArray.length; i++) {
77 | const dropDown = document.getElementById(
78 | selectFieldsArray[i]
79 | ) as HTMLSelectElement;
80 | const selection = dropDown.options[dropDown.selectedIndex].text;
81 | testHandler(selectFieldsArray[i], selection);
82 | }
83 | console.log("state after select fields loop", test);
84 |
85 | for (let j = 0; j < inputFieldsArray.length; j++) {
86 | const inputField = document.getElementById(inputFieldsArray[j]);
87 | const inputValue = inputField.innerText ? inputField.innerText : "qwerty";
88 | testHandler(inputFieldsArray[j], inputValue);
89 | }
90 |
91 | console.log(test);
92 | console.log("monaco", activeFile);
93 | };
94 |
95 | const inputHandler = (e: React.ChangeEventREST Test Builder
62 |
63 | {/*
131 |
132 | Server file name:
*/} 64 | {/*HTTP method:
*/} 65 | 72 | {/* */} 73 | 90 | 97 | 105 | 113 | 121 | 129 | 130 |131 |
122 |
131 | localhandler(true)}
136 | >
137 | REST
138 |
139 | localhandler(false)}
144 | >
145 | GRAPHQL
146 |
147 |
148 | {/* conditionally render the form for building Rest or GraphQL tests */}
149 | {
150 | (local) ?
153 | {/* save button */} 154 | {
161 | console.log("Saving Test...");
162 | handleSaveTest();
163 | generateFileTree(userPath);
164 | setTimeout(() => {
165 | next();
166 | }, 1000);
167 | }}
168 | >
169 | SAVE
170 |
171 |
172 | );
173 | };
174 |
175 | export default TestBuilder;
176 |
--------------------------------------------------------------------------------
/src/components/TestSuite/TestGeneration/RestTestCreation.js:
--------------------------------------------------------------------------------
1 | const RestTestCreation = (state) => {
2 | // Sample Representation of Test Output:
3 | `
4 | const supertest = require('supertest');
5 | const app = require('../server/server.js');
6 | const request = supertest(app);
7 | jest.useFakeTimers();
8 |
9 | test('Gets html from root page', async (done) => {
10 | const response = await request
11 | .get('/')
12 | .set({});
13 | expect(response.status).toBe(200);
14 | return done();
15 | });`;
16 |
17 | const serverApp = state.serverApp;
18 | const expectedRes = state.expectedRes;
19 | const methodSelect = state.methodSelect;
20 | const desiredEndpoint = state.desiredEndpoint;
21 | const inputData =
22 | state.methodSelect === "POST" || state.methodSelect === "PUT"
23 | ? `.send(${state.inputData});`
24 | : "";
25 | const headerInfo = state.headerInfo ? `.set(${headerInfo})` : "";
26 | const outputData = state.outputData;
27 |
28 | const test = `
29 | const supertest = require('supertest');
30 | const app = require('${serverApp}');
31 | const request = supertest(app);
32 | jest.useFakeTimers();
33 |
34 | test('${expectedRes}', async (done) => {
35 | const response = await request
36 | .${methodSelect}('${desiredEndpoint}')
37 | ${inputData}
38 | ${headerInfo}
39 | expect(${inputData}).toBe(${outputData});
40 | return done();
41 | });
42 | `;
43 |
44 | return test;
45 | };
46 |
47 | export default RestTestCreation;
48 |
--------------------------------------------------------------------------------
/src/components/TestSuite/TestGeneration/graphQLTestCreation.js:
--------------------------------------------------------------------------------
1 | const graphQLTestCreation = (state) => {
2 |
3 |
4 | const addMutationObject = (state.operationIsMutation !== false) ? "" : `, ${state.mutationObject}`;
5 |
6 | const egqlBoilerplate = (state) =>
7 | `
8 | 'use strict'
9 |
10 | const fs = require('fs')
11 | const path = require('path')
12 | const EasyGraphQLTester = require('easygraphql-tester')
13 |
14 | const schema = fs.readFileSync(path.join(__dirname, "${state.schemaFile}"), 'utf8')
15 | const resolvers = require("${state.resolverFile}")
16 |
17 | describe('Test queries and mutations', () => {
18 | let tester
19 |
20 | beforeEach(() => {
21 | tester = new EasyGraphQLTester(schema, resolvers)
22 | })
23 | describe('${state.expectedRes}', () => {
24 | `
25 |
26 | const queryValidQueryBoilerPlate = (state) =>
27 | `
28 | it('${state.expectedRes}', () => {
29 | const operation = \`${state.gqlOperationText}\`
30 | tester.test(${state.operationIsValid}, operation${addMutationObject})
31 | })
32 | `
33 |
34 | const closingParens = `
35 | })
36 | })
37 | `
38 |
39 | return egqlBoilerplate(state) + queryValidQueryBoilerPlate(state) + closingParens;
40 | };
41 |
42 | export default graphQLTestCreation;
43 |
--------------------------------------------------------------------------------
/src/components/TestSuite/server/db/markets.dev.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "location": "losangeles",
4 | "cards": 6
5 | },
6 | {
7 | "location": "sdfsdf",
8 | "cards": 0
9 | }
10 | ]
--------------------------------------------------------------------------------
/src/components/TestSuite/server/db/markets.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 |
3 | let writeLocation;
4 | let marketList;
5 |
6 | if (process.env.NODE_ENV === 'test') {
7 | writeLocation = `${__dirname}/markets.test.json`;
8 | marketList = JSON.parse(fs.readFileSync(writeLocation));
9 | } else {
10 | writeLocation = `${__dirname}/markets.dev.json`;
11 | marketList = JSON.parse(fs.readFileSync(writeLocation));
12 | }
13 |
14 | const db = {};
15 |
16 |
17 | /**
18 | * #sync - Overwrites the current database with markets list from client
19 | *
20 | * @param {Array} markets - the new market list
21 | * @return {Array} the list of markets
22 | */
23 | db.sync = (markets) => {
24 | if (!Array.isArray(markets)) {
25 | return new Error(`Market list must be an array, received ${typeof markets}`);
26 | }
27 | if (markets.some(m => m.location === undefined || m.cards === undefined)) {
28 | return new Error('Missing fields on some markets');
29 | }
30 | if (markets.some(m => typeof m.location !== 'string')) {
31 | return new Error('TypeError in your market location');
32 | }
33 | if (markets.some(m => typeof m.cards !== 'number')) {
34 | return new Error('TypeError in your market cards');
35 | }
36 | db.write(markets);
37 | db.reset();
38 | return marketList;
39 | };
40 |
41 |
42 | /**
43 | * #find - Returns the entire list of markets from the appropriate
44 | * markets.env.json file.
45 | *
46 | * @return {Array} the list of markets
47 | */
48 | db.find = () => {
49 | db.reset();
50 | return marketList;
51 | };
52 |
53 |
54 | /**
55 | * #drop - Deletes everything from the appropriate markets.env.json file and
56 | * writes an empty array in its place.
57 | */
58 | db.drop = () => {
59 | marketList = [];
60 | db.write(marketList);
61 | };
62 |
63 |
64 | db.write = (data) => {
65 | fs.writeFileSync(writeLocation, JSON.stringify(data, null, 2));
66 | };
67 |
68 |
69 | db.reset = () => {
70 | marketList = JSON.parse(fs.readFileSync(writeLocation));
71 | };
72 |
73 |
74 | module.exports = db;
75 |
--------------------------------------------------------------------------------
/src/components/TestSuite/server/db/markets.test.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "location": "kansascity",
4 | "cards": 17
5 | }
6 | ]
--------------------------------------------------------------------------------
/src/components/TestSuite/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 | const path = require('path');
3 | const express = require('express');
4 | const db = require('./db/markets');
5 |
6 | const app = express();
7 | const port = process.env.PORT || 3000;
8 |
9 | app.use(express.static(path.resolve(__dirname, '../dist')));
10 | app.use(express.json());
11 |
12 | app.put('/markets', (req, res, next) => {
13 | const syncResult = db.sync(req.body);
14 | if (syncResult instanceof Error) {
15 | return next({ code: 400, error: syncResult });
16 | }
17 | res.json(syncResult);
18 | });
19 |
20 | app.get('/markets', (req, res) => {
21 | res.json(db.find());
22 | });
23 |
24 | app.use(({ code, error }, req, res, next) => {
25 | res.status(code).json({ error });
26 | });
27 |
28 | module.exports = app.listen(port, () => console.log(`Listening on port ${port}`));
29 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
10 |
11 | 153 | {/* save button */} 154 |
17 |
30 | );
31 | };
32 |
33 | export default Home;
34 |
--------------------------------------------------------------------------------
/src/pages/Landing/Landing.scss:
--------------------------------------------------------------------------------
1 |
2 | #logo {
3 | display: block;
4 | margin-top: 250px;
5 | margin-left: auto;
6 | margin-right: auto;
7 | width: 50%;
8 | width: 400px;
9 | height: 140px;
10 | }
11 |
12 |
13 | .input {
14 | text-align: center;
15 | }
16 |
17 | .visual {
18 | color: white;
19 | font-family: Arial, Helvetica, sans-serif;
20 | padding: 20px 10px 10px 30px
21 | }
22 | .visualize {
23 | display: flex;
24 | position: absolute !important;
25 | bottom: 100px !important;
26 | width: 100%;
27 | align-items: center;
28 | justify-content: center;
29 | }
30 |
31 | // .darkMode, #global {
32 | // background-color: #201E21 !important;
33 | // }
34 |
35 | // .lightMode, body {
36 | // background-color: white;
37 | // }
38 |
39 |
40 |
41 |
42 | .aws-btn {
43 | font-family: Arial, Helvetica, sans-serif;
44 | padding: 2px;
45 | margin: 5px;
46 | --button-default-height: 50px;
47 | --button-default-font-size: 14px;
48 | --button-default-border-radius: 7px;
49 | --button-horizontal-padding: 25px;
50 | --button-raise-level: 7px;
51 | --button-hover-pressure: 3;
52 | --transform-speed: 0.175s;
53 | --button-primary-color: #32c2b5;
54 | --button-primary-color-dark: #167970;
55 | --button-primary-color-light: #000000;
56 | --button-primary-color-hover: #b1ece6;
57 | --button-primary-border: 0px solid #ffffff;
58 | --button-secondary-color: #f8ac40;
59 | --button-secondary-color-dark: #7e5011;
60 | --button-secondary-color-light: #000000;
61 | --button-secondary-color-hover: #ffd9a3;
62 | --button-secondary-border: none;
63 | --button-anchor-color: #b30000;
64 | --button-anchor-color-dark: #791616;
65 | --button-anchor-color-light: #000000;
66 | --button-anchor-color-hover: #ff0000;
67 | --button-anchor-border: 1px solid #922a2a;
68 | }
69 |
70 |
71 |
--------------------------------------------------------------------------------
/src/pages/Landing/Landing.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState, useEffect } from "react";
2 | import { Link } from "react-router-dom";
3 | import { StateContext } from "../../provider/StateProvider";
4 | // @ts-ignore
5 | import eeQL2 from "../../../assets/img/eeql_logo_copy.png";
6 | import FileUpload from "../../components/FileUpload/FileUpload";
7 | import "react-awesome-button/dist/styles.scss";
8 | import "./Landing.scss";
9 | // @ts-ignore
10 | import { AwesomeButton, AwesomeButtonSocial } from "react-awesome-button";
11 | const shell = require("electron").shell;
12 |
13 |
14 |
15 | const Landing = () => {
16 | return (
17 |
19 |
29 |
20 |
22 |
23 |
25 |
26 |
28 |
18 |
51 | );
52 | };
53 |
54 | export default Landing;
55 |
--------------------------------------------------------------------------------
/src/pages/Visualize/Visualize.scss:
--------------------------------------------------------------------------------
1 | #graph {
2 | display: inline-flex;
3 | margin-left: 550px;
4 | margin-top: 250px;
5 | }
--------------------------------------------------------------------------------
/src/pages/Visualize/Visualize.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { Graph } from "react-d3-graph";
3 | import { Link } from "react-router-dom";
4 | import { DataContext } from "../../provider/DataProvider";
5 | import "./Visualize.scss";
6 |
7 | const Visualize = () => {
8 | const { database }: any = useContext(DataContext);
9 | console.log(database);
10 | const data = {
11 | nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
12 | focusedNodeId: "nodeIdToTriggerZoomAnimation",
13 | links: [
14 | { source: "Harry", target: "Sally" },
15 | { source: "Harry", target: "Alice" },
16 | ],
17 | };
18 |
19 | const myConfig = {
20 | automaticRearrangeAfterDropNode: false,
21 | collapsible: true,
22 | directed: false,
23 | focusAnimationDuration: 0.75,
24 | focusZoom: 1,
25 | freezeAllDragEvents: false,
26 | height: 400,
27 | highlightDegree: 1,
28 | highlightOpacity: 1,
29 | linkHighlightBehavior: false,
30 | maxZoom: 8,
31 | minZoom: 0.1,
32 | nodeHighlightBehavior: false,
33 | panAndZoom: false,
34 | staticGraph: false,
35 | staticGraphWithDragAndDrop: false,
36 | width: 800,
37 | d3: {
38 | alphaTarget: 0.05,
39 | gravity: -100,
40 | linkLength: 100,
41 | linkStrength: 1,
42 | disableLinkForce: false,
43 | },
44 | node: {
45 | color: "#32c2b5",
46 | fontColor: "white",
47 | fontSize: 10,
48 | fontWeight: "normal",
49 | highlightColor: "SAME",
50 | highlightFontSize: 8,
51 | highlightFontWeight: "normal",
52 | highlightStrokeColor: "SAME",
53 | highlightStrokeWidth: "SAME",
54 | labelProperty: "id",
55 | mouseCursor: "pointer",
56 | opacity: 1,
57 | renderLabel: true,
58 | size: 200,
59 | strokeColor: "none",
60 | strokeWidth: 1.5,
61 | svg: "",
62 | symbolType: "circle",
63 | },
64 | link: {
65 | color: "#d3d3d3",
66 | fontColor: "black",
67 | fontSize: 8,
68 | fontWeight: "normal",
69 | highlightColor: "SAME",
70 | highlightFontSize: 8,
71 | highlightFontWeight: "normal",
72 | labelProperty: "label",
73 | mouseCursor: "pointer",
74 | opacity: 1,
75 | renderLabel: false,
76 | semanticStrokeWidth: false,
77 | strokeWidth: 1.5,
78 | markerHeight: 6,
79 | markerWidth: 6,
80 | strokeDasharray: 0,
81 | strokeDashoffset: 0,
82 | strokeLinecap: "butt",
83 | },
84 | };
85 |
86 | const onClickNode = function(nodeId) {
87 | console.log(`Clicked node ${nodeId}`);
88 | };
89 |
90 | const onClickLink = function(source, target) {
91 | console.log(`Clicked link between ${source} and ${target}`);
92 | };
93 |
94 | return (
95 |
19 |
20 | {
24 | window.alert(
25 | "This feature is currently in beta, we appeciate your patience. -eeQL"
26 | );
27 | }}
28 | >
29 | VISUALIZE
30 |
31 |
32 | {
35 | shell.openExternal("https://github.com/oslabs-beta/eeQL");
36 | }}
37 | >
38 | SOURCE
39 |
40 |
41 |
42 |
43 |
44 |
45 | 
46 |
50 |
47 |
49 |
96 |
108 | );
109 | };
110 |
111 | export default Visualize;
112 |
--------------------------------------------------------------------------------
/src/provider/DataProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | //create init state w/ empty object
4 | export const DataContext = React.createContext({});
5 | //create handler that can edit state w/ user input
6 |
7 | //initial state
8 | const DataProviders = ({ children }: any) => {
9 | const [database, setData] = useState("test");
10 |
11 | //handler for all states with k-v's that are added/updated
12 | const dataHandler = (ref) => {
13 | setData(ref);
14 | };
15 |
16 | return (
17 |