Added more tests to cover the request grid around TV

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html

@@ -9,7 +9,7 @@
                 <div class="row">
                     <div
                         class="mobile-top-text">
-                        <h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text">
+                        <h1 id="mediaTitle" class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text">
                             ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
                         </h1>
 

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -5,20 +5,20 @@
     <!-- <div class="row"> -->
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
+            <button type="button" id="filterProcessing" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
                 class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
+            <button type="button" id="filterAvailable" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
                 class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
     <div class="row">
         <div class="col-md-2 offset-md-10">
             <mat-form-field>
-                <mat-select placeholder="{{'Requests.RequestsToDisplay' | translate}}" [(value)]="gridCount" (selectionChange)="ngAfterViewInit()">
+                <mat-select id="requestsToDisplayDropdown" placeholder="{{'Requests.RequestsToDisplay' | translate}}" [(value)]="gridCount" (selectionChange)="ngAfterViewInit()">
                     <mat-option value="10">10</mat-option>
                     <mat-option value="15">15</mat-option>
                     <mat-option value="30">30</mat-option>
@@ -31,14 +31,14 @@
     <table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
 
         <ng-container matColumnDef="select" *ngIf="isAdmin">
-            <th mat-header-cell *matHeaderCellDef>
+            <th  mat-header-cell *matHeaderCellDef>
-              <mat-checkbox (change)="$event ? masterToggle() : null"
+              <mat-checkbox id="adminMasterCheckbox" (change)="$event ? masterToggle() : null"
                             [checked]="selection.hasValue() && isAllSelected()"
                             [indeterminate]="selection.hasValue() && !isAllSelected()">
               </mat-checkbox>
             </th>
             <td mat-cell *matCellDef="let row">
-              <mat-checkbox (click)="$event.stopPropagation()"
+              <mat-checkbox  id="adminMasterCheckbox"  (click)="$event.stopPropagation()"
                             (change)="$event ? selection.toggle(row) : null"
                             [checked]="selection.isSelected(row)">
               </mat-checkbox>
@@ -47,36 +47,36 @@
 
         <ng-container matColumnDef="title">
             <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.RequestsTitle' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.title}} ({{element.releaseDate | amLocal | amDateFormat: 'YYYY'}}) </td>
+            <td mat-cell id="title{{element.id}}" *matCellDef="let element"> {{element.title}} ({{element.releaseDate | amLocal | amDateFormat: 'YYYY'}}) </td>
         </ng-container>
 
         <ng-container matColumnDef="requestedUser.requestedBy">
             <th mat-header-cell *matHeaderCellDef> {{'Requests.RequestedBy' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.requestedUser?.userAlias}} </td>
+            <td mat-cell id="requestedBy{{element.id}}" *matCellDef="let element"> {{element.requestedUser?.userAlias}} </td>
         </ng-container>
 
 
         <ng-container matColumnDef="requestedDate">
             <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.RequestDate' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.requestedDate | amLocal | amDateFormat: 'LL'}} </td>
+            <td mat-cell id="requestedDate{{element.id}}" *matCellDef="let element"> {{element.requestedDate | amLocal | amDateFormat: 'LL'}} </td>
         </ng-container>
 
         <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.Status' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
+            <td mat-cell id="status{{element.id}}"  *matCellDef="let element"> {{element.status}} </td>
         </ng-container>
 
 
         <ng-container matColumnDef="requestStatus">
             <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.RequestStatus' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.requestStatus | translate}} </td>
+            <td mat-cell id="requestedStatus{{element.id}}"  *matCellDef="let element"> {{element.requestStatus | translate}} </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> </th>
             <td mat-cell *matCellDef="let element">
-                <button mat-raised-button color="accent" [routerLink]="'/details/movie/' + element.theMovieDbId">{{ 'Requests.Details' | translate}}</button>
+                <button id="detailsButton{{element.id}}" mat-raised-button color="accent" [routerLink]="'/details/movie/' + element.theMovieDbId">{{ 'Requests.Details' | translate}}</button>
-                <button mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin"> {{ 'Requests.Options' | translate}}</button>
+                <button id="optionsButton{{element.id}}" mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin"> {{ 'Requests.Options' | translate}}</button>
             </td>
         </ng-container>
 
