Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
28da80e8
Commit
28da80e8
authored
Jan 03, 2019
by
GitLab Bot
Browse files
Options
Browse Files
Download
Plain Diff
Automatic merge of gitlab-org/gitlab-ce master
parents
cb26f7da
24665ccb
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
68 additions
and
24 deletions
+68
-24
app/assets/javascripts/vue_shared/components/callout.vue
app/assets/javascripts/vue_shared/components/callout.vue
+3
-2
app/assets/stylesheets/framework/animations.scss
app/assets/stylesheets/framework/animations.scss
+22
-0
spec/javascripts/vue_shared/components/callout_spec.js
spec/javascripts/vue_shared/components/callout_spec.js
+43
-22
No files found.
app/assets/javascripts/vue_shared/components/callout.vue
View file @
28da80e8
...
...
@@ -11,13 +11,14 @@ export default {
},
message
:
{
type
:
String
,
required
:
true
,
required
:
false
,
default
:
''
,
},
},
};
</
script
>
<
template
>
<div
:class=
"`bs-callout bs-callout-$
{category}`" role="alert" aria-live="assertive">
{{
message
}}
{{
message
}}
<slot></slot>
</div>
</
template
>
app/assets/stylesheets/framework/animations.scss
View file @
28da80e8
...
...
@@ -260,3 +260,25 @@ $skeleton-line-widths: (
.slide-down-leave-to
{
transform
:
translateY
(
-30%
);
}
@keyframes
spin
{
0
%
{
transform
:
rotate
(
0deg
);}
100
%
{
transform
:
rotate
(
360deg
);}
}
/** COMMON ANIMATION CLASSES **/
.transform-origin-center
{
@include
webkit-prefix
(
transform-origin
,
50%
50%
);
}
.animate-n-spin
{
@include
webkit-prefix
(
animation-name
,
spin
);
}
.animate-c-infinite
{
@include
webkit-prefix
(
animation-iteration-count
,
infinite
);
}
.animate-t-linear
{
@include
webkit-prefix
(
animation-timing-function
,
linear
);
}
.animate-d-1
{
@include
webkit-prefix
(
animation-duration
,
1s
);
}
.animate-d-2
{
@include
webkit-prefix
(
animation-duration
,
2s
);
}
/** COMPOSITE ANIMATION CLASSES **/
.gl-spinner
{
@include
webkit-prefix
(
animation-name
,
spin
);
@include
webkit-prefix
(
animation-iteration-count
,
infinite
);
@include
webkit-prefix
(
animation-timing-function
,
linear
);
@include
webkit-prefix
(
animation-duration
,
1s
);
transform-origin
:
50%
50%
;
}
spec/javascripts/vue_shared/components/callout_spec.js
View file @
28da80e8
import
Vue
from
'
vue
'
;
import
callout
from
'
~/vue_shared/components/callout.vue
'
;
import
createComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
import
{
createLocalVue
,
shallowMount
}
from
'
@vue/test-utils
'
;
import
Callout
from
'
~/vue_shared/components/callout.vue
'
;
const
TEST_MESSAGE
=
'
This is a callout message!
'
;
const
TEST_SLOT
=
'
<button>This is a callout slot!</button>
'
;
const
localVue
=
createLocalVue
();
describe
(
'
Callout Component
'
,
()
=>
{
let
CalloutComponent
;
let
vm
;
const
exampleMessage
=
'
This is a callout message!
'
;
let
wrapper
;
beforeEach
(()
=>
{
CalloutComponent
=
Vue
.
extend
(
callout
);
});
const
factory
=
options
=>
{
wrapper
=
shallowMount
(
localVue
.
extend
(
Callout
),
{
localVue
,
...
options
,
});
};
afterEach
(()
=>
{
vm
.
$
destroy
();
wrapper
.
destroy
();
});
it
(
'
should render the appropriate variant of callout
'
,
()
=>
{
vm
=
createComponent
(
CalloutComponent
,
{
category
:
'
info
'
,
message
:
exampleMessage
,
factory
({
propsData
:
{
category
:
'
info
'
,
message
:
TEST_MESSAGE
,
},
});
expect
(
vm
.
$el
.
getAttribute
(
'
class
'
)).
toEqual
(
'
bs-callout bs-callout-info
'
);
expect
(
wrapper
.
classes
()).
toEqual
([
'
bs-callout
'
,
'
bs-callout-info
'
]
);
expect
(
vm
.
$el
.
tagName
).
toEqual
(
'
DIV
'
);
expect
(
wrapper
.
element
.
tagName
).
toEqual
(
'
DIV
'
);
});
it
(
'
should render accessibility attributes
'
,
()
=>
{
vm
=
createComponent
(
CalloutComponent
,
{
message
:
exampleMessage
,
factory
({
propsData
:
{
message
:
TEST_MESSAGE
,
},
});
expect
(
vm
.
$el
.
getAttribute
(
'
role
'
)).
toEqual
(
'
alert
'
);
expect
(
vm
.
$el
.
getAttribute
(
'
aria-live
'
)).
toEqual
(
'
assertive
'
);
expect
(
wrapper
.
attributes
(
'
role
'
)).
toEqual
(
'
alert
'
);
expect
(
wrapper
.
attributes
(
'
aria-live
'
)).
toEqual
(
'
assertive
'
);
});
it
(
'
should render the provided message
'
,
()
=>
{
vm
=
createComponent
(
CalloutComponent
,
{
message
:
exampleMessage
,
factory
({
propsData
:
{
message
:
TEST_MESSAGE
,
},
});
expect
(
wrapper
.
element
.
innerHTML
.
trim
()).
toEqual
(
TEST_MESSAGE
);
});
it
(
'
should render the provided slot
'
,
()
=>
{
factory
({
slots
:
{
default
:
TEST_SLOT
,
},
});
expect
(
vm
.
$el
.
innerHTML
.
trim
()).
toEqual
(
exampleMessage
);
expect
(
wrapper
.
element
.
innerHTML
.
trim
()).
toEqual
(
TEST_SLOT
);
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment