Add latest changes from gitlab-org/gitlab@master

1 files changed, 63 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/ordered_layout_spec.js b/spec/frontend/vue_shared/components/ordered_layout_spec.js
new file mode 100644
index 00000000000..e8667d9ee4a
--- /dev/null
+++ b/spec/frontend/vue_shared/components/ordered_layout_spec.js
@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils';
+import orderedLayout from '~/vue_shared/components/ordered_layout.vue';
+
+const children = `
+    <template v-slot:header>
+      <header></header>
+    </template>
+    <template v-slot:footer>
+      <footer></footer>
+    </template>
+  `;
+
+const TestComponent = {
+  components: { orderedLayout },
+  template: `
+    <div>
+      <ordered-layout v-bind="$attrs">
+        ${children}
+      </ordered-layout>
+    </div>
+    `,
+};
+
+const regularSlotOrder = ['header', 'footer'];
+
+describe('Ordered Layout', () => {
+  let wrapper;
+
+  const verifyOrder = () =>
+    wrapper.findAll('footer,header').wrappers.map(x => (x.is('footer') ? 'footer' : 'header'));
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(TestComponent, {
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when slotKeys are in initial slot order', () => {
+    beforeEach(() => {
+      createComponent({ slotKeys: regularSlotOrder });
+    });
+
+    it('confirms order of the component is reflective of slotKeys', () => {
+      expect(verifyOrder()).toEqual(regularSlotOrder);
+    });
+  });
+
+  describe('when slotKeys reverse the order of the props', () => {
+    const reversedSlotOrder = regularSlotOrder.reverse();
+
+    beforeEach(() => {
+      createComponent({ slotKeys: reversedSlotOrder });
+    });
+
+    it('confirms order of the component is reflective of slotKeys', () => {
+      expect(verifyOrder()).toEqual(reversedSlotOrder);
+    });
+  });
+});