1 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/releases/components/app_show_spec.js b/spec/frontend/releases/components/app_show_spec.js
new file mode 100644
index 00000000000..3dc9964c25c
--- /dev/null
+++ b/spec/frontend/releases/components/app_show_spec.js
@@ -0,0 +1,61 @@
+import Vuex from 'vuex';
+import { shallowMount } from '@vue/test-utils';
+import ReleaseShowApp from '~/releases/components/app_show.vue';
+import { release as originalRelease } from '../mock_data';
+import { GlSkeletonLoading } from '@gitlab/ui';
+import ReleaseBlock from '~/releases/components/release_block.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+describe('Release show component', () => {
+  let wrapper;
+  let release;
+  let actions;
+
+  beforeEach(() => {
+    release = convertObjectPropsToCamelCase(originalRelease);
+  });
+
+  const factory = state => {
+    actions = {
+      fetchRelease: jest.fn(),
+    };
+
+    const store = new Vuex.Store({
+      modules: {
+        detail: {
+          namespaced: true,
+          actions,
+          state,
+        },
+      },
+    });
+
+    wrapper = shallowMount(ReleaseShowApp, { store });
+  };
+
+  const findLoadingSkeleton = () => wrapper.find(GlSkeletonLoading);
+  const findReleaseBlock = () => wrapper.find(ReleaseBlock);
+
+  it('calls fetchRelease when the component is created', () => {
+    factory({ release });
+    expect(actions.fetchRelease).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows a loading skeleton and hides the release block while the API call is in progress', () => {
+    factory({ isFetchingRelease: true });
+    expect(findLoadingSkeleton().exists()).toBe(true);
+    expect(findReleaseBlock().exists()).toBe(false);
+  });
+
+  it('hides the loading skeleton and shows the release block when the API call finishes successfully', () => {
+    factory({ isFetchingRelease: false });
+    expect(findLoadingSkeleton().exists()).toBe(false);
+    expect(findReleaseBlock().exists()).toBe(true);
+  });
+
+  it('hides both the loading skeleton and the release block when the API call fails', () => {
+    factory({ fetchError: new Error('Uh oh') });
+    expect(findLoadingSkeleton().exists()).toBe(false);
+    expect(findReleaseBlock().exists()).toBe(false);
+  });
+});