@@ -87,9 +87,9 @@
     <mat-paginator [length]="resultsLength" [pageSize]="gridCount"></mat-paginator>
 </div>
 
-<button *ngIf="selection.hasValue() && isAdmin" mat-fab color="accent" class="floating-fab" [matMenuTriggerFor]="aboveMenu">
+<button id="bulkFab" *ngIf="selection.hasValue() && isAdmin" mat-fab color="accent" class="floating-fab" [matMenuTriggerFor]="aboveMenu">
     <i class="fas fa-bars"></i></button>
   <mat-menu #aboveMenu="matMenu" yPosition="above">
-    <button mat-menu-item (click)="bulkDelete()">{{'Requests.RequestPanel.Delete' | translate}}</button>
+    <button id="deleteFabButton" mat-menu-item (click)="bulkDelete()">{{'Requests.RequestPanel.Delete' | translate}}</button>
-    <button mat-menu-item (click)="bulkApprove()">{{'Requests.RequestPanel.Approve' | translate}}</button>
+    <button id="approveFabButton" mat-menu-item (click)="bulkApprove()">{{'Requests.RequestPanel.Approve' | translate}}</button>
   </mat-menu>

src/Ombi/ClientApp/src/app/requests-list/components/options/request-options.component.html

@@ -1,11 +1,11 @@
 <mat-nav-list>
-  <a (click)="delete()" mat-list-item>
+  <a id="requestDelete" (click)="delete()" mat-list-item>
     <span mat-line>{{'Requests.RequestPanel.Delete' | translate}}</span>
   </a>
-  <a *ngIf="data.canApprove" (click)="approve()" mat-list-item>
+  <a id="requestApprove" *ngIf="data.canApprove" (click)="approve()" mat-list-item>
     <span mat-line>{{'Requests.RequestPanel.Approve' | translate}}</span>
   </a>
-  <a *ngIf="data.type !== RequestType.tvShow" (click)="changeAvailability()" mat-list-item>
+  <a id="requestChangeAvailability" *ngIf="data.type !== RequestType.tvShow" (click)="changeAvailability()" mat-list-item>
     <span mat-line>{{'Requests.RequestPanel.ChangeAvailability' | translate}}</span>
   </a>
 </mat-nav-list>

src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html

@@ -5,20 +5,20 @@
 
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
+            <button type="button" id="filterProcessing" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
                 class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
+            <button type="button" id="filterAvailable" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
                 class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
     <div class="row">
         <div class="col-md-2 offset-md-10">
             <mat-form-field>
-                <mat-select placeholder="{{'Requests.RequestsToDisplay' | translate}}" [(value)]="gridCount" (selectionChange)="ngAfterViewInit()">
+                <mat-select id="requestsToDisplayDropdown" placeholder="{{'Requests.RequestsToDisplay' | translate}}" [(value)]="gridCount" (selectionChange)="ngAfterViewInit()">
                     <mat-option value="10">10</mat-option>
                     <mat-option value="15">15</mat-option>
                     <mat-option value="30">30</mat-option>
@@ -33,24 +33,24 @@
 
         <ng-container matColumnDef="series">
             <th mat-header-cell *matHeaderCellDef> {{'Requests.RequestsTitle' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.parentRequest.title}} </td>
+            <td mat-cell id="title{{element.id}}" *matCellDef="let element"> {{element.parentRequest.title}} </td>
         </ng-container>
 
         <ng-container matColumnDef="requestedBy">
             <th mat-header-cell *matHeaderCellDef> {{'Requests.RequestedBy' | translate}} </th>
-            <td mat-cell *matCellDef="let element"> {{element.requestedUser.userAlias}} </td>
+            <td mat-cell id="requestedBy{{element.id}}" *matCellDef="let element"> {{element.requestedUser.userAlias}} </td>
         </ng-container>
 
         <ng-container matColumnDef="requestedDate">
             <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{'Requests.RequestDate' | translate}} </th>
-            <td mat-cell *matCellDef="let element">
+            <td id="requestedDate{{element.id}}"  mat-cell *matCellDef="let element">
                 {{element.requestedDate | amLocal | amDateFormat: 'LL'}}
             </td>
         </ng-container>
 
         <ng-container matColumnDef="requestStatus">
             <th mat-header-cell *matHeaderCellDef> {{'Requests.RequestStatus' | translate}} </th>
