testing implemented

__mocks__/MockCases.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {jest} from '@jest/globals';
+
+// set up mockState with real state name as prop, and state properties passed in
+
+export const schemaDataState = {
+  schemaDataState: {},
+};
+
+export const schemaDataSetState = {
+  generalState: {
+    setSchemaData: jest.fn(),
+  },
+};
+
+export const uriIdState = {
+    uriIdState: {},
+  };
+
+  export const uriIdSetState = {
+    uriIdState: {
+        setUriId: jest.fn(),
+    },
+};
+
+export const selectedSchemaDataState = {
+    selectedSchemaDataState: {},
+  };
+
+  export const selectedSchemaDataSetState = {
+    selectedSchemaDataState: {
+        setSelectedSchemaData: jest.fn(),
+    },
+};
+
+export const clickedState = {
+    clicked: {},
+  };
+
+  export const clickedSetState = {
+    clicked: {
+        setClicked: jest.fn(),
+    },
+};
+
+
+export const graphQLSchemaState = {
+    graphQLSchema: {},
+  };
+
+  export const graphQLSchemaSetState = {
+    graphQLSchema: {
+        setGraphQLSchema: jest.fn(),
+    },
+};
+
+// export const homeGenState = {
+//     generalState: {
+//       onHomePage: true,
+//       URImodal: false,
+//       helpModal: false,
+//     },
+//   };
+
+//   export const appGenState = {
+//     generalState: {
+//       onHomePage: false,
+//       URImodal: false,
+//       helpModal: false,
+//       generalDispatch: jest.fn(),
+//     },
+//   };

__mocks__/MockServer.js

@@ -0,0 +1,26 @@
+// tests RESTful requests. there's also a GraphQL one
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+// import 'whatwg-fetch';
+
+const server = setupServer(
+  rest.get('/', (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ greeting: 'hello world' }));
+  })
+);
+
+// establish API mocking before all tests
+beforeAll(() => server.listen());
+// reset any request handlers that are declared as a part of our tests
+// (i.e. for testing one-time error scenarios)
+afterEach(() => server.resetHandlers());
+// clean up once the tests are done
+afterAll(() => server.close());
+
+async function onRoot() {
+  const result = await fetch('/');
+  const data = await result.json();
+  return data;
+}
+
+export { server, rest };

__mocks__/SetupTests.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+import 'regenerator-runtime/runtime';

__mocks__/electronMock.js

@@ -0,0 +1,3 @@
+export const ipcRenderer = {
+    on: jest.fn(),
+  };

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub"

__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+module.exports = {};
+

__tests__/Enzyme.test.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import Adapter from 'enzyme-adapter-react-16';
+import { shallow, configure } from 'enzyme';
+
+// import custom useContext
+import * as MockContexts from '../app/src/state/Contexts';
+
+// import mock cases
+import { schemaDataState, schemaDataSetState } from '../__mocks__/MockCases';
+import { uriIdState, uriIdSetState } from '../__mocks__/MockCases';
+import { selectedSchemaDataState, selectedSchemaDataSetState } from '../__mocks__/MockCases';
+import { clickedState, clickedSetState } from '../__mocks__/MockCases';
+import { graphQLSchema, graphQLSetSchema } from '../__mocks__/MockCases';
+
+// import React Components
+import CheckBox from '../app/src/Components/CheckBox';
+import DropDownMenu from '../app/src/Components/DropDownMenu';
+import MongoDBURI from '../app/src/Components/MongoDBURI';
+import MongoSchemaIDE from '../app/src/Components/MongoSchemaIDE';
+import PlaygroundButton from '../app/src/Components/PlaygroundButton';
+import TreeGraph from '../app/src/Components/TreeGraph';
+import App from '../app/src/App';
+
+configure({ adapter: new Adapter() });
+
+describe('<App> renders on electron app', () => {
+    const wrapper = shallow(<App />);
+
+    it('App contains Logo', () => {
+      expect(wrapper.find('img')).toBeTruthy();
+    });
+})
+
+describe('MongoDBURI Input Box Displays', () => {
+  it('MongoDBURI Input Box renders initially', () => {
+    // jest spyOn can only spy on functions, which is why we created our custom useContext (clients/state/context.jsx)
+    // we pass in our mock state as context to the spy
+    jest
+    .spyOn(MockContexts, 'useGenContext')
+    // .mockImplementation(() =>  uriIdState);
+
+    const wrapper = shallow(<MongoDBURI />);
+    // create a variable that equal holds the boolean value of whether wrapper has a class of NavBarContainer
+    const confirm = wrapper.hasClass('formContainer');
+    // expects confirm (boolean => true) to be true
+    expect(confirm).toBe(true);
+  });
+})
+
+describe('PlaygroundButton Displays', () => {
+  it('PlaygroundButton renders initially', () => {
+    // jest spyOn can only spy on functions, which is why we created our custom useContext (clients/state/context.jsx)
+    // we pass in our mock state as context to the spy
+    jest
+    .spyOn(MockContexts, 'useGenContext')
+    // .mockImplementation(() => schemaDataState);
+
+    const wrapper = shallow(<PlaygroundButton />);
+    // create a variable that equal holds the boolean value of whether wrapper has a class of NavBarContainer
+    const confirm = wrapper.hasClass('playgroundButton');
+    // expects confirm (boolean => true) to be true
+    expect(confirm).toBe(true);
+  });
+})
+
+describe('DropDownMenu Displays', () => {
+  it('DropDownMenu renders initially', () => {
+    // jest spyOn can only spy on functions, which is why we created our custom useContext (clients/state/context.jsx)
+    // we pass in our mock state as context to the spy
+    jest
+    .spyOn(MockContexts, 'useGenContext')
+    // .mockImplementation(() => schemaDataState);
+
+    const wrapper = shallow(<DropDownMenu />);
+    // create a variable that equal holds the boolean value of whether wrapper has a class of NavBarContainer
+    const confirm = wrapper.hasClass('dropDown');
+    // expects confirm (boolean => true) to be true
+    expect(confirm).toBe(true);
+  });
+})
+
+
+describe('TreeGraph Displays', () => {
+  it('TreeGraph renders initially', () => {
+    // jest spyOn can only spy on functions, which is why we created our custom useContext (clients/state/context.jsx)
+    // we pass in our mock state as context to the spy
+    jest
+    .spyOn(MockContexts, 'useGenContext')
+    // .mockImplementation(() => schemaDataState);
+
+    const wrapper = shallow(<TreeGraph />);
+    // create a variable that equal holds the boolean value of whether wrapper has a class of NavBarContainer
+    const confirm = wrapper.hasClass('tree');
+    // expects confirm (boolean => true) to be true
+    expect(confirm).toBe(true);
+  });
+})
+
+
+
+

app/src/state/Contexts.jsx

@@ -0,0 +1,11 @@
+import React, { createContext, useContext } from 'react';
+
+export const GeneralContext = createContext();
+export const CodeContext = createContext();
+export const MongoContext = createContext();
+export const URIContext = createContext();
+
+// creating custom useContext for testing purposes. Jest/Enzyme does not have a way to test and provide consumers context.
+export const useGenContext = () => useContext(GeneralContext);
+export const useMongoContext = () => useContext(MongoContext);
+export const useURIContext = () => useContext(URIContext);

jest-setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+    global.testServer = await require('./server');
+  };

jest-teardown.js

@@ -0,0 +1,3 @@
+module.exports = async (globalConfig) => {
+    testServer.close();
+  };

jest.config.js

@@ -0,0 +1,24 @@
+const {defaults} = require('jest-config');
+
+module.exports = {
+    verbose: true,
+    // preset: 'ts-jest',
+    // transform: {
+    //   '^.+\\.tsx?$': 'babel-jest',
+    // },
+    moduleNameMapper: {
+      "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
+    }
+};
+
+// module.exports = {
+//     verbose: true,
+//     runner: "@jest-runner/electron",
+//     testEnvironment: "@jest-runner/electron/environment",
+//     moduleNameMapper: {
+//       // "collectCoverage": true,
+//       electron: "<rootDir>/__mocks__/electronMock.js",
+//       "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMocks.js",
+//       "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/__mocks__/fileMock.js",
+//     },
+//     resolver: null,};