Merge pull request #162 from oslabs-beta/v2

Version 2 import tables from existing databases, create a boilerplate for a test_suite in the test view and added Jest testing for some of our utils files/functions. General bug fixes and addressing of issues.

Author: VanceWallace

Diff for: .DS_Store

@@ -0,0 +1,5 @@
+{
+    presets: ["@babel/preset-env", "@babel/preset-react"]
+}
+
+//hello

Diff for: .babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [[
+    "@babel/preset-env", {
+      "useBuiltIns": "entry"
+    }],
+    "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    "react-hot-loader/babel"
+  ]
+}

Diff for: .bablerc

@@ -6,4 +6,5 @@ winehq.key
 out
 public/bundle.js
 public/bundle.js.map
+dist
 .DS_Store

Diff for: .gitignore

@@ -1,75 +1,84 @@
 <p align="center" ><img src="public/assets/pictures/ProtographQLBanner.png" width="800px"></p>
-
-# ProtoGraphQL
-
-ProtoGraphQL is a **prototyping tool** that helps developers build and visualize GraphQL schemas and queries without writing any code. Users simply input their relational database tables and ProtoGraphQL will dynamically create a customized and functional GraphQL Apollo Server readily available for export.
-
-ProtoGraphQL is currently in beta. We would appreciate if you could post any issues to our GitHub – we are actively looking for areas for improvement and we welcome feedback from the community.
-
-Upcoming releases include adding visual indicators for table relationships in the “Schema” view, enabling users to create customizable GraphQL mutations, and extending support for NoSQL databases such as MongoDB.
-
-\* *We recently added support for users to view the structures and relationships of their tables using our GraphQL schema tree visualizer!*
-
+ 
+# ProtoGraphQL ver. 2.0
+ 
+*** The latest release of ProtoGraphQL includes a new view that can jumpstart your query testing with the Jest framework and the ability to import tables from an existing database. *** 
+ 
+ProtoGraphQL is a **prototyping tool** that empowers developers to build and visualize GraphQL schemas and queries without writing any code. Once users import or input their relational database tables, ProtoGraphQL can generate an export package that allows developers to spin up a customized and functional GraphQL Apollo Server as an independent app. (As of version 2.0 custom mutations are also supported!)
+ 
+ProtoGraphQL is in beta. Please post any issues to our GitHub - we are actively looking for opportunities to improve this tool and we welcome your feedback.
+ 
+Upcoming releases will improve the “Schema” view and add support for NoSQL databases. 
+ 
 ## Getting Started:
-
-1. Download for [Mac](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL-1.0.0.dmg), [Windows](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL.Setup.1.0.0.exe), or [Linux](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/protographql_1.0.0_amd64.deb)
-
+ 
+1. Download: [Mac](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL-1.0.0.dmg), [Windows](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL.Setup.1.0.0.exe), [Linux](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/protographql_1.0.0_amd64.deb)
+ 
 2. Extract file
-
-3. Run app
-
+ 
+3. Run application
+ 
 ## How to Use:
-
-1.	When the application loads, click on **Add Table** and populate the table form with a name and new fields. Optionally, you may also use the last three inputs in the form to create relationships to other tables. When you are done, click **Save**.
-
-<p align="center"><kbd><img src="public/assets/pictures/add-table demo.mov.gif" width="800px"></kbd><p>
-
-2.	Navigate to the **Schema**, **Code**, and **Visualize** tabs to toggle views:
-    * **Schema** - view, edit, or delete tables you've added
+ 
+1.  When the application starts you will be given the option to either **CREATE YOUR TABLES** or **IMPORT TABLES**. To create your tables, click the “Add Table” button in the lower left corner of the screen. When your config is complete, click **Save**. When importing, simply paste your database URI in the field and click the **Connect** button. In either case, your tables will be displayed in the main view when you are done.
+ 
+<p align="center"><kbd><img src="public/assets/pictures/v2-add-tables.gif" width="800px"></kbd><p>
+ 
+2.  Navigate to the alternate views within the app using the tabs on the left:  **Schema**, **Code**, **Visualize**, and **Tests**
+ 
+* **Schema** - view, edut or delete tables you've added. 
 