-            <td mat-cell *matCellDef="let element">
+            <td mat-cell id="requestedStatus{{element.id}}"  *matCellDef="let element">
                 <div *ngIf="element.approved && !element.available">{{'Common.ProcessingRequest' | translate}}</div>
                 <div *ngIf="!element.approved && !element.available">{{'Common.PendingApproval' |translate}}</div>
                 <div *ngIf="element.available">{{'Common.Available' | translate}}</div>
@@ -60,7 +60,7 @@
 
         <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef> {{'Requests.Status' | translate}} </th>
-            <td mat-cell *matCellDef="let element">
+            <td mat-cell id="status{{element.id}}" *matCellDef="let element">
                 {{element.parentRequest.status}}
             </td>
         </ng-container>
@@ -68,8 +68,8 @@
         <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> </th>
             <td mat-cell *matCellDef="let element">
-                <button mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.parentRequest.externalProviderId">{{'Requests.Details' | translate}}</button>
+                <button id="detailsButton{{element.id}}" mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.parentRequest.externalProviderId">{{'Requests.Details' | translate}}</button>
-                <button mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin">{{'Requests.Options' | translate}}</button>
+                <button id="optionsButton{{element.id}}" mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin">{{'Requests.Options' | translate}}</button>
             </td>
         </ng-container>
 

tests/cypress/integration/page-objects/details/tv/tvdetails.page.ts

@@ -1,5 +1,10 @@
 import { BasePage } from "../../base.page";
 
