Changes based on @ekigbo feedback

Mock data for readible tests.
Use filterByDataType method.

ee/app/assets/javascripts/geo_nodes_beta/components/details/secondary_node/geo_node_replication_counts.vue

@@ -31,25 +31,22 @@ export default {
       return [
         {
           title: this.$options.i18n.git,
-          sync: syncInfoData
-            .filter((replicable) => replicable.dataType === REPOSITORY)
-            .map((d) => d.values),
-          verification: verificationInfoData
-            .filter((replicable) => replicable.dataType === REPOSITORY)
-            .map((d) => d.values),
+          sync: this.filterByDataType(syncInfoData, REPOSITORY),
+          verification: this.filterByDataType(verificationInfoData, REPOSITORY),
         },
         {
           title: this.$options.i18n.file,
-          sync: syncInfoData
-            .filter((replicable) => replicable.dataType === BLOB)
-            .map((d) => d.values),
-          verification: verificationInfoData
-            .filter((replicable) => replicable.dataType === BLOB)
-            .map((d) => d.values),
+          sync: this.filterByDataType(syncInfoData, BLOB),
+          verification: this.filterByDataType(verificationInfoData, BLOB),
         },
       ];
     },
   },
+  methods: {
+    filterByDataType(data, type) {
+      return data.filter((replicable) => replicable.dataType === type).map((d) => d.values);
+    },
+  },
 };
 </script>
 

ee/spec/frontend/geo_nodes_beta/components/details/secondary_node/geo_node_replication_counts_spec.js

@@ -66,12 +66,28 @@ describe('GeoNodeReplicationCounts', () => {
       });
     });
 
+    const mockRepositoryData = { dataType: REPOSITORY, values: { total: 100, success: 0 } };
+    const mockBlobData = { dataType: BLOB, values: { total: 100, success: 100 } };
+    const mockGitEmptySync = { title: 'Git', sync: [], verification: [] };
+    const mockGitSuccess0 = {
+      title: 'Git',
+      sync: [{ total: 100, success: 0 }],
+      verification: [{ total: 100, success: 0 }],
+    };
+
+    const mockFileEmptySync = { title: 'File', sync: [], verification: [] };
+    const mockFileSync100 = {
+      title: 'File',
+      sync: [{ total: 100, success: 100 }],
+      verification: [{ total: 100, success: 100 }],
+    };
+
     describe.each`
-      description            | mockGetterData                                                                                                              | expectedData
-      ${'with no data'}      | ${[]}                                                                                                                       | ${[{ title: 'Git', sync: [], verification: [] }, { title: 'File', sync: [], verification: [] }]}
-      ${'with no File data'} | ${[{ dataType: REPOSITORY, values: { total: 100, success: 0 } }]}                                                           | ${[{ title: 'Git', sync: [{ total: 100, success: 0 }], verification: [{ total: 100, success: 0 }] }, { title: 'File', sync: [], verification: [] }]}
-      ${'with no Git data'}  | ${[{ dataType: BLOB, values: { total: 100, success: 100 } }]}                                                               | ${[{ title: 'Git', sync: [], verification: [] }, { title: 'File', sync: [{ total: 100, success: 100 }], verification: [{ total: 100, success: 100 }] }]}
-      ${'with all data'}     | ${[{ dataType: REPOSITORY, values: { total: 100, success: 0 } }, { dataType: BLOB, values: { total: 100, success: 100 } }]} | ${[{ title: 'Git', sync: [{ total: 100, success: 0 }], verification: [{ total: 100, success: 0 }] }, { title: 'File', sync: [{ total: 100, success: 100 }], verification: [{ total: 100, success: 100 }] }]}
+      description            | mockGetterData                        | expectedData
+      ${'with no data'}      | ${[]}                                 | ${[mockGitEmptySync, mockFileEmptySync]}
+      ${'with no File data'} | ${[mockRepositoryData]}               | ${[mockGitSuccess0, mockFileEmptySync]}
+      ${'with no Git data'}  | ${[mockBlobData]}                     | ${[mockGitEmptySync, mockFileSync100]}
+      ${'with all data'}     | ${[mockRepositoryData, mockBlobData]} | ${[mockGitSuccess0, mockFileSync100]}
     `('replicationOverview $description', ({ mockGetterData, expectedData }) => {
       beforeEach(() => {
         createComponent(null, {