-    <p align="center"><kbd><img src="public/assets/pictures/Schema_Screenshot.png" width="800px"></kbd></p>
+    <p align="center"><kbd><img src="public/assets/pictures/v2-schema-view.png" width="800px"></kbd></p>
 
-    * **Code** - view generated GraphQL and SQL code before export
+* **Code** - view generated GraphQL and SQL code. 
 
-    <p align="center"><kbd><img src="public/assets/pictures/Code_Screenshot.png" width="800px"></kbd></p>
+    <p align="center"><kbd><img src="public/assets/pictures/v2-codeview.png" width="800px"></kbd></p>
 
-    * **Visualize** - view the GraphQL schema intuitively as a simple tree
+* **Visualize** - view the GraphQL schema as a simple tree. 
 
-   <p align="center" ><kbd><img src="public/assets/pictures/tree visializer demo.gif" width="800px"></kbd></p>
-
-3.	Export the code by clicking the **Export** icon. 
-
-   <p align="center" ><kbd><img src="public/assets/pictures/Export_Screenshot.png" width="800px"></kbd></p>
-
-4. Enter your Postgres database URI and then select the directory you want to save your executable GraphQL server.
-
+   <p align="center" ><kbd><img src="public/assets/pictures/v2-visualizer.gif" width="800px"></kbd></p>
+ 
+* **Tests** - create and export query and response pairs from a custom GraphQL Endpoint.
+       
+   <p align="center" ><kbd><img src="public/assets/pictures/v2-test-queries.gif" width="800px"></kbd></p>
+ 
+3.  Export your code by clicking the **Export** icon in the upper right.  
+ 
+   <p align="center" ><kbd><img src="public/assets/pictures/v2-export.png" width="800px"></kbd></p>
+ 
+4. Enter your Postgres database URI, then select the directory you want to save your compressed GraphQL server package in.
+
+ 
 ## How to Run GraphQL Server:
-
+ 
 There are several libraries we could have used to create a GraphQL server, but we decided to use Apollo Server – the most popular library to setup an endpoint for responding to incoming GraphQL requests in JavaScript.
-
-1.	Extract apollo-server.zip file 
-
+ 
+1. Extract apollo-server.zip file 
+ 
 2. Open the project 
-
-3.	Install dependencies 
+ 
+3. Install dependencies 
   ```
   npm install
   ```
-
-4.	Run the server and visit localhost:3000
+ 
+4. Run the server and point your browser to localhost:3000
   ```
   npm start
   ```
