Applying maintainer feedback

Used optional chaining for hasVersions
Added template tags and removed divs
Removed default export for store actions
Updated spy to spy on store call and not component

ee/app/assets/javascripts/packages/details/components/app.vue

@@ -152,7 +152,7 @@ export default {
       };
     },
     hasVersions() {
-      return Boolean(this.packageEntity.versions && this.packageEntity.versions.length);
+      return this.packageEntity.versions?.length > 0;
     },
   },
   methods: {
@@ -270,26 +270,26 @@ export default {
         title-item-class="js-versions-tab"
         @click="getPackageVersions"
       >
-        <div v-if="isLoading && !hasVersions">
+        <template v-if="isLoading && !hasVersions">
           <packages-list-loader />
-        </div>
+        </template>
 
-        <div v-else-if="hasVersions">
+        <template v-else-if="hasVersions">
           <package-list-row
             v-for="v in packageEntity.versions"
             :key="v.id"
             :package-entity="{ name: packageEntity.name, ...v }"
-            :package-link="v.id"
+            :package-link="v.id.toString()"
             :disable-delete="true"
             :show-package-type="false"
           />
-        </div>
+        </template>
 
-        <div v-else class="gl-mt-3">
+        <template v-else class="gl-mt-3">
           <p data-testid="no-versions-message">
             {{ s__('PackageRegistry|There are no other versions of this package.') }}
           </p>
-        </div>
+        </template>
       </gl-tab>
     </gl-tabs>
 

ee/app/assets/javascripts/packages/details/store/actions.js

@@ -3,7 +3,7 @@ import createFlash from '~/flash';
 import { FETCH_PACKAGE_VERSIONS_ERROR } from '../constants';
 import * as types from './mutation_types';
 
-export const fetchPackageVersions = ({ commit, state }) => {
+export default ({ commit, state }) => {
   commit(types.SET_LOADING, true);
 
   const { project_id, id } = state.packageEntity;
@@ -21,5 +21,3 @@ export const fetchPackageVersions = ({ commit, state }) => {
       commit(types.SET_LOADING, false);
     });
 };
-
-export default () => {};

ee/app/assets/javascripts/packages/details/store/index.js

 import Vue from 'vue';
 import Vuex from 'vuex';
-import * as actions from './actions';
+import fetchPackageVersions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
 
@@ -8,7 +8,9 @@ Vue.use(Vuex);
 
 export default (initialState = {}) =>
   new Vuex.Store({
-    actions,
+    actions: {
+      fetchPackageVersions,
+    },
     getters,
     mutations,
     state: {

ee/spec/frontend/packages/details/components/app_spec.js

@@ -32,6 +32,7 @@ localVue.use(Vuex);
 describe('PackagesApp', () => {
   let wrapper;
   let store;
+  const fetchPackageVersions = jest.fn();
 
   function createComponent({
     packageEntity = mavenPackage,
@@ -50,7 +51,7 @@ describe('PackagesApp', () => {
         npmHelpPath: 'foo',
       },
       actions: {
-        fetchPackageVersions: () => [],
+        fetchPackageVersions,
       },
       getters,
     });
@@ -177,11 +178,9 @@ describe('PackagesApp', () => {
       });
 
       it('makes api request on first click of tab', () => {
-        const apiMethodSpy = jest.spyOn(wrapper.vm, 'fetchPackageVersions');
-
         versionsTab().trigger('click');
 
-        expect(apiMethodSpy).toHaveBeenCalled();
+        expect(fetchPackageVersions).toHaveBeenCalled();
       });
     });
 

ee/spec/frontend/packages/details/store/actions_spec.js

 import Api from 'ee/api';
 import createFlash from '~/flash';
-import * as actions from 'ee/packages/details/store/actions';
+import fetchPackageVersions from 'ee/packages/details/store/actions';
 import * as types from 'ee/packages/details/store/mutation_types';
 import { FETCH_PACKAGE_VERSIONS_ERROR } from 'ee/packages/details/constants';
 import testAction from 'helpers/vuex_action_helper';
@@ -15,7 +15,7 @@ describe('Actions Package details store', () => {
       Api.projectPackage = jest.fn().mockResolvedValue({ data: packageEntity });
 
       testAction(
-        actions.fetchPackageVersions,
+        fetchPackageVersions,
         undefined,
         { packageEntity },
         [
@@ -38,7 +38,7 @@ describe('Actions Package details store', () => {
       Api.projectPackage = jest.fn().mockResolvedValue({ data: { packageEntity, versions: null } });
 
       testAction(
-        actions.fetchPackageVersions,
+        fetchPackageVersions,
         undefined,
         { packageEntity },
         [{ type: types.SET_LOADING, payload: true }, { type: types.SET_LOADING, payload: false }],
@@ -57,7 +57,7 @@ describe('Actions Package details store', () => {
       Api.projectPackage = jest.fn().mockRejectedValue();
 
       testAction(
-        actions.fetchPackageVersions,
+        fetchPackageVersions,
         undefined,
         { packageEntity },
         [{ type: types.SET_LOADING, payload: true }, { type: types.SET_LOADING, payload: false }],