Update selector to test SVG icon name, cleanup tests

spec/javascripts/groups/components/item_stats_spec.js

@@ -26,7 +26,6 @@ describe('ItemStatsComponent', () => {
         Object.keys(VISIBILITY_TYPE_ICON).forEach((visibility) => {
           const item = Object.assign({}, mockParentGroupItem, { visibility });
           const vm = createComponent(item);
-          vm.$mount();
           expect(vm.visibilityIcon).toBe(VISIBILITY_TYPE_ICON[visibility]);
           vm.$destroy();
         });
@@ -41,7 +40,6 @@ describe('ItemStatsComponent', () => {
             type: ITEM_TYPE.GROUP,
           });
           const vm = createComponent(item);
-          vm.$mount();
           expect(vm.visibilityTooltip).toBe(GROUP_VISIBILITY_TYPE[visibility]);
           vm.$destroy();
         });
@@ -54,7 +52,6 @@ describe('ItemStatsComponent', () => {
             type: ITEM_TYPE.PROJECT,
           });
           const vm = createComponent(item);
-          vm.$mount();
           expect(vm.visibilityTooltip).toBe(PROJECT_VISIBILITY_TYPE[visibility]);
           vm.$destroy();
         });
@@ -68,13 +65,11 @@ describe('ItemStatsComponent', () => {
 
         item = Object.assign({}, mockParentGroupItem, { type: ITEM_TYPE.PROJECT });
         vm = createComponent(item);
-        vm.$mount();
         expect(vm.isProject).toBeTruthy();
         vm.$destroy();
 
         item = Object.assign({}, mockParentGroupItem, { type: ITEM_TYPE.GROUP });
         vm = createComponent(item);
-        vm.$mount();
         expect(vm.isProject).toBeFalsy();
         vm.$destroy();
       });
@@ -87,13 +82,11 @@ describe('ItemStatsComponent', () => {
 
         item = Object.assign({}, mockParentGroupItem, { type: ITEM_TYPE.GROUP });
         vm = createComponent(item);
-        vm.$mount();
         expect(vm.isGroup).toBeTruthy();
         vm.$destroy();
 
         item = Object.assign({}, mockParentGroupItem, { type: ITEM_TYPE.PROJECT });
         vm = createComponent(item);
-        vm.$mount();
         expect(vm.isGroup).toBeFalsy();
         vm.$destroy();
       });
@@ -101,57 +94,37 @@ describe('ItemStatsComponent', () => {
   });
 
   describe('template', () => {
-    it('should render component template correctly', () => {
+    it('renders component container element correctly', () => {
       const vm = createComponent();
-      vm.$mount();
 
-      const visibilityIconEl = vm.$el.querySelector('.item-visibility');
-      expect(vm.$el.classList.contains('.stats')).toBeDefined();
-      expect(visibilityIconEl).toBeDefined();
-      expect(visibilityIconEl.dataset.originalTitle).toBe(vm.visibilityTooltip);
-      expect(visibilityIconEl.querySelector('i.fa')).toBeDefined();
+      expect(vm.$el.classList.contains('stats')).toBeTruthy();
 
       vm.$destroy();
     });
 
-    it('should render stat icons if `item.type` is Group', () => {
-      const item = Object.assign({}, mockParentGroupItem, { type: ITEM_TYPE.GROUP });
-      const vm = createComponent(item);
-      vm.$mount();
-
-      const subgroupIconEl = vm.$el.querySelector('span.number-subgroups');
-      expect(subgroupIconEl).toBeDefined();
-      expect(subgroupIconEl.dataset.originalTitle).toBe('Subgroups');
-      expect(subgroupIconEl.querySelector('i.fa.fa-folder')).toBeDefined();
-      expect(subgroupIconEl.innerText.trim()).toBe(`${vm.item.subgroupCount}`);
-
-      const projectsIconEl = vm.$el.querySelector('span.number-projects');
-      expect(projectsIconEl).toBeDefined();
-      expect(projectsIconEl.dataset.originalTitle).toBe('Projects');
-      expect(projectsIconEl.querySelector('i.fa.fa-bookmark')).toBeDefined();
-      expect(projectsIconEl.innerText.trim()).toBe(`${vm.item.projectCount}`);
-
-      const membersIconEl = vm.$el.querySelector('span.number-users');
-      expect(membersIconEl).toBeDefined();
-      expect(membersIconEl.dataset.originalTitle).toBe('Members');
-      expect(membersIconEl.querySelector('i.fa.fa-users')).toBeDefined();
-      expect(membersIconEl.innerText.trim()).toBe(`${vm.item.memberCount}`);
+    it('renders item visibility icon and tooltip correctly', () => {
+      const vm = createComponent();
+
+      const visibilityIconEl = vm.$el.querySelector('.item-visibility');
+      expect(visibilityIconEl).not.toBe(null);
+      expect(visibilityIconEl.dataset.originalTitle).toBe(vm.visibilityTooltip);
+      expect(visibilityIconEl.querySelectorAll('svg').length > 0).toBeTruthy();
 
       vm.$destroy();
     });
 
-    it('should render stat icons if `item.type` is Project', () => {
+    it('renders start count and last updated information for project item correctly', () => {
       const item = Object.assign({}, mockParentGroupItem, {
         type: ITEM_TYPE.PROJECT,
         starCount: 4,
       });
       const vm = createComponent(item);
-      vm.$mount();
 
       const projectStarIconEl = vm.$el.querySelector('.project-stars');
-      expect(projectStarIconEl).toBeDefined();
-      expect(projectStarIconEl.querySelector('i.fa.fa-star')).toBeDefined();
-      expect(projectStarIconEl.innerText.trim()).toBe(`${vm.item.starCount}`);
+      expect(projectStarIconEl).not.toBe(null);
+      expect(projectStarIconEl.querySelectorAll('svg').length > 0).toBeTruthy();
+      expect(projectStarIconEl.querySelectorAll('.stat-value').length > 0).toBeTruthy();
+      expect(vm.$el.querySelectorAll('.last-updated').length > 0).toBeTruthy();
 
       vm.$destroy();
     });

spec/javascripts/groups/components/item_type_icon_spec.js

@@ -28,12 +28,12 @@ describe('ItemTypeIconComponent', () => {
 
       vm = createComponent(ITEM_TYPE.GROUP, true);
       vm.$mount();
-      expect(vm.$el.querySelector('i.fa.fa-folder-open')).toBeDefined();
+      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('folder-open');
       vm.$destroy();
 
       vm = createComponent(ITEM_TYPE.GROUP);
       vm.$mount();
-      expect(vm.$el.querySelector('i.fa.fa-folder')).toBeDefined();
+      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('folder');
       vm.$destroy();
     });
 
@@ -42,12 +42,12 @@ describe('ItemTypeIconComponent', () => {
 
       vm = createComponent(ITEM_TYPE.PROJECT);
       vm.$mount();
-      expect(vm.$el.querySelectorAll('i.fa.fa-bookmark').length).toBe(1);
+      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('bookmark');
       vm.$destroy();
 
       vm = createComponent(ITEM_TYPE.GROUP);
       vm.$mount();
-      expect(vm.$el.querySelectorAll('i.fa.fa-bookmark').length).toBe(0);
+      expect(vm.$el.querySelector('use').getAttribute('xlink:href')).not.toContain('bookmark');
       vm.$destroy();
     });
   });