+class BaseMediaPage extends BasePage {
+    get title(): Cypress.Chainable<any> {
+        return cy.get('#mediaTitle');
+    }
+}
 class TvRequestPanel {
 
     seasonTab(seasonNumber: number): Cypress.Chainable<any> {
@@ -56,7 +61,7 @@ class TvDetailsInformationPanel {
     }
 }
 
-class TvDetailsPage extends BasePage {
+class TvDetailsPage extends BaseMediaPage {
 
 
     get availableButton(): Cypress.Chainable<any> {

tests/cypress/integration/page-objects/index.ts

@@ -4,3 +4,4 @@ export * from './wizard/wizard.page';
 export * from './details/tv/tvdetails.page';
 export * from './search/search.page';
 export * from './user-preferences/user-preferences.page';
+export * from './requests/requests.page';

tests/cypress/integration/page-objects/requests/requests.page.ts

@@ -0,0 +1,132 @@
+import { BasePage } from "../base.page";
+
+class MediaBaseTab {
+    get allRequestsButton(): Cypress.Chainable<any> {
+        return cy.get('#filterAll');
+    }
+
+    get pendingRequestsButton(): Cypress.Chainable<any> {
+        return cy.get('#filterPending');
+    }
+
+    get processingRequestsButton(): Cypress.Chainable<any> {
+        return cy.get('#filterProcessing');
+    }
+
+    get availableRequestsButton(): Cypress.Chainable<any> {
+        return cy.get('#filterAvailable');
+    }
+
+    get deniedRequestsButton(): Cypress.Chainable<any> {
+        return cy.get('#filterDenied');
+    }
+
+    get requestsToDisplayDropdown(): Cypress.Chainable<any> {
+        return cy.get('#requestsToDisplayDropdown');
+    }
+
+    getGridRow(requestId: number): GridRow {
+        return new GridRow(requestId);
+    }
+
+}
+
+class GridRow {
+    requestId: number;
+    get title(): Cypress.Chainable<any> {
+        return cy.get(`#title${this.requestId}`);
+    }
+
+    get requestedBy(): Cypress.Chainable<any> {
+        return cy.get(`#requestedBy${this.requestId}`);
+    }
+
+    get requestedDate(): Cypress.Chainable<any> {
+        return cy.get(`#requestedDate${this.requestId}`);
+    }
+
+    get requestedStatus(): Cypress.Chainable<any> {
+        return cy.get(`#requestedStatus${this.requestId}`);
+    }
+
+    get status(): Cypress.Chainable<any> {
+        return cy.get(`#status${this.requestId}`);
+    }
+
+    get detailsButton(): Cypress.Chainable<any> {
+        return cy.get(`#detailsButton${this.requestId}`);
+    }
+
+    get optionsButton(): Cypress.Chainable<any> {
+        return cy.get(`#optionsButton${this.requestId}`);
+    }
+
+    get optionsDelete(): Cypress.Chainable<any> {
+        return cy.get(`#requestDelete`);
+    }
+
+    get optionsApprove(): Cypress.Chainable<any> {
+        return cy.get(`#requestApprove`);
+    }
+
+    get optionsChangeAvailability(): Cypress.Chainable<any> {
+        return cy.get(`#requestChangeAvailability`);
+    }
+
+    constructor(requestId: number) {
+        this.requestId = requestId;
+    }
+}
+
+class MoviesTab extends MediaBaseTab {
+
+    get adminMasterCheckbox(): Cypress.Chainable<any> {
+        return cy.get('#adminMasterCheckbox');
+    }
+
+    get bulkFabButton(): Cypress.Chainable<any> {
+        return cy.get('#bulkFab');
+    }
+
+    get deleteFabButton(): Cypress.Chainable<any> {
+        return cy.get('#deleteFabButton');
+    }
+
+    get approveFabButton(): Cypress.Chainable<any> {
+        return cy.get('#approveFabButton');
+    }
+}
+
+class RequestsPage extends BasePage {
+
+    get moviesTab(): Cypress.Chainable<any> {
+        return cy.get('[role="tab"]').eq(0);
+    }
+
+    get tvTab(): Cypress.Chainable<any> {
+        return cy.get('[role="tab"]').eq(1);
+    }
+
+    get musicTab(): Cypress.Chainable<any> {
+        return cy.get('[role="tab"]').eq(2);
+    }
+
+    movies = new MoviesTab();
+    tv = new MediaBaseTab();
+    music = new MediaBaseTab();
+
+    constructor() {
+        super();
+    }
+
+    visit(options: Cypress.VisitOptions): Cypress.Chainable<Cypress.AUTWindow>;
+    visit(): Cypress.Chainable<Cypress.AUTWindow>;
+    visit(id: string): Cypress.Chainable<Cypress.AUTWindow>;
+    visit(id: string, options: Cypress.VisitOptions): Cypress.Chainable<Cypress.AUTWindow>;
+    visit(id?: any, options?: any) {
+        return cy.visit(`/requests-list`, options);
+    }
+
+}
+
+export const requestPage = new RequestsPage();

tests/cypress/support/request.commands.ts

@@ -26,11 +26,11 @@ Cypress.Commands.add('requestMovie', (movieId) => {
 })
 
 Cypress.Commands.add('requestAllTv', (tvId) => {
-    cy.request({
+    return cy.request({
         method: 'POST',
-        url: '/api/v1/request/tv',
+        url: '/api/v2/requests/tv',
         body: {
-            TvDbId: tvId,
+            TheMovieDbId: tvId,
             RequestAll: true
         },
         headers: {

tests/cypress/tests/requests/requests.spec.ts

@@ -0,0 +1,47 @@
+import {
+  requestPage as Page,
+  tvDetailsPage as TvPage,
+} from "@/integration/page-objects";
+
+describe("Requests Tests", () => {
+  it("Clicking Details on a Tv request, takes us to the correct detail page", () => {
+    cy.intercept("POST", "request/tv").as("tvRequest");
+    cy.intercept("token").as("login");
+    cy.login();
+
+    cy.requestAllTv(60735); // The Flash
+
+    Page.visit();
+
+    Page.tvTab.click();
+    const row = Page.tv.getGridRow(60735);
+    row.detailsButton.click();
+
+    cy.location("pathname").should("contains", "/details/tv/60735");
+    TvPage.title.contains("The Flash");
+  });
+
+  it("Deleting TV requests, removes from grid", () => {
+    cy.intercept("POST", "request/tv").as("tvRequest");
+    cy.intercept("token").as("login");
+    cy.intercept('DELETE', 'Request/tv/child/60735').as('deleteRequest');
+    cy.login();
+
+    // cy.wait('@login');
+    cy.requestAllTv(60735); // The Flash
+
+    Page.visit();
+
+
+    Page.tvTab.click();
+    const row = Page.tv.getGridRow(60735);
+    row.optionsButton.click();
+    row.optionsDelete.click();
+
+    cy.wait('@deleteRequest').then((intercept) => {
+      expect(intercept.response.body).is.true;
+    })
+
+    row.title.should('not.exist');
+  });
+});