1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Merge pull request #1356 from MetaMask/mascaraTuneUps

Mascara tune ups
This commit is contained in:
kumavis 2017-04-28 12:37:53 -07:00 committed by GitHub
commit 012f837c1d
15 changed files with 281 additions and 84 deletions

3
.gitignore vendored
View File

@ -16,3 +16,6 @@ development/bundle.js
builds.zip builds.zip
test/integration/bundle.js test/integration/bundle.js
development/states.js development/states.js
test/background.js
test/bundle.js
test/test-bundle.js

View File

@ -1,20 +1,24 @@
start the dual servers (dapp + mascara) start the dual servers (dapp + mascara)
``` ```
node server.js npm run mascara
``` ```
## First time use: ## First time use:
- navigate to: http://localhost:9001/popup/popup.html - navigate to: http://localhost:9001
- Create an Account - Create an Account
- go back to http://localhost:9002/ - go back to http://localhost:9002
- open devTools - open devTools
- click Sync Tx - click Sync Tx
### Todos ## Tests:
- [ ] Figure out user flows and UI redesign ```
- [ ] Figure out FireFox npm run testMascara
Standing problems: ```
- [ ] IndexDb
Test will run in browser, you will have to have these browsers installed:
- Chrome
- Firefox
- Opera

View File

@ -1,4 +1,5 @@
global.window = global global.window = global
const self = global
const pipe = require('pump') const pipe = require('pump')
const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js') const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js')
@ -6,7 +7,7 @@ const connectionListener = new SwGlobalListener(self)
const setupMultiplex = require('../../app/scripts/lib/stream-utils.js').setupMultiplex const setupMultiplex = require('../../app/scripts/lib/stream-utils.js').setupMultiplex
const PortStream = require('../../app/scripts/lib/port-stream.js') const PortStream = require('../../app/scripts/lib/port-stream.js')
const DbController = require('./lib/index-db-controller') const DbController = require('idb-global')
const SwPlatform = require('../../app/scripts/platforms/sw') const SwPlatform = require('../../app/scripts/platforms/sw')
const MetamaskController = require('../../app/scripts/metamask-controller') const MetamaskController = require('../../app/scripts/metamask-controller')
@ -21,6 +22,7 @@ const STORAGE_KEY = 'metamask-config'
// const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG' // const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
const METAMASK_DEBUG = true const METAMASK_DEBUG = true
let popupIsOpen = false let popupIsOpen = false
let connectedClientCount = 0
const log = require('loglevel') const log = require('loglevel')
global.log = log global.log = log
@ -31,6 +33,11 @@ self.addEventListener('install', function(event) {
}) })
self.addEventListener('activate', function(event) { self.addEventListener('activate', function(event) {
event.waitUntil(self.clients.claim()) event.waitUntil(self.clients.claim())
self.clients.matchAll()
.then((clients) => {
if (connectedClientCount < clients.length) sendMessageToAllClients('reconnect')
})
}) })
console.log('inside:open') console.log('inside:open')
@ -40,7 +47,6 @@ console.log('inside:open')
let diskStore let diskStore
const dbController = new DbController({ const dbController = new DbController({
key: STORAGE_KEY, key: STORAGE_KEY,
version: 2,
}) })
loadStateFromPersistence() loadStateFromPersistence()
.then((initState) => setupController(initState)) .then((initState) => setupController(initState))
@ -107,6 +113,7 @@ function setupController (initState, client) {
connectionListener.on('remote', (portStream, messageEvent) => { connectionListener.on('remote', (portStream, messageEvent) => {
console.log('REMOTE CONECTION FOUND***********') console.log('REMOTE CONECTION FOUND***********')
connectedClientCount += 1
connectRemote(portStream, messageEvent.data.context) connectRemote(portStream, messageEvent.data.context)
}) })
@ -142,4 +149,12 @@ function setupController (initState, client) {
return Promise.resolve() return Promise.resolve()
} }
function sendMessageToAllClients (message) {
self.clients.matchAll().then(function(clients) {
clients.forEach(function(client) {
client.postMessage(message)
})
})
}
function noop () {} function noop () {}

View File

