Commit 24665ccb authored by Kushal Pandya's avatar Kushal Pandya

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
parents 3fc0562d aedaef2b
...@@ -11,13 +11,14 @@ export default { ...@@ -11,13 +11,14 @@ export default {
}, },
message: { message: {
type: String, type: String,
required: true, required: false,
default: '',
}, },
}, },
}; };
</script> </script>
<template> <template>
<div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive"> <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive">
{{ message }} {{ message }} <slot></slot>
</div> </div>
</template> </template>
...@@ -260,3 +260,25 @@ $skeleton-line-widths: ( ...@@ -260,3 +260,25 @@ $skeleton-line-widths: (
.slide-down-leave-to { .slide-down-leave-to {
transform: translateY(-30%); 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%;
}
import Vue from 'vue'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import callout from '~/vue_shared/components/callout.vue'; import Callout from '~/vue_shared/components/callout.vue';
import createComponent from 'spec/helpers/vue_mount_component_helper';
const TEST_MESSAGE = 'This is a callout message!';
const TEST_SLOT = '<button>This is a callout slot!</button>';
const localVue = createLocalVue();
describe('Callout Component', () => { describe('Callout Component', () => {
let CalloutComponent; let wrapper;
let vm;
const exampleMessage = 'This is a callout message!';
beforeEach(() => { const factory = options => {
CalloutComponent = Vue.extend(callout); wrapper = shallowMount(localVue.extend(Callout), {
localVue,
...options,
}); });
};
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
it('should render the appropriate variant of callout', () => { it('should render the appropriate variant of callout', () => {
vm = createComponent(CalloutComponent, { factory({
propsData: {
category: 'info', category: 'info',
message: exampleMessage, 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', () => { it('should render accessibility attributes', () => {
vm = createComponent(CalloutComponent, { factory({
message: exampleMessage, propsData: {
message: TEST_MESSAGE,
},
}); });
expect(vm.$el.getAttribute('role')).toEqual('alert'); expect(wrapper.attributes('role')).toEqual('alert');
expect(vm.$el.getAttribute('aria-live')).toEqual('assertive'); expect(wrapper.attributes('aria-live')).toEqual('assertive');
}); });
it('should render the provided message', () => { it('should render the provided message', () => {
vm = createComponent(CalloutComponent, { factory({
message: exampleMessage, 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);
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment