wip

cypress/e2e/Bugfix/Issue392.feature

@@ -33,6 +33,7 @@ Feature: Fix issue #392: Delete diagram should only remove parsable files of dia
     When I set on '[data-cy="create-model-form"] [data-cy="name-input"]' text 'diag1/diag2'
     And  I click on '[data-cy="create-model-form"] [data-cy="submit-button"]'
     Then I expect current url is '{{ projectName }}/modelizer/draw\?plugin=@ditrit/terrator-plugin&path=diag1/diag2'
+    And  I wait 1 second
 
     # Check project folders and files are created in Text view
     When I click on '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="false"]'

cypress/e2e/RoundTrips/CreateProjectFiles.feature

@@ -22,6 +22,7 @@ Feature: Test roundtrip of the application : create project files
     And  I click on '[data-cy="create-model-form"] [data-cy="submit-button"]'
     Then I expect 'positive' toast to appear with text 'Model has been created 🥳!'
     And  I expect current url is '{{ projectName }}/modelizer/draw\?plugin=<plugin>&path=<model>'
+    And  I wait 1 second
 
     # Check project files and folders are created in Text view
     When I click on '[data-cy="modelizer-switch-button"] [aria-pressed="false"]'

cypress/e2e/RoundTrips/DeleteProject.feature

@@ -28,6 +28,7 @@ Feature: Test homepage: project deletion
     When I set on '[data-cy="create-model-form"] [data-cy="name-input"]' text '{{ modelFolder }}'
     And  I click on '[data-cy="create-model-form"] [data-cy="submit-button"]'
     Then I expect current url is '{{ projectName }}/modelizer/draw\?plugin=@ditrit/terrator-plugin&path={{ modelFolder }}'
+    And  I wait 1 second
 
     # Check project root folder is created in Text view
     When I click on '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="false"]'
@@ -77,6 +78,7 @@ Feature: Test homepage: project deletion
     When I set on '[data-cy="create-model-form"] [data-cy="name-input"]' text '{{ modelFolder }}'
     And  I click on '[data-cy="create-model-form"] [data-cy="submit-button"]'
     Then I expect current url is '{{ projectName }}/modelizer/draw\?plugin=@ditrit/terrator-plugin&path={{ modelFolder }}'
+    And  I wait 1 second
 
     When I click on '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="false"]'
     And  I wait 1 second

cypress/e2e/RoundTrips/Git.feature

@@ -141,6 +141,7 @@ Feature: Test roundtrip of the application: Git
     And  I select '[data-cy="item_@ditrit/terrator-plugin"]' in '[data-cy="create-model-form"] [data-cy="plugin-select"]'
     And  I set on '[data-cy="create-model-form"] [data-cy="name-input"]' text '{{ modelFolder }}'
     And  I click on '[data-cy="create-model-form"] [data-cy="submit-button"]'
+    And  I wait 1 seconds
     And  I click on '[data-cy="models-page-link-button"]'
     Then I expect current url is '{{ importedProjectName }}/models'
     And  I expect '[data-cy="diagram-table"]' exists
@@ -339,6 +340,7 @@ Feature: Test roundtrip of the application: Git
     When I set on '[data-cy="create-model-form"] [data-cy="name-input"]' text 'infra'
     And  I click on '[data-cy="create-model-form"] [data-cy="submit-button"]'
     Then I expect current url is '{{ projectName }}/modelizer/draw\?plugin=@ditrit/terrator-plugin&path=infra'
+    And  I wait 1 second
 
     # Go to Text page
     When I click on '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="false"]'

cypress/e2e/RoundTrips/TemplateProject.feature

@@ -7,7 +7,6 @@ Feature: Test roundtrip of the application: project creation via template
   ## 103 Created template project should redirect to models page and send positive toast
   ## 104 After creation of template project, verify its diagrams exist
   ## 105 Created template project should be in the projects list
-  ## 106 Created template project should be in the left drawer
   ## 107 Create template project with an already existing project name should display an error
 
   ################## Filter project templates ##################
@@ -82,10 +81,6 @@ Feature: Test roundtrip of the application: project creation via template
     Then I expect '[data-cy="project-card_{{ projectName }}"]' appear 1 time on screen
     And  I expect '[data-cy="project-card_{{ projectName }}"] [data-cy="title-container"]' is '{{ projectName }}'
 
-    ## 106 Created template project should be in the left drawer
-    And  I expect '[data-cy="project-expansion-item"] [data-cy="item_{{ projectName }}"]' exists
-    And  I expect '[data-cy="project-expansion-item"] [data-cy="item_{{ projectName }}"]' is '{{ projectName }}'
-
     ## 107 Create template project with an already existing project name should display an error
     When I click on '[data-cy="template-card_Project template"]'
     And  I set on '[data-cy="create-project-template-form"] [data-cy="name-input"]' text '{{ projectName }}'

cypress/e2e/Roundtrip.feature

@@ -22,12 +22,14 @@ Feature: Test roundtrip of the application
     And  I wait 1 second
     Then I expect 'positive' toast to appear with text 'Model has been created 🥳!'
     And  I expect current url is 'projectName/modelizer/draw\?plugin=@ditrit/terrator-plugin&path=infra'
+    And  I wait 1 second
 
     When I click on '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="false"]'
     And  I wait 1 second
     Then I expect '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="true"] [class="block"]' is 'Text'
     And  I expect '[data-cy="file-explorer"]' exists
     And  I expect current url is 'projectName/modelizer/text\?plugin=@ditrit/terrator-plugin&path=infra'
+    And  I wait 1 second
 
     When I click on '[data-cy="navigation-bar"] [data-cy="modelizer-switch-button"] [aria-pressed="false"]'
     And  I wait 1 second

src/components/card/ProjectCard.vue

@@ -15,10 +15,7 @@
         class="project-image"
         @click="(event) => $emit('click', event)"
       />
-      <div
-        class="absolute-bottom q-py-xs row justify-center project-menu"
-        data-cy="title-container"
-      >
+      <div class="absolute-bottom q-py-xs row justify-center project-menu">
         <q-btn
           class="q-mr-md"
           :title="$t('actions.home.deleteProject.title')"
@@ -70,7 +67,10 @@
           @click.stop.prevent="setFavorite(false)"
         />
       </div>
-      <div class="project-title text-subtitle2 text-center ellipsis-2-lines">
+      <div
+        class="project-title text-subtitle2 text-center ellipsis-2-lines"
+        data-cy="title-container"
+      >
         {{ project.id }}
       </div>
       <div

src/components/drawer/ModelizerTextLeftDrawer.vue

@@ -8,7 +8,7 @@
     data-cy="modelizer-text-left-drawer"
   >
     <div class="col-md-2 bg-grey-2 file-explorer-container">
-      <project-details-list level="2" />
+      <project-details-list :level="2" />
       <git-branch-card />
       <q-checkbox
         v-model="showParsableFiles"

src/components/grid/ProjectGrid.vue

@@ -135,12 +135,13 @@ import ProjectCard from 'src/components/card/ProjectCard.vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import {
   computed,
-  onMounted,
+  onMounted, onUnmounted,
   ref,
 } from 'vue';
 import { searchText } from 'src/composables/Filter';
 import { useI18n } from 'vue-i18n';
 import { getProjects } from 'src/composables/Project';
+import ProjectEvent from 'src/composables/events/ProjectEvent';
 
 const { t } = useI18n();
 const filteredProjects = ref([]);
@@ -182,6 +183,8 @@ const filterOptions = computed(() => [{
 }]);
 const searchProjectText = ref('');
 
+let updateProjectSubscription;
+
 /**
  * Update projects list according to filter, sort and input search.
  */
@@ -229,6 +232,11 @@ onMounted(() => {
   [, selectedSort.value] = sortOptions.value;
   [selectedFilter.value] = filterOptions.value;
   updateProjects();
+  updateProjectSubscription = ProjectEvent.UpdateProjectEvent.subscribe(updateProjects);
+});
+
+onUnmounted(() => {
+  updateProjectSubscription.unsubscribe();
 });
 </script>
 

src/components/tab-panel/ComponentsTabPanel.vue

@@ -31,6 +31,13 @@
         @click="onItemClick(drawerItem.id)"
       />
     </div>
+    <div
+      v-if="searchText && isEmptyList"
+      class="q-px-md q-py-sm text-italic text-grey full-height"
+      data-cy="library-empty-message"
+    >
+      {{ $t('page.modelizer.drawer.components.empty') }}
+    </div>
 
     <template v-if="selectedItemId">
       <div
@@ -40,13 +47,6 @@
       >
         {{ $t('errors.permissionsDenied') }}
       </div>
-      <div
-        v-if="isEmptyList"
-        class="q-px-md q-py-sm text-italic text-grey full-height"
-        data-cy="library-empty-message"
-      >
-        {{ $t('page.modelizer.drawer.components.empty') }}
-      </div>
       <div
         v-else
         class="row q-col-gutter-sm"
@@ -112,8 +112,6 @@ const currentPage = ref(0);
 const inputLabel = computed(() => t('page.modelizer.drawer.components.filterLabel'));
 const pluginDefinitions = computed(() => props.plugin.data.definitions.components
   .filter((def) => isMatching(searchText.value, def.displayName || def.type)));
-const isEmptyList = computed(() => pluginDefinitions.value.length === 0
-    && templates.value.length === 0);
 const drawerItems = computed(() => [
   {
     id: props.plugin.data.name,
@@ -131,9 +129,10 @@ const drawerItems = computed(() => [
   },
 ]);
 const selectedItemDefinitions = computed(() => drawerItems.value
-  .find(({ id }) => selectedItemId.value === id)?.definitions);
+  .find(({ id }) => selectedItemId.value === id)?.definitions || []);
 const hasRole = computed(() => drawerItems.value
   .find(({ id }) => selectedItemId.value === id)?.hasRole || false);
+const isEmptyList = computed(() => selectedItemDefinitions.value.length === 0);
 
 /**
  * Toggle isSelected value and set selectedItemId on library item click.

src/pages/HomePage.vue

@@ -2,9 +2,7 @@
   <q-page class="home-page bg-grey-2">
     <div class="column items-center home-content">
       <div class="row grid-container">
-        <project-grid
-          :projects="projects"
-        />
+        <project-grid />
       </div>
       <div class="row grid-container">
         <template-grid
@@ -28,32 +26,13 @@
 <script setup>
 import ProjectGrid from 'src/components/grid/ProjectGrid.vue';
 import TemplateGrid from 'src/components/grid/TemplateGrid.vue';
-import { getProjects } from 'src/composables/Project';
 import ImportProjectDialog from 'components/dialog/ImportProjectDialog.vue';
 import CreateProjectTemplateDialog from 'components/dialog/CreateProjectTemplateDialog.vue';
 import CreateProjectDialog from 'components/dialog/CreateProjectDialog.vue';
 import DeleteProjectDialog from 'components/dialog/DeleteProjectDialog.vue';
-import ProjectEvent from 'src/composables/events/ProjectEvent';
-import {
-  ref,
-  onMounted,
-  onUnmounted,
-} from 'vue';
 import RenameProjectDialog from 'components/dialog/RenameProjectDialog.vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 
-const projects = ref([]);
-let updateProjectSubscription;
-
-/**
- * Update project list, sorted by creation date from newest to oldest.
- */
-function setProjects() {
-  projects.value = Object.entries(getProjects())
-    .map(([, project]) => project)
-    .sort((projectA, projectB) => projectB.creationDate - projectA.creationDate);
-}
-
 /**
  * Open CreateProjectTemplate dialog.
  * @param {object} template - Selected project template.
@@ -65,15 +44,6 @@ async function openCreateProjectTemplateDialog(template) {
     template,
   });
 }
-
-onMounted(async () => {
-  setProjects();
-  updateProjectSubscription = ProjectEvent.UpdateProjectEvent.subscribe(setProjects);
-});
-
-onUnmounted(() => {
-  updateProjectSubscription.unsubscribe();
-});
 </script>
 
 <style lang="scss" scoped>

src/pages/ModelsPage.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page>
     <q-card class="q-mt-md q-mx-md project-details">
-      <project-details-list level="1" />
+      <project-details-list :level="1" />
     </q-card>
     <div class="column items-center full-width diagrams-content">
       <diagrams-card

tests/unit/components/grid/ProjectGrid.spec.js

@@ -2,6 +2,7 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-j
 import { shallowMount } from '@vue/test-utils';
 import ProjectGrid from 'src/components/grid/ProjectGrid.vue';
 import { createAcl, defineAclRules } from 'vue-simple-acl';
+import ProjectEvent from 'src/composables/events/ProjectEvent';
 
 installQuasarPlugin();
 
@@ -32,10 +33,26 @@ jest.mock('src/composables/Project', () => ({
   })),
 }));
 
+jest.mock('src/composables/events/ProjectEvent', () => ({
+  UpdateProjectEvent: {
+    subscribe: jest.fn(),
+  },
+}));
+
 describe('Test component: ProjectGrid', () => {
   let wrapper;
+  let updateProjectSubscribe;
+  let updateProjectUnsubscribe;
 
   beforeEach(() => {
+    updateProjectSubscribe = jest.fn();
+    updateProjectUnsubscribe = jest.fn();
+
+    ProjectEvent.UpdateProjectEvent.subscribe.mockImplementation(() => {
+      updateProjectSubscribe();
+      return { unsubscribe: updateProjectUnsubscribe };
+    });
+
     wrapper = shallowMount(ProjectGrid, {
       global: {
         plugins: [
@@ -217,4 +234,18 @@ describe('Test component: ProjectGrid', () => {
       }]);
     });
   });
+
+  describe('Test hook function: onMounted', () => {
+    it('should subscribe UpdateProjectEvent', () => {
+      expect(updateProjectSubscribe).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Test hook function: onUnmounted', () => {
+    it('should unsubscribe UpdateProjectEvent', () => {
+      expect(updateProjectUnsubscribe).toHaveBeenCalledTimes(0);
+      wrapper.unmount();
+      expect(updateProjectUnsubscribe).toHaveBeenCalledTimes(1);
+    });
+  });
 });

tests/unit/components/tab-panel/ComponentsTabPanel.spec.js

@@ -83,8 +83,9 @@ describe('Test component: ComponentsTabPanel', () => {
 
     it('should be false when pluginDefinitions is not empty', async () => {
       wrapper.vm.templates = [];
+      wrapper.vm.selectedItemId = wrapper.vm.drawerItems[0].id;
 
-      expect(wrapper.vm.pluginDefinitions).not.toEqual([]);
+      expect(wrapper.vm.selectedItemDefinitions).not.toEqual([]);
       expect(wrapper.vm.isEmptyList).toBeFalsy();
     });
 
@@ -100,7 +101,9 @@ describe('Test component: ComponentsTabPanel', () => {
         },
       });
 
-      expect(wrapper.vm.templates).not.toEqual([]);
+      wrapper.vm.selectedItemId = wrapper.vm.drawerItems[1].id;
+
+      expect(wrapper.vm.selectedItemDefinitions).not.toEqual([]);
       expect(wrapper.vm.isEmptyList).toBeFalsy();
     });
   });