From 294041e37349072a894b70ddda6dc7d6ceedc384 Mon Sep 17 00:00:00 2001
From: Jelmer Veen <j.p.veen@rug.nl>
Date: Tue, 7 Dec 2021 09:51:17 +0100
Subject: [PATCH] fix: selection button styling and unittests

---
 .../buttons/CollectionSelectAll.vue           |  4 +-
 src/components/buttons/CollectionSelector.vue |  4 +-
 .../generators/view-components/mref.spec.js   |  5 ++-
 .../ReportCollectionDetails.spec.js           | 30 ++++++++++++++
 tests/unit/specs/utils/templateMapper.spec.js | 40 +++++++++++++++++++
 5 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/src/components/buttons/CollectionSelectAll.vue b/src/components/buttons/CollectionSelectAll.vue
index 2145495a..bd960b89 100644
--- 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
index f0601a6b..6465a441 100644
--- 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
index df3f4a93..6be4a5af 100644
--- 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
index 69decde7..fc6017d6 100644
--- 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
index 4fe29e1a..edab9727 100644
--- 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',