►
Description
In this video we work on fixing some violations with using vue-test-utils and Karma that can cause weird flaky issues.
Related issue:
https://gitlab.com/gitlab-org/gitlab/issues/32213#note_231967347
A
There
are
some
really
weird
issues
that
happen
in
karma.
That
can
look
like
this
I.
Don't
know
if
you've
seen
this
guy
yeah
and
it
has
to
do
with
our
karma
environment
and
view
test
details
not
playing
nicely
you
toss.
Details
is
kind
of
to
blame
because
view
testy
tales
touches
stuff.
It
doesn't
clean
up
after
itself
really
nicely
to
the
point
where
somehow
there's
these
like
forever
loops.
A
That
give
me-
and
the
really
sad
thing
is
that
it's
not
necessarily
within
the
file
that
this
failed
could
be
it's
not
necessarily
within
the
file
here
that
it
failed.
So
when
we
first
ran
into
this
issue,
I
saw
this
and
I
was
really
disappointed
and
really
kind
of
had
no
idea
what
to
do,
but
as
I
dug
into
it
and
started
realizing
the
quarry
she
was
just
like
you
touch.
Details
is
not
cleaning
up
after
itself
started
at
seeing
what
can
I,
what
can
I
send
to
view
test
details?
A
What
are
some
of
the
common
things
and
as
I
debug
this?
That
might
just
totally
avoid
this
scenario.
As
a
to
think
there's
three
things
that
you
really
need
to
do
for
every
karma
spec
that
uses
view
techie
tales,
so
this
is
just
an
I
eat.
What
a
naive
thing
would
look
like
where
we
just
create
the
component
I'm
mounting
it
and
I
toss
prostitute.
That's
I
wish
it
did
this
and
it
does
this
ingest
nicely,
but
in
karma
we
have
to
do
extra
stuff,
for
whatever
reason
we
have
to
create
a
local
view.
A
This
can
be
created
outside
the
whole
describe
and
we
use
local
view
to
extend
the
component.
So
this
is
part
of
when
jest
does
it's.
Does
it's
violation
on
to
the
component
to
mess
it
up
whatever
you're
gonna?
Do
it
on
the
extension
of
the
component,
and
we
don't
run
into
any
issues
on
that
component
specific
we
pass
in
local
views
that
adjust
does
any
stubbing
or
whatever
it
just
uses
that
local
view
instance
rather
than
the
global
view
instance,
and
then.
Lastly,
this
sink
Falls
is
really
important
for
two
reasons.
A
One
and
I
think
we've
talked
about
this,
but
one
because
this
is
gonna,
be
the
new
default
and
view
Teske
so
later
on
and
to
some
of
the
forever
loops
are
tied
to
what
it
how
it
are
tied
to
it's.
My
custom
sink
false
properties
or
whatever.
So
these
are
the
three
things
that
we
want
to
make
sure
every
call
to
shallow
mount
or
mount
and
view
testy
tales
use.
A
A
That
there's
a
few
of
them
already
I've,
already
been
changing
some
on
my
local
machine.
So
we're
pretty
good.
But
it's
it's
not
a
lot,
but
it's
somewhat
sniffing
it.
That's
67,
alright,
but
they're
like
really
easy
to
fix.
So
if
you're
kind
of
thinking,
let's
just
make
one
big,
mr
fixing
all
of
these.
B
B
A
B
B
A
No
I
think
and
I
think
it's
a
really
good
point.
I
think
I
think
the
number
one
I
think
the
easy
thing
to
grab
would
be
any
change
to.
We
should
really
avoid
adding
any
new
karma
files.
If
we
do
touch
a
caramel
file,
we
should
not
do
view
testing
tools.
Aren't
we
should
move
it
to
jest
first
and
then
do
view.
Testing
tools
on
is.
B
A
A
A
So
here's,
if
you
wanted
to
help
me
out,
we
could
we
could
just
pair
up
on
the
same
screen
or
if
you
want
to
do
this
locally
on
your
screen.
To
that
that
comment,
that
I
said
has
the
grab
command.
That
just
gives
you
a
list
of
them.
Okay
and
I'm.
Just
gonna
start
at
the
top,
and
if
you
wanted
to
start
at
the
bottom
and
work
up
and
as
we
meet
somewhere
in
the
middle,
then
we
we
we've
resolved
all
so
I
give
a
branch
that
you're
working
on
I
do.
A
C
A
A
At
the
top
here
and
work,
my
way
down,
there's
some
that
are
okay,
so
here's
here's
an
example
of
one
where
we
do
the
extend
technically
outside
that
I.
Look
at
this
I
sync
false
I'm!
Looking
at
this
I'm
like
that's
fine,
so
I'm
just
gonna,
keep
moving
and
then
here's
another
one.
I
think
where
we
do
the
extend.
Oh,
we
don't
do
the
extend
there.
Oh,
this
would
be
an
interesting
one.
Oh
this.
A
Actual
file-
that's
been
failing,
oh
no,
we
do
the
extend
here
in
a
before
each
but
I
see
we're
not
doing
sync
faults
and
other
things.
So
this
is
a
more
interesting
one
and
here's
another
issue
that
I
have
we
do.
Sometimes
we
call
shallow
amounts
multiple
times
in
the
same
file
and
I,
really
think
because
of
the
number
of
properties
and
then
holding
we
have
to
do
with
this
I
really
like
doing
it.
B
A
Call
to
shallow
needs
these
special
stuff
and,
if
I
have
four
calls
too
shallow,
like
I'm,
adding
lab
yeah
I
like
having-
and
this
is
also
nice
to
like
encapsulate
default,
props
and
other
things.
So
I've
got
gone
ahead
and
taken
the
liberty
to
just
for
this.
These
files
that
were
doing
that
we
do
multiple.
A
B
C
C
B
A
B
A
C
A
So
cool
and
I'll
copy,
that's
just
in
case
it
might
be
because
I'm
using
you
may
need
to
like
install
Perl
for
this,
like
for
this
special
projects
like
apparently
Greg
wraps
expression
matches
and
really
doesn't
have
all
the
regex
features.
No,
this
big
e
does
like
a
pearl
regex
or
whatever
okay
groans,
I.
Think
so,
don't
quote
me
on.
A
A
B
I've
just
found
so
yeah
this
that's
weird
yeah,
this
I'm
going
to
look
at
the
last
one
in
oh
wow.
This
will
knock
out
ten
of
them,
but
so
does
a
I'm
just
talking
through
it
to
make
sure
we're
on
the
same
page.
It
does
in
every
it
block
we're
doing
a
shallow
mount
with
component
and
component
is
local
view.
Dot,
extend
project
list,
item
yeah.
A
You
should
be
good.
We
just
want
to
make
sure
that
we
passed
the
local
view
to
there
yep.
So
every
call
to
Shadow
Mountain
gotta
pass
the
local
view.
We've
got
to
do
it
on
an
extended
component
and
we
got
to
do
sink
falls,
so
every
one
of
them
is
doing
doing
that
yeah.
We
should
be
good.
Let
me
can
I
share.
A
B
B
Yes,
so
we
have
a
local
Buick
stem
product
list
item
and
then
in
every
single
rapper
shall
not
compare
current
options.
Options
sink
false
yeah,
I.
Think
I
think
we
should
be
good,
so
that
must
mean.
Does
this
need
to
be
local
viewers,
create
local
view
or
local
view
is
the
extended
component?
It
should
be
local
view.
So,
ok,.
A
B
A
C
A
B
B
A
A
There's
a
number
of
really
funky
issues
that
just
we
can
run
into
when
it's
not
so
I'm
gonna
try
to
I'm
gonna
try
to
have
to
pull
this
wrapper
instance
outs
and
so
that
we
can
make
sure
we're
destroying
it
too,
just
to
be
extra
safe,
but
you're,
probably
right
we're
fine
with
that.
But
okay,
but
I
get
nervous.
Yeah
I.
B
C
B
Hoist
wrapper
and
then
just
a
sign
wrapper
to
the
shallow
amount
in
each
it
block
and
then
wrapper
dot
destroy
in
the
after
age.
You
could
also
do
that.
Right,
like
you,
wouldn't
have
to
create
a
create
wrapper.
You
could
just
hoist
the
wrapper
like
you
did
and
then
see
on
line
31
conscious,
rapper,
equal
shall
amount.
You.
A
A
A
A
B
B
A
A
B
C
A
C
A
It's
so
it's
because
you
taxi
tails
wraps
every
elements
with
helper
functions,
so
it's
gotta
be
just
that
bit.
Let's
take
a
regular
Dom
element,
whatever
oh
and
that's
what
it
is.
Oh.
That's
only
makes
sense.
Oh
yeah,
okay,
so
you
can
also
use
another
alternative
and
we
don't-
let's
not
change
it
here,
because
it's
unrelated
but
and
then
that's
what
it
is
so
reads:
I
was
thinking
like
what
are
you
talking
about
like?
Is
this
just
the
real
element?
A
C
A
B
C
B
B
A
A
A
Would
it
do
inside
the
before
th
you?
Definitely
don't
wheel?
Yeah
I've
been
going
throughout
the
test.
This
isn't
gonna
cause
issues
with
this
to
be
consistent,
we
only
need
one
local
view,
instance
for
the
whole
goal:
spec.
Okay,
so
usually
you'll
see
local
view
died
years.
Px
and
that's
all
you
need
to
worry
about
and
then
I'll.
C
C
A
B
C
A
C
D
A
B
B
B
A
I
would
wouldn't
don't
need
to
touch
store.
The
only
thing
you
need
to
do
with
the
local
view
when
you
have
defects,
it
just
needs
to
use
a
new
X,
but
the
store
stuff
like
whenever
that's
created
in
the
lifecycle
of
the
test
like
shouldn't,
have
to
move
anything
about
the
store,
specifically
just
the
local
view.
Instance
can
be
hoisted
cool,
I'm,
gonna,
stop,
recording
and
thanks
for
hopping
on
and
knocking
this
out
real
fast
shrimp.
So
let
me
I
forget
where
I
stopped
at
manual
variables
form
spec,
okay,
right
and
I.