@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/chatlib/conversation-detail/message/image/image.component.html

@@ -0,0 +1,10 @@
+<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; ">
+  <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }"></div>
+  <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
+  <img id="myImg" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }" style="cursor:pointer" 
+    class="message-contentX message-content-imageX" [ngClass]="{'isLoadingImage': loading}"
+    [src]="metadata.src" (load)="onLoaded($event)" (click)="openImageViewerModal(metadata.src, metadata.name)" />
+  <!-- <ng-template #timeTooltipRight>
+    <span>{{ tooltipMessage }}</span>
+  </ng-template> -->
+</div>

package/src/app/chatlib/conversation-detail/message/image/image.component.scss

@@ -0,0 +1,34 @@
+img {
+    border-radius: 8px;
+    //padding: 3px;
+    margin-bottom: 0px;
+    max-width: calc(100% - 6px);
+    width: auto;
+    height: auto;
+    object-fit: cover;
+}
+
+.isLoadingImage {
+    // position: relative;
+    // top: 6px;
+    display:none
+}
+
+.loader {
+    float: left;
+    // position: absolute;
+    background-color: #ccc;
+    border-radius: 8px;
+    background-image: linear-gradient(90deg, #f7f4f4 0px, #e8e8e8 40px, #f7f4f4 80px);
+    background-size: 600px;
+    animation: shine-loader 1.6s infinite linear;
+}
+  
+@keyframes shine-loader {
+    0% {
+        background-position: -32px;
+    }
+    40%, 100% {
+        background-position: 208px;
+    }
+}

package/src/app/chatlib/conversation-detail/message/image/image.component.spec.ts

@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageComponent } from './image.component';
+
+describe('ImageComponent', () => {
+  let component: ImageComponent;
+  let fixture: ComponentFixture<ImageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageComponent);
+    component = fixture.componentInstance;
+    component.metadata = {
+      height: 650,
+      name: "logo_fb.png",
+      src: "https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2F42083ab3-3aa6-4507-831c-41c84b09dd83%2F0e8e8562-360e-4407-aa20-a0ccbe99b62d%2Flogo_fb.png?alt=media&token=8125435a-76ac-42f0-9017-cf3d8fb4e8a1",
+      type: "image/png",
+      uid: "ksg7sxnt",
+      width: 650
+    }
+    component.width = '650px'
+    component.height = 650
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -0,0 +1,78 @@
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'chat-image',
+  templateUrl: './image.component.html',
+  styleUrls: ['./image.component.scss']
+})
+export class ImageComponent implements OnInit {
+
+  @Input() metadata: any;
+  @Input() width: string;
+  @Input() height: number;
+  @Output() onImageRendered = new EventEmitter<boolean>();
+
+  loading: boolean = true
+  tooltipMessage: string;
+  modal: any
+  span: any
+
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+
+  constructor() { }
+
+  ngOnInit() {
+    this.getBrowserLanguageAndTranslateTooltipMsg()
+  }
+  getBrowserLanguageAndTranslateTooltipMsg() {
+    var userLang = navigator.language;
+    // console.log('Image COMP - userLang ', userLang)
+    if (userLang === 'en') {
+      this.tooltipMessage = "Click to download"
+    } else {
+      this.tooltipMessage = "Clicca per scaricare"
+    }
+  }
+
+  onLoaded(event) {
+    this.loading = false
+    this.onImageRendered.emit(true)
+  }
+
+  _downloadImage(url: string, fileName: string) {
+    // console.log('Image COMP - IMAGE URL ', url) 
+    // console.log('Image COMP - IMAGE FILENAME ', fileName) 
+    const a: any = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.style = 'display: none';
+    a.click();
+    a.remove();
+  }
+
+  openImageViewerModal(url: string, fileName: string) {
+    this.modal = document.getElementById("image-viewer-modal");
+    // console.log('has clicked open image-viewer modal ',  this.modal)
+    this.modal.style.display = "block";
+    var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img");
+    var captionText = document.getElementById("caption");
+    modalImg.src = url
+    captionText.innerHTML = fileName;
+   
+  }
+
+ 
+
+
+}
+
+

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.html

@@ -0,0 +1,2 @@
+<span class="base_info" [innerHTML]="message?.text | htmlEntiesEncode | marked"></span>
+<!-- <span class="base_info" [innerHTML]="message_text | marked"></span> -->

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.scss

