Remove QUnit, Add Jest (#1443)

.babelrc

@@ -3,15 +3,16 @@
     [
       "env",
       {
-        "modules": false,
         "targets": {
           "browsers": "> 1%",
           "uglify": true
         },
         "useBuiltIns": true
       }
     ],
-    "react"
+    [
+      "react"
+    ]
   ],
   "plugins": [
     "syntax-dynamic-import",
@@ -25,3 +26,4 @@
     ]
   ]
 }
+

.stylelintignore

@@ -1 +1,2 @@
 _*.scss
+*test.tsx

README.md

@@ -139,6 +139,8 @@ To stop using Eyeshade locally, set `API_EYESHADE_BASE_URI=""`.
 4. To test email, run a local mail server at localhost:25
 `mailcatcher`
 
+5. To view the emails sent to your inbox you can the inbox at http://localhost:1080
+
 ## Development
 
 ### Config
@@ -180,6 +182,8 @@ yarn lint
 
 ## Testing
 
+### Ruby
+
 ```sh
 bin/rake test
 ```
@@ -203,6 +207,14 @@ We also use ImageMagick to process user uploaded images. If you don't have it al
 brew install imagemagick
 ```
 
+### Javascript
+
+We use jest for our javascript testing framework. You can run the tests through the following command.
+
+```sh
+yarn test
+```
+
 ## Running locally with docker-compose
 
 First, [install docker and docker compose](https://docs.docker.com/compose/install/).
@@ -249,11 +261,11 @@ UPHOLD_SCOPE=cards:read,user:read,transactions:transfer:others
 
 ```
 
-If you wish to make modifications to the compose files you can place a file named `docker-compose.override.yml` at the 
-top of the repo. For example you can expose ports on your system for the databases with this 
+If you wish to make modifications to the compose files you can place a file named `docker-compose.override.yml` at the
+top of the repo. For example you can expose ports on your system for the databases with this
 `docker-compose.override.yml`:
 
-```
+```yaml
 version: "2.1"
 
 services:
@@ -293,7 +305,7 @@ docker-compose run app rake test
 Other one off commands can be run as above, but replacing `rake test`. Note this spawns a new container.
 
 ### Debugging
-Debugging with byebug and pry can be done by attaching to the running process. First get the container 
+Debugging with byebug and pry can be done by attaching to the running process. First get the container
 id with `docker ps`
 
 ```sh
@@ -313,5 +325,5 @@ docker attach 234f116cd942
 To connect with a bash shell on a running container use:
 ```sh
 docker exec -i -t 234f116cd942 /bin/bash
-root@234f116cd942:/var/www# 
+root@234f116cd942:/var/www#
 ```

app/javascript/site_channels/siteChannels.js

@@ -4,23 +4,23 @@ function openFailedVerificationModal() {
 }
 
 function isAVerificationPage(){
-  isDNSVerificationPage = document.querySelectorAll('body[data-action="verification_dns_record"]').length === 1
-  isPublicFileVerificationPage = document.querySelectorAll('body[data-action="verification_public_file"]').length === 1
-  isWordPressVerificationPage = document.querySelectorAll('body[data-action="verification_wordpress"]').length === 1
-  isGithubVerificationPage = document.querySelectorAll('body[data-action="verification_github"]').length === 1
+  let isDNSVerificationPage = document.querySelectorAll('body[data-action="verification_dns_record"]').length === 1
+  let isPublicFileVerificationPage = document.querySelectorAll('body[data-action="verification_public_file"]').length === 1
+  let isWordPressVerificationPage = document.querySelectorAll('body[data-action="verification_wordpress"]').length === 1
+  let isGithubVerificationPage = document.querySelectorAll('body[data-action="verification_github"]').length === 1
 
   return isDNSVerificationPage || isPublicFileVerificationPage || isWordPressVerificationPage || isGithubVerificationPage
 }
 
-window.addEventListener('load', function() {
+window.addEventListener('DOMContentLoaded', function() {
 
   if (!isAVerificationPage()) {
     return;
   }
 
   let verificationFailedElement = document.getElementById('verification_failed_modal_wrapper');
-  
+
   if (verificationFailedElement.getAttribute('data-open-verification-failed-modal') === 'true') {
       openFailedVerificationModal();
     }
-});
+});

app/javascript/testSetup.js

@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ const Enzyme = require('enzyme')
+ const EnzymeAdapter = require('enzyme-adapter-react-16')
+ require('jest-styled-components')
+
+ // Setup enzyme's react adapter
+ Enzyme.configure({ adapter: new EnzymeAdapter() })

app/javascript/utils/dates.js

@@ -1,3 +1,3 @@
 export function formatFullDate(date) {
   return date.toLocaleDateString("en-US", { month: 'long', day: '2-digit', year: 'numeric' });
-}
+}

app/javascript/utils/dates.test.tsx

@@ -0,0 +1,6 @@
+import { formatFullDate } from './dates';
+
+test('Formats the date correctly', () => {
+  const date = new Date(2018, 0, 1);
+  expect(formatFullDate(date)).toBe('January 01, 2018');
+});

app/javascript/wallet.test.tsx

@@ -0,0 +1,49 @@
+import { Wallet } from './wallet';
+
+describe('Wallet', () => {
+  let walletDataWithSettlement = {"lastSettlement":{"balance":{"probi":53213081343122476086},"date":"2018-06-04T15:55:12.000-04:00"},"providerWallet":{"provider":"uphold","authorized":true,"defaultCurrency":"USD","rates":{"BTC":"0.00003514","ETH":0.0004749371464487743,"LTC":0.0022794117647058827,"USD":0.28188557439999995,"EUR":0.24163829927299837},"availableCurrencies":["USD","BAT","BTC","EUR","XAU"],"possibleCurrencies":["AED","ARS","AUD","BAT","BCH","BRL","BTC","BTG","CAD","CHF","CNY","DASH","DKK","ETH","EUR","GBP","HKD","ILS","INR","JPY","KES","LTC","MXN","NOK","NZD","PHP","PLN","SEK","SGD","USD","XAG","XAU","XPD","XPT","XRP"],"scope":"cards:read user:read transactions:transfer:others"},"channelBalances":{"youtube#channel:UC1CF3Uud5SZJAOtusRcaMZg":{"probi":17737693781040825362},"youtube#channel:UCpspxI6hEuK9AVxNMtZsObA":{"probi":17737693781040825362}}};
+  let walletDataWithoutSettlement = {"providerWallet":{"provider":"uphold","authorized":true,"defaultCurrency":"USD","rates":{"BTC":"0.00003514","ETH":0.0004749371464487743,"LTC":0.0022794117647058827,"USD":0.28188557439999995,"EUR":0.24163829927299837},"availableCurrencies":["USD","BAT","BTC","EUR","XAU"],"possibleCurrencies":["AED","ARS","AUD","BAT","BCH","BRL","BTC","BTG","CAD","CHF","CNY","DASH","DKK","ETH","EUR","GBP","HKD","ILS","INR","JPY","KES","LTC","MXN","NOK","NZD","PHP","PLN","SEK","SGD","USD","XAG","XAU","XPD","XPT","XRP"],"scope":"cards:read user:read transactions:transfer:others"},"channelBalances":{"youtube#channel:UC1CF3Uud5SZJAOtusRcaMZg":{"probi":17737693781040825362},"youtube#channel:UCpspxI6hEuK9AVxNMtZsObA":{"probi":17737693781040825362}}};
+  let walletDataNotUpholdVerified = {};
+
+  it('Converts probi to BAT', () => {
+    expect(Wallet._probi_to_bat(5E20)).toEqual(500)
+    expect(Wallet._probi_to_bat("5.01E20")).toEqual(501)
+  })
+
+  it('initializes from json with settlement data', () => {
+    const wallet = new Wallet(walletDataWithSettlement);
+
+    expect(wallet.providerWallet.defaultCurrency).toEqual("USD");
+    expect(wallet.lastSettlement.amount.bat).toEqual(53.213081343122475);
+    expect(wallet.lastSettlement.amount.converted).toEqual(53.213081343122475 * 0.28188557439999995);
+    expect(wallet.lastSettlement.amount.currency).toEqual("USD");
+  });
+
+  it('initializes from json without settlement data', () => {
+    const wallet = new Wallet(walletDataWithoutSettlement);
+
+    expect(wallet.lastSettlement.amount).toBeUndefined();
+  });
+
+  it('initializes from json without uphold wallet data', () => {
+    let wallet = new Wallet(walletDataNotUpholdVerified);
+
+    expect(wallet.providerWallet).toBeUndefined();
+  });
+
+  it('adds up total channel amounts and converts to default currency', () => {
+    let wallet = new Wallet(walletDataWithSettlement);
+
+    expect(wallet.totalAmount.bat).toEqual(17.737693781040825362 + 17.737693781040825362);
+    expect(wallet.totalAmount.converted).toEqual(10);
+    expect(wallet.totalAmount.currency).toEqual("USD");
+  });
+
+  it('total channel amount is 0 if there are no channels', () => {
+    let wallet = new Wallet(walletDataNotUpholdVerified);
+
+    expect(wallet.totalAmount.bat).toEqual(0);
+    expect(wallet.totalAmount.converted).toBeUndefined();
+    expect(wallet.totalAmount.currency).toBeUndefined();
+  });
+})

package.json

@@ -1,23 +1,58 @@
 {
   "scripts": {
     "start": "NODE_ENV=test karma start",
-    "test": "NODE_ENV=test karma start --single-run --browsers ChromeHeadless karma.conf.js",
     "lint": "yarn run lint-scss && yarn run lint-js-css && yarn run lint-ts",
     "lint-scss": "stylelint --config '.stylelintrc-scss.json' 'app/**/*.{ts,tsx,scss}' --syntax scss",
     "lint-js-css": "stylelint --config '.stylelintrc-jsx.json' 'app/**/*.{ts,tsx}'",
-    "lint-ts": "tslint --project tsconfig.json 'app/javascript/**/*.{ts,tsx}'"
+    "lint-ts": "tslint --project tsconfig.json 'app/javascript/**/*.{ts,tsx}'",
+    "test": "jest"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json"
+    ],
+    "globals": {
+      "ts-jest": {
+        "babelConfig": true,
+        "tsConfig": "tsconfig-jest.json",
+        "isolatedModules": true
+      }
+    },
+    "resetMocks": true,
+    "resetModules": true,
+    "collectCoverage": false,
+    "collectCoverageFrom": [
+      "src/**/*.tsx",
+      "!src/**/index.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/app/javascript/**/*.test.tsx"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/node_modules/"
+    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/app/javascript/testSetup.js",
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|svg|ttf|woff|woff2)$": "<rootDir>/.testconfig/fileMocks.ts",
+      "\\.(css)$": "identity-obj-proxy"
+    },
+    "preset": "ts-jest/presets/js-with-babel"
   },
   "dependencies": {
     "@rails/webpacker": "3.5",
     "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",
-    "babel-plugin-styled-components": "^1.8.0",
-    "babel-preset-react": "^6.24.1",
     "brave-ui": "^0.30.8",
     "chart.js": "^2.7.2",
     "clipboard": "^2.0.1",
     "prop-types": "^15.6.2",
-    "rails-ujs": "^5.1.4",
+    "rails-ujs": "^5.2.2",
     "react": "^16.4.1",
     "react-avatar-editor": "^11.0.4",
     "react-dom": "^16.4.1",
@@ -26,12 +61,19 @@
     "typescript": "^3.1.6"
   },
   "devDependencies": {
+    "@types/jest": "^23.3.9",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.6.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-plugin-styled-components": "^1.8.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "hoek": "^6.0.1",
-    "karma": "^3.1.1",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-qunit": "^2.1.0",
-    "karma-webpack": "^3.0.0",
-    "qunit": "^2.6.1",
+    "jest": "^23.6.0",
+    "jest-styled-components": "^5.0.1",
+    "ts-jest": "^23.10.4",
     "stylelint": "^9.4.0",
     "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-config-styled-components": "^0.1.1",

tsconfig-jest.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}