Commit 0bfbcbbe authored by Miguel Rincon's avatar Miguel Rincon

Add tab wrapper to lazily mount content only once

This change adds a new component that mounts contents inside tabs
lazily, without dismoounting them.
parent 457228c4
<script>
import { GlTab } from '@gitlab/ui';
/**
* Wrapper of <gl-tab> to optionally lazily render this tab's content
* when its shown **without dismounting after its hidden**.
*
* Usage:
*
* API is the same as <gl-tab>, for example:
*
* <gl-tabs>
* <editor-tab title="Tab 1" :lazy="true">
* lazily mounted content (gets mounted if this is first tab)
* </editor-tab>
* <editor-tab title="Tab 2" :lazy="true">
* lazily mounted content
* </editor-tab>
* <editor-tab title="Tab 3">
* eagerly mounted content
* </editor-tab>
* </gl-tabs>
*
* Once the tab is selected it is permanently set as "not-lazy"
* so it's contents are not dismounted.
*
* lazy is "false" by default, as in <gl-tab>.
*/
export default {
components: {
GlTab,
// Use a small renderless component to know when the tab content mounts because:
// - gl-tab always gets mounted, even if lazy is `true`. See:
// https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/tabs/tab.js#L180
// - we cannot listen to events on <slot />
MountSpy: {
render: () => null,
},
},
inheritAttrs: false,
props: {
lazy: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
isLazy: this.lazy,
};
},
methods: {
onContentMounted() {
// When a child is first mounted make the entire tab
// permanently mounted by setting 'lazy' to false.
this.isLazy = false;
},
},
};
</script>
<template>
<gl-tab :lazy="isLazy" v-bind="$attrs" v-on="$listeners">
<slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
<mount-spy @hook:mounted="onContentMounted" />
</gl-tab>
</template>
<script>
import { GlAlert, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
import { __, s__, sprintf } from '~/locale';
import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -7,6 +7,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
import CiLint from './components/lint/ci_lint.vue';
import CommitForm from './components/commit/commit_form.vue';
import EditorTab from './components/ui/editor_tab.vue';
import TextEditor from './components/text_editor.vue';
import commitCiFileMutation from './graphql/mutations/commit_ci_file.mutation.graphql';
......@@ -28,9 +29,9 @@ export default {
components: {
CommitForm,
CiLint,
EditorTab,
GlAlert,
GlLoadingIcon,
GlTab,
GlTabs,
PipelineGraph,
TextEditor,
......@@ -66,8 +67,6 @@ export default {
content: '',
contentModel: '',
lastCommitSha: this.commitSha,
currentTabIndex: 0,
editorIsReady: false,
isSaving: false,
// Success and failure state
......@@ -128,9 +127,6 @@ export default {
isCiConfigDataLoading() {
return this.$apollo.queries.ciConfigData.loading;
},
isVisualizeTabActive() {
return this.currentTabIndex === 1;
},
defaultCommitMessage() {
return sprintf(this.$options.i18n.defaultCommitMessage, { sourcePath: this.ciConfigPath });
},
......@@ -305,33 +301,30 @@ export default {
<div class="gl-mt-4">
<gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
<div v-else class="file-editor gl-mb-3">
<gl-tabs v-model="currentTabIndex">
<!-- editor should be mounted when its tab is visible, so the container has a size -->
<gl-tab :title="$options.i18n.tabEdit" :lazy="!editorIsReady">
<!-- editor should be mounted only once, when the tab is displayed -->
<gl-tabs>
<editor-tab :lazy="true" :title="$options.i18n.tabEdit">
<text-editor
v-model="contentModel"
:ci-config-path="ciConfigPath"
:commit-sha="lastCommitSha"
:project-path="projectPath"
@editor-ready="editorIsReady = true"
/>
</gl-tab>
<gl-tab
</editor-tab>
<editor-tab
v-if="glFeatures.ciConfigVisualizationTab"
:lazy="true"
:title="$options.i18n.tabGraph"
:lazy="!isVisualizeTabActive"
:title-link-attributes="{ 'data-testid': 'visualization-tab-btn' }"
data-testid="visualization-tab"
>
<gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
<pipeline-graph v-else :pipeline-data="ciConfigData" />
</gl-tab>
</editor-tab>
<gl-tab :title="$options.i18n.tabLint">
<editor-tab :title="$options.i18n.tabLint">
<gl-loading-icon v-if="isCiConfigDataLoading" size="lg" class="gl-m-3" />
<ci-lint v-else :ci-config="ciConfigData" />
</gl-tab>
</editor-tab>
</gl-tabs>
</div>
<commit-form
......
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { GlTabs } from '@gitlab/ui';
import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
const mockContent1 = 'MOCK CONTENT 1';
const mockContent2 = 'MOCK CONTENT 2';
describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
let wrapper;
let mockChildMounted = jest.fn();
const MockChild = {
props: ['content'],
template: '<div>{{content}}</div>',
mounted() {
mockChildMounted(this.content);
},
};
const MockTabbedContent = {
components: {
EditorTab,
GlTabs,
MockChild,
},
template: `
<gl-tabs>
<editor-tab :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
<mock-child content="${mockContent1}"/>
</editor-tab>
<editor-tab :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true">
<mock-child content="${mockContent2}"/>
</editor-tab>
</gl-tabs>
`,
};
const createWrapper = () => {
wrapper = mount(MockTabbedContent);
};
beforeEach(() => {
mockChildMounted = jest.fn();
});
it('tabs are mounted lazily', async () => {
createWrapper();
expect(mockChildMounted).toHaveBeenCalledTimes(0);
});
it('first tab is only mounted after nextTick', async () => {
createWrapper();
await nextTick();
expect(mockChildMounted).toHaveBeenCalledTimes(1);
expect(mockChildMounted).toHaveBeenCalledWith(mockContent1);
});
describe('user interaction', () => {
const clickTab = async (testid) => {
wrapper.find(`[data-testid="${testid}"]`).trigger('click');
await nextTick();
};
beforeEach(() => {
createWrapper();
});
it('mounts a tab once after selecting it', async () => {
await clickTab('tab2-btn');
expect(mockChildMounted).toHaveBeenCalledTimes(2);
expect(mockChildMounted).toHaveBeenNthCalledWith(1, mockContent1);
expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
});
it('mounts each tab once after selecting each', async () => {
await clickTab('tab2-btn');
await clickTab('tab1-btn');
await clickTab('tab2-btn');
expect(mockChildMounted).toHaveBeenCalledTimes(2);
expect(mockChildMounted).toHaveBeenNthCalledWith(1, mockContent1);
expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
});
});
});
import { nextTick } from 'vue';
import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
import {
GlAlert,
GlButton,
GlFormInput,
GlFormTextarea,
GlLoadingIcon,
GlTabs,
GlTab,
} from '@gitlab/ui';
import { GlAlert, GlButton, GlFormInput, GlFormTextarea, GlLoadingIcon, GlTabs } from '@gitlab/ui';
import waitForPromises from 'helpers/wait_for_promises';
import VueApollo from 'vue-apollo';
import createMockApollo from 'jest/helpers/mock_apollo_helper';
......@@ -28,6 +20,7 @@ import {
import CommitForm from '~/pipeline_editor/components/commit/commit_form.vue';
import getCiConfigData from '~/pipeline_editor/graphql/queries/ci_config.graphql';
import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
import TextEditor from '~/pipeline_editor/components/text_editor.vue';
......@@ -139,7 +132,7 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findAlert = () => wrapper.find(GlAlert);
const findTabAt = (i) => wrapper.findAll(GlTab).at(i);
const findTabAt = i => wrapper.findAll(EditorTab).at(i);
const findVisualizationTab = () => wrapper.find('[data-testid="visualization-tab"]');
const findTextEditor = () => wrapper.find(TextEditor);
const findEditorLite = () => wrapper.find(MockEditorLite);
......@@ -172,22 +165,14 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
describe('tabs', () => {
describe('editor tab', () => {
beforeEach(() => {
createComponent();
});
it('displays the tab and its content', async () => {
expect(findTabAt(0).find(TextEditor).exists()).toBe(true);
});
it('displays tab lazily, until editor is ready', async () => {
expect(findTabAt(0).attributes('lazy')).toBe('true');
it('displays editor only after the tab is mounted', async () => {
createComponent({ mountFn: mount });
findTextEditor().vm.$emit('editor-ready');
expect(findTabAt(0).find(TextEditor).exists()).toBe(false);
await nextTick();
expect(findTabAt(0).attributes('lazy')).toBe(undefined);
expect(findTabAt(0).find(TextEditor).exists()).toBe(true);
});
});
......@@ -207,6 +192,21 @@ describe('~/pipeline_editor/pipeline_editor_app.vue', () => {
expect(findLoadingIcon().exists()).toBe(true);
expect(findPipelineGraph().exists()).toBe(false);
});
it('displays the graph only after the tab is mounted and selected', async () => {
createComponent({ mountFn: mount });
expect(findTabAt(1).find(PipelineGraph).exists()).toBe(false);
await nextTick();
// Select visualization tab
wrapper.find('[data-testid="visualization-tab-btn"]').trigger('click');
await nextTick();
expect(findTabAt(1).find(PipelineGraph).exists()).toBe(true);
});
});
describe('with feature flag off', () => {
......
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