1 files changed, 122 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/keep_alive_slots_spec.js b/spec/frontend/vue_shared/components/keep_alive_slots_spec.js
new file mode 100644
index 00000000000..10c6cbe6d94
--- /dev/null
+++ b/spec/frontend/vue_shared/components/keep_alive_slots_spec.js
@@ -0,0 +1,122 @@
+import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import KeepAliveSlots from '~/vue_shared/components/keep_alive_slots.vue';
+
+const SLOT_1 = {
+  slotKey: 'slot-1',
+  title: 'Hello 1',
+};
+const SLOT_2 = {
+  slotKey: 'slot-2',
+  title: 'Hello 2',
+};
+
+describe('~/vue_shared/components/keep_alive_slots.vue', () => {
+  let wrapper;
+
+  const createSlotContent = ({ slotKey, title }) => `
+    <div data-testid="slot-child" data-slot-id="${slotKey}">
+      <h1>${title}</h1>
+      <input type="text" />
+    </div>
+  `;
+  const createComponent = (props = {}) => {
+    wrapper = mountExtended(KeepAliveSlots, {
+      propsData: props,
+      slots: {
+        [SLOT_1.slotKey]: createSlotContent(SLOT_1),
+        [SLOT_2.slotKey]: createSlotContent(SLOT_2),
+      },
+    });
+  };
+
+  const findRenderedSlots = () =>
+    wrapper.findAllByTestId('slot-child').wrappers.map((x) => ({
+      title: x.find('h1').text(),
+      inputValue: x.find('input').element.value,
+      isVisible: x.isVisible(),
+    }));
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('doesnt show anything', () => {
+      expect(findRenderedSlots()).toEqual([]);
+    });
+
+    describe('when slotKey is changed', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ slotKey: SLOT_1.slotKey });
+        await nextTick();
+      });
+
+      it('shows slot', () => {
+        expect(findRenderedSlots()).toEqual([
+          {
+            title: SLOT_1.title,
+            isVisible: true,
+            inputValue: '',
+          },
+        ]);
+      });
+
+      it('hides everything when slotKey cannot be found', async () => {
+        wrapper.setProps({ slotKey: '' });
+        await nextTick();
+
+        expect(findRenderedSlots()).toEqual([
+          {
+            title: SLOT_1.title,
+            isVisible: false,
+            inputValue: '',
+          },
+        ]);
+      });
+
+      describe('when user intreracts then slotKey changes again', () => {
+        beforeEach(async () => {
+          wrapper.find('input').setValue('TEST');
+          wrapper.setProps({ slotKey: SLOT_2.slotKey });
+          await nextTick();
+        });
+
+        it('keeps first slot alive but hidden', () => {
+          expect(findRenderedSlots()).toEqual([
+            {
+              title: SLOT_1.title,
+              isVisible: false,
+              inputValue: 'TEST',
+            },
+            {
+              title: SLOT_2.title,
+              isVisible: true,
+              inputValue: '',
+            },
+          ]);
+        });
+      });
+    });
+  });
+
+  describe('initialized with slotKey', () => {
+    beforeEach(() => {
+      createComponent({ slotKey: SLOT_2.slotKey });
+    });
+
+    it('shows slot', () => {
+      expect(findRenderedSlots()).toEqual([
+        {
+          title: SLOT_2.title,
+          isVisible: true,
+          inputValue: '',
+        },
+      ]);
+    });
+  });
+});