►
Description
0:00 - We start exploring the problems with [migrating these specs to Jest][1]
11:00 - We realize there's some bigger problems and start migrating [a HAML template][2] to [Vue SFC][3]
[1]: https://gitlab.com/groups/gitlab-org/-/epics/895
[2]: https://gitlab.com/gitlab-org/gitlab/-/blob/83a67aaa4945cef5d45be330b0aeea68fe524bf6/app/views/shared/boards/components/_board.html.haml
[3]: https://vuejs.org/v2/guide/single-file-components.html
A
C
A
Store
things
where
in
some
classes
right
days,
like
classes
and
like
classes
that
import
classes,
so
what
I
did
here,
I
just
moved
them
to
front
end
and
wrap
around
the
jessica's
code
and
like
four
or
five
files
they
actually
and
they
are
ready
and
merge
request.
This
is
on
top
of
that
merge
request
just
for
the
mock
theta
to
be
all
here
cool.
A
A
Yes,
so
there
is
a
problem
when
one
of
those
because
we
use
X
templates,
so
our
ml
file
will
have.
Let's
see
this
terminal
output,
you
can
see
that
normally
I
don't
run
the
terminal
mm-hmm,
that's
that's
the
one.
So
basically
our
ml
file
in
this
case
will
have
an
X
templates
that
script
tag
and
then
the
component
inside
this
port
components
board.
A
D
E
B
E
B
B
A
B
B
This
is
a
good
question,
it'sit's
just
to
shake
his
head.
When
I
talked
about
the
security
thing,
can
you
go
back
to
the
board
thing
and
he
may
know
what
I'm
talking
about?
He
may
just
be
feeding
me,
but
if
you
go
to
the
board
HTML
Hamill,
it's
yeah,
so
the
biggest
issues,
if
you're
gonna
do
a
Hamill
injection
so
like
where
we
do
equal
render.
If
exists,
if
we
did
something
like
equal
project,
name
or
group
name
yeah,.
E
B
D
A
E
A
B
A
E
A
D
A
D
Right
right,
yeah
and
still
do
it
all
in
the
same
amar
if
you
want,
but
just
get
karma
happy
first
with
the
new
SFC
version
and
then
move
it
over
to
just
you
know:
I
totally
agree
with
IP
that
this
this
is
a
problem.
This
is
a
problem
in
itself
and
I.
Wouldn't
let
this
go
and
fix
to
try.
It
I
think
it's
a
mistake
to
try
and
make
just
happy
with
doing
something.
The
wrong
way
then
fix
it.
B
Yeah
I
think
that
that
sounds
like
a
good
idea,
the
if
we
were
interested
in
just
adjust.
We
could
like
make
a
fixture
out
of
this,
and
then
we
could
overwrite
and
view
a
view
whatever
whatever
template
or
even
mounts
to
our
shadow
Dom
like
an
element
ID
with
this
as
the
body
of
it.
So
you
could,
you
technically
can
have
an
inner
jest
environment.
B
We
can
have
templates
that
are
like
that's
coming
from
elements
and
we
can
get
them
from
fixtures
if,
but
it's
far
from
ideal
and
yeah
there's
some
huge
technical
debt
here
and
it
probably
makes
sense
to
keep
the
unit
tests
that
are
working
in
place,
refactor
it
and
then
move
the
unit
tests.
I.
Think
that's
I!
Think
it's
a
good
idea.
So,
let's,
let's
call
this
the
Hamel
dis.
You
know:
let's
do
it
right
now.
Do
you
want
to
do
it
right
now?
If
you
want
to
do
you
want
to
keep
just.
A
D
D
D
E
B
A
B
A
I
mean
so
when
we
do
this
kind
of
stuff
across
stage,
I
get
worried
that
the
work
may
block
impact
and
functionality
and
I
can
coordinate
with
the
people
of
that
stage.
So
my
workflow
idea
will
be:
let's
open
an
issue
let's
put
in
Show
and
Tell
next
Tuesday.
We
discussed
with
that
stage
is
like
easy
to
try
to
do
this,
or
if
we
do
this,
we
are
gonna
like
that's.
D
Is
scary,
it's
just
Tesco
I,
don't
like
throw
out
a
radical
idea
here
if
you're,
ok
with
it
I
would
personally
like
to
see
what
this
type
of
refactor
would
look
like.
Even
if
we
don't
keep
it
and
submit
the
mr,
it
would
be
very
beneficial
to
me-
and
maybe
there's
somebody
else
watching
the
video
later
to
see
what,
if.
A
E
A
A
A
B
A
B
B
Then
things
just
template
time
yeah,
you
know
as
far
as
I
could
tell
so
previously
we
had
a
template
property
to
our
component
option.
Now
we're
translating
the
sets
of
C
so
that
we
don't
have
to
just
pass
the
string
and
we
can
actually
make
this
nice
pretty
HTML,
that's
nicely
colored,
but
it's
gonna
look
really
funky.
Oh
man,
I
would.
E
A
A
A
B
A
B
B
A
A
E
A
A
A
E
B
A
E
E
E
A
B
B
B
E
E
A
B
B
So
when
we're
done
with
all
this,
let's
actually
run
it
get
this
to
get
this
to
load
and
then
copy
the
board.
Part
of
the
HTML
that
gets
loaded
on
production
as
like
a
snapshot
of
this
is
what
we
expect
us
to
look
like,
and
then
we
can
bifid
compare
to
this
new
branch
that
we
had
so
give
us
a
little
bit
of
extra
boost
that
we're
not
accidentally
renaming
QA
attributes
and
things
like
that.
I'm
doing
damages
right,
yeah,
yeah,
I
mean
I'd,
say
that
we
shouldn't
so
be
careful,
but.
B
C
A
D
E
B
E
B
B
E
B
A
E
E
E
B
B
A
E
E
A
E
A
B
A
A
E
A
A
B
A
B
D
A
E
A
E
A
E
E
A
E
D
E
D
E
D
A
E
B
B
A
B
A
B
B
B
B
A
B
A
B
A
B
B
A
B
B
A
B
A
A
D
B
A
E
I,
don't
think
so,
I,
don't
think
so,
because
I
think
I
think
that
the
index.js,
where
it's
used
here
the
dude
binding
to
add
if
the
it
was
just
getting
the
template
from
the
other
thing.
So
when
you
see
where
board
is
used
in
this
template
somewhere
or
where
it's
instantiated,
it
should
have
like
another
element.
Okay,.
E
E
B
Right
I
guess
so:
I
think
you
may
need
to
do
view.
Dot
extend
I,
don't
know,
I
didn't
know,
extend,
took
two
parameters
like
this.
You
may
have
to
do
view.
Dot
extend
board,
close
parentheses,
dot
extend
yeah,
well,
maybe
I
didn't,
but
maybe
I
haven't
ever
seen
an
extent.
Here's
read
where
it's
like
object,
dot
assigned
where
you
can
like
pass
multiple
things
to
it.
That
would
be
cool
and
I.
Just
I've,
never
seen
it
like
that.
A
B
A
A
B
Let's
import
the
board
dot
view:
let's
import
the
board
component
dot
view
here,
I
think
then
then
we
could
do
the
same
thing.
So,
let's
just
close
whatever
we
have
here,
but
then
in
line
five.
Let's
import
board
underscore
component
deal
oh
yeah,
and
then
we
can
get
rid
of
the
crazy
view
stuff.
We
were
doing
below
there.
D
B
E
A
B
A
B
E
B
We
can
also
do
the
board,
extend
and
I
think
that
should
be
fine.
I
think
I
know
how
to
fix
the
problem
that
we
just
have,
because
we
did
the
console
why?
Okay,
so
so
we
do
the
board
extent
cuz,
because
technically
we
have
a
component,
it's
kind
of
also
like
a
view
instance
or
somehow
they
share
the
same
stuff
yeah.
So
we
could
do
that.
Well,.
B
But
since
we
just
crossed
a
logged
it
it
looks
like
when
we
import
an
actual
view
component.
It
does
do
view,
dot
extend,
but
it
doesn't,
it
doesn't
give
it
gives
you
a
view.
Dot
extend
on
options
already,
so
we
want
to
return.
Well,
don't
worry
about
that,
it's
just
it
doesn't
need
the
dot
options
and
then
we
should
be
good,
and
we
saw
that
by
this
console
logging.
What
we
got
from
board,
we
just
don't
either
the
dot
options
right
after
board,
yeah
in
case
yeah.
A
B
B
Know
you're
right,
we
do
need
to
die,
extend
and
we
did
or
we
do
need
to
do
the
extends
board
thing.
Yes,
because
so
for
single
file.
Whenever
you
do
view
that
extends
you
get
like
a
whole
view.
Instance
again,
so
you
could
do
things
like
or
dot
extend,
but
you
also
get
this
dot
options,
which
has
all
the
things
that
were
all
the
options
of
our
component.
So.