Commit 806841e2 authored by Mark Florian's avatar Mark Florian

Merge branch 'dashboard-template' into 'master'

Adds a new `security_dashboard_layout` component

See merge request gitlab-org/gitlab!27674
parents 5984046c 5c0d1953
<script>
export default {
computed: {
hasHeaderSlot() {
return Boolean(this.$slots.header);
},
hasAsideSlot() {
return Boolean(this.$slots.aside);
},
},
};
</script>
<template>
<section>
<header v-if="hasHeaderSlot">
<slot name="header"></slot>
</header>
<div class="row mt-4">
<article class="col" :class="{ 'col-xl-7': hasAsideSlot }">
<slot></slot>
</article>
<aside v-if="hasAsideSlot" class="col-xl-5">
<slot name="aside"></slot>
</aside>
</div>
</section>
</template>
import { shallowMount } from '@vue/test-utils';
import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
describe('Security Dashboard Layout component', () => {
let wrapper;
const SMALLER_SECTION_CLASS = 'col-xl-7';
const DummyComponent = {
name: 'dummy-component',
template: '<p>dummy component</p>',
};
const createWrapper = slots => {
wrapper = shallowMount(SecurityDashboardLayout, { slots });
};
const findArticle = () => wrapper.find('article');
const findHeader = () => wrapper.find('header');
const findAside = () => wrapper.find('aside');
afterEach(() => {
wrapper.destroy();
});
describe('with the main slot only', () => {
beforeEach(() => {
createWrapper({
default: DummyComponent,
});
});
it.each`
element | exists
${'article'} | ${true}
${'header'} | ${false}
${'aside'} | ${false}
`('should find that $element exists is $exists', ({ element, exists }) => {
expect(wrapper.find(element).exists()).toBe(exists);
});
it('should render the dummy component in the main section', () => {
const article = wrapper.find('article');
expect(article.find(DummyComponent).exists()).toBe(true);
});
it('should not make the main section smaller', () => {
const article = wrapper.find('article');
expect(article.classes()).not.toContain(SMALLER_SECTION_CLASS);
});
});
describe('with the header and main slots', () => {
beforeEach(() => {
createWrapper({
default: DummyComponent,
header: DummyComponent,
});
});
it.each`
element | exists
${'article'} | ${true}
${'header'} | ${true}
${'aside'} | ${false}
`('should find that $element exists is $exists', ({ element, exists }) => {
expect(wrapper.find(element).exists()).toBe(exists);
});
it('should render the dummy component in the main section', () => {
const article = findArticle();
expect(article.find(DummyComponent).exists()).toBe(true);
});
it('should render the dummy component in the header section', () => {
const header = findHeader();
expect(header.find(DummyComponent).exists()).toBe(true);
});
});
describe('with the aside and main slots', () => {
beforeEach(() => {
createWrapper({
default: DummyComponent,
aside: DummyComponent,
});
});
it.each`
element | exists
${'article'} | ${true}
${'header'} | ${false}
${'aside'} | ${true}
`('should find that $element exists is $exists', ({ element, exists }) => {
expect(wrapper.find(element).exists()).toBe(exists);
});
it('should render the dummy component in the main section', () => {
const article = findArticle();
expect(article.find(DummyComponent).exists()).toBe(true);
});
it('should render the dummy component in the header section', () => {
const aside = findAside();
expect(aside.find(DummyComponent).exists()).toBe(true);
});
it('should make the main section smaller', () => {
const article = findArticle();
expect(article.classes()).toContain(SMALLER_SECTION_CLASS);
});
});
});
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