Initial test setup

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+tests/coverage

lib/src/components/DevTool/Console/Output.js

@@ -32,12 +32,12 @@ const theme = {
 };
 
 const Wrapper = styled.View``;
-const List = styled.View`
+export const List = styled.View`
   padding-left: 10px;
   border-left-width: 10px;
   border-color: ${props => props.color || 'black' }
 `;
-const Row = styled.View`
+export const Row = styled.View`
   margin: 10px;
 `;
 

lib/src/log.js

@@ -1,4 +1,4 @@
-export const proxyConsole = window.console;
+export const proxyConsole = global.console;
 
 class Log {
   constructor() {

lib/src/network.js

@@ -1,4 +1,4 @@
-const proxied = window.XMLHttpRequest.prototype.open;
+const proxied = global.XMLHttpRequest ? global.XMLHttpRequest.prototype.open : () => {};
 let currentId = 0;
 
 class Network {
@@ -46,7 +46,7 @@ class Network {
   attach() {
     const me = this;
     const headers = {};
-    window.XMLHttpRequest.prototype.open = function proxyOpen (...args) {
+    global.XMLHttpRequest.prototype.open = function proxyOpen (...args) {
       let sendArgs;
       const [
         method,
@@ -100,7 +100,7 @@ class Network {
   }
 
   detach() {
-    window.XMLHttpRequest.prototype.open = proxied;
+    global.XMLHttpRequest.prototype.open = proxied;
   }
 }
 

package.json

@@ -2,7 +2,8 @@
   "private": true,
   "workspaces": [
     "demo",
-    "lib"
+    "lib",
+    "tests"
   ],
   "scripts": {
     "postinstall": "lerna bootstrap",

tests/__mocks__/react.js

@@ -0,0 +1,2 @@
+const React = require('react')
+module.exports = { ...React, useEffect: React.useLayoutEffect }

tests/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [require.resolve('babel-plugin-module-resolver'), {
+        alias: {
+          '@babel/runtime': '../node_modules/@babel/runtime',
+        }
+      }]
+    ]
+  };
+};

tests/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "react-native",
+  rootDir: '..',
+};

tests/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "tests",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "react-test-renderer": "^16.8.6"
+  }
+}

tests/src/Console.spec.js

@@ -0,0 +1,47 @@
+import getDevTools from './getDevTools';
+import renderer from 'react-test-renderer';
+
+describe('Console', () => {
+  describe('output', () => {
+    let devTool;
+
+    beforeEach(() => {
+      devTool = getDevTools();
+    });
+    
+    it('should render an emptry list', () => {
+      expect(devTool.console.output().props.logs).toEqual([
+      ]);
+    });
+    
+    it('should render one item', () => {
+      renderer.act(() => {
+        devTool.log.add('test');
+      });
+      expect(devTool.console.output().props.logs).toEqual([
+        'test',
+      ]);
+    });
+    
+    it('should render multible items item', () => {
+      renderer.act(() => {
+        devTool.log.add('1');
+        devTool.log.add('2');
+        devTool.log.add('3');
+        devTool.log.add('4');
+        devTool.log.add('5');
+        devTool.log.add('6');
+        devTool.log.add('7');
+      });
+      expect(devTool.console.output().props.logs).toEqual([
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+      ]);
+    });
+  });
+})

tests/src/getDevTools.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {
+  DevTool,
+} from 'react-native-debug-console';
+import Console from 'react-native-debug-console/src/components/DevTool/Console';
+import ConsoleOutput, { Row as OutputRow} from 'react-native-debug-console/src/components/DevTool/Console/Output';
+import ConsoleInput from 'react-native-debug-console/src/components/DevTool/Console/Input';
+
+import Requests from 'react-native-debug-console/src/components/DevTool/Requests';
+import RequestsDetails from 'react-native-debug-console/src/components/DevTool/Requests/Details';
+import RequestsList from 'react-native-debug-console/src/components/DevTool/Requests/List';
+
+import Storage from 'react-native-debug-console/src/components/DevTool/Storage';
+import StorageKeys from 'react-native-debug-console/src/components/DevTool/Storage/Keys';
+import StorageValues from 'react-native-debug-console/src/components/DevTool/Storage/Value';
+
+const createLog = () => {
+  const listeners = [];
+  const logs = [];
+  return {
+    listen: (l) => listeners.push(l),
+    unlisten: (l) => listeners = listeners.filter(nl => nl !== l),
+    add: (log) => {
+      logs.push(log);
+      listeners.forEach(l => l(logs));
+    }
+  }
+}
+
+const getDevTools = () => {
+  const log = createLog();
+  const instance = renderer.create(
+    <DevTool
+      logProvider={log}
+    />
+  );
+  const result = {
+    instance,
+    console: {
+      main: () => instance.root.findByType(Console),
+      output: () => instance.root.findByType(ConsoleOutput),
+      rows: () => instance.root.findAllByType(OutputRow),
+      input: () => instance.root.findByType(ConsoleInput),
+    },
+    requests: {
+      main: () => instance.root.findByType(Requests),
+      output: () => instance.root.findByType(RequestsDetails),
+      input: () => instance.root.findByType(RequestsList),
+    },
+    storage: {
+      main: () => instance.root.findByType(Storage),
+      output: () => instance.root.findByType(StorageKeys),
+      input: () => instance.root.findByType(StorageValues),
+    },
+    log,
+  };
+  return result;
+};
+
+export default getDevTools;