-
-5.	Use Apollo Server Playground to mock client GraphQL queries and responses to your server. [Learn more about constructing GraphQL Queries here](https://graphql.org/learn/queries/)
-
+ 
+5.  Use Apollo Server Playground to mock client GraphQL queries and responses to your server. [Learn more about constructing GraphQL Queries here](https://graphql.org/learn/queries/)
+ 
 ## Contributors:
-
+ 
 <img align="right" src="public/assets/pictures/icon/icon.png" width="125px">
-
-- Alena Budzko [@AlenaBudzko](https://github.com/AlenaBudzko) 
-- Bryan Fong [@bryanfong-dev](https://github.com/bryanfong-dev)
-- Rodolfo Guzman [@Rodolfoguzman25](https://github.com/Rodolfoguzman25)
-- Jarred Jack Harewood [@jackhajb](https://github.com/jackhajb)
-- Geoffrey Lin [@geofflin](https://github.com/geofflin)
-
+ 
+- Alena Budzko  |  [@AlenaBudzko](https://github.com/AlenaBudzko) 
+- Bryan Fong  |  [@bryanfong-dev](https://github.com/bryanfong-dev)
+- Rodolfo Guzman  |  [@Rodolfoguzman25](https://github.com/Rodolfoguzman25)
+- Haris Hambasic | [@hambasicharis1995](https://github.com/hambasicharis1995)
+- Jarred Jack Harewood  |  [@jackhajb](https://github.com/jackhajb)
+- Geoffrey Lin  |  [@geofflin](https://github.com/geofflin)
+- Michele Moody  | [@Milmoody](https://github.com/Milmoody)
+- Jessica Vaughan  |  [@jessicavaughan820](https://github.com/jessicavaughan820)
+- Vance Wallace  | [@Vancito](https://github.com/Vancito) 

Diff for: README.md

@@ -0,0 +1,14 @@
+import buildEnvURI from '../src/utils/buildENV';
+import buildENV from '../src/utils/buildENV';
+
+test('When trying to create the Environment URI the result is not null: ', () => {
+    expect(buildEnvURI("thisIsNotNull")).not.toBeNull;
+});
+
+test('When trying to create the Environment URI the result is a string: ', () => {
+    expect(typeof((buildENV("thisIsAString")))).toBe('string');
+});
+
+test('Create the correct Environment URI given test input: ', () => {
+    expect(buildEnvURI("theCorrectURIString")).toBe("DB_URI=theCorrectURIString");
+});

Diff for: _protographql_tests_/buildENV.test.js

@@ -0,0 +1,147 @@
+import buildGQLInputTypes from '../src/utils/buildGQLInputTypes';
+import { build } from 'protobufjs';
+
+const testInput = {
+  0: {
+    type: 'FirstTable',
+    fields: {
+      0: {
+        name: 'FirstColumn',
+        type: 'ID',
+        primaryKey: true,
+        unique: true,
+        required: false,
+        defaultValue: '1',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 0,
+        fieldNum: 0,
+        queryable: false
+      },
+      1: {
+        name: 'SecondColumn',
+        type: 'String',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: 'thisIsADefaultValue',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 0,
+        fieldNum: 1,
+        queryable: true
+      },
+      2: {
+        name: 'ThirdColumn',
+        type: 'String',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: '',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 0,
+        fieldNum: 2,
+        queryable: false
+      }
+    },
+    fieldIndex: 3,
+    tableID: 0
+  },
+  1: {
+    type: 'SecondTable',
+    fields: {
+      0: {
+        name: 'SecondTableFirstColumn',
+        type: 'ID',
+        primaryKey: true,
+        unique: true,
+        required: false,
+        defaultValue: '',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 1,
+        fieldNum: 0,
+        queryable: true
+      },
+      1: {
+        name: 'SecondSecondColumn',
+        type: 'String',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: 'anotherDefaultValue',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 1,
+        fieldNum: 1,
+        queryable: true
+      },
+      2: {
+        name: 'SecondThirdColumn',
+        type: 'ID',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: '',
+        relationSelected: true,
+        relation: {
+          tableIndex: '0',
+          fieldIndex: '0',
+          refType: 'many to one'
+        },
+        tableNum: 1,
+        fieldNum: 2,
+        queryable: true
+      }
+    },
+    fieldIndex: 3,
+    tableID: 1
+  },
+};
+
+const testOutput = `  input FirstTableInput {
+    FirstColumn: ID,
+    SecondColumn: String!,
+    ThirdColumn: String!,
+  }
+
+  input SecondTableInput {
+    SecondTableFirstColumn: ID,
+    SecondSecondColumn: String!,
+    firsttable: FirstTableInput,
+  }
+
+`
+
+test('Building GQL Input Types does not return null: ', () => {
+    expect(buildGQLInputTypes(testInput)).not.toBeNull;
+});
+
+test('When trying to create the GQL Input Types the result is a string: ', () => {
+  expect(typeof(buildGQLInputTypes(testInput))).toBe('string');
+});
+
+test('Building GQL Input Types works given test input: ', () => {
+  expect(buildGQLInputTypes(testInput)).toBe(testOutput);
+});