Fix jest tests for study page incl participation panel and participat…

…ion stats

resources/test/__snapshots__/components/Participants/ParticipantsPanel/ParticipantsPanel.snap.js

@@ -2,32 +2,17 @@
 
 exports[`ParticipantsPanel matches its snapshot 1`] = `
 <div class="row fill-height" id="participants-panel">
-  <div class="pb-5 col-lg-6 col-xl-7 col-12">
+  <div class="pb-5 col col-12">
     <div class="fill-height d-flex flex-column v-card v-sheet v-sheet--outlined theme--light">
-      <div class="v-card__title">
-        study_participants.stats.title
-      </div>
-      <div class="v-card__text">
+      <div class="v-card__actions">
+        <div class="spacer"></div>
       </div>
-    </div>
-  </div>
-  <div class="pb-5 col-lg-6 col-xl-5 col-12">
-    <div class="fill-height d-flex flex-column v-card v-sheet v-sheet--outlined theme--light">
       <div class="v-card__title">
         study_participants.participants.title
         <div class="spacer"></div>
       </div>
       <div class="v-card__text pa-0 fill-height">
       </div>
-      <div class="v-card__actions">
-        <div class="spacer"></div>
-        <button class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary" type="button">
-          <span class="v-btn__content">
-            <i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-download theme--light"></i>
-            study_participants.participants.data
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </div>

resources/test/__snapshots__/components/Participants/ParticipationStats/ParticipationStats.snap.js

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ParticipationStats matches its snapshot 1`] = `
+<div class="fill-height d-flex flex-column v-card v-sheet v-sheet--outlined theme--light">
+  <div class="v-card__title">
+    study_participants.stats.title
+  </div>
+  <div class="v-card__text">
+    <div class="row fill-height" id="participants-stats">
+      <div class="pb-5 col col-6">
+        <p class="text-subtitle-2 secondary--text">
+          stats.overview
+        </p>
+        <div class="row no-gutters font-weight-bold">
+          <div class="col-sm-7 col-lg-8 col-xl-6 col-6">
+            stats.participants.total:
+          </div>
+          <div class="col-sm-5 col-lg-4 col-xl-6 col-6">
+            0
+          </div>
+        </div>
+        <div class="row no-gutters">
+          <div class="col-sm-7 col-lg-8 col-xl-6 col-6">
+            - stats.participants.finished:
+          </div>
+          <div class="col-sm-5 col-lg-4 col-xl-6 col-6">
+            0
+          </div>
+        </div>
+        <div class="row no-gutters">
+          <div class="col-sm-7 col-lg-8 col-xl-6 col-6">
+            - stats.participants.in_progress:
+          </div>
+          <div class="col-sm-5 col-lg-4 col-xl-6 col-6">
+            0
+          </div>
+        </div>
+        <div class="row no-gutters">
+          <div class="col-sm-7 col-lg-8 col-xl-6 col-6">
+            - stats.participants.pending:
+          </div>
+          <div class="col-sm-5 col-lg-4 col-xl-6 col-6">
+            0
+          </div>
+        </div>
+      </div>
+      <div class="pb-5 col col-6">
+        <p class="text-subtitle-2 secondary--text">
+          stats.progress
+        </p>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="v-progress-circular text-center v-progress-circular--visible green--text" role="progressbar" style="height: 175px; width: 175px;">
+          <svg style="transform: rotate(-90deg);" viewBox="23.333333333333332 23.333333333333332 46.666666666666664 46.666666666666664" xmlns="http://www.w3.org/2000/svg">
+            <circle class="v-progress-circular__underlay" cx="46.666666666666664" cy="46.666666666666664" fill="transparent" r="20" stroke-dasharray="125.664" stroke-dashoffset="0" stroke-width="6.666666666666666" />
+            <circle class="v-progress-circular__overlay" cx="46.666666666666664" cy="46.666666666666664" fill="transparent" r="20" stroke-dasharray="125.664" stroke-dashoffset="125.66370614359172px" stroke-width="6.666666666666666" />
+          </svg>
+          <div class="v-progress-circular__info">
+            <div>
+              <div class="text-h4 text-md-h2">
+                0
+                <span class="caption">%</span>
+              </div>
+              <div class="caption">
+                stats.complete
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col col-12">
+        <p class="text-subtitle-2 secondary--text">
+          stats.trend
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

resources/test/__snapshots__/pages/dashboard/studies/_id/index.snap.js

@@ -8,16 +8,8 @@ exports[`Study Index matches its snapshot 1`] = `
         <div class="col col-12">
         </div>
       </div>
-      <div class="row no-gutters">
-        <div class="text-md-right col-lg-8 col-xl-9 col-12">
-          <div aria-busy="true" aria-live="polite" class="v-skeleton-loader v-skeleton-loader--is-loading theme--light" role="alert">
-            <div class="v-skeleton-loader__actions v-skeleton-loader__bone">
-              <div class="v-skeleton-loader__button v-skeleton-loader__bone"></div>
-              <div class="v-skeleton-loader__button v-skeleton-loader__bone"></div>
-            </div>
-          </div>
-        </div>
-        <div class="col-lg-4 col-xl-3 order-lg-first col-12">
+      <div class="row flex-nowrap no-gutters">
+        <div class="flex-grow-0 flex-shrink-0 col">
           <div class="v-tabs theme--light">
             <div class="v-item-group theme--light v-slide-group v-tabs-bar v-tabs-bar--is-mobile primary--text" role="tablist">
               <div class="v-slide-group__prev v-slide-group__prev--disabled">
@@ -31,6 +23,7 @@ exports[`Study Index matches its snapshot 1`] = `
                   <div aria-selected="true" class="v-tab v-tab--active" role="tab" tabindex="0">studies.tabs.information</div>
                   <div aria-selected="false" class="v-tab" role="tab" tabindex="0">studies.tabs.jobs</div>
                   <div aria-selected="false" class="v-tab" role="tab" tabindex="0">studies.tabs.participants</div>
+                  <div aria-selected="false" class="v-tab" role="tab" tabindex="0">studies.tabs.stats</div>
                 </div>
               </div>
               <div class="v-slide-group__next v-slide-group__next--disabled">
@@ -39,6 +32,14 @@ exports[`Study Index matches its snapshot 1`] = `
             </div>
           </div>
         </div>
+        <div class="flex-grow-1 flex-shrink-0 text-md-right col">
+          <div aria-busy="true" aria-live="polite" class="v-skeleton-loader v-skeleton-loader--is-loading theme--light" role="alert">
+            <div class="v-skeleton-loader__actions v-skeleton-loader__bone">
+              <div class="v-skeleton-loader__button v-skeleton-loader__bone"></div>
+              <div class="v-skeleton-loader__button v-skeleton-loader__bone"></div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="row fill-height">
         <div class="pt-6 pb-0 mb-0 col col-12">
@@ -79,6 +80,8 @@ exports[`Study Index matches its snapshot 1`] = `
               </transition-stub>
               <transition-stub class="fill-height" name>
               </transition-stub>
+              <transition-stub name>
+              </transition-stub>
             </div>
           </div>
         </div>