From 3c6cf4e4cfd786a9eb0cfc8c8d691ee8257b2a60 Mon Sep 17 00:00:00 2001
From: DimitriChauvel <chauvel.dimitri@posteo.net>
Date: Wed, 27 Mar 2024 10:11:03 +0100
Subject: [PATCH] Get project templates with API

---
 src/components/card/TemplateCard.vue         |  2 +-
 src/pages/HomePage.vue                       |  6 +-
 src/services/TemplatesService.js             | 26 ++++++++
 tests/unit/services/TemplatesService.spec.js | 63 ++++++++++++++++++++
 4 files changed, 93 insertions(+), 4 deletions(-)
 create mode 100644 src/services/TemplatesService.js
 create mode 100644 tests/unit/services/TemplatesService.spec.js

diff --git a/src/components/card/TemplateCard.vue b/src/components/card/TemplateCard.vue
index f191e9ee7..b1e9c59e9 100644
--- a/src/components/card/TemplateCard.vue
+++ b/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>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 859b2f826..382e7af70 100644
--- a/src/pages/HomePage.vue
+++ b/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(() => {
@@ -90,4 +90,4 @@ onUnmounted(() => {
     width: 100%;
   }
 }
-</style>
+</style>src/services/TemplatesService
diff --git a/src/services/TemplatesService.js b/src/services/TemplatesService.js
new file mode 100644
index 000000000..0bbfa09ac
--- /dev/null
+++ b/src/services/TemplatesService.js
@@ -0,0 +1,26 @@
+import { api } from 'boot/axios';
+import { getTemplatesByType } from 'src/composables/TemplateManager';
+
+/**
+ * @param {string} type - project | component | model
+ * @returns {Promise<object>}
+ * otherwise an error.
+ */
+export async function getAPITemplatesByType(type) {
+  return api.get(`/libraries/templates?type=${type.toUpperCase().trim()}`);
+}
+
+/**
+ * Get templates have "project" type.
+ * @returns {Array} return array of project templates.
+ */
+export async function getProjectTemplates() {
+  if (!process.env.HAS_BACKEND) {
+    const response = await getTemplatesByType('project');
+    return response;
+  }
+
+  const response = await getAPITemplatesByType('project');
+
+  return response.content;
+}
diff --git a/tests/unit/services/TemplatesService.spec.js b/tests/unit/services/TemplatesService.spec.js
new file mode 100644
index 000000000..a7a0ec38c
--- /dev/null
+++ b/tests/unit/services/TemplatesService.spec.js
@@ -0,0 +1,63 @@
+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 () => {
+      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', () => {
+    const OLD_ENV = process.env;
+
+    beforeEach(() => {
+      jest.resetModules();
+      process.env = { ...OLD_ENV };
+    });
+
+    afterAll(() => {
+      process.env = OLD_ENV;
+    });
+
+    it('should return a template list not "using" api', async () => {
+      jest.resetModules();
+      process.env.HAS_BACKEND = false;
+      const resultGetTemplates = ['test'];
+      getTemplatesByType.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getProjectTemplates();
+
+      expect(res).toEqual(resultGetTemplates);
+    });
+
+    it('should return a template list "using" api', async () => {
+      jest.resetModules();
+      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).toEqual(resultGetTemplates.content);
+    });
+  });
+});