Get project templates with API

src/components/card/TemplateCard.vue

@@ -16,7 +16,7 @@
       class="q-px-none q-py-sm text-caption ellipsis-2-lines"
       data-cy="title-container"
     >
-      {{ template.type }}
+      {{ template.name || template.type }}
     </q-card-section>
   </q-card>
 </template>

src/pages/HomePage.vue

@@ -31,7 +31,7 @@
 import ProjectGrid from 'src/components/grid/ProjectGrid.vue';
 import TemplateGrid from 'src/components/grid/TemplateGrid.vue';
 import { getProjects } from 'src/composables/Project';
-import { getTemplatesByType } from 'src/composables/TemplateManager';
+import { getProjectTemplates } from 'src/services/TemplatesService';
 import ImportProjectDialog from 'components/dialog/ImportProjectDialog.vue';
 import CreateProjectTemplateDialog from 'components/dialog/CreateProjectTemplateDialog.vue';
 import CreateProjectDialog from 'components/dialog/CreateProjectDialog.vue';
@@ -73,7 +73,7 @@ async function openCreateProjectTemplateDialog(template) {
 onMounted(async () => {
   setProjects();
   updateProjectSubscription = ProjectEvent.UpdateProjectEvent.subscribe(setProjects);
-  templates.value = await getTemplatesByType('project');
+  templates.value = await getProjectTemplates();
 });
 
 onUnmounted(() => {

src/services/TemplatesService.js

@@ -0,0 +1,25 @@
+import { api } from 'boot/axios';
+import { getTemplatesByType } from 'src/composables/TemplateManager';
+
+/**
+ * Filter and return only API templates related to a provided type.
+ * @param {string} type - Type of template you want to get. PROJECT | COMPONENT | MODEL
+ * @returns {Promise<object>}
+ * otherwise an error.
+ */
+export async function getAPITemplatesByType(type) {
+  return api.get(`/libraries/templates?type=${type}`);
+}
+
+/**
+ * Get "project" templates.
+ * @returns {Array} return array of project templates.
+ */
+export async function getProjectTemplates() {
+  if (!process.env.HAS_BACKEND) {
+    return getTemplatesByType('project');
+  }
+
+  const response = await getAPITemplatesByType('PROJECT');
+  return response.content;
+}

tests/unit/services/TemplatesService.spec.js

@@ -0,0 +1,54 @@
+import { api } from 'src/boot/axios';
+import * as TemplatesService from 'src/services/TemplatesService';
+import { getTemplatesByType } from 'src/composables/TemplateManager';
+
+jest.mock('src/boot/axios', () => ({
+  api: {
+    get: jest.fn(),
+  },
+}));
+
+jest.mock('src/composables/TemplateManager', () => ({
+  getTemplatesByType: jest.fn(),
+}));
+
+describe('Templates Service', () => {
+  describe('Test function: getApiTemplatesByType', () => {
+    it('should return a template list', async () => {
+      console.log(1);
+      const resultGetTemplates = { content: [{ name: 'Project Template', type: 'PROJECT' }] };
+      api.get.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getAPITemplatesByType('project');
+
+      expect(res.content.length).toEqual(1);
+      expect(res.content[0].name).toEqual('Project Template');
+      expect(res.content[0].type).toEqual('PROJECT');
+    });
+  });
+
+  describe('Test function: getProjectTemplates', () => {
+    it('should return a template list without calling api', async () => {
+      delete process.env.HAS_BACKEND;
+      const resultGetTemplates = ['test'];
+      getTemplatesByType.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getProjectTemplates();
+
+      expect(res).toEqual(resultGetTemplates);
+    });
+
+    it('should return a template list calling api', async () => {
+      process.env.HAS_BACKEND = true;
+      const resultGetTemplates = { content: [{ name: 'Project Template', type: 'PROJECT' }] };
+      api.get.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getProjectTemplates();
+
+      expect(res.length).toEqual(1);
+      expect(res[0].name).toEqual('Project Template');
+      expect(res[0].type).toEqual('PROJECT');
+      delete process.env.HAS_BACKEND;
+    });
+  });
+});