@@ -0,0 +1,15 @@
+.base_info {
+    border-radius: 14px;
+    border: 1px solid #C9E4F6;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding: 6px 10px;
+    display: inline-block;
+    background: #C9E4F6;
+    font-size: 0.70em;
+    color: var(--basic-gray);
+    margin-left: 32px;
+    margin-right: 32px;
+ 
+}
+

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.spec.ts

@@ -0,0 +1,27 @@
+import { HtmlEntitiesEncodePipe } from './../../../../directives/html-entities-encode.pipe';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MarkedPipe } from 'src/app/directives/marked.pipe';
+
+import { InfoMessageComponent } from './info-message.component';
+
+describe('InfoMessageComponent', () => {
+  let component: InfoMessageComponent;
+  let fixture: ComponentFixture<InfoMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InfoMessageComponent, MarkedPipe, HtmlEntitiesEncodePipe ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.ts

@@ -0,0 +1,35 @@
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { MessageModel } from 'src/chat21-core/models/message';
+import { replaceEndOfLine } from 'src/chat21-core/utils/utils';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Component({
+  selector: 'chat-info-message',
+  templateUrl: './info-message.component.html',
+  styleUrls: ['./info-message.component.scss']
+})
+export class InfoMessageComponent implements OnInit, OnChanges {
+
+  @Input() message: MessageModel
+
+  public message_text: string
+  private logger: LoggerService = LoggerInstance.getInstance()
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges() {
+    this.logger.debug('[INFO-COMP] message ', this.message)
+    // Fixes the bug: if a snippet of code is pasted and sent it is not displayed correctly info message
+    if(this.message && this.message.text) {
+      var regex = /<br\s*[\/]?>/gi;
+      this.message.text = this.message.text.replace(regex, "\n")
+      // this.message.text = replaceEndOfLine(this.message.text);
+      this.logger.debug('[INFO-COMP] message .text  ', this.message.text )
+    }
+  }
+
+}

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.html

@@ -0,0 +1,56 @@
+<div id="buttons-in-message">
+  
+  <span *ngFor="let button of buttons" class="div-button">
+      
+      <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
+        [button]="button"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
+        (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-text-button-attachment>
+
+      <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
+        [button]="button"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
+        (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-link-button-attachment>
+
+      <chat-action-button-attachment *ngIf="button.type === 'action' && isLastMessage === true" class="div-button"
+        [button]="button"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
+        (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-action-button-attachment>
+
+      <!-- <div class="alt">{{button.value}}</div> -->
+      <!-- <div *ngIf="button.type === 'text' && isLastMessage === true" class="button-in-msg {{button.type}}" (click)="actionButtonText(button)" title="{{button.value}}">
+        {{button.value}}
+      </div> -->
+
+      <!-- <div *ngIf="button.type === 'url'" class="button-in-msg {{button.type}}" (click)="actionButtonUrl(button)" title="{{button.value}}"> 
+        <span *ngIf="button.target !== 'self'" class="icon-button-action">
+          <!- - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>
+          </svg> - ->
+          <svg style="transform: rotateZ(45deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
+          </svg>
+        </span>
+        
+        {{button.value}} 
+        <div class="clear"></div>
+      </div>  -->
+
+      <!-- <div *ngIf="button.type === 'action' && isLastMessage === true" #actionButton id="actionButton" class="button-in-msg {{button.type}}" (click)="actionButtonAction(button)" title="{{button.value}}">
+        {{button.value}}
+      </div>  -->
+
+      <!-- <button tabindex="1413" [disabled]="!preChatFormGroup.controls.name.valid || !preChatFormGroup.controls.email.valid" class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+        
+    </button> -->
+
+  </span>
+</div>

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.scss

@@ -0,0 +1,169 @@
+#buttons-in-message {
+    text-align: left;
+    display: block; 
+    margin-top: -6px;
+    margin-bottom: 5px;
+    height: auto;
+
+
+    .div-button {
+        display: inline-block;
+        .button-in-msg {
+            padding: 8px 16px!important;
+        }
+    }
+
+    
+    
+    
+    // .button-success {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(28, 184, 65);
+    // }
+    // .button-error {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(202, 60, 60);
+    // }
+    // .button-warning {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(223, 117, 20);
+    // }
+    // .button-secondary {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(66, 184, 221);
+    // }
+    // .button-success:hover {
+    //     color: white;
+    //     background: rgb(28, 184, 65);
+    // }
+    // .button-error:hover {
+    //     color: white;
+    //     background: rgb(202, 60, 60);
+    // }
+    // .button-warning:hover {
+    //     color: white;
+    //     background: rgb(223, 117, 20);
+    // }
+    // .button-secondary:hover {
+    //     color: white;
+    //     background: rgb(66, 184, 221);
+    // } 
+}
+
+
+.button-in-msg {
+    position: relative;
+    max-width: 300px;
+    min-width: inherit;
+    cursor: pointer;
+    border: 1px solid rgb(42, 106, 193);
+    border-radius: 20px;
+    margin: 3px;
+    background: transparent;
+    overflow: hidden;
+    font-family: 'Muli', sans-serif;
+    font-size: 15px;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: -0.24px;
+    -webkit-font-smoothing: antialiased;
+    color: rgb(42, 106, 193);
+    line-height: 16px;
+    // &:focus,
+    // &:hover {
+    //     color: white;
+    //     background:  rgb(42, 106, 193);
+    // }
+
+    
+    &.text {
+        // color: rgb(42, 106, 193);
+        transition: background-color .6s ease;
+        &:focus,
+        &:hover {
+            color: white;
+            background:  rgb(42, 106, 193);
+            .icon-button-action {
+                svg {
+                    fill: rgb(255,255,255);
+                }
+            }
+        }
+    }
+    &.url {
+        transition: background-color .6s ease;
+        .icon-button-action {
+            position: absolute;
+            top: -1;
+            right: 1;
+            svg {
+                fill: rgb(42, 106, 193);
+            }
+        }
+        &:focus,
+        &:hover {
+            color: white;
+            background:  rgb(42, 106, 193);
+            .icon-button-action {
+                svg {
+                    fill: rgb(255,255,255);
+                }
+            }
+        }
+    }
+    &.action {
+        background:  rgb(255,255,255);
+        transition: background-color .6s ease;
+        &:focus,
+        &:hover {
+            color: white;
+            background:  rgb(42, 106, 193);
+            .icon-button-action {
+                svg {
+                    fill: rgb(255,255,255);
+                }
+            }
+        }
+        &:after {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            top: 50%;
+            left: 50%;
+            transform-style: flat;
+            transform: translate3d(-50%,-50%,0);
+            background: rgba(white,.2);
+            border-radius: 100%;
+            transition: width .5s ease, height .5s ease;
+        }
+        &.active {
+            &:after {
+                width: 200px;
+                height: 200px;
+            }
+            
+        }
+        
+        // &:focus{
+        //     color: white;
+        //     background:  rgb(42, 106, 193);
+        // }
+        // &:hover {
+        //     transition: background-color .6s ease;
+        // //     color: white;
+        // //     background:  rgb(42, 106, 193);
+        // }
+        // &:active {
+        //     &:after {
+        //         width: 200px;
+        //         height: 200px;
+        //     }
+        // }
+    }
+}

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.spec.ts

@@ -0,0 +1,33 @@
+import { ActionButtonComponent } from './../message/buttons/action-button/action-button.component';
+import { TextButtonComponent } from './../message/buttons/text-button/text-button.component';
+import { LinkButtonComponent } from './../message/buttons/link-button/link-button.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageAttachmentComponent } from './message-attachment.component';
+
+describe('MessageAttachmentComponent', () => {
+  let component: MessageAttachmentComponent;
+  let fixture: ComponentFixture<MessageAttachmentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ 
+        MessageAttachmentComponent, 
+        LinkButtonComponent, 
+        TextButtonComponent, 
+        ActionButtonComponent 
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageAttachmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+// models
+import { MessageModel } from 'src/chat21-core/models/message';
+
+@Component({
+  selector: 'chat-message-attachment',
+  templateUrl: './message-attachment.component.html',
+  styleUrls: ['./message-attachment.component.scss']
+})
+export class MessageAttachmentComponent implements OnInit {
+
+  // ========= begin:: Input/Output values ============//
+  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
+  @Input() message: MessageModel;
+  @Input() isLastMessage: boolean;
+  @Input() stylesMap: Map<string, string>;
+  // ========= end:: Input/Output values ============//
+
+  public type: string;
+  public buttons: [any];
+
+  constructor() { }
+
+  ngOnInit() {
+    this.getAttachmentButton();
+  }
+
+  /** */
+  getAttachmentButton() {
+    if (this.message && this.message.attributes && this.message.attributes.attachment) {
+      try {
+        this.type = this.message.attributes.attachment.type;
+        // console.log(this.type);
+      } catch (error) {
+        // this.g.wdLog(['> Error :' + error]);
+        return;
+      }
+      try {
+        this.buttons = this.message.attributes.attachment.buttons;
+      } catch (error) {
+        // this.g.wdLog(['> Error :' + error]);
+        return;
+      }
+    }
+  }
+
+  returnOnAttachmentButtonClicked(event: any){
+    if ( event && event.target ) {
+      const ev = {target: event.target, message: this.message, currentTarget: this }
+      this.onAttachmentButtonClicked.emit(ev);
+    }
+  }
+
+  // actionButtonText(event: any) {
+  //   if ( event ) {
+  //     this.eventOpenAttachment.emit(event.value);
+  //   }
+  // }
+
+  /** */
+  // actionButtonUrl(event: any) {
+  //   if ( event && event.link && event.link !== '') {
+  //     this.eventClickOnAttachmentButton.emit(event);
+  //   }
+  // }
+
+  // actionButtonAction(event: any) {
+  //   if ( event && event.action && event.action !== '') {
+  //     const spanCheck = window.document.getElementById('actionButton');
+  //     if (spanCheck) {
+  //       spanCheck.classList.add('active');
+  //       setTimeout(function() {
+  //         spanCheck.classList.remove('active');
+  //       }, 400);
+  //     }
+  //     this.eventClickOnAttachmentButton.emit(event);
+  //   }
+  // }
+}

package/src/app/chatlib/conversation-detail/message/return-receipt/return-receipt.component.html

@@ -0,0 +1,18 @@
+<div class="status-message">
+  <!-- c21-ico-schedule -->
+  <div *ngIf="!status" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:none;}</style></defs><title>ic_schedule</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><path d="M9,1.5A7.5,7.5,0,1,0,16.5,9,7.5,7.5,0,0,0,9,1.5ZM9,15a6,6,0,1,1,6-6A6,6,0,0,1,9,15Z"/><path class="cls-1" d="M0,0H18V18H0Z"/><path d="M9.38,5.25H8.25v4.5l3.94,2.36.56-.92-3.37-2Z"/></g></g></svg>
+  </div>
+  <!-- c21-ico-done -->
+  <div *ngIf="status == MSG_STATUS_SENT" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:none;}</style></defs><title>ic_done</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><path class="cls-1" d="M0,0H18V18H0Z"/><path d="M6.75,12.15,3.6,9,2.55,10l4.2,4.2,9-9-1-1.05Z"/></g></g></svg>
+  </div>
+  <!-- c21-ico-done -->
+  <div *ngIf="status == MSG_STATUS_SENT_SERVER" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:none;}</style></defs><title>ic_done</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><path class="cls-1" d="M0,0H18V18H0Z"/><path d="M6.75,12.15,3.6,9,2.55,10l4.2,4.2,9-9-1-1.05Z"/></g></g></svg>
+  </div>
+  <!-- c21-ico-done_all -->
+  <div *ngIf="status == MSG_STATUS_RETURN_RECEIPT" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:none;}</style></defs><title>ic_done_all</title><g id="Livello_2" data-name="Livello 2"><g id="Livello_1-2" data-name="Livello 1"><path class="cls-1" d="M0,0H18V18H0Z"/><path d="M13.5,5.25,12.44,4.19,7.69,8.95,8.74,10Zm3.18-1.06L8.74,12.13,5.61,9,4.55,10.06l4.19,4.19,9-9ZM.31,10.06,4.5,14.25l1.06-1.06L1.37,9Z"/></g></g></svg>
+  </div>
+</div>

package/src/app/chatlib/conversation-detail/message/return-receipt/return-receipt.component.scss

@@ -0,0 +1,27 @@
+.status-message {
+    width: 16px;
+    // height: 16px;
+    margin-left: 4px;
+    .icon {
+        width: 13px;
+        // height: 13px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        overflow-x: hidden;
+    }
+
+    svg {
+        fill:  var(--bobble-blue) 
+    }
+
+    .c21-ico-schedule {
+        background-image: url("src/assets/images/f21ico-schedule.svg");
+    }
+    .c21-ico-done {
+        background-image: url("src/assets/images/f21ico-done.svg");
+    }
+    .c21-ico-done_all {
+        background-image: url("src/assets/images/f21ico-done_all.svg");
+    }
+}

package/src/app/chatlib/conversation-detail/message/return-receipt/return-receipt.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReturnReceiptComponent } from './return-receipt.component';
+
+describe('ReturnReceiptComponent', () => {
+  let component: ReturnReceiptComponent;
+  let fixture: ComponentFixture<ReturnReceiptComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReturnReceiptComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReturnReceiptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});