Retire the collapsible_container component

3 files changed, 3 insertions, 165 deletions

diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
index e66a4c63..3880d071 100644
--- a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
@@ -29,11 +29,8 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
     >
       On this page
     </h4>
-    <collapsible-container-stub
-      collapsedclass="sm-collapsed"
-      collapsingclass="sm-collapsing"
+    <gl-collapse-stub
       data-testid="container"
-      iscollapsed="true"
     >
       <table-of-contents-list-stub
         class="my-0"
@@ -41,7 +38,7 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
         items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         level="0"
       />
-    </collapsible-container-stub>
+    </gl-collapse-stub>
   </div>
 </div>
 `;
diff --git a/spec/frontend/default/components/collapsible_container_spec.js b/spec/frontend/default/components/collapsible_container_spec.js
deleted file mode 100644
index 87395647..00000000
--- a/spec/frontend/default/components/collapsible_container_spec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { shallowMount } from '@vue/test-utils';
-import CollapsibleContainer from '../../../../content/frontend/default/components/collapsible_container.vue';
-import * as dom from '../../../../content/frontend/shared/dom';
-
-const TEST_COLLAPSING_CLASS = 'test-collapsing';
-const TEST_COLLAPSED_CLASS = 'test-collapsed';
-const TEST_SLOT = 'Lorem ipsum dolar sit amit';
-const TEST_OUTER_HEIGHT = 400;
-const KICKOFF_DELAY = 50;
-const FINISH_DELAY = 400;
-
-describe('frontend/default/components/collapsible_container', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    // jquery is not available in Jest yet so we need to mock this method
-    jest.spyOn(dom, 'getOuterHeight').mockImplementation((x) => Number(x.dataset.testOuterHeight));
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
-    jest.useRealTimers();
-  });
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(CollapsibleContainer, {
-      propsData: {
-        collapsingClass: TEST_COLLAPSING_CLASS,
-        collapsedClass: TEST_COLLAPSED_CLASS,
-        ...props,
-      },
-      slots: {
-        default: TEST_SLOT,
-      },
-      attrs: {
-        'data-test-outer-height': TEST_OUTER_HEIGHT.toString(),
-      },
-    });
-  };
-  const findStyleHeight = () => wrapper.element.style.height;
-  const waitForKickoff = () => jest.advanceTimersByTime(KICKOFF_DELAY);
-  const waitForTransition = () => jest.advanceTimersByTime(FINISH_DELAY - KICKOFF_DELAY);
-
-  describe.each`
-    isCollapsed | startHeight          | endHeight            | startClasses              | endClasses
-    ${true}     | ${0}                 | ${TEST_OUTER_HEIGHT} | ${[TEST_COLLAPSED_CLASS]} | ${[]}
-    ${false}    | ${TEST_OUTER_HEIGHT} | ${0}                 | ${[]}                     | ${[TEST_COLLAPSED_CLASS]}
-  `(
-    'when isCollapsed = $isCollapsed',
-    ({ isCollapsed, startHeight, endHeight, startClasses, endClasses }) => {
-      beforeEach(() => {
-        createComponent({ isCollapsed });
-
-        return wrapper.vm.$nextTick();
-      });
-
-      it('renders slot', () => {
-        expect(wrapper.text()).toBe(TEST_SLOT);
-      });
-
-      it('has starting classes', () => {
-        expect(wrapper.classes()).toEqual(startClasses);
-      });
-
-      it('has not emitted anything', () => {
-        expect(wrapper.emitted()).toEqual({});
-      });
-
-      describe('when collapse is triggered', () => {
-        beforeEach(() => {
-          wrapper.vm.collapse(!isCollapsed);
-
-          // set props because this is what would naturally happen with `v-model`
-          wrapper.setProps({ isCollapsed: !isCollapsed });
-        });
-
-        it('has collapsing class', () => {
-          expect(wrapper.classes()).toEqual([TEST_COLLAPSING_CLASS]);
-        });
-
-        it('emits change', () => {
-          expect(wrapper.emitted().change).toEqual([[!isCollapsed]]);
-        });
-
-        it('sets starting height', () => {
-          expect(findStyleHeight()).toEqual(`${startHeight}px`);
-        });
-
-        it('triggering collapse again does not do anything', () => {
-          wrapper.vm.collapse(isCollapsed);
-
-          expect(wrapper.emitted().change).toEqual([[!isCollapsed]]);
-        });
-
-        describe('after animation kickoff delay', () => {
-          beforeEach(() => {
-            waitForKickoff();
-          });
-
-          it('sets ending height', () => {
-            expect(findStyleHeight()).toEqual(`${endHeight}px`);
-          });
-
-          describe('after transition', () => {
-            beforeEach(() => {
-              waitForTransition();
-            });
-
-            it('does not set height', () => {
-              expect(findStyleHeight()).toBe('');
-            });
-
-            it('sets ending classes', () => {
-              expect(wrapper.classes()).toEqual(endClasses);
-            });
-          });
-        });
-      });
-    },
-  );
-});
diff --git a/spec/frontend/default/components/table_of_contents_spec.js b/spec/frontend/default/components/table_of_contents_spec.js
index 851258c3..88146c13 100644
--- a/spec/frontend/default/components/table_of_contents_spec.js
+++ b/spec/frontend/default/components/table_of_contents_spec.js
@@ -4,7 +4,6 @@
 
 import { shallowMount, mount } from '@vue/test-utils';
 import TableOfContents from '../../../../content/frontend/default/components/table_of_contents.vue';
-import * as dom from '../../../../content/frontend/shared/dom';
 import { flattenItems } from '../../../../content/frontend/shared/toc/flatten_items';
 import { createExampleToc } from '../../shared/toc_helper';
 
@@ -18,15 +17,11 @@ describe('frontend/default/components/table_of_contents', () => {
     wrapper = null;
   });
 
-  beforeEach(() => {
-    // jquery is not available in Jest yet so we need to mock this method
-    jest.spyOn(dom, 'getOuterHeight').mockReturnValue(100);
-  });
-
   const createComponent = (props = {}, mountFn = shallowMount) => {
     wrapper = mountFn(TableOfContents, {
       propsData: {
         items: TEST_ITEMS,
+        initialCollapsed: true,
         ...props,
       },
     });
@@ -34,14 +29,11 @@ describe('frontend/default/components/table_of_contents', () => {
 
   const findCollapseButton = () => wrapper.find('[data-testid="collapse"]');
   const findCollapseIcon = () => findCollapseButton().find('svg');
-  const findCollapsibleContainer = () => wrapper.find('[data-testid="container"]');
   const findMainList = () => wrapper.find('[data-testid="main-list"]');
   const findMainListItems = () => findMainList().props('items');
-  const clickCollapseButton = () => findCollapseButton().trigger('click');
 
   const expectCollapsed = (isCollapsed = true) => {
     expect(findCollapseButton().attributes('aria-expanded')).toBe(isCollapsed ? undefined : 'true');
-    expect(findCollapsibleContainer().props('isCollapsed')).toBe(isCollapsed);
     expect(findCollapseIcon().attributes('data-testid')).toBe(
       isCollapsed ? 'chevron-right-icon' : 'chevron-down-icon',
     );
@@ -64,28 +56,5 @@ describe('frontend/default/components/table_of_contents', () => {
     it('is initially collapsed', () => {
       expectCollapsed(true);
     });
-
-    describe('when collapse button is pressed', () => {
-      beforeEach(() => {
-        clickCollapseButton();
-      });
-
-      it('starts expanding', () => {
-        expect(findCollapsibleContainer().classes('sm-collapsing')).toBe(true);
-      });
-
-      it('immediately updates collapse status', () => {
-        expectCollapsed(false);
-      });
-
-      it('when button pressed again, nothing happens because in the middle of collapsing', () => {
-        clickCollapseButton();
-
-        return wrapper.vm.$nextTick(() => {
-          expect(findCollapsibleContainer().classes('sm-collapsing')).toBe(true);
-          expectCollapsed(false);
-        });
-      });
-    });
   });
 });