►
From YouTube: Pair Programming (David O'Regan && Paul Slaughter) - Miragejs Frontend Integration Tests
Description
Can we use Miragejs to replace a layer of our backend in GitLab and run frontend integration tests faster? Let's find out via the Web IDE!
https://miragejs.com/
A
A
Here's
the
situation,
so
we
want
to
have
front-end
integration
specs,
and
what
this
means
is
that
we
test
the
whole
page
bundle
or
whole
like
entry
point,
we're
testing
it
at
that
level
and
we
just
interact
with
the
done.
This
isn't
gonna
be
mounted
to
a
browser
yet
or
anything
like
that,
like
it's
still
gonna
be
using
jst
and
that
stuff
is
nice.
But
it's
not
the
main
point.
A
The
main
point
is
we
want
to
test
our
components
on
our
front
end
bit
and
integration
mocking
out
the
back
end
because
back
in
is
slow
and
as
we,
if
you've
written
features,
facts,
it's
really
slow
and
it's
no
fun.
So
we
don't
do
a
lot
of
them
and
then
we
don't
have
good
test
coverage.
So
you
know
in
like
almost
what
every
web
application
has
this
architecture
where
it's
the
layered
architecture.
You
have
your
front
end.
A
You
have
your
back
end
yeah,
if
your
database,
so
the
goal
is,
we
have
our
front
end
and
we
just
replace
those
top
layers
with
a
fake
back-end.
That's
just
kind
of
we're
trying
to
do
right.
Now.
We
we
kind
of
do
it
with
unit
tests
where
we
do.
This
mocking
of
specific
Axios
calls
and
we
like
with
mock
graph
QL
calls
and
things,
but
we're
I'm
trying
to
do
here
is
a
little
different
than
that,
because
I
the
the
project
that
I
the
part
of
the
application,
I
started.
A
A
It
seems
like
a
really
cool
library
and
people
use
it
for
lots
of
different
reasons,
and
integration
testing
is
one
of
the
ways
you
can
use
it,
but
what's
cool
about
it?
Is
you
create
this
server
and
you
see
he
over
it
down
here
like
in
route?
It's
like
I'm,
specifying
different
end
points
that
can
get
hit,
and
then
this
is
how
we
resolve
it,
and
this
is
all
pretty
simple
and
straightforward,
but
in
all
we
also
specify
a
database.
A
A
B
Do
it
that
is
super
super
cool,
I,
absolutely
love
the
idea.
It's
like
it's
very
similar
to
something
I've
used
before
I.
Just
much
simpler,
though
I'd
like
it
to
let
you
define
a
memory
database
Jason
server
yeah
we
were
just
able
to
like
spin
up
these
mock
end
points
that
you
can
just
hit
and
essentially
just
replace
yeah.
The
back
end
with
mock
server
that
you
can
just
I,
won't
even
agreed
schema.
A
A
I
think
I
think
that
we
did
need
just
to
mean
be
careful,
there's
a
trade-off
that
we
don't
want
the
gap
between
the
fake
and
the
real
thing
to
get
too
wide
yeah,
but
giving
it
a
good
lab.
You
know,
has
a
public
API
has
a
lot
of
users
using
the
API
like
we're
kind
of
contractually
obliged
not
to
break
our
API,
which
is
I,
think
we
can
kind
of
take
advantage
of
rather
than
if
we
were
starting
a
new
project
from
scratch,
and
starting
to
do
this,
I
would
be
really
concerned.
A
I
would
be
more
concerned
about
a
growing
gap
between
our
fake
API
and
his
real
one,
but
it's
also
important
to
realize,
like
this,
isn't
the
end-all
be-all
of
testing.
This
is
just
another
layer
of
testing
that
we're
severely
missing
so
we'd
like
we
should
have
units,
as
we
should
have
front
integration
tests.
We
still
need
to
have
feature
specs
that
actually
hit
the
real
back-end,
and
then
we
have
the
whole
QA
team,
doing
all
the
really
fancy
and
and
QA
tests.
A
But
man
it's
it's
hurt
so
much
this
missing
layer,
front-end
of
missing
these
front-end
integration,
specs
and
trying
to
make
it
to
that.
It's
just
so
easy
to
write
new
ones.
That's
the
goal.
Let's
make
it
super
easy
to
write
new
specs
and
so
that
this
fake
server
can
be
shared
by
all
the
specs
yeah.
That's
kind
of
kind
of
the
goal
to
so
I'm
gonna
boot
up
the
GDK,
and
we
can
we
can
get
jiggy
with
it.
B
A
C
A
Over
here
in
the
mock
server,
I
have
a
graph
QL
endpoint
yeah,
and
this
is
actually
all
that's
kind
of
needed,
so
it
makes
an
actual
graph
QL
request.
It's
not
making
a
request.
It's
doing.
It's
resolving
a
graph
QL
query
using
the
schema
that
we
auto
generate
like
from
our
dogs,
which
is
gonna,
but.
A
A
B
A
A
E
C
A
B
A
I
know
like
there's
a
lot
of
there's
a
lot,
there's
a
lot
of
beef
that
our
fixtures
get,
but
it's
actually
like
really
nice,
and
so
these
are
the
real.
This
is
the
real
project
data
we
get
from
these
endpoints
and
here
I
have
one
where
I'm
like
returning
an
empty
project
versus
just
a
regular
one
or
something
I.
B
Think
a
lot
of
the
beef
that
the
fixtures
get
inside
is
mostly
just
down
like
I
mean
like
as
a
person
who's
relatively
new
to
the
project.
I
mean
my
difficulty
with
the
fixtures
was
getting
them
to
successfully
generate.
You
know
so,
I
kind
of
like
once
they're
generated
and
they're
pulled
in
like
it's.
You
know
fire-and-forget,
which
I
think
would
make
a
lot
of
whose
lives
pretty
pretty
better
yeah.
D
A
You
know,
even
if
I
could
still
pay
back
on
the
pipeline
failing
with
and
not
actually
fail,
something
like
that's
the
goal.
It's
and
I
actually
feel
something
yeah,
but
but
some
thanks,
some
things
that
I
ran
into
is
like.
So
here
you
see
in
the
fixture
like
I'm,
hard
coding,
here's
my
project,
his
name
lorem
ipsum,
whatever,
because
you
know
I'm
just
hard
coding
some
names,
but
over
here
in
my
mock
server,
you
see
that
I've
kind
of
replaced.
Some
of
my
call
to
just
trivially
get
this
fixture.
A
Okay,
something
that's
gonna,
actually
replace
my
path
with
name
state's
property.
To
this
specific
one
and
the
reason
I'm
using
this
specific
one
is
because
I
for,
while
I'm
working
on
this,
it's
really
helpful
when
I
can
just
see
how
does
it
actually?
If
how
does
it
actually
look?
My
mock
server
yeah!
That's.
B
A
D
D
A
I
can
see
the
request
and
here's
here's
the
graph
QL
requests
in
response,
that's
working
and
it's
breaking
as
expected,
and
I
don't
have
this
one
yet
and
that's
what
I
want
to
get.
So,
let's
do
this
one
now
and
that's
fun.
That's
super
cool
super
slick
yeah,
it's
it's
seem
really
needs
to
build
with,
and
it
seemed
like
so
check
it
out.
So
here,
I
have
the
Mirage
tabs
open
like
highly
recommend
checking
out
because
one
of
the,
where
did
they
have
it
yeah
testing?
A
Is
this
one
use
case
of
this
kind
of
idea
like
they
used
it
to
to
do
like
hey?
Let
me
just
work
on
like
I
can
work
on
the
back
and
aunt
fronted
in
parallel.
Like
that's
another
way
of
using
this,
this
kind
of
fake
server
idea
there
this
kind
of
thing
and
it
seems
to
work
pretty
nicely.
Some
I've
been
really
enjoying
it,
but
yeah
I
need
to
get
the
branch
thing
working,
so
I
want
to
get
a
real
branch's
response,
and
so
I'm
gonna
generate
a
fixture
for
that
and
I.
A
Don't
really
know
if
there's
a
great
place
other
than
this
place.
For
me,
to
put
it
so
I
think
I'm
gonna,
just
put
it
in
this
place
and
I,
don't
really
know
what
I'm
doing
I
think
I
want
to
hit
the
branch's
API
I
guess.
So.
What
is
this
I'll
see?
Okay,
I
guess:
I
do
need
to
put
this
in
a
totally
different
yeah.
I.
Guess
I
need
to
put
this
in
a
different
thing:
yeah,
because
this
is
describing
the
project's
API
and
I.
Guess:
I
need
to
go
to
the
branches
right.
B
A
So
this
is
another
thing.
Another
downside
with
just
doing
things
with
fixtures
like
this
is
possibly
gonna,
be
running
into
issues
where,
like
a
branch,
contains
a
reference
to
some
project
data,
that's
not
actually
part
of
my
project
fixture
or
something
cuz.
These
were
aren't
coming
from
a
real
relational
database,
yeah.
D
A
A
B
D
A
This
this
will
generate
that
fixture,
but
now,
while
that's
generating
I
want
to
add
a
new
route
for
that
end
point.
So,
what's
really
cool
too
and
I
was
just
talking
to
Winnie
and
he
used
to
be
a
front-end
engineer,
a
good
lab.
He
was
doing
a
community
contribution
just
recently
I
guess
to
learn
to
creating
swagger
like
integrating
swagger
for
our
API.
Some.
B
D
A
B
A
A
Fixture
I
have
to
actually
just
require
that
actual
JSON
file,
and
that's
not
great
I-
think
we
can
use
webpack
aliases
see
little
help
out
here.
Thanks
to
that
one.
If
I'm
importing
from
web
pack
it'll
import
this
fixture
and
if
I
import
I
can
import
the
fixture
from
from
just
I,
don't
have
to
use,
get
JSON
fixture
I
feel
like
I
should
just
be
able
to
just
import
the
file,
but
that's
the
problem
to
solve
on
a
later
time,
not
now
and
fixtures
II
API
branches-
oh
it's
already
there.
It
works,
don't
work.
A
C
A
I,
don't
I,
don't
wanna
I,
don't
wanna
make
it
too
fancy.
Now
it
can
be
generic
yeah.
It's
probably
gonna
make
it
where
it
doesn't
matter.
If
it's
a
project
actually
has
the
branch
or
not
I
just
want
to
get
the
data,
so
I
could
tie
it
to
the
project
by
like
decorating.
This
object
with
like
a
project
IDE
or
something
but
I'm,
not
actually
not
going
to
do
that.
A
A
D
E
A
A
Out
of
it
at
yeah,
so
this
this
is
I'm
gonna
see
what's
going
on
here
is
the
happening
because
there's
a
lot
of
these
oh
gosh
I,
don't
know
why,
as
branch
masters
I
think
this
is
an
unrelated
error.
We
don't
have
great
error
handling
on
the
web,
IDE,
so
I
think
this
error
is
producing
this
message.
I
think
it's
unrelated,
alright,
so
I
think
we
need
to
solve
these
console
logs
first
yeah,
and
so
this
one
and
receive
can
fake
check
error.
A
What
must
be
happening
is
that
there's
we're
throwing
an
exception,
a
real
exception,
but
it's
not
an
axial
exception,
but
we're
expecting
an
axial
exception,
and
so
I'm
gonna
do
search
for
a
receive
config
checker
if
I
was
really
smart
and
you
have
no
idea
how
helpful
this
is.
I'm
talking
this
out
with
you,
David
and
I
was
really
smart.
I
would
commit
now.
A
A
B
B
I
went
to
the
doc
and
they
cut
the
cast
off,
but
the
so
I
have
a
splint
now
and
typing
is
like
okay,
but
he
gave
me
one
of
these
things:
stressful
yeah,
no
problem
right
hands,
it's
gonna
be
a
couple
of
weeks:
oh
gosh
Wow.
He
was
so
funny.
I
love
doctors,
I
always
find
doctors
to
be
just
like
you're
sitting
there
and
you're
in
a
lot
of
pain
and
you're
hurt
and
they're.
Just
like
no
big
deal,
he
broke
a
wrist,
try
breaking
a
neck.
A
A
E
A
A
A
B
B
A
A
Know
rights,
isn't
it
so
cool?
This
is
deadly
yeah,
so
this
is
like
I
guess.
Whatever
your
code
theme
is,
though,
we
have
on
some
of
them
like
little
theme,
the
whole
idea
that
way
yeah
come
on.
She
did
a
lot
of
work
on
that,
but
did
it
in
a
way
that
it
was
easy
for
you
x2,
then,
just
for
this
theme,
here's
all
the
new
variables
and
it
was
just
easy
to
add
new
themes
for
it,
so
that
was
pretty.
That
was
pretty
exciting
I
scroll.
B
A
A
E
B
B
D
A
B
A
D
B
I,
remember,
switching
to
Firefox
and
stepping
through
the
debugger
and
then
wanting
to
check
because
it
it
just
made
your
debugging
like
you
like.
You,
don't
have
to
go
back
to
your
I,
like
you
can
copy
the
files,
so
you
can
make
a
local
copy
of
the
file
system
and
then
just
edit
the
j/s
right
there
in
the
console
and
then
just
like
work
from
there,
which
you're
like
yeah,
great
and
now
I
can
take
my
solution
back
to
my
IDE.
Instead
of
like
going
back
and
forth.
A
B
Like
I
I've
always
liked
Firefox,
just
the
thing
that
gets
me
with
Firefox
is
just
its
lack
of
the
lack
pipelines.
Okay,
yeah
is
the
performance.
I
just
always
found
it
to
be
just
hammer,
some
on
performance
and
like
despite
what
people
say
about
Chrome
I've,
never
run
into
the
same
memory
hog
or
like
deadlock
house
that
I
run
with
in
Firefox.
A
B
B
D
A
B
A
A
B
Just
even
just
just
over
the
last
like
the
beginning
of
week,
I
was
developing
a
feature
which,
by
accident
I
did
not
realize
there
was
so
much
back
end
code
until
I
actually
hit
create,
merge
and
I
hit.
A
bridge
and
I
was
like.
Oh
thank
God
I
finally
got
there.
That
was
like
a
very
like
that
was
a
hard
piece
of
work.
Why
it
create
more
agents
like
you've,
changed
26
files.
E
A
B
A
B
B
A
B
A
D
A
B
D
A
B
A
A
A
B
B
A
A
D
B
D
B
A
E
D
E
A
D
B
A
That's
what's
going
on
is,
of
course,
I'm
creating
all
these
service
branches
under
different
branch
names
and
then
hearing
a
question
of
master
I.
Don't
need
to
do
this
for
my
fixture
I
just
need
to
actually
just
give
me
what
they
look
like
and
then
I
could
do.
Maybe
some
of
that
filtering
logic
I
might
take
server
if
I
felt
so
inclined
and
I
don't
know,
I.
Don't
really
need
to
do
it,
though,
but
maybe
so
I'm
gonna
recreate
this,
and
now
it
should
have
stuff
about
filtering
things.
A
D
A
All
right
requests
and
what
I
could
do
I
could
do
the
filtering
here
like
I,
could
see
if
you
know
the
project,
ID,
matched
and
stuff
yeah
I.
Think
yeah,
because
I
think
this
has
like
magic
and
stuff
I.
Think
yeah,
that's
project,
baby
and
add
source
range,
and
so
I
do
actually
get
these
in
my
requests.
I'm
gonna
console.log
this
request,
so
I
guess
because
I
haven't
ever
done
any
query
parameters
here.
B
A
So
that's
great
and
then
here's
my
request:
query
params
has
the
source
branch
and
the
source
project,
ID
and
so
I
think
I
can
do
I.
Think
I
can
do
an
actual,
so
to
run
that,
so
what
I
want
to
do
now?
Let's,
let's
do
something
fun
and
let's
say
here:
I
have
merge
request
because
I
don't
really
know
what
I'm
doing
here
by
saying
model,
but
that
seems
to
be
how
you
specify
we're
going
to
keep
track,
isn't
and
I'm
gonna
create
a
merge
request
and
we're
gonna
get
I.
D
A
B
D
A
A
A
Is
so
I
should
still
expect
this
to
be
an
empty
array
yeah
now
it's
kind
of
cool
as
I
could
change
from
my
integration.
Spec
I
can
change
my
URL
to
a
different
one,
and
I
would
now
have
ideal
to
test
at
integration
level.
Some
features
of
the
IDE
when
I
do
have
a
merchant
class
for
this
specific
branch,
which
is
what's
cool
but
we're
not
necessarily
meeting
that
right
now.
I
know
I'll
dranginis
it
that's.
A
A
When
the
world
is
this,
that's
it
I
think
it's
upset,
because
I
tried
to
return.
I
ran
into
some
issues
with
serialization
stuff.
It
tries
to
do
some
wheel,
so
Miraj
tries
to
follow
some
invention
with
what
it
expects
an
API
to
return
with.
Okay,
so
I
had
to
do
some
things
like
did.
Do
some
things
like,
say:
hey,
we're
not
gonna
try
to
achieve
like
it
would
wrap
all
of
my
responses
and
like
if
I'd
requested
a
project,
it
would
wrap
it
all
in
an
adjacent
object
with
the
project
property.
A
D
A
I,
what
I
was
a
bit
down
really
interested
in
is
this
this
thing
here
where
models
seems
to
be
the
thing:
I
really
want
to
return.
I,
don't
really
care
about
it.
Returning
this
specific
type,
so
I
think
I
think
that's,
instead
of
returning
just
result.
I
want
to
do
result
that
models,
I,
think
I.
Think
I
should
be
good
to
go.
B
A
B
A
A
Wonder
if
it'll
actually
find
those
merger
plants
like
I
was
hoping
it
would
or
not?
Oh,
it
didn't
find
a
branch
BK.
Alright,
it
didn't
find
a
branch
because
yeah
that
branch
doesn't
really
exist,
yeah,
so
one
thing
about
it:
I
could
do
all
right.
Anyways
I'm,
just
I'm
just
playing
around
on
having
fun
I'm,
just
super
fun,
gonna
see
what
happens
if
I
do
master.