fix(test): fix delete work item test

src/app/components_ngrx/delete-work-item/delete-work-item.component.less

@@ -2,4 +2,4 @@
 
 .delete-icon {
   color: @color-pf-red-100;
-}
+}

src/app/components_ngrx/delete-work-item/delete-work-item.component.ts

@@ -14,11 +14,11 @@ import { AppState } from '../../states/app.state';
   styleUrls: ['./delete-work-item.component.less']
 })
 
-export class DeleteWorkitemComponent {
+export class DeleteWorkItemComponent {
 
-  @Input('workitem') set workitemInput(val: WorkItemUI) {
+  @Input('workItem') set workItemInput(val: WorkItemUI) {
     if (val) {
-      this.workitem = val;
+      this.workItem = val;
       this.allowDelete =
         this.permissionQuery.isAllowedToDelete(val);
     }
@@ -28,7 +28,7 @@ export class DeleteWorkitemComponent {
   @Output() readonly onDelete: EventEmitter<any> = new EventEmitter;
 
   allowDelete: Observable<boolean>;
-  workitem: WorkItemUI;
+  workItem: WorkItemUI;
 
   constructor(
     private modalService: ModalService,
@@ -38,7 +38,7 @@ export class DeleteWorkitemComponent {
 
   deleteWorkItem(event: MouseEvent): void {
     let note = 'Are you sure you want to delete this work item?';
-    if (this.workitem.hasChildren) {
+    if (this.workItem.hasChildren) {
       note = 'This work item has children. ' + note;
     }
     this.modalService.openModal('Delete Work Item', note, 'Delete', 'deleteWorkItem')
@@ -47,7 +47,7 @@ export class DeleteWorkitemComponent {
       ).subscribe((actionKey: string) => {
           if (actionKey === 'deleteWorkItem') {
             this.onDelete.emit();
-            this.store.dispatch(new Delete(this.workitem));
+            this.store.dispatch(new Delete(this.workItem));
           }
       });
   }

src/app/components_ngrx/delete-work-item/delete-work-item.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { TooltipConfig, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { FeatureFlagModule } from 'ngx-feature-flag';
 import { ModalService } from '../../services/modal.service';
-import { DeleteWorkitemComponent } from './delete-work-item.component';
+import { DeleteWorkItemComponent } from './delete-work-item.component';
 
 @NgModule({
   imports: [
@@ -12,16 +12,16 @@ import { DeleteWorkitemComponent } from './delete-work-item.component';
     FeatureFlagModule
   ],
   declarations: [
-    DeleteWorkitemComponent
+    DeleteWorkItemComponent
   ],
   exports: [
-    DeleteWorkitemComponent
+    DeleteWorkItemComponent
   ],
   providers: [
     ModalService,
     TooltipConfig
   ]
 })
 
-export class DeleteWorkitemModule {}
+export class DeleteWorkItemModule {}
 

src/app/components_ngrx/work-item-cell/work-item-cell.component.html

@@ -37,7 +37,7 @@
     <f8-delete-workitem 
       *ngIf="context === 'query'"
       class="margin-left-10 padding-v-5"
-      [workitem]="row"
+      [workItem]="row"
       (onDelete)="onDelete.emit()">
     </f8-delete-workitem>
   </div>

src/app/components_ngrx/work-item-cell/work-item-cell.module.ts

@@ -7,7 +7,7 @@ import { UserAvatarModule } from '../../widgets/user-avatar/user-avatar.module';
 
 import { RouterModule } from '@angular/router';
 import { TruncateModule } from 'ng2-truncate';
-import { DeleteWorkitemModule } from '../delete-work-item/delete-work-item.module';
+import { DeleteWorkItemModule } from '../delete-work-item/delete-work-item.module';
 import { AssigneesModule } from './../assignee/assignee.module';
 import { LabelsModule } from './../labels/labels.module';
 import { WorkItemCellComponent } from './work-item-cell.component';
@@ -23,7 +23,7 @@ import { WorkItemCellComponent } from './work-item-cell.component';
     TruncateModule,
     UserAvatarModule,
     WidgetsModule,
-    DeleteWorkitemModule
+    DeleteWorkItemModule
 ],
   declarations: [WorkItemCellComponent],
   exports: [WorkItemCellComponent],

src/app/components_ngrx/work-item-detail/work-item-detail.component.html

@@ -14,7 +14,7 @@
             <f8-delete-workitem *ngIf="context === 'query'"
               class="padding-right-5"
               (onDelete)="closeDetail()"
-              [workitem]="workItem">
+              [workItem]="workItem">
             </f8-delete-workitem>
             <b>#{{ workItem.number }}</b>
             <span class="detail-created-date created-by"
@@ -38,7 +38,7 @@
           <f8-delete-workitem
             class="padding-right-5"
             (onDelete)="closeDetail()"
-            [workitem]="workItem">
+            [workItem]="workItem">
           </f8-delete-workitem>
           <b>#{{ workItem.number }}</b>
           <span class="detail-created-date created-by"

src/app/components_ngrx/work-item-detail/work-item-detail.module.ts

@@ -54,7 +54,7 @@ import { ErrorHandler } from '../../effects/work-item-utils';
 import { AreaQuery } from '../../models/area.model';
 import { IterationQuery } from '../../models/iteration.model';
 import { WorkItemTypeQuery } from '../../models/work-item-type';
-import { DeleteWorkitemModule } from '../delete-work-item/delete-work-item.module';
+import { DeleteWorkItemModule } from '../delete-work-item/delete-work-item.module';
 import { CommentQuery } from './../../models/comment';
 import { LabelQuery } from './../../models/label.model';
 import { SpaceQuery } from './../../models/space';
@@ -87,7 +87,7 @@ import { UserAvatarModule } from './../../widgets/user-avatar/user-avatar.module
     WorkItemLinkModule,
     ReactiveFormsModule,
     ClickOutModule,
-    DeleteWorkitemModule,
+    DeleteWorkItemModule,
     StoreModule.forFeature('detailPage', {
       comments: CommentReducer,
       workItem: DetailWorkItemReducer,

src/app/effects/work-item.effects.ts

@@ -416,8 +416,8 @@ export class WorkItemEffects {
     .pipe(
       ofType(WorkItemActions.DELETE),
       switchMap((action: WorkItemActions.Delete) => {
-        const workitem = this.workItemMapper.toServiceModel(action.payload);
-        return this.workItemService.delete(workitem)
+        const workItem = this.workItemMapper.toServiceModel(action.payload);
+        return this.workItemService.delete(workItem)
           .pipe(
             map(() => {
               return new WorkItemActions.DeleteSuccess(action.payload);

src/app/models/permission.model.ts

@@ -40,13 +40,13 @@ export class PermissionQuery {
     );
   }
 
-  isAllowedToDelete(workitem): Observable<boolean> {
+  isAllowedToDelete(workItem): Observable<boolean> {
     return this.spaceQuery.getCurrentSpace
     .pipe(
       switchMap((space) => {
         return this.userService.loggedInUser.pipe(map(user => {
           let spaceOwnerId = space.relationships['owned-by'].data.id;
-          if (spaceOwnerId === user.id || workitem.creator === user.id) {
+          if (spaceOwnerId === user.id || workItem.creator === user.id) {
             return true;
           } else {
             return false;

src/app/reducers/work-item.reducer.ts

@@ -110,10 +110,10 @@ export const WorkItemReducer: ActionReducer<WorkItemState> = (state = initialSta
 
     case WorkItemActions.DELETE_SUCCESS: {
       let newState = {...state};
-      let deletedWorkitem = action.payload;
+      let deletedWorkItem = action.payload;
       newState = {
         nextLink: newState.nextLink,
-        ...workItemAdapter.removeOne(deletedWorkitem.id, newState)
+        ...workItemAdapter.removeOne(deletedWorkItem.id, newState)
       };
       return {...newState};
     }

src/app/services/work-item.service.ts

@@ -256,10 +256,10 @@ export class WorkItemService {
 
   /**
    * Usage: This method deletes an work item
-   *  @param workitem WorkItem
+   *  @param workItem WorkItem
    */
-  delete(workitem: WorkItem): Observable<any> {
-    let endpoint = workitem.links.self;
+  delete(workItem: WorkItem): Observable<any> {
+    let endpoint = workItem.links.self;
     return this.httpClientService.delete(endpoint)
       .pipe(
         catchError((error: HttpErrorResponse) => {

src/tests/page_objects/planner/planner.page.ts

@@ -17,6 +17,7 @@ export class PlannerPage extends AppPage {
   detailPage = new planner.WorkItemDetailPage($('work-item-detail'));
   confirmModalButton = new planner.WorkItemList($('#modal-confirm'));
   query = new planner.Query($('planner-query'));
+  modal = new planner.ModalDialog($('modal'));
 
   constructor(url: string) {
     super(url);

src/tests/specs/query-tab.spec.ts

@@ -1,11 +1,9 @@
 import { browser } from 'protractor';
 import { PlannerPage } from '../page_objects/planner';
 import * as support from '../support';
-import { ModalDialog } from '../ui/modal_dialog';
 
 describe('Query tests', () => {
   let planner: PlannerPage;
-  let modal: ModalDialog;
   let c = new support.Constants();
   let testData;
 
@@ -38,19 +36,16 @@ describe('Query tests', () => {
     expect(await planner.query.hasWorkItem(title)).toBe(true);
   });
 
-  it('should delete a work item', async () => {
+  fit('should delete a work item', async () => {
     let title: string = 'Delete work item from query page',
       searchQuery: string = `title:${title}`;
     await planner.clickQueryTab();
     await planner.waitUntilUrlContains('query');
     await planner.query.createWorkItem(title);
-    await planner.quickPreview.notificationToast.untilCount(1);
-    expect(await planner.quickPreview.notificationToast.count()).toBe(1);
     await planner.query.enterQuery(searchQuery);
     expect(await planner.query.hasWorkItem(title)).toBe(true);
-    await planner.workItemList.clickWorkItemDeleteIcon(title);
-    await modal.clickConfirmButton();
-    await planner.query.enterQuery(searchQuery);
-    expect(await planner.query.hasWorkItem(title)).toBe(false);
+    await planner.query.clickWorkItemDeleteIcon(title);
+    await planner.modal.clickConfirmButton();
+    expect(await planner.query.emptyTemplateDisplayed()).toBe(true);
   });
 });

src/tests/ui/modal_dialog.ts

@@ -7,7 +7,7 @@ export class ModalDialog extends BaseElement {
   content = new BaseElement(this.$('.modal-content'));
   // optional
   footer = new BaseElement(this.content.$('.modal-footer'));
-  confirm = new ui.Clickable(this.$('#modal-confirm'), 'Confirm');
+  confirm = new ui.Clickable(this.content.$('#modal-confirm'), 'Confirm');
 
   constructor(element: ElementFinder, name?: string) {
     super(element, name);
@@ -25,6 +25,8 @@ export class ModalDialog extends BaseElement {
   }
 
   async clickConfirmButton() {
+    await this.content.untilDisplayed();
+    await this.confirm.untilDisplayed();
     await this.confirm.clickWhenReady();
   }
 }

src/tests/ui/planner/index.ts

@@ -8,7 +8,7 @@ export * from './toolbarHeader';
 export * from './iteration';
 export * from './workitem-detailpage';
 export * from './query-tab';
-
+export * from '../modal_dialog';
 
 export interface WorkItem {
   title: string;

src/tests/ui/planner/workitem-list.ts

@@ -15,6 +15,8 @@ export class WorkItemList extends BaseElement {
     this.$('.f8-quick-add-inline .dropdown-menu'),
     'Child WorkItem Type dropdown'
   );
+  empty_template = new BaseElement(this.$('.blank-slate-pf'), 'Empty work item template');
+  empty_workitem_list = new BaseElement(this.empty_template.$('#title'), 'No workitems available');
 
   constructor(el: ElementFinder, name = 'Work Item List') {
     super(el, name);
@@ -71,6 +73,7 @@ export class WorkItemList extends BaseElement {
   }
 
   async clickWorkItemDeleteIcon(title: string) {
+    await browser.actions().mouseMove(this.workItem(title)).perform();
     await this.workItem(title).clickDeleteIcon();
   }
 
@@ -89,4 +92,10 @@ export class WorkItemList extends BaseElement {
     let unassigned: any = assignees.filter(assignee => assignee === assigneeName);
     return unassigned.length;
   }
+
+  async emptyTemplateDisplayed() {
+    await this.empty_template.untilDisplayed();
+    await this.empty_workitem_list.untilDisplayed();
+    return this.empty_workitem_list.isDisplayed();
+  }
 }