test coverage on the plex settings page

src/Ombi/ClientApp/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.html

@@ -77,7 +77,7 @@
         <div *ngFor="let lib of this.data.server.plexSelectedLibraries; let i = index">
           <div class="md-form-field">
               <div class="checkbox">
-                  <mat-slide-toggle [id]="lib[i]" [(ngModel)]="lib.enabled" [checked]="lib.enabled"
+                  <mat-slide-toggle id="lib-{{i}}" [(ngModel)]="lib.enabled" [checked]="lib.enabled"
                       for="{{lib.title}}">{{lib.title}}</mat-slide-toggle>
               </div>
           </div>

src/Ombi/ClientApp/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.ts

@@ -37,7 +37,7 @@ export class PlexServerDialogComponent {
   public testPlex() {
     this.testerService.plexTest(this.data.server).pipe(take(1))
         .subscribe(x => {
-        if (x === true) {
+        if (x) {
             this.notificationService.success(`Successfully connected to the Plex server ${this.data.server.name}!`);
         } else {
             this.notificationService.error(`We could not connect to the Plex server  ${this.data.server.name}!`);

tests/cypress/fixtures/mocks/plex/plex-libraries.mock.json

@@ -0,0 +1,23 @@
+{
+	"request": {
+		"method": "GET",
+		"urlPattern": "/library/sections"
+	},
+	"response": {
+		"status": 200,
+		"jsonBody": {
+			"mediaContainer": {
+                "directory":[
+					{ "key": "1", "title": "lib1"},
+					{ "key": "2", "title": "lib2"},
+					{ "key": "3", "title": "lib3"},
+					{ "key": "4", "title": "lib4"},
+					{ "key": "5", "title": "lib5"}
+				]
+            }
+		},
+		"headers": {
+			"Content-Type": "application/json"
+		}
+	}
+}

tests/cypress/fixtures/mocks/plex/plex-test.mock.json

@@ -0,0 +1,16 @@
+{
+	"request": {
+		"method": "GET"
+	},
+	"response": {
+		"status": 200,
+		"jsonBody": {
+			"mediaContainer": {
+                "version": "99"
+            }
+		},
+		"headers": {
+			"Content-Type": "application/json"
+		}
+	}
+}

tests/cypress/integration/page-objects/settings/plex/plex-settings.page.ts

@@ -58,12 +58,20 @@ class PlexServerModal {
     get saveButton(): Cypress.Chainable<any> {
         return cy.get('#saveServer');
     }
+
+    getLib(index: number): Cypress.Chainable<any> {
+        return cy.get(`#lib-${index}`);
+    }
 }
 
 class PlexServersGrid {
     serverCardButton(name: string): Cypress.Chainable<any> {
         return cy.get(`#${name}-button`);
     }
+
+    get newServerButton(): Cypress.Chainable<any> {
+        return cy.get('#newServer');
+    }
 }
 
 class PlexSettingsPage extends BasePage {

tests/cypress/support/e2e.ts

@@ -17,6 +17,7 @@
 import './commands'
 import './request.commands';
 import './plex-settings.commands';
+import './mock-data.commands';
 import "cypress-real-events/support";
 import '@bahmutov/cy-api/support';
 

tests/cypress/support/mock-data.commands.ts

@@ -0,0 +1,15 @@
+
+Cypress.Commands.add('addMock', (mapping) => {
+    cy.request({
+        method: 'POST',
+        url: 'http://localhost:32400/__admin/mappings',
+        body: mapping
+    })
+})
+
+Cypress.Commands.add('clearMocks', () => {
+    cy.request({
+        method: 'DELETE',
+        url: 'http://localhost:32400/__admin/mappings'
+    })
+})

tests/cypress/tests/settings/plex/plex-settings.spec.ts

@@ -6,6 +6,10 @@ describe("Plex Settings Tests", () => {
     cy.clearPlexServers();
   });
 
+  afterEach(() => {
+    cy.clearMocks();
+  })
+
   const plexTvApiResponse = `{
     "success": true,
     "message": null,
@@ -80,8 +84,10 @@ describe("Plex Settings Tests", () => {
 
   });
 
-  // Need to finish the witemock container
-  it.skip("Load Servers from Plex.TV Api and Test", () => {
+  it("Load Servers from Plex.TV Api and Test", () => {
+    cy.fixture('/mocks/plex/plex-test.mock').then((json) => {
+      cy.addMock(json);
+    });
     loadServerFromPlexTvApi();
     cy.intercept("POST", "api/v1/tester/plex", (req) => {
       req.reply((res) => {
@@ -92,30 +98,84 @@ describe("Plex Settings Tests", () => {
     const modal = Page.plexServerModal;
 
     modal.testButton.click();
-    cy.wait("@testResponse");
+    cy.wait("@testResponse").then(() => {
+      cy.contains("Successfully connected to the Plex server AutomationServer");
+    });
 
   });
 
-function loadServerFromPlexTvApi() {
-  cy.intercept("POST", "api/v1/Plex/servers", (req) => {
-    req.reply((res) => {
-      res.send(plexTvApiResponse);
+  it("Load Libraries from New Server", () => {
+    cy.fixture('/mocks/plex/plex-libraries.mock').then((json) => {
+      cy.addMock(json);
     });
-  }).as("serverResponse");
+    cy.intercept("POST", "api/v1/Plex/Libraries").as("libRequest");
+    newServer();
+
+    const modal = Page.plexServerModal;
+    modal.loadLibraries.click();
+
+    cy.wait("@libRequest");
+
+    modal.getLib(0).click();
+    modal.getLib(0).should('contain.text',"lib1");
+  });
+
+  it("Remove server", () => {
+    loadServerFromPlexTvApi();
+    const modal = Page.plexServerModal;
+    modal.saveButton.click();
+
+    newServer(false);
+    modal.saveButton.click();
+
+    Page.plexServerGrid.serverCardButton('AutomationServer').click();
+    modal.deleteButton.click();
+    Page.plexServerGrid.serverCardButton('ManualServer').click();
+    modal.deleteButton.click();
+
+    Page.plexServerGrid.serverCardButton('AutomationServer').should('not.exist');
+    Page.plexServerGrid.serverCardButton('ManualServer').should('not.exist');
+  });
+
+  function loadServerFromPlexTvApi(visitPage = true) {
+    cy.intercept("POST", "api/v1/Plex/servers", (req) => {
+      req.reply((res) => {
+        res.send(plexTvApiResponse);
+      });
+    }).as("serverResponse");
 
-  cy.intercept("POST", "api/v1/Settings/Plex").as('plexSave');
+    cy.intercept("POST", "api/v1/Settings/Plex").as('plexSave');
 
-  Page.visit();
+    if (visitPage) {
+      Page.visit();
+    }
 
-  Page.plexCredentials.username.type('username');
-  Page.plexCredentials.password.type('password');
+    Page.plexCredentials.username.type('username');
+    Page.plexCredentials.password.type('password');
 
-  Page.plexCredentials.loadServers.click();
+    Page.plexCredentials.loadServers.click();
 
-  cy.wait("@serverResponse");
+    cy.wait("@serverResponse");
 
-  Page.plexCredentials.serverDropdown.click().get('mat-option').contains('AutomationServer').click();
-}
+    Page.plexCredentials.serverDropdown.click().get('mat-option').contains('AutomationServer').click();
+  }
+
+  function newServer(visitPage = true) {
+    if (visitPage) {
+      Page.visit();
+    }
+
+    Page.plexServerGrid.newServerButton.click();
+    const modal = Page.plexServerModal;
+
+    const server = JSON.parse(plexTvApiResponse);
+    modal.serverName.clear();
+    modal.serverName.type("ManualServer");
+    modal.hostName.type(server.servers.server[0].localAddresses);
+    modal.port.type(server.servers.server[0].port);
+    modal.authToken.type(server.servers.server[0].accessToken);
+    modal.machineIdentifier.type(server.servers.server[0].machineIdentifier);
+  }
 
 });
 

tests/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "es5",
         "lib": ["es2018", "dom"],
-        "types": ["cypress", "cypress-wait-until", "cypress-image-snapshot", "cypress-real-events", "@bahmutov/cy-api"],
+        "types": ["cypress", "cypress-wait-until", "cypress-image-snapshot", "cypress-real-events", "@bahmutov/cy-api", "node"],
         "baseUrl": "./cypress",
         "paths": {
             "@/*": ["./*"]