[O2B-1139] Refresh tags list when a tag is updated/created

lib/database/seeders/20200511151010-tags.js

@@ -16,7 +16,7 @@ module.exports = {
         queryInterface.sequelize.transaction((transaction) =>
             Promise.all([
                 queryInterface.bulkInsert('tags', [
-                    { text: 'FOOD', email: '[email protected]', mattermost: 'food', description: 'The food\'s related tag' },
+                    { text: 'FOOD', email: '[email protected]', mattermost: 'food', description: 'The food\'s related tag', color: '#EEEEEE' },
                     { text: 'RUN', email: '[email protected]', mattermost: 'marathon', description: 'Description for the run tag' },
                     { text: 'MAINTENANCE' },
                     { text: 'GLOBAL' },

lib/public/views/Runs/Details/RunDetailsModel.js

@@ -65,18 +65,16 @@
     async clearAndLoad({ runNumber = null, runId = null, panelKey = null }) {
         this.tabbedPanelModel.currentPanelKey = panelKey;
         this._updateErrors = [];
+        this._runDetails = RemoteData.notAsked();
+        this._eorReasonTypes = RemoteData.notAsked();
 
         if (this._runNumber !== runNumber || this._runId !== runId) {
             this.clearAllEditors();
-            this._runNumber = runNumber;
-            this._runId = runId;
-
-            this._runDetails = RemoteData.notAsked();
-            this._eorReasonTypes = RemoteData.notAsked();
-
-            this._fetchOneRun();
-            this._fetchReasonTypes();
         }
+        this._runId = runId;
+        this._runNumber = runNumber;
+        this._fetchReasonTypes();
+        this._fetchOneRun();
     }
 
     /**

test/public/runs/detail.test.js

@@ -32,6 +32,7 @@ const {
 const { RunCalibrationStatus } = require('../../../lib/domain/enums/RunCalibrationStatus.js');
 const { runService } = require('../../../lib/server/services/run/RunService');
 const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js');
+const { tag: { UpdateTagUseCase } } = require('../../../lib/usecases/index.js');
 
 const { expect } = chai;
 
@@ -505,4 +506,58 @@ module.exports = () => {
             innerText: 'ECS',
         });
     });
+
+    it('should display correct tag styling after updating in tag overview', async () => {
+        /**
+         *  Retrieve the badge classes and styles
+         *
+         *  @return {Promise<Array>} resolves with the badge classes and styles
+         */
+        const getRunTagsBadges = async () => {
+            // Check if the tag is updated
+            const tagsBadgeClassesSelector = '#tags .badge';
+            // Wait for badge elements to appear
+            await page.waitForSelector(tagsBadgeClassesSelector);
+            // Evaluate and check for inline background color
+            return await page.$$eval(
+                tagsBadgeClassesSelector,
+                (badges) => badges.map((badge) => badge.style.backgroundColor),
+            );
+        };
+
+        let badges;
+        const expectedBgColorBefore = 'rgb(238, 238, 238)'; //Gray
+        const expectedBgColorAfter = 'rgb(255, 0, 0)'; //Red
+        const expectedBadgeCount = 7;
+
+        // Fetch the run data before update of tag
+        await goToRunDetails(page, 106);
+
+        badges = await getRunTagsBadges();
+
+        expect(badges.length).to.equal(expectedBadgeCount);
+
+        expect(badges[0]).to.equal(expectedBgColorBefore);
+
+        const updateTagDto = {
+            body: {
+                color: '#FF0000', //Red
+            },
+            params: {
+                tagId: 1,
+            },
+            session: {
+                personid: 1,
+                id: 1,
+                name: 'John Doe',
+            },
+        };
+        await new UpdateTagUseCase()
+            .execute(updateTagDto);
+
+        await goToRunDetails(page, 106);
+        badges = await getRunTagsBadges();
+
+        expect(badges[0]).to.equal(expectedBgColorAfter);
+    });
 };