Add cypress tests on the timeline bubbles (#2574)

src/test/cypress/cypress/integration/Timeline.spec.js

@@ -33,9 +33,23 @@ describe('Time line moves', function () {
         cy.get("#opfab-timeline-link-move-left").click();
     }
 
-
     function checkHaveCircle(nb) {
-        cy.get("of-custom-timeline-chart").find("circle").should('have.length', nb);
+        cy.get("of-custom-timeline-chart").find("ellipse").should('have.length', nb);
+    }
+
+    function checkNthCircleContains(nb,value) {
+        cy.get('#opfab-timelineCircle-' + nb ).within(() => {
+            cy.get("text").contains(value);
+        })  
+    } 
+
+    function hoverNthCircle(nb) {
+        cy.get('#opfab-timelineCircle-' + nb).trigger('mouseenter');
+    }
+
+
+    function clickNthCircle(nb) {
+        cy.get('#opfab-timelineCircle-' + nb).click();
     }
 
     function checkTitle(title) {
@@ -54,7 +68,9 @@ describe('Time line moves', function () {
         cy.get(".axis").find("text").first().should("have.text", label);
     }
 
-
+    function checkDisplayedCardTitle(title) {
+        cy.get("#opfab-card-title").should("have.text", title);
+    }
 
     before('Set up configuration and cards', function () {
         cy.loadTestConf();
@@ -833,4 +849,47 @@ describe('Time line moves', function () {
 
     });
 
+
+    it('Check timeline circles have valid popover', function () {
+
+        cy.loginOpFab("operator1_fr", "test");
+        const currentDate = new Date(); 
+
+        checkHaveCircle(0);
+
+        cy.sendCard('cypress/feed/customEvent.json', currentDate.getTime() + 2 * HOURS, currentDate.getTime() + 5 * HOURS);
+        checkHaveCircle(1);
+        checkNthCircleContains(0,"1");
+
+        hoverNthCircle(0);
+        cy.get(".popover-body").find('button').should("have.length", 1);
+        cy.get("#opfab-div-card-template").should("not.exist");
+
+        clickNthCircle(0);
+        cy.get("#opfab-div-card-template").should("exist");
+        checkDisplayedCardTitle("State to test template rendering features");
+
+        cy.sendCard('defaultProcess/chartLine.json');
+        cy.sendCard('cypress/feed/customAlarm.json', currentDate.getTime() + 1 * HOURS, currentDate.getTime() + 5 * HOURS);
+
+         // wait we receive the cards (when we have 3 cards in the feed)
+         cy.get('of-light-card').should('have.length',3);
+         checkHaveCircle(2);
+         checkNthCircleContains(0,"1");
+         checkNthCircleContains(1,"2");
+
+        // Clicking on a circle with several cards should not change the currently displayed card
+        clickNthCircle(1);
+        cy.get("#opfab-div-card-template").should("exist");
+        checkDisplayedCardTitle("State to test template rendering features");
+
+
+        hoverNthCircle(1);
+        cy.get(".popover-body").find('button').should("have.length", 2);
+        cy.get(".popover-body").find('button').eq(1).click();
+
+
+        checkDisplayedCardTitle("Electricity consumption forecast");
+    });
+
 })

ui/main/src/app/modules/feed/components/time-line/custom-timeline-chart/custom-timeline-chart.component.html

@@ -115,9 +115,9 @@
         ></svg:rect>
 
 
-        <svg:g *ngFor="let circle of circles" type="button">
+        <svg:g *ngFor="let circle of circles;let index = index;" type="button">
 
-        <svg:g *ngIf="(circle.count>1)" (mouseenter)="feedCircleHovered(circle, p1)" container="body" #p1="ngbPopover"   [ngbPopover]="tooltipTemplate"    triggers="mouseenter:mouseleave" closeDelay="3000" popoverClass="opfab-popover">
+        <svg:g id="opfab-timelineCircle-{{index}}" (click)="onCircleClick(circle)" (mouseenter)="feedCircleHovered(circle, p1)" container="body" #p1="ngbPopover"   [ngbPopover]="tooltipTemplate"    triggers="mouseenter:mouseleave" closeDelay="3000" popoverClass="opfab-popover">
             <svg:ellipse [attr.cx]="xScale(circle.date)"
                 [attr.cy]="yScale(circle.circleYPosition)" [attr.ry]="'10'" [attr.rx]="circle.width" [attr.fill]=circle.color [attr.stroke]="'stroke'"
                 />
@@ -128,17 +128,6 @@
                 [attr.font-size]="15" dy=".3em">{{circle.count}} </text>
         </svg:g>
 
-        <svg:g *ngIf="(circle.count==1)" (click)="showCard(circle.summary[0].cardId)" (mouseenter)="feedCircleHovered(circle, p2)"  container="body" #p2="ngbPopover" [ngbPopover]="tooltipTemplate"  triggers="mouseenter:mouseleave" closeDelay="3000" popoverClass="opfab-popover" >
-            <svg:circle [attr.cx]="xScale(circle.date)"
-                [attr.cy]="yScale(circle.circleYPosition)" [attr.r]="'10'" [attr.fill]=circle.color [attr.stroke]="'stroke'"
-                />
-            <text  [attr.x]="xScale(circle.date)"
-                [attr.y]="yScale(circle.circleYPosition)" 
-                text-anchor="middle" 
-                fill=white
-                font-weight="bold" 
-                [attr.font-size]="15" dy=".3em">{{circle.count}} </text>
-        </svg:g>
     </svg:g>
     </svg:g>
     <ng-template #tooltipTemplate>

ui/main/src/app/modules/feed/components/time-line/custom-timeline-chart/custom-timeline-chart.component.ts

@@ -511,7 +511,14 @@ export class CustomTimelineChartComponent extends BaseChartComponent implements
     return '';
   }
 
-  showCard(cardId): void {
+  onCircleClick(circle) {
+    if (circle.count==1) {
+      let cardId = circle.summary[0].cardId
+      this.showCard(cardId);
+    }
+  }
+
+  showCard(cardId): void {     
     this.router.navigate(['/' + this.currentPath, 'cards', cardId]);
     this.scrollToSelectedCard();
   }