diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-03 17:22:48 +0000 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-03 17:22:48 +0000 |
commit | 24665ccbe13134bf8379dc68ddfbe80f6c035808 (patch) | |
tree | e217d895d4d8d844b282192e0ba24a0b233d3b63 | |
parent | 3fc0562dca390a2b56ca2713f929408e0fa4099e (diff) | |
parent | aedaef2b2c7164e497c77a537f71dee0d8e60200 (diff) | |
download | gitlab-ce-24665ccbe13134bf8379dc68ddfbe80f6c035808.tar.gz |
Merge branch 'ce-1979-fe-settings-empty' into 'master'
CE Port of "(Part 1) FE multiple approval rules settings - empty state"
See merge request gitlab-org/gitlab-ce!24087
-rw-r--r-- | app/assets/javascripts/vue_shared/components/callout.vue | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/animations.scss | 22 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/callout_spec.js | 65 |
3 files changed, 68 insertions, 24 deletions
diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue index ddbb14ae812..56bafebf4ce 100644 --- a/app/assets/javascripts/vue_shared/components/callout.vue +++ b/app/assets/javascripts/vue_shared/components/callout.vue @@ -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> diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 549a8730301..43d4044033f 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -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%; +} diff --git a/spec/javascripts/vue_shared/components/callout_spec.js b/spec/javascripts/vue_shared/components/callout_spec.js index e62bd86f4ca..91208dfb31a 100644 --- a/spec/javascripts/vue_shared/components/callout_spec.js +++ b/spec/javascripts/vue_shared/components/callout_spec.js @@ -1,45 +1,66 @@ -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); }); }); |