Merge branch 'feature/insti-dash-improv' of https://github.com/Center…

…ForOpenScience/ember-osf-web into improve-mobile-styling-inst-dashboard

* 'feature/insti-dash-improv' of https://github.com/CenterForOpenScience/ember-osf-web:
  Added a test with test-data elements
  Updates to add the project total

# Conflicts:
#	translations/en-us.yml

app/institutions/dashboard/-components/total-count-kpi-wrapper/component-test.ts

@@ -0,0 +1,78 @@
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupRenderingTest } from 'ember-qunit';
+import { TestContext } from 'ember-test-helpers';
+import { module, test } from 'qunit';
+
+module('Integration | institutions | dashboard | -components | total-count-kpi-wrapper', hooks => {
+    setupRenderingTest(hooks);
+    setupMirage(hooks);
+    setupIntl(hooks);
+
+    hooks.beforeEach(function(this: TestContext) {
+        const model = Object({
+            summaryMetrics: {
+                userCount: 10,
+                privateProjectCount: 10,
+                publicProjectCount: 10,
+            },
+        });
+
+        this.set('model', model);
+    });
+
+    test('it renders the dashboard total kpis correctly', async assert => {
+        // Given the component is rendered
+        await render(hbs`
+<Institutions::Dashboard::-Components::TotalCountKpiWrapper
+@model={{this.model}}
+/>
+`);
+
+        // Then the first total kpi is tested
+        assert.dom('[data-test-total-count-kpi="0"]')
+            .exists('The User Widget exists');
+
+        assert.dom('[data-test-total-count-kpi="0"]')
+            .hasText('10 Total Users');
+
+        assert.dom('[data-test-total-count-kpi="0"] [data-test-kpi-icon]')
+            .hasAttribute('data-icon', 'building');
+
+        // And the second total kpi is tested
+        assert.dom('[data-test-total-count-kpi="1"]')
+            .exists('The Project Widget exists');
+
+        assert.dom('[data-test-total-count-kpi="1"]')
+            .hasText('20 OSF Public and Private Projects');
+
+        assert.dom('[data-test-total-count-kpi="1"] [data-test-kpi-icon]')
+            .hasAttribute('data-icon', 'atom');
+
+        // And the third total kpi is tested
+        assert.dom('[data-test-total-count-kpi="2"]')
+            .exists('The Registration Widget exists');
+
+        assert.dom('[data-test-total-count-kpi="2"]')
+            .hasText('1000 OSF Registrations');
+
+        assert.dom('[data-test-total-count-kpi="2"] [data-test-kpi-icon]')
+            .hasAttribute('data-icon', 'flag');
+
+        // And the fourth total kpi is tested
+        assert.dom('[data-test-total-count-kpi="3"]')
+            .exists('The Preprint Widget exists');
+
+        assert.dom('[data-test-total-count-kpi="3"]')
+            .hasText('10000 OSF Preprints');
+
+        assert.dom('[data-test-total-count-kpi="3"] [data-test-kpi-icon]')
+            .hasAttribute('data-icon', 'file-alt');
+
+        // Finally there are only 4 widgets
+        assert.dom('[data-test-total-count-kpi="4"]')
+            .doesNotExist('There are only 4 widgets');
+    });
+});

app/institutions/dashboard/-components/total-count-kpi-wrapper/component.ts

@@ -5,6 +5,7 @@ import { task } from 'ember-concurrency';
 import { taskFor } from 'ember-concurrency-ts';
 import Intl from 'ember-intl/services/intl';
 import { inject as service } from '@ember/service';
+import InstitutionSummaryMetricModel from 'ember-osf-web/models/institution-summary-metric';
 
 interface TotalCountKpiWrapperArgs {
     model: any;
@@ -28,6 +29,17 @@ export default class TotalCountKpiWrapperComponent extends Component<TotalCountK
         taskFor(this.loadData).perform();
     }
 
+    /**
+     * calculateProjects
+     *
+     * @description Abstracted method to calculate the private and public projects
+     * @param summaryMetrics The institutional summary metrics object
+     *
+     * @returns The total of private and public projects
+     */
+    private calculateProjects(summaryMetrics: InstitutionSummaryMetricModel): number {
+        return summaryMetrics.privateProjectCount + summaryMetrics.publicProjectCount;
+    }
 
     @task
     @waitFor
@@ -42,8 +54,7 @@ export default class TotalCountKpiWrapperComponent extends Component<TotalCountK
             },
             {
                 title: this.intl.t('institutions.dashboard.panel.projects'),
-                // total: metrics.summaryMetrics.userCount,
-                total: 100,
+                total: this.calculateProjects(metrics.summaryMetrics),
                 icon: 'atom',
             },
             {

app/institutions/dashboard/-components/total-count-kpi-wrapper/template.hbs

@@ -1,6 +1,6 @@
 <div local-class='wrapper-container {{if (is-mobile) 'mobile'}}'>
     {{#if this.isLoading}}
-        <div local-class='loading'>
+        <div local-class='loading' data-test-kpi-wrapper-loading>
             <LoadingIndicator data-test-loading-indicator-total-count-kpi-wrapper @dark={{true}} />
         </div>
     {{else}}

app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/template.hbs

@@ -1,4 +1,4 @@
-<div local-class='kpi-container'>
+<div local-class='kpi-container' ...attributes>
     <div local-class='left-container'>
         <div local-class='data' data-test-kpi-data>
             {{#if @data.total}}