diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..002408614cc3dcb14f07688e37f53ca6e56a82df
--- /dev/null
+++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js
@@ -0,0 +1,132 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+export const projectsTestCoverageResponse = {
+  data: {
+    group: {
+      id: 101,
+      projects: {
+        nodes: [
+          {
+            fullPath: 'fake-group/tui',
+            id: 'gid://fake-domain/Project/1234',
+            name: 'tui',
+            repository: {
+              rootRef: 'main',
+              __typename: 'Repository',
+            },
+            codeCoverageSummary: {
+              averageCoverage: 45.4,
+              coverageCount: 2,
+              lastUpdatedOn: '2020-09-24',
+              __typename: 'CodeCoverageSummary',
+            },
+            __typename: 'Project',
+          },
+          {
+            fullPath: 'fake-group/cli',
+            id: 'gid://fake-domain/Project/5678',
+            name: 'cli',
+            repository: {
+              rootRef: 'master',
+              __typename: 'Repository',
+            },
+            codeCoverageSummary: {
+              averageCoverage: 64.3,
+              coverageCount: 1,
+              lastUpdatedOn: '2020-08-19',
+              __typename: 'CodeCoverageSummary',
+            },
+            __typename: 'Project',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const projectsTestCoverageNoDataResponse = {
+  data: {
+    group: {
+      id: 101,
+      projects: { nodes: [] },
+    },
+  },
+};
+
+export const groupTestCoverageResponse = {
+  data: {
+    group: {
+      id: 10,
+      codeCoverageActivities: {
+        nodes: [
+          {
+            projectCount: 4,
+            averageCoverage: 59.49,
+            coverageCount: 6,
+            date: '2020-05-25',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 3,
+            averageCoverage: 55.65,
+            coverageCount: 5,
+            date: '2020-05-26',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 5,
+            averageCoverage: 63.48,
+            coverageCount: 10,
+            date: '2020-05-27',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 6,
+            averageCoverage: 75.49,
+            coverageCount: 8,
+            date: '2020-05-28',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 6,
+            averageCoverage: 55.45,
+            coverageCount: 8,
+            date: '2020-05-29',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 1,
+            averageCoverage: 35.63,
+            coverageCount: 5,
+            date: '2020-05-30',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 3,
+            averageCoverage: 61.45,
+            coverageCount: 5,
+            date: '2020-05-31',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 3,
+            averageCoverage: 61.45,
+            coverageCount: 5,
+            date: '2020-06-01',
+            __typename: 'CodeCoverageActivity',
+          },
+          {
+            projectCount: 4,
+            averageCoverage: 79.46,
+            coverageCount: 6,
+            date: '2020-06-02',
+            __typename: 'CodeCoverageActivity',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const groupTestCoverageNoDataResponse = {
+  data: { group: { id: 10, codeCoverageActivities: { nodes: [] } } },
+};
diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..74a73545edb21e87492b34f62424e7c74f234e0f
--- /dev/null
+++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js
@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import getGroupTestCoverage from '../graphql/queries/get_group_test_coverage.query.graphql';
+import TestCoverageSummary from './test_coverage_summary.vue';
+import { groupTestCoverageResponse, groupTestCoverageNoDataResponse } from './stories_constants';
+
+Vue.use(VueApollo);
+
+export default {
+  component: TestCoverageSummary,
+  title: 'ee/analytics/repository_analytics/components/test_coverage_summary',
+};
+
+const createStory = ({ mockApollo, response = groupTestCoverageResponse } = {}) => {
+  const defaultApolloProvider = createMockApollo([
+    [getGroupTestCoverage, () => Promise.resolve(response)],
+  ]);
+
+  return (args, { argTypes }) => ({
+    components: { TestCoverageSummary },
+    apolloProvider: mockApollo || defaultApolloProvider,
+    provide: {
+      groupFullPath: 'path/to/group',
+      groupName: 'Group Awesome',
+    },
+    props: Object.keys(argTypes),
+    template: '<test-coverage-summary />',
+  });
+};
+
+export const Default = {
+  render: createStory(),
+};
+
+export const Loading = {
+  render: createStory({
+    mockApollo: createMockApollo([[getGroupTestCoverage, () => new Promise(() => {})]]),
+  }),
+};
+
+export const NoData = {
+  render: createStory({ response: groupTestCoverageNoDataResponse }),
+};
diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..b892b201e78a2b6682542bb513a3f02a5957f127
--- /dev/null
+++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import getProjectsTestCoverage from '../graphql/queries/get_projects_test_coverage.query.graphql';
+import TestCoverageTable from './test_coverage_table.vue';
+import {
+  projectsTestCoverageResponse,
+  projectsTestCoverageNoDataResponse,
+} from './stories_constants';
+
+Vue.use(VueApollo);
+
+export default {
+  component: TestCoverageTable,
+  title: 'ee/analytics/repository_analytics/components/test_coverage_table',
+};
+
+const createStory = ({ mockApollo, response = projectsTestCoverageResponse } = {}) => {
+  const defaultApolloProvider = createMockApollo([
+    [getProjectsTestCoverage, () => Promise.resolve(response)],
+  ]);
+
+  return (args, { argTypes }) => ({
+    components: { TestCoverageTable },
+    apolloProvider: mockApollo || defaultApolloProvider,
+    provide: {
+      groupFullPath: 'path/to/group',
+      groupName: 'Group Awesome',
+    },
+    props: Object.keys(argTypes),
+    template: '<test-coverage-table />',
+  });
+};
+
+export const Default = {
+  render: createStory(),
+};
+
+export const Loading = {
+  render: createStory({
+    mockApollo: createMockApollo([[getProjectsTestCoverage, () => new Promise(() => {})]]),
+  }),
+};
+
+export const NoData = {
+  render: createStory({ response: projectsTestCoverageNoDataResponse }),
+};