2020-03-13 15:44:24 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
|
|
|
import CodeBlock from '~/vue_shared/components/code_block.vue';
|
2018-11-18 11:00:15 +05:30
|
|
|
|
|
|
|
describe('Code Block', () => {
|
2020-03-13 15:44:24 +05:30
|
|
|
let wrapper;
|
2018-11-18 11:00:15 +05:30
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
const code = 'test-code';
|
2020-05-24 23:13:21 +05:30
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
const createComponent = (propsData, slots = {}) => {
|
2020-03-13 15:44:24 +05:30
|
|
|
wrapper = shallowMount(CodeBlock, {
|
2022-10-11 01:57:18 +05:30
|
|
|
slots,
|
|
|
|
propsData,
|
2018-11-18 11:00:15 +05:30
|
|
|
});
|
2020-03-13 15:44:24 +05:30
|
|
|
};
|
2018-11-18 11:00:15 +05:30
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
it('overwrites the default slot', () => {
|
|
|
|
createComponent({}, { default: 'DEFAULT SLOT' });
|
2018-11-18 11:00:15 +05:30
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
expect(wrapper.element).toMatchInlineSnapshot(`
|
|
|
|
<pre
|
|
|
|
class="code-block rounded code"
|
|
|
|
>
|
|
|
|
DEFAULT SLOT
|
|
|
|
</pre>
|
|
|
|
`);
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
it('renders with empty code prop', () => {
|
|
|
|
createComponent({});
|
2020-05-24 23:13:21 +05:30
|
|
|
|
2022-10-11 01:57:18 +05:30
|
|
|
expect(wrapper.element).toMatchInlineSnapshot(`
|
|
|
|
<pre
|
|
|
|
class="code-block rounded code"
|
|
|
|
>
|
|
|
|
<code
|
|
|
|
class="d-block"
|
|
|
|
>
|
|
|
|
|
|
|
|
</code>
|
|
|
|
</pre>
|
|
|
|
`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders code prop when provided', () => {
|
|
|
|
createComponent({ code });
|
|
|
|
|
|
|
|
expect(wrapper.element).toMatchInlineSnapshot(`
|
|
|
|
<pre
|
|
|
|
class="code-block rounded code"
|
|
|
|
>
|
|
|
|
<code
|
|
|
|
class="d-block"
|
|
|
|
>
|
|
|
|
test-code
|
|
|
|
</code>
|
|
|
|
</pre>
|
|
|
|
`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets maxHeight properly when provided', () => {
|
|
|
|
createComponent({ code, maxHeight: '200px' });
|
|
|
|
|
|
|
|
expect(wrapper.element).toMatchInlineSnapshot(`
|
|
|
|
<pre
|
|
|
|
class="code-block rounded code"
|
|
|
|
style="max-height: 200px; overflow-y: auto;"
|
|
|
|
>
|
|
|
|
<code
|
|
|
|
class="d-block"
|
|
|
|
>
|
|
|
|
test-code
|
|
|
|
</code>
|
|
|
|
</pre>
|
|
|
|
`);
|
2018-11-18 11:00:15 +05:30
|
|
|
});
|
|
|
|
});
|