Merge pull request #20 from oslabs-beta/dev

Dev to main

Author: Yasir-Choudhury

.babelrc

@@ -0,0 +1,16 @@
+{
+    "presets": ["@babel/preset-env", 
+      [
+        "@babel/preset-react",
+          {
+            "runtime":"automatic"
+          }
+      ],
+      "@babel/preset-typescript"
+    ]
+		// "plugins": [
+		// 	["transform-runtime", {
+		// 		"regenerator": true
+		// 	}]
+		// ]
+  }

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+package-lock.json
+.DS_Store

README.md

@@ -1 +1,50 @@
-# obsidian-developer-tool
+# Obsidian-Developer-Tool
+
+The Obsidian Developer Tool is an easy-to-use chrome developer tool extension designed for applications using Obsidian. With this extension, users can:
+
+- visualize GraphQL query and cache performance metrics 
+- send dynamic queries and mutations to a user's database 
+- view and evict data from the browser cache
+
+These features require minimal configuration and are designed to cater to the needs of Obsidian developers utilizing Obsidian Wrapper in their applications.
+
+The Obsidian Developer Tool is an open-source developer tool accelerated by OS Labs and developed by [Yurii Shchyrba](https://github.com/YuriiShchyrba),   [Linda Zhao](https://github.com/lzhao15), [Ali Fay](https://github.com/ali-fay), [Anthony Guan](https://github.com/guananthony), [Yasir Choudhury](https://github.com/Yasir-Choudhury)   
+
+# Installation
+
+The Obsidian Developer Tool is currently under the review process to be launched on the Chrome Extension Store. In the meantime, the easiest way to use the developer tool is to build from source and manually add as a chrome extension. To build the latest version, execute the following commands:
+
+
+```
+git clone https://github.com/oslabs-beta/obsidian-developer-tool 
+npm install
+npm run build
+```
+
+Then, in the Chrome Extensions Page (chrome://extensions/), toggle "Developer mode" on in the upper righthand corner, click on "Load unpacked" and navigate to /Obsidian-developer-tool/dist/ and click "Select". The extension should now be loaded and available within chrome developer tools.
+
+# Usage and Configuration
+Clone the Obsidian repository [here](https://github.com/open-source-labs/obsidian), and in the Obsidian Wrapper file, on line 10, update ```chromeExtensionId``` to the value of the unique chrome extension ID for the tool you just unpacked in your extensions. This can be found at chrome://extensions/ on the card for your loaded extension.
+
+There is no further configuration necessary. As long as your application is using Obsidian Wrapper (imported as a path to the local file with the updated chrome extension), the devtool will be able to retrieve cache data and query metrics on actions initiated in the app. 
+
+**Performance:** <br/>
+Navigate to this tab if you would like to visualize the response time of your GraphQL queries. You can access a log of your queries and mutations, as well as the corresponding response time data. Here you can see the lower response times on subsequent queries for the same data - Obsidian's caching strategies at work!
+
+**Cache:** <br/>
+Navigate to this tab to see the data currently in your client-side cache based on queries being made. All of the cached data will appear here, and you also have the ability to manually clear the cache with the 'clear cache' button. 
+
+**Playground:** <br/>
+In order to use this feature, you must plug in your server's GraphQL endpoint (ex. http://localhost:3000/graphQL) and click the submit button. You will now be able to write queries as well as mutations in order to retrieve and view your data.
+
+**Usage Note:**
+Use of this developer tool requires Obsidian version 5.0 or greater.
+
+<div><img src='./src/assets/gifs/performance.gif' width="60%"></div>
+<div><img src='./src/assets/gifs/cache.gif' width="60%"></div>
+<div><img src='./src/assets/gifs/playground.gif' width="60%"></div>
+
+# More information:
+Obsidian and Obsidian demo documentation: 
+* [Obsidian](https://github.com/open-source-labs/obsidian) 
+* [Obsidian Demo](https://github.com/oslabs-beta/obsidian-demo-5.0) 

__test__/cache.js

@@ -0,0 +1,43 @@
+import { useInput } from '../src/pages/Panel/Components/useInput';
+import Enzyme , {mount,shallow} from 'enzyme';
+import { act, renderHook } from '@testing-library/react-hooks';
+import Playground from '../src/pages/Panel/Components/Playground';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import PlaygroundHeader from '../src/pages/Panel/Components/PlaygroundHeader';
+import QueryInput from '../src/pages/Panel/Components/QueryInput';
+import QueryOutput from '../src/pages/Panel/Components/QueryOutput';
+
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Input Insertion', () => {
+
+   let wrapper;
+
+   it('renders children',()=>{
+    wrapper = shallow(<Playground />);
+    expect(wrapper.containsMatchingElement(<PlaygroundHeader />)).toEqual(true);
+    expect(wrapper.containsMatchingElement(<QueryInput />)).toEqual(true);
+    expect(wrapper.containsMatchingElement(<QueryOutput />)).toEqual(true);
+   });
+
+  it('send "simple text" input value', () => {
+    const { result } = renderHook(useInput);
+
+    act(() => {
+      result.current.onChange('simple text');
+    });
+
+    expect(result.current.inputValue).toBe('simple text');
+  });
+
+  it('send "" (no input) input value', () => {
+    const { result } = renderHook(useInput);
+
+    act(() => {
+      result.current.onChange('');
+    });
+
+    expect(result.current.inputValue).toBe('');
+  });
+});

__test__/performance.js

@@ -0,0 +1,143 @@
+import React from 'React';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import regeneratorRuntime from 'regenerator-runtime';
+
+import Header from '../src/pages/Panel/Components/AppBar.tsx';
+import Queries from '../src/pages/Panel/Components/Performance Components/Queries.tsx';
+import Log from '../src/pages/Panel/Components/Performance Components/Log.tsx';
+
+import Playground from '../src/pages/Panel/Components/Playground';
+import PlaygroundHeader from '../src/pages/Panel/Components/PlaygroundHeader';
+
+document.createRange = () => {
+  const range = new Range();
+
+  range.getBoundingClientRect = jest.fn();
+
+  range.getClientRects = () => {
+    return {
+      item: () => null,
+      length: 0,
+      [Symbol.iterator]: jest.fn()
+    };
+  };
+
+  return range;
+}
+
+describe('Unit testing React components', () => {
+    describe('Side Bar', () => {
+      test('Header is mounted', () => {
+        const props = {
+        count: 1,
+        setCount: jest.fn()
+      }
+      render (<Header {...props}/>)
+      const header = screen.getAllByText('Obsidian Developer Tool')
+      expect(header.length === 1)
+      })
+    });
+
+  describe('Performance Tab', () => {
+    //check amount of queries and mutation
+    test('Number of query log components responds to number of query messages', () => {
+      const props = {
+        data: ['beans', 2, 3],
+        setGraphqlData: jest.fn(),
+      };
+      const test = render(<Queries {...props} />);
+      const logs0 = screen.getAllByText('0. Query');
+      expect(logs0.length).toBe(1);
+      const logs1 = screen.getAllByText('1. Query');
+      expect(logs1.length).toBe(1);
+      const logs2 = screen.getAllByText('2. Query');
+      expect(logs2.length).toBe(1);
+    });
+    //check to see if graphql click event listener is activated
+    test('Log functions invoked on click', () => {
+      const props = {
+        onClick: jest.fn(),
+        name: 'test',
+      };
+      render(<Log {...props} />);
+      const logs = screen.getByText(props.name);
+      userEvent.click(logs);
+      expect(props.onClick).toHaveBeenCalledTimes(1);
+      userEvent.click(logs);
+      expect(props.onClick).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Playground Tab', () => {
+
+    test('Playground input field',  ()=>{
+      render(<Playground />)
+      userEvent.type((screen.getByText('Submit')).previousSibling, 'http://localhost:8000/graphql');
+      userEvent.click(screen.getByText('Submit'));
+      expect(screen.getByRole('heading').textContent).toBe('Current Endpoint: http://localhost:8000/graphql');
+    });
+    
+    test('Playground security test for harmful characters',  ()=>{
+      render(<Playground />)
+      userEvent.type((screen.getByText('Submit')).previousSibling, 'harmful characters " ) & < ');
+      userEvent.click(screen.getByText('Submit'));
+      expect(screen.getByRole('heading').textContent).toBe("Current Endpoint: harmful characters &amp;amp;amp;amp;amp;amp;amp;quot; &amp;amp;amp;amp;amp;parens; &amp;amp;amp;amp; &amp;lt; ");
+    });
+
+
+      test('Endpoint submit button invokes function on click', () => {
+        const props = {
+          onEndpointChange: jest.fn()
+        };
+        render(<PlaygroundHeader {...props} />)
+        const button = screen.getByRole('button')
+        userEvent.click(button);
+        expect(props.onEndpointChange).toHaveBeenCalledTimes(1);
+        userEvent.click(button);
+        expect(props.onEndpointChange).toHaveBeenCalledTimes(2);
+      });
+
+      test('Input value initially set to empty string with placeholder', () => {
+        const props = {
+          onEndpointChange: jest.fn()
+        };
+        render(<PlaygroundHeader {...props} />)
+       const input = screen.getAllByDisplayValue('')
+       expect(input.length).toBe(1)
+       expect(input[0].getAttribute('placeholder')).toBe('Enter GraphQL endpoint here')
+      });
+
+      test('Input value changes with typing', () => {
+        const props = {
+          onEndpointChange: jest.fn()
+        };
+        render(<PlaygroundHeader {...props} />)
+       const input = screen.getByDisplayValue('')
+       userEvent.type(input, 'hello')
+       const newInput = screen.getAllByDisplayValue('hello')
+       expect(newInput.length).toBe(1)
+      });
+
+      test('Input value resets after button click', () => {
+        const props = {
+          onEndpointChange: jest.fn()
+        };
+        render(<PlaygroundHeader {...props} />)
+       const input = screen.getAllByDisplayValue('')
+       expect(input.length).toBe(1)
+
+       userEvent.type(screen.getByDisplayValue(''), 'hello')
+       const testInput = screen.queryAllByDisplayValue('')
+       expect(testInput.length).toBe(0)
+       const newInput = screen.getAllByDisplayValue('hello')
+       expect(newInput.length).toBe(1)
+       const button = screen.getByRole('button')
+       userEvent.click(button);
+       const clickInput = screen.getAllByDisplayValue('')
+       expect(clickInput.length).toBe(1)
+       const oldInput = screen.queryAllByDisplayValue('hello')
+       expect(oldInput.length).toBe(0)
+      });
+  });
+});

__test__/playground.test.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};