diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-25 18:09:36 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-25 18:09:36 +0300 |
commit | f4fb4d59484318767d9e687b3123b70fa01854be (patch) | |
tree | f8d6bfaf7cc483e68f39582a11b5276b9f441ae6 /spec/frontend/helpers | |
parent | f6d19ed8eb581689706f192e64c349b33fb7a916 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/helpers')
-rw-r--r-- | spec/frontend/helpers/keep_alive_component_helper.js | 29 | ||||
-rw-r--r-- | spec/frontend/helpers/keep_alive_component_helper_spec.js | 32 |
2 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/helpers/keep_alive_component_helper.js b/spec/frontend/helpers/keep_alive_component_helper.js new file mode 100644 index 00000000000..54f40bf9093 --- /dev/null +++ b/spec/frontend/helpers/keep_alive_component_helper.js @@ -0,0 +1,29 @@ +import Vue from 'vue'; + +export function keepAlive(KeptAliveComponent) { + return Vue.extend({ + components: { + KeptAliveComponent, + }, + data() { + return { + view: 'KeptAliveComponent', + }; + }, + methods: { + async activate() { + this.view = 'KeptAliveComponent'; + await this.$nextTick(); + }, + async deactivate() { + this.view = 'div'; + await this.$nextTick(); + }, + async reactivate() { + await this.deactivate(); + await this.activate(); + }, + }, + template: `<keep-alive><component :is="view"></component></keep-alive>`, + }); +} diff --git a/spec/frontend/helpers/keep_alive_component_helper_spec.js b/spec/frontend/helpers/keep_alive_component_helper_spec.js new file mode 100644 index 00000000000..dcccc14f396 --- /dev/null +++ b/spec/frontend/helpers/keep_alive_component_helper_spec.js @@ -0,0 +1,32 @@ +import { mount } from '@vue/test-utils'; +import { keepAlive } from './keep_alive_component_helper'; + +const component = { + template: '<div>Test Component</div>', +}; + +describe('keepAlive', () => { + let wrapper; + + beforeEach(() => { + wrapper = mount(keepAlive(component)); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('converts a component to a keep-alive component', async () => { + const { element } = wrapper.find(component); + + await wrapper.vm.deactivate(); + expect(wrapper.find(component).exists()).toBe(false); + + await wrapper.vm.activate(); + + // assert that when the component is destroyed and re-rendered, the + // newly rendered component has the reference to the old component + // (i.e. the old component was deactivated and activated) + expect(wrapper.find(component).element).toBe(element); + }); +}); |