►
Description
Writing robust tests for Dapper, a smart contract Ethereum wallet built as a Chrome extension was a difficult task because of its unusual architecture. Since Dapper users trust them with their valuable tokens and assets, tests were necessary for their team to deliver high-quality code. However, they were almost discouraged from implementing those tests because of the unique blockers they faced while setting up their testing environment. In her talk, Carolina will highlight the nuanced patterns and approaches her team took to facing those challenges, in the hopes of giving other teams the tools to overcome obstacles when adding tests.
Some of the topics that she will describe are: how to build integration tests for an application that communicates with other webpages using a background script, or how to check security vulnerabilities when dealing with client-side generated keys.
A
A
My
name
is
Karolina
Pinson.
You
can
find
me
in
Twitter
and
github
as
Caribbean
Sun
Sylva.
Please
reach
out
to
me.
You
can
write
me
in
Twitter
or
write
any
showing
my
github
repositories.
It
would
be
kind
of
funny
to
see
I
can't
talk
that
way.
Here's
my
my
page,
Karolina
pin
son
and
Emma
I'm
from
Colombia.
It's
funny
lease
I,
don't
know
if
you're
here
in
the
previous
talk
she's
also
from
Colombia
there's
also
Maddy.
Her
talk
is
tomorrow.
A
So
it's
funny
we're
all
here,
representing
that
beautiful
country,
so
go
to
Colombia
and
I'm
a
front-end
engineer
at
dapper
laughs.
So
what
do
we
do
out
there
for
less
interpreters?
We
believe
that
blockchain
should
be
for
everyone.
We
believe
in
function
as
a
solution
for
modern
problems,
and
we
want
to
show
the
true
value
of
blockchain
building
games
who
want
to
like
bring
a
broader
audience
into
blockchain,
and
we
want
to
do
it
through
games
and
in
that
real
extra
work,
a
piece
product
that
we
called
dapper
I,
don't
know.
A
I
know
it's
a
little
bit
confusing
because
it
has
the
name
verdict
as
a
company
but
fair
with
me,
and
what
is
upper
the
police,
a
wallet
for
for
blockchain
for
a
theorem
specifically.
So
similarly,
like
a
in
a
bank
account,
you
have
a
your
wallet
application
in
your
phone
that
in
which
you
can
get
instruction,
you
can
send
money
to
other
people
is
the
same
concept
but
in
the
blockchain,
so
that
allows
you
to
interact
with
the
centralized
applications
and
some
transactions
to
other
other
people
and
buy
tokens
and
assets.
A
There's
some
components
that
dapper
has
that
person
a
theorem
smart
contract,
it's
built
as
a
Chrome
extension.
It
uses
react
and
interacts
with
the
centralized
games.
So
at
this
point
you
might
have
some
questions
like
what
is
the
theorem?
What
is
a
smart
contract?
Chrome
extension?
How
does
it
work?
Maybe
what
is
react
or
whatever
the
central
lines
game
sees
catallena
just
saying
up
a
bunch
of
random
words
to
confuse
you,
I
promise
not
a
year.
It's
not
that
like
that.
A
A
So
in
a
centralized
solution,
you
have
this
code
that
you
built
you
can
build
in
any
language
in
JavaScript
and
go
and
you
deployed
the
code
into
one
server
and
any
user
can
interact
with
the
code
using
an
IP
another
centralized
application.
You
have
the
same
code,
but
you
deploy
it
into
a
cluster
of
computers.
This
is
what
we
call
the
blockchain
and
the
closer
computers
are
they
communicate
with
in
between
each
other,
and
the
user
can
communicate
with
your
code
using
the
address,
so
it's
similar
to
the
IP
in
a
centralized
solution.
A
A
There
has
a
chrome
extension
has
three
components
that
we
have
to
talk
about.
The
third,
the
first
one
is
a
pop
up.
So
basically,
when
you
download
an
extension
from
from
the
chrome
store,
it
adds
an
icon
into
your
Napper
and
then,
when
you
open
the
when
you
click
the
I
opponent
opens
this
small
pop-up
and
something
that
you
need
to
know
about.
A
This
popper
is
that
it
acts
exactly
as
a
window,
so
every
time
that
you
close
or
open
it
again,
it's
just
like
a
window
under
the
pop-up
script
that
is
injected
into
these
UI.
It's
running
when
you
click
like
outside,
outside
the
the
pop-up
into
the
window,
cram
window.
So
because
of
that
we
have
the
second
component,
which
is
a
bad
one
skip.
The
background
is
always
running
in
the
instance
of
the
window.
A
So
it
is
that
think
that
persists
between,
like
the
session
of
the
user
and
the
pop-up,
communicates
with
the
background
and
the
third
one
is
a
contacts
script.
So
the
idea
of
an
extension
is
that
it
wants
to
interact
with
web
pages.
Because
of
this
we
need
to
inject
a
script
into
the
applications
that
we
want
to
interact
with
and
the
script
communicates
with
our
background,
using
push
messages.
A
So
the
background
is
like
this
communication
between
the
pop-up
and
the
context:
script
that
communicates
with
with
the
application
I'm
going
to
talk
a
lot
about
a
react
application,
because
more
people
are
familiar
with
that.
But
it's
it's
a
great
library
and
the
centralized
games.
The
centralized
games
have
the
same
light
and
normal
games,
but
they
are
built
upon
on
the
blockchain.
A
So,
in
a
centralized
game
you
have
this
server
with
a
database
and
the
database
have
the
information
of
what
user
has.
What
which
token
are
we
toss
it
which
has
it?
You
know
the
centralized
game
would
use
the
blockchain
to
keep
track
of
this.
So
we
use
it
to
demonstrate
the
to
to
or
inertia
p--
of
the
asset.
A
Some
of
the
total
tokens
and
some
examples
of
games
that
we
work
on
with
the
policies
crypto,
kiddies
I,
don't
know
if
you
have
heard
of
it,
but
it's
you
collect
and
breed
these
creatures,
one-of-a-kind
creatures,
that
we
call
crypto
kitties
and
they
have
to
you
breed
them.
They
have
some
attributes
that
than
their
kids
up
like
a
mix
of
their
attributes
and
you
can
create
different
combinations
and
the
other
game
that
we
have
developed
is
called
cheese
wizards
in
which
you
buy
a
wizard.
A
And
then
you
compete
against
other
wizards
to
win
power
like
if
you
kill
the
other
wizard,
you
get
their
power
and
the
idea
is
that
the
end
with
it
at
the
end
of
the
tournament,
the
wizard
that
survives
gets
to
win
the
big
cheese.
We
recently
had
a
tournament
like
he
was
around
two
weeks
ago
and
the
the
price
was
$100,000
around
that
and
it's
interesting
because
the
guy
who
won
the
Big
Cheese
he's
not
a
developer.
A
He
just
read
her
a
book,
aha
about
how
to
break
the
Nash
equilibrium
of
rock-paper-scissors,
which
is
like
the
basic
of
cheese
wizards
and
he
got
into
it
and
he
like
won
the
prize.
So
it's
it
was
one
night
seeing
other
people
from
like
not
the
developer
community
again
to
get
into
the
games
and
getting
to
blockchain,
yes,
so
be
sure
to
check
it
out,
like
there's
gonna,
be
a
ton
externalism.
A
So
that's
pretty
cool
yeah,
so
I
know
all
or
we
know
sorry
all
these
concepts
right
now,
but
we
didn't
know
when
we
started
developing
it.
We
had
no
idea
like
because
with
it,
she's
wizards
before
sorry
cryptic
it
is
before,
but
we
didn't
really
know
all
these
concepts
so
how
they
were
build
it
we
started
in
October
of
2018
October
of
last
year
with
a
simple,
create
react,
app
and
then,
seventh
month
later,
we
had
public
beta.
So
it
was.
It
was
kind
of
a
rushed
experience
and
I
wish.
A
We
could
say
that
we
started
adding
tests
from
the
beginning,
but
everything
was
moved
that
everything
was
perfect,
but
it
was
not
the
case
that
the
beginning
was.
Chaos
and
I
mean
I.
Guess
that's
a
lot
of
projects
and
we
had
a
lot
of
time
wasters.
You
had
many
unsuccessful
QA
sessions
because
we're
startup,
we
don't
have
a
team
of
dedicated
people,
so
the
QA
is
done
by
by
by
us
by
the
team
by
the
product
team
and
how
it
works
is
that
okay,
we
want
to
test
a
feature.
A
A
So
we
had
to
like
first
apologize
for
taking
up
their
time
then
tried
to
fix
the
bug
as
fast
as
possible
and
contact
it
back
again,
so
we're
I
think
we're
wasting
around
five
hours
of
time
per
week
only
from
art
from
our
time,
but
from
other
people's
times.
We
also
had
multiple
big
fixes
for
the
same
bug.
We
broke
things
we
broke
this
without
realizing.
A
You
know
we
realizing
in
the
QA
session,
and
there
was
a
lot
of
manual
testing
different
from
like
a
website
that
you
can
have
bills
for
hbr
and
you
can
like
access
it
through
a
URL
in
a
Chrome
extension
you
need
to.
If
you
want
to
test
a
change,
you
need
to
fool.
The
branch
will
the
billed
extension
and
then
upload
the
accession
to
your
browser.
So
it's
a
lot
of
friction
to
test
things
and
we
were
like
developers.
A
A
This
one
is
funny
we
added
end-to-end
tests
and
then
we
broke
the
production,
build,
not
the
staging
or
development
we
bought
production
without
noticing
it
error.
Do
log
ins,
weird
and
bake
error
messages,
and
this
the
activity
list
is
a
it's
a
feature
that
we
have
and
we
had
things
like:
okay,
we
we
broke
it
and
then
fix
it,
and
some
days
later
we
broke
feedback
again
so
I
just
it
was
just
like
painful
and
the
development
was
not
going
fast.
So.
A
I'm
going
to
share
with
you
three
challenges
that
we
faced
and
then
how
we
fix
them
with
tests
and
how
it
helped
us
go
faster.
The
first
challenge
was
that
blocking
transactions
as
low
and
cost
money,
so
in
a
theorem
theorem,
can
process
around
15
to
20
transactions
per
second,
because
all
the
notes
need
to
process
all
the
transactions
this
compared
to
a
like,
a
company
credit
card
company
as
visa.
They
process
45,000
transactions
per
second.
A
So
there's
like
more
than
three
orders
of
magnitude
of
difference
and
because
of
that
transactions
in
blockchain
in
a
theorem,
specifically,
they
take
around
one
or
two
minutes
to
get
approved
to
get
accepted
and
they
cost
money
for
each
transaction
that
you
do.
You
have
to
pay
a
network
fee.
The
network
fee
that
you
have
to
pay
depends
on
how
congested
the
network
is
in
the
in
the
moment,
how
what
type
of
transaction
you
have
and
how
fast
your
transaction
want
to.
You
want
your
transaction
to
go,
so
you
can
pay
more.
A
If
you
want
your
transaction
to
go
fast
and
I.
Think
it's
around
like
something
like
25
cents
per
transaction
yeah,
but
but
it
costs
money.
There
is
a
testing
that
word
that
you
can
use.
This
color
ring
me
ring
V,
but
it's
lower
than
the
main,
so
you
couldn't
have
like
a
fast
free
transaction,
and
how
does
it
affect
us?
A
So
it
will
be
like
similar
to
in
a
centralized
application
to
deploying
a
server
per
user,
and
since
this
is
such
a
critical
stage
of
our
of
our
products
like
basically
without
if
this
doesn't
work,
the
user
doesn't
have
a
wallet.
We
needed
to
make
sure
that
it
was
working
all
the
time,
and
we
saw
this
this
screen
a
lot
at
the
beginning
it.
This
is
my
story
at
the
beginning.
We
didn't
have
these
Punk
game,
we
had
an
animation,
but
we
saw
it
the
screen
so
much
to
me
one
of
our
great
developers.
A
A
So
how
did
we
solve
it?
We
built
a
local
block
Cheniere
in
our
machine.
At
this
point
we
could
have
said,
like
you
know
what?
Let's
not
worry
about
it.
Our
API
is
the
one
that
interacts
with
the
blockchain.
So
let's
assume
that
everything
is
going
to
work,
we're
just
going
to
mock
the
API
request
that
we
do
to
our
API
and
that's
it.
A
That
will
be
like
our
test
in
in
the
in
the
front
and
in
the
client
side,
but-
and
we
did
that
at
the
beginning,
but
we
ended
up
having
some
box
that
we
could
not
catch
in
our
automated
test.
So
that's
why
we
wanted
to
get
up
to
go
out
one
step
further
and
we
tried
replicating
as
much
as
possible
the
production
environment
as
we
could
so
how
we
did
it
was
we
run
our
local
blockchain,
you
st.
get,
which
is
a
go.
A
Implementation
of
it
here,
pull
go
implementation
and
we
are
in
our
machines
that
just
request
these
different
nodes
into
one
machine
communicating
between
each
other.
We
also
pulled
on
the
API
to
have
like
the
latest
version
of
our
API,
and
with
this
we
created
a
production
environment
or
a
similar
as
possible
into
our
machines,
and
that
helped
us
have
like
better
tests
that
were
more
similar
to
the
final
version
that
we'll
have.
The
second
challenge
that
we
have.
A
This
was
more
a
UX
challenge
is
that
the
users
have
different
expectations
for
the
different
expectations
for
extensions
compared
to
like
a
web
page
when
they
visit
our
website
web
page.
So
if
we
go
to
any
web
page
and
you
open
a
model,
you
write
a
an
input,
for
example,
and
then
you
refresh
the
web
page,
the
user
does
not
expect
for
the
model
to
be
opened
and
for
the
input
to
still
be.
A
There
is
because
there
are
used
to
this,
and
they
know
that
if
there
are
in
unimportant
flow,
if
they're
making
a
transaction,
you
cannot
close
the
window
in
the
middle
of
the
transaction.
They
you
need
to
wait
until
the
transaction
processes
Brina
in
an
extension,
since
the
pop-up
is
really
easy
to
close.
Basically,
if
you
click
anywhere
outside
the
pop-up,
the
we
lose
like
this
flow
of
the
user.
A
A
That
means
that
we
had
to
make
all
the
IPA
requests
and
have
everything
saved
in
the
in
the
background,
so
anything
that
you
want
to
persist
throughout
the
like
that,
this,
the
window
instance,
we
had
to
do
it
in
the
background-
and
this
is
also
because
that
pop-up
is
so
small.
We
had
the
constraint
of
the
like
the
dimensions
of
the
window
and
that
made
us
that
made
us
have
to
divide
the
the
flows
that
we
had
to
personal,
for
example,
the
Sangha
flow.
A
We
have
to
divide
in
a
different
steps,
so
it
couldn't
be
like
one
long.
One
look
long
form
that
could
have
been
easier
for
us
to
develop
that
we
have
to
breaking
into
the
separate
steps,
and
things
like
these,
like
just
a
simple
flow,
where
you
had
to
add
your
email,
your
password
and
your
phone
number
and
then
a
email
verification
step.
We
had
a
lot
of
bugs
in
this,
and
this
is
how
we
were
testing
it
at
the
beginning.
So
you're
gonna
see
me
click
the
refresh
button
I'll.
A
Do
it
right
now,
multiple
times,
and
these
restarts
the
background
script
and
the
pop-up
script.
So
it
makes
the
user
closing
the
window
during
the
flow,
and
this
is
how
we
were
testing
it
at
the
beginning.
Just
writing
things
then,
going
to
the
front
first
and
refreshing
it
and
then
try
it
again.
But,
as
you
can
see,
this
is
really
manual
and
it's
really
easy
to
miss
a
step.
It's
really
easy
to
get.
Don't
do
a
for
example.
A
What
happens
if
the
user
writes
for
the
password
and
not
the
email
things
like
that,
so
it
was
just
not
not
good
for
us,
not
good
for
our
speed
and
the
solution
that
we
had
was
testing
each
step
separately.
So
the
user
is
going
to
interact
with
these
as
different
steps
right
because
they
can
close
the
pop-up
whenever
it's
released
it
for
them
to
go
out
of
the
pop-up,
so
take
care
of
that
and
then
do
test
as
the
user
would
do
it
just
try
to
do
each
step
at
a
time.
A
A
Many
of
you.
If
you
see
this,
this
is
the
same
as
have
been
documentation
from
the
code.
You
know
that
from
the
first
from
the
first
step,
they
have
the
email,
the
token
the
second
step
phone
and
then
distr
the
thirst
of
you
create
the
account.
So
this
was
good
not
only
for
like
it
help
does
not
break
the
the
login
flow,
but
it
also
helped
us
having
the
code
that
documented
itself
having
tests
that
helped
us
documentation
for
the
code.
A
This
is
a
simple
flow
like
this
has
three
steps,
and
this
doesn't
have
any
branches,
but
we
had
a.
We
had
our
flows
that
were
like
more
complicated
and
with
tests
we
could
have
like
a
documentation
of
each
step
and
what
they
did
have
to
say
it
after
after
each
one
and
the
third
challenge
that
I
want
to
share
is
that,
as
I
said,
before,
the
accession
communicate
using
Windows
messages.
A
So,
for
example,
if
you
have
a
list-
and
you
want
to
show
more
kitties
after
the
user
clicks,
the
bottom,
you
have
the
you
make
the
HTTP
request
and
it
get
a
fax
that
the
kid
is
nine
you
display
them,
but
in
a
endeavour
in
a
Chrome
extension,
it
does
not
have
the
full
control
of
everything,
because
it
needs
to
interact
with
the
centralized
application.
So,
let's
say,
for
example,
a
user
wants
to
buy
a
kitty.
Well
just
go
into
one
second,
thank
you
yeah.
A
So
it
wants
to
buy
a
kitty
and
then
the
decentralized
game
is
the
one
that
say
that
tells
when
we
want
to
start
doing
transaction.
So
we
need
to
listen
to
these
messages
spawn
from
the
centralized
game
to
do
a
transaction
to
start
our
flow,
and
how
does
that
affect
us?
Yes,
that
does
it
with
the
Kanto
script,
since
the
push
message
into
the
back
bar
and
we
need
to
react
with
this
and
yes,
this
is
an
important
part
of
our
wallet.
Basically,
this
is
what
we
build
the
wallet
for.
A
We
want
applications
to
be
able
to
do
transactions
with
our
wallet,
so
we
want
to
make
sure
that
that
works,
and
we
want
to
make
sure
that
every
time
script
every
time
an
application
sends
a
message
into
our
script.
It
triggers
the
transaction,
the
transaction
flow,
and
in
order
to
do
this
and
to
end
test,
we
wanted
to
use
Cypress.
We
thought
it
was
a.
It
is
a
great
tool
for
end-to-end
testing
if
you
haven't
tried
it,
but
we
had
a
we
when
we
started
like
adding
it.
A
We
had
this
problem
and
is
that
I
present
not
does
not
support
browser,
specific
particles.
There's
an
issue
still
open.
His
number
1965
I
actually
went
to
a
conference
in
which
diapers
were
the
sponsors
of
the
conference.
I
made
a
joke
about
this
in
front
of
everyone,
and
still
the
the
the
daesh
is
still
open.
So
I
don't
think
it's
going
to
be
fixed
soon
and
it's
because
how
it
works
internally.
A
A
Yes.
So
at
this
point
like
at
the
beginning,
we
were
like
you
know
what
let's
forget
about
cyprus.
That's
not
happen
to
end
test
and
move
on,
but
it
ended
up
like
being
worse,
just
ignoring
this
and
trying
to
continue
with
manual
test
for
the
transactions,
for
example.
So
the
solution
that
we
had
here
was
make
your
work.
A
Don't
worry
about
the
implementation
details,
don't
worry
about
it,
making
it
perfect,
as
we
we
have
the
same
in
that
pearl
of
that
is
done
before
perfect
and
apply
this
concept
also
to
to
your
tests
and
how
we
did
it
was
we
have
to
in
order
for
us
to
run
our
end-to-end
test.
We
have
to
do
three
stages.
First,
you
build
extension.
Then
you
will
run
a
local
server
that
points
into
the
into
the
extension
built.
So
usually
what
you
do
is
you
upload
the
built
into
Chrome?
A
But
if
you
want
you,
we
want
to
run
the
end-to-end
test,
the
Cypress
Cypress.
We
have
to
access
it
using
the
URL,
because
that's
how
ciphers
works.
So
we
did
that
and
the
third
step
was
mocking
the
chrome
API,
yes
and
I.
As
you
can
see,
this
is
not
the
best
solution,
because
we
are,
after
all,
mocking
a
really
a
core
part
of
our
application,
which
is
the
the
chrome
API,
the
browser,
specific
verticals,
but
it
was
better
doing
this
and
have
been
ciphers
test
rather
than
not
having
test
at
all.
A
So
that's
why
I
say
like
make
it
work,
even
if
at
the
beginning,
if
you
have
to
like
take
some
shortcuts,
it's
better
having
something
rather
than
nothing
and
we're
still
working
on
these.
We
want
to
like
try
to
figure
out
a
better
solution,
so
we
don't
have
to
mark
things.
For
example,
we
had
a
I
remember
that
we
had
some
box
about
coding
and
decoding
of
the
messages
that
we
didn't
capture,
because
we
were
mocking
it,
but
it's
better
than
not
having
anything
at
all.
A
So
yes,
this
is
our
cypress
trees
running
we
had
so
we
added
the
test
and
so
on
test
for
the
most
important
flows,
not
for
everything
so
for
the
longed-for
of
the
transactions
and
that
helped
us
also
at
the
end,
I
try
to
do
test-driven
development
and
try
to
have
this
code
that
you
will
not
be
scared
of
changing
in
the
future,
because
you
have
tests
that
validate
that
the
previous
functionality
is
still
working
and
I
about
the
unconventional
environment.
In
this
case,
it's
it's
because
the
technology
is
unconventional
right.
It's
a!
A
For
example,
right
now
we
are
working
on
another
game,
he's
an
NBA,
NBA
game
and
I
found
that
tests
actually
are
helping
us
from
the
beginning
making
our
development
first.
That's
right.
Our
development
process
faster
and
the
unconventional
aspect
in
this
case
is
not
that
it's
abduction
game
is
that
we
have
a
lot
of
unknowns
in
our
project.
We
are
working
like
all.
The
team
is
working
really
fast
and
things
change
all
the
time
and
like
the
API
is
not
ready.
A
It's
better
like
taking
one
one
time
longer
to
write
the
test,
then
spending
all
this
time
for
vertically
time
that
you
repeated
and
repeated
the
second
one
is
think
about
things
that
break
often
in
our
example,
for
example,
the
the
activity
list,
so
a
big
break
for
it
breaks.
Often
the
chances
is
that
you're
going
to
break
it
again
in
the
future
and
write
a
test
for
it.
Save
yourself
time
save
yourself.
Like
surprises
in
QA
sessions.
They
are
very
writing
tests
and
the
third
one
is
think
about
flows
that
you
like.
A
But
if
the
flow
breaks
at
3
a.m.
you
have
to
wake
up,
and
you
have
to
fix
it
and
write
a
test
for
it,
make
sure
that
you're
not
breaking
it
with
new
code,
because
at
the
end
the
tests
are
for
us.
The
developers
like
we're
not
never
going
to
have
a
personal
from
product
telling
us.
Ok,
we
we
need
to
stop
production,
we're
going
to
add
tests.
This
is
what
we're
going
to
do
in
the
sprint.
It's
not
gonna
happen.
A
Yeah
I
have
a
favor
to
ask
you.
If
you
can
like
open
your
phone
and
go
into
these
URL
and
send
me
your
feedback,
so
just
share
with
me
the
thing
that
you
like
the
something
that
you
liked.
Yes,
any
of
you
do
that
I'll,
send
you
a
cryptic
IDI,
so
you
can
have
these
this
creature.
I
will
really
appreciate
it.
If
you
do
that
and
yes,
muchas
gracias.
Thank
you.
So
much.