@ -1,71 +0,0 @@
const EventEmitter = require('events')
module.exports = class IndexDbController extends EventEmitter {
constructor (opts) {
super()
global.IDBTransaction = global.IDBTransaction || global.webkitIDBTransaction || global.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
global.IDBKeyRange = global.IDBKeyRange || global.webkitIDBKeyRange || global.msIDBKeyRange
this.migrations = opts.migrations
this.key = opts.key
this.version = opts.version
this.initialState = opts.initialState
}
// Opens the database connection and returns a promise
open () {
return this.get('dataStore')
.then((data) => {
if (!data) {
return this._add('dataStore', this.initialState)
.then(() => this.get('dataStore'))
.then((versionedData) => Promise.resolve(versionedData))
}
return Promise.resolve(data)
})
}
get (key = 'dataStore') {
return this._request('get', key)
}
put (state) {
return this._request('put', state, 'dataStore')
}
_add (key = 'dataStore', objStore) {
return this._request('add', objStore, key)
}
_request (call, ...args) {
return new Promise((resolve, reject) => {
const self = this
const dbOpenRequest = global.indexedDB.open(this.key, this.version)
dbOpenRequest.addEventListener('upgradeneeded', (event) => {
this.db = event.target.result
this.db.createObjectStore('dataStore')
})
dbOpenRequest.onsuccess = (event) => {
this.db = dbOpenRequest.result
this.emit('success')
const dbTransaction = this.db.transaction('dataStore', 'readwrite')
const request = dbTransaction.objectStore('dataStore')
const objRequest = request[call](...args)
objRequest.addEventListener('success', (event) => {
return resolve(objRequest.result)
})
objRequest.addEventListener('error', (err) => {
return reject(`IndexDBController - ${call} failed to excute on indexedDB`)
})
dbTransaction.addEventListener('complete', (event) => {
this.emit('complete')
})
}
dbOpenRequest.addEventListener('error', (event) => {
return reject({message: `IndexDBController - open:@${call} failed to excute on indexedDB`, errorEvent: event})
})
})
}
}

View File

@ -20,6 +20,7 @@ background.on('ready', (_) => {
pageStream.pipe(swStream).pipe(pageStream) pageStream.pipe(swStream).pipe(pageStream)
}) })
background.on('updatefound', () => window.location.reload())
background.on('error', console.error) background.on('error', console.error)
background.startWorker() background.startWorker()

View File

@ -27,7 +27,7 @@ const background = new SWcontroller({
wakeUpInterval: 20000 wakeUpInterval: 20000
}) })
// Setup listener for when the service worker is read // Setup listener for when the service worker is read
background.on('ready', (readSw) => { const connectApp = function (readSw) {
let connectionStream = SwStream({ let connectionStream = SwStream({
serviceWorker: background.controller, serviceWorker: background.controller,
context: name, context: name,
@ -39,6 +39,14 @@ background.on('ready', (readSw) => {
if (state.appState.shouldClose) window.close() if (state.appState.shouldClose) window.close()
}) })
}) })
}
background.on('ready', (sw) => {
background.removeListener('updatefound', connectApp)
connectApp(sw)
}) })
background.on('updatefound', () => window.location.reload())
background.startWorker() background.startWorker()
// background.startWorker()
console.log('hello from MetaMascara ui!') console.log('hello from MetaMascara ui!')

7
mascara/test/helpers.js Normal file
View File

@ -0,0 +1,7 @@
function wait(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve()
}, time * 3 || 1500)
})
}

21
mascara/test/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>QUnit Example</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>
<script src="./jquery-3.1.0.min.js"></script>
<script src="./helpers.js"></script>
<script src="./test-bundle.js"></script>
<script src="/testem.js"></script>
<div id="app-content"></div>
<script src="./bundle.js"></script>
</body>
</html>

22
mascara/test/index.js Normal file
View File

@ -0,0 +1,22 @@
var fs = require('fs')
var path = require('path')
var browserify = require('browserify');
var tests = fs.readdirSync(path.join(__dirname, 'lib'))
var bundlePath = path.join(__dirname, 'test-bundle.js')
var b = browserify();
// Remove old bundle
try {
fs.unlinkSync(bundlePath)
} catch (e) {
console.error(e)
}
var writeStream = fs.createWriteStream(bundlePath)
tests.forEach(function(fileName) {
b.add(path.join(__dirname, 'lib', fileName))
})
b.bundle().pipe(writeStream);

4
mascara/test/jquery-3.1.0.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,119 @@
const PASSWORD = 'password123'
QUnit.module('first time usage')
QUnit.test('render init screen', function (assert) {
var done = assert.async()
let app
wait(1000).then(function() {
app = $('#app-content').contents()
const recurseNotices = function () {
let button = app.find('button')
if (button.html() === 'Continue') {
let termsPage = app.find('.markdown')[0]
termsPage.scrollTop = termsPage.scrollHeight
return wait().then(() => {
button.click()
return wait()
}).then(() => {
return recurseNotices()
})
} else {
return wait()
}
}
return recurseNotices()
}).then(function() {
// Scroll through terms
var title = app.find('h1').text()
assert.equal(title, 'MetaMask', 'title screen')
// enter password
var pwBox = app.find('#password-box')[0]
var confBox = app.find('#password-box-confirm')[0]
pwBox.value = PASSWORD
confBox.value = PASSWORD
return wait()
}).then(function() {
// create vault
var createButton = app.find('button.primary')[0]
createButton.click()
return wait(1500)
}).then(function() {
var created = app.find('h3')[0]
assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
// Agree button
var button = app.find('button')[0]
assert.ok(button, 'button present')
button.click()
return wait(1000)
}).then(function() {
var detail = app.find('.account-detail-section')[0]
assert.ok(detail, 'Account detail section loaded.')
var sandwich = app.find('.sandwich-expando')[0]
sandwich.click()
return wait()
}).then(function() {
var sandwich = app.find('.menu-droppo')[0]
var children = sandwich.children
var lock = children[children.length - 2]
assert.ok(lock, 'Lock menu item found')
lock.click()
return wait(1000)
}).then(function() {
var pwBox = app.find('#password-box')[0]
pwBox.value = PASSWORD
var createButton = app.find('button.primary')[0]
createButton.click()
return wait(1000)
}).then(function() {
var detail = app.find('.account-detail-section')[0]
assert.ok(detail, 'Account detail section loaded again.')
return wait()
}).then(function (){
var qrButton = app.find('.fa.fa-qrcode')[0]
qrButton.click()
return wait(1000)
}).then(function (){
var qrHeader = app.find('.qr-header')[0]
var qrContainer = app.find('#qr-container')[0]
assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
assert.ok(qrContainer, 'QR Container found')
return wait()
}).then(function (){
var networkMenu = app.find('.network-indicator')[0]
networkMenu.click()
return wait()
}).then(function (){
var networkMenu = app.find('.network-indicator')[0]
var children = networkMenu.children
children.length[3]
assert.ok(children, 'All network options present')
done()
})
})

13
mascara/test/testem.yml Normal file
View File

@ -0,0 +1,13 @@
launch_in_dev:
- Chrome
- Firefox
- Opera
launch_in_ci:
- Chrome
- Firefox
- Opera
framework:
- qunit
before_tests: "npm run mascaraCi"
after_tests: "rm ./background.js ./test-bundle.js ./bundle.js"
test_page: "./index.html"

View File

@ -0,0 +1,40 @@
const EventEmitter = require('events')
const IDB = require('idb-global')
const KEY = 'metamask-test-config'
module.exports = class Helper extends EventEmitter {
constructor () {
super()
}
tryToCleanContext () {
this.unregister()
.then(() => this.clearDb())
.then(() => super.emit('complete'))
.catch((err) => super.emit('complete'))
}
unregister () {
return global.navigator.serviceWorker.getRegistration()
.then((registration) => {
if (registration) return registration.unregister()
.then((b) => b ? Promise.resolve() : Promise.reject())
else return Promise.resolve()
})
}
clearDb () {
return new Promise ((resolve, reject) => {
const deleteRequest = global.indexDB.deleteDatabase(KEY)
deleteRequest.addEventListener('success', resolve)
deleteRequest.addEventListener('error', reject)
})
}
mockState (state) {
const db = new IDB({
version: 2,
key: KEY,
initialState: state
})
return db.open()
}
}

View File

@ -0,0 +1,5 @@
const Helper = require('./util/mascara-test-helper.js')
window.addEventListener('load', () => {
require('../src/ui.js')
})

View File

@ -21,7 +21,12 @@
"testem": "npm run buildMock && testem", "testem": "npm run buildMock && testem",
"announce": "node development/announcer.js", "announce": "node development/announcer.js",
"generateNotice": "node notices/notice-generator.js", "generateNotice": "node notices/notice-generator.js",
"deleteNotice": "node notices/notice-delete.js" "deleteNotice": "node notices/notice-delete.js",
"mascara": "node ./mascara/example/server",
"buildMascaraCi": "browserify mascara/test/window-load.js -o mascara/test/bundle.js",
"buildMascaraSWCi": "browserify mascara/src/background.js -o mascara/test/background.js",
"mascaraCi": "npm run buildMascaraCi && npm run buildMascaraSWCi && node mascara/test/index.js",
"testMascara": "cd mascara/test && npm run mascaraCi && testem ci -P 3"
}, },
"browserify": { "browserify": {
"transform": [ "transform": [
@ -44,7 +49,7 @@
"bluebird": "^3.5.0", "bluebird": "^3.5.0",
"browser-passworder": "^2.0.3", "browser-passworder": "^2.0.3",
"browserify-derequire": "^0.9.4", "browserify-derequire": "^0.9.4",
"client-sw-ready-event": "^3.0.1", "client-sw-ready-event": "^3.0.3",
"clone": "^1.0.2", "clone": "^1.0.2",
"copy-to-clipboard": "^2.0.0", "copy-to-clipboard": "^2.0.0",
"debounce": "^1.0.0", "debounce": "^1.0.0",
@ -68,6 +73,7 @@
"extensionizer": "^1.0.0", "extensionizer": "^1.0.0",
"gulp-eslint": "^2.0.0", "gulp-eslint": "^2.0.0",
"hat": "0.0.3", "hat": "0.0.3",
"idb-global": "^1.0.0",
"identicon.js": "^1.2.1", "identicon.js": "^1.2.1",
"iframe": "^1.0.0", "iframe": "^1.0.0",
"iframe-stream": "^1.0.2", "iframe-stream": "^1.0.2",