fix: selection button styling and unittests

molgenis · Dec 7, 2021 · 294041e · 294041e
1 parent 9394efa
commit 294041e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 5 deletions.
diff --git a/src/components/buttons/CollectionSelectAll.vue b/src/components/buttons/CollectionSelectAll.vue
@@ -9,10 +9,10 @@
       :checked="allCollectionsSelected"
       hidden/>
     <label class="add-to-cart-label btn btn-outline-secondary" for="select-deselect-all">
-      <span class="mr-2">Select all collections</span>
+      <span>Select all collections</span>
     </label>
     <label class="remove-from-cart-label btn btn-outline-danger" for="select-deselect-all">
-      <span class="mr-2">Deselect all collections</span>
+      <span>Deselect all collections</span>
     </label>
   </div>
 </template>

diff --git a/src/components/buttons/CollectionSelector.vue b/src/components/buttons/CollectionSelector.vue
@@ -10,7 +10,7 @@
       :value="false"
       hidden/>
     <label v-if="!iconOnly" class="add-to-cart-label btn btn-outline-secondary" :for="checkboxIdentifier">
-      <span class="mr-2">Add to selection</span>
+      <span>Add to selection</span>
     </label>
     <label v-else class="add-to-cart-label btn" :for="checkboxIdentifier">
       <font-awesome-icon
@@ -22,7 +22,7 @@
       v-if="!iconOnly"
       class="btn remove-from-cart-label btn-outline-danger"
       :for="checkboxIdentifier">
-      <span class="mr-2">Remove from selection</span>
+      <span>Remove from selection</span>
     </label>
     <label
       v-else

diff --git a/tests/unit/specs/components/generators/view-components/mref.spec.js b/tests/unit/specs/components/generators/view-components/mref.spec.js
@@ -20,7 +20,10 @@ describe('Generator view-components', () => {
       // remove whitespace and newlines for easy check
       const flattendHtml = wrapper.html().replace(/\s/gmi, '')
 
-      expect(flattendHtml).toBe('<tr><thscope="row"class="pr-1align-top">Count:</th><td><spanclass="m-1badgebadge-info">1</span><spanclass="m-1badgebadge-info">2</span><spanclass="m-1badgebadge-info">3</span></td></tr>')
+      expect(flattendHtml.includes('>Count:<')).toBeTruthy()
+      expect(flattendHtml.includes('>1<')).toBeTruthy()
+      expect(flattendHtml.includes('>2<')).toBeTruthy()
+      expect(flattendHtml.includes('>3<')).toBeTruthy()
     })
 
     it('can create a tr with badges for a categorical mref attribute object with id/label/name and a uri', () => {

diff --git a/tests/unit/specs/components/report-components/ReportCollectionDetails.spec.js b/tests/unit/specs/components/report-components/ReportCollectionDetails.spec.js
@@ -87,6 +87,16 @@ const expected = {
           type: 'int',
           value: ''
         },
+        {
+          label: 'Donor size:',
+          type: 'object',
+          value: ''
+        },
+        {
+          label: 'Donors:',
+          type: 'int',
+          value: ''
+        },
         {
           label: 'Age:',
           type: 'range',
@@ -183,6 +193,16 @@ const expected = {
           type: 'int',
           value: ''
         },
+        {
+          label: 'Donor size:',
+          type: 'object',
+          value: ''
+        },
+        {
+          label: 'Donors:',
+          type: 'int',
+          value: ''
+        },
         {
           label: 'Age:',
           type: 'range',
@@ -254,6 +274,16 @@ const expected = {
       type: 'int',
       value: ''
     },
+    {
+      label: 'Donor size:',
+      type: 'object',
+      value: ''
+    },
+    {
+      label: 'Donors:',
+      type: 'int',
+      value: ''
+    },
     {
       label: 'Age:',
       type: 'range',

diff --git a/tests/unit/specs/utils/templateMapper.spec.js b/tests/unit/specs/utils/templateMapper.spec.js
@@ -288,6 +288,16 @@ describe('templateMapper', () => {
                 type: 'int',
                 value: ''
               },
+              {
+                label: 'Donor size:',
+                type: 'object',
+                value: ''
+              },
+              {
+                label: 'Donors:',
+                type: 'int',
+                value: ''
+              },
               {
                 label: 'Age:',
                 type: 'range',
@@ -427,6 +437,16 @@ describe('templateMapper', () => {
                     type: 'int',
                     value: ''
                   },
+                  {
+                    label: 'Donor size:',
+                    type: 'object',
+                    value: ''
+                  },
+                  {
+                    label: 'Donors:',
+                    type: 'int',
+                    value: ''
+                  },
                   {
                     label: 'Age:',
                     type: 'range',
@@ -495,6 +515,16 @@ describe('templateMapper', () => {
                 type: 'int',
                 value: ''
               },
+              {
+                label: 'Donor size:',
+                type: 'object',
+                value: ''
+              },
+              {
+                label: 'Donors:',
+                type: 'int',
+                value: ''
+              },
               {
                 label: 'Age:',
                 type: 'range',
@@ -574,6 +604,16 @@ describe('templateMapper', () => {
             type: 'int',
             value: ''
           },
+          {
+            label: 'Donor size:',
+            type: 'object',
+            value: ''
+          },
+          {
+            label: 'Donors:',
+            type: 'int',
+            value: ''
+          },
           {
             label: 'Age:',
             type: 'range',