1 files changed, 76 insertions, 0 deletions
diff --git a/spec/frontend/jobs/bridge/components/sidebar_spec.js b/spec/frontend/jobs/bridge/components/sidebar_spec.js
new file mode 100644
index 00000000000..ba4018753af
--- /dev/null
+++ b/spec/frontend/jobs/bridge/components/sidebar_spec.js
@@ -0,0 +1,76 @@
+import { GlButton, GlDropdown } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import BridgeSidebar from '~/jobs/bridge/components/sidebar.vue';
+import { BUILD_NAME } from '../mock_data';
+
+describe('Bridge Sidebar', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(BridgeSidebar, {
+      provide: {
+        buildName: BUILD_NAME,
+      },
+    });
+  };
+
+  const findSidebar = () => wrapper.find('aside');
+  const findRetryDropdown = () => wrapper.find(GlDropdown);
+  const findToggle = () => wrapper.find(GlButton);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders retry dropdown', () => {
+      expect(findRetryDropdown().exists()).toBe(true);
+    });
+  });
+
+  describe('sidebar expansion', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('toggles expansion on button click', async () => {
+      expect(findSidebar().classes()).not.toContain('gl-display-none');
+
+      findToggle().vm.$emit('click');
+      await nextTick();
+
+      expect(findSidebar().classes()).toContain('gl-display-none');
+    });
+
+    describe('on resize', () => {
+      it.each`
+        breakpoint | isSidebarExpanded
+        ${'xs'}    | ${false}
+        ${'sm'}    | ${false}
+        ${'md'}    | ${true}
+        ${'lg'}    | ${true}
+        ${'xl'}    | ${true}
+      `(
+        'sets isSidebarExpanded to `$isSidebarExpanded` when the breakpoint is "$breakpoint"',
+        async ({ breakpoint, isSidebarExpanded }) => {
+          jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockReturnValue(breakpoint);
+
+          window.dispatchEvent(new Event('resize'));
+          await nextTick();
+
+          if (isSidebarExpanded) {
+            expect(findSidebar().classes()).not.toContain('gl-display-none');
+          } else {
+            expect(findSidebar().classes()).toContain('gl-display-none');
+          }
+        },
+      );
+    });
+  });
+});