fix: More automation tests mainly around the Plex Settings page (#4821)

* updates

* test coverage on the plex settings page

* features

* Update cypress.yml

* Update cypress.yml

* Update cypress.yml

* Update cypress.config.ts

* fixes

* stuff

* put it back

* a

* always kill docker

* Run the wizard as part of the feature files

* fix?

* slow the tests down

* subby

* Update user-preferences-profile.spec.ts

* Update user-preferences-profile.spec.ts

.github/workflows/cypress.yml → .github/workflows/automation-tests.yml

@@ -43,8 +43,8 @@ jobs:
     - name: Run Docker Image
       run: nohup docker run --rm -p 5000:5000 ombi &
 
-    # - name: Run Wiremock Plex
-    #   run: nohup docker run -it --rm -p 32400:8080 --name wiremock wiremock/wiremock:2.35.0
+    - name: Run Wiremock
+      run: nohup docker run --rm -p 32400:8080 --name wiremock wiremock/wiremock:2.35.0 &
 
     - name: Sleep for server to start
       run: sleep 20
@@ -61,7 +61,7 @@ jobs:
     #       nohup dotnet run --project ./src/Ombi -- --host http://*:3577 &
 
     - name: Cypress Tests
-      uses: cypress-io/github-action@v2.8.2
+      uses: cypress-io/github-action@v4
       with:
         record: true
         browser: chrome
@@ -73,3 +73,9 @@ jobs:
       env:
         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Stop Docker
+      if: always()
+      run: |
+        docker ps -q | xargs -I {} docker logs {}
+        docker container kill $(docker ps -q)

.github/workflows/build.yml

@@ -106,7 +106,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-dotnet@v1
         with:
-          dotnet-version: '6.0.x'      
+          dotnet-version: '6.0.x'
       - uses: actions/setup-dotnet@v1
         with:
           dotnet-version: '5.0.x'

.github/workflows/chromatic.yml

@@ -1,47 +1,47 @@
-name: 'Chromatic'
+# name: 'Chromatic'
 
-# Event for the workflow
-on:
-  push:
-  workflow_dispatch:
+# # Event for the workflow
+# on:
+#   push:
+#   workflow_dispatch:
 
-# List of jobs
-jobs:
-  storybook-build:
-    # Operating System
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
+# # List of jobs
+# jobs:
+#   storybook-build:
+#     # Operating System
+#     runs-on: ubuntu-latest
+#     steps:
+#       - name: Checkout repository
+#         uses: actions/checkout@v2
+#         with:
+#           fetch-depth: 0
 
-      - name: NodeModules Cache
-        uses: actions/cache@v2
-        with:
-          path: '**/node_modules'
-          key: node_modules-${{ hashFiles('**/yarn.lock') }}
+#       - name: NodeModules Cache
+#         uses: actions/cache@v2
+#         with:
+#           path: '**/node_modules'
+#           key: node_modules-${{ hashFiles('**/yarn.lock') }}
 
-      - name: Install dependencies
-        working-directory: ./src/Ombi/ClientApp
-        run: yarn
+#       - name: Install dependencies
+#         working-directory: ./src/Ombi/ClientApp
+#         run: yarn
 
-      - name: Publish to Chromatic
-        if: github.ref != 'refs/heads/master'
-        uses: chromaui/action@v1
-        with:
-          projectToken: 7c47e1a1a4bd
-          exitZeroOnChanges: true
-          workingDir: ./src/Ombi/ClientApp
-          buildScriptName: storybookbuild
-          exitOnceUploaded: true
+#       - name: Publish to Chromatic
+#         if: github.ref != 'refs/heads/master'
+#         uses: chromaui/action@v1
+#         with:
+#           projectToken: 7c47e1a1a4bd
+#           exitZeroOnChanges: true
+#           workingDir: ./src/Ombi/ClientApp
+#           buildScriptName: storybookbuild
+#           exitOnceUploaded: true
 
-      - name: Publish to Chromatic and auto accept changes
-        if: github.ref == 'refs/heads/develop'
-        uses: chromaui/action@v1
-        with:
-          projectToken: 7c47e1a1a4bd
-          autoAcceptChanges: true # 👈 Option to accept all changes
-          workingDir: ./src/Ombi/ClientApp
-          buildScriptName: storybookbuild
-          exitOnceUploaded: true
+#       - name: Publish to Chromatic and auto accept changes
+#         if: github.ref == 'refs/heads/develop'
+#         uses: chromaui/action@v1
+#         with:
+#           projectToken: 7c47e1a1a4bd
+#           autoAcceptChanges: true # 👈 Option to accept all changes
+#           workingDir: ./src/Ombi/ClientApp
+#           buildScriptName: storybookbuild
+#           exitOnceUploaded: true

.github/workflows/pr.yml

@@ -33,7 +33,7 @@ jobs:
 
   unit-test:
     runs-on: ubuntu-latest
-      
+
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-dotnet@v1

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

@@ -5,47 +5,47 @@ <h2>Connection</h2>
 
     <mat-form-field appearance="outline" floatLabel=auto>
       <mat-label>Server Name</mat-label>
-      <input matInput placeholder="Server Name" name="name" [(ngModel)]="this.data.server.name" value="{{this.data.server.name}}">
+      <input matInput id="serverName" placeholder="Server Name" name="name" [(ngModel)]="this.data.server.name" value="{{this.data.server.name}}">
     </mat-form-field>
 
     <div class="row">
       <mat-form-field class="col-md-6 col-12" appearance="outline" floatLabel=auto>
         <mat-label>Hostname / IP</mat-label>
-        <input matInput placeholder="Hostname or IP" name="ip" [(ngModel)]="this.data.server.ip" value="{{this.data.server.ip}}"
+        <input matInput id="ip" placeholder="Hostname or IP" name="ip" [(ngModel)]="this.data.server.ip" value="{{this.data.server.ip}}"
            #serverHostnameIpControl="ngModel" required>
         <mat-error *ngIf="serverHostnameIpControl.hasError('required')">Must be specified.</mat-error>
       </mat-form-field>
 
       <mat-form-field class="col-md-4 col-7" appearance="outline" floatLabel=auto>
         <mat-label>Port</mat-label>
-        <input matInput placeholder="Port" name="port" [(ngModel)]="this.data.server.port" value="{{this.data.server.port}}"
+        <input id="port" matInput placeholder="Port" name="port" [(ngModel)]="this.data.server.port" value="{{this.data.server.port}}"
            #serverPortControl="ngModel" required pattern="^[0-9]*$">
         <mat-error *ngIf="serverPortControl.hasError('required')">Must be specified.</mat-error>
         <mat-error *ngIf="serverPortControl.hasError('pattern')">Must be a number.</mat-error>
       </mat-form-field>
 
-      <mat-slide-toggle class="col-md-2 col-5 mt-3" id="ssl" name="ssl" [(ngModel)]="this.data.server.ssl" [checked]="this.data.server.ssl">
+      <mat-slide-toggle id="ssl" class="col-md-2 col-5 mt-3" id="ssl" name="ssl" [(ngModel)]="this.data.server.ssl" [checked]="this.data.server.ssl">
         SSL
       </mat-slide-toggle>
     </div>
 
     <mat-form-field appearance="outline" floatLabel=auto>
       <mat-label>Plex Authorization Token</mat-label>
-      <input matInput placeholder="Plex Authorization Token" name="authToken" [(ngModel)]="this.data.server.plexAuthToken" value="{{this.data.server.plexAuthToken}}"
+      <input id="authToken" matInput placeholder="Plex Authorization Token" name="authToken" [(ngModel)]="this.data.server.plexAuthToken" value="{{this.data.server.plexAuthToken}}"
          #serverApiKeyControl="ngModel" required>
       <mat-error *ngIf="serverApiKeyControl.hasError('required')">Must be specified.</mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="outline" floatLabel=auto>
       <mat-label>Machine Identifier</mat-label>
-      <input matInput placeholder="Machine Identifier" name="MachineIdentifier" [(ngModel)]="this.data.server.machineIdentifier" value="{{this.data.server.machineIdentifier}}"
+      <input id="machineId" matInput placeholder="Machine Identifier" name="MachineIdentifier" [(ngModel)]="this.data.server.machineIdentifier" value="{{this.data.server.machineIdentifier}}"
          #serverApiKeyControl="ngModel" required>
       <mat-error *ngIf="serverApiKeyControl.hasError('required')">Must be specified.</mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="outline" floatLabel=auto>
       <mat-label>Externally Facing Hostname</mat-label>
-      <input matInput placeholder="e.g. https://emby.this.data.server.com/" name="serverHostname" name="hostname"
+      <input id="externalHostname" matInput placeholder="e.g. https://emby.this.data.server.com/" name="serverHostname" name="hostname"
         [(ngModel)]="this.data.server.serverHostname" value="{{this.data.server.serverHostname}}" >
       <mat-hint>
         This will be the external address that users will navigate to when they press the 'View On Plex' button
@@ -58,26 +58,26 @@ <h2>Connection</h2>
 
     <mat-form-field appearance="outline" floatLabel=auto>
       <mat-label>Episode Batch Size</mat-label>
-      <input matInput placeholder="150" name="MachineIdentifier" [(ngModel)]="this.data.server.episodeBatchSize" value="{{this.data.server.episodeBatchSize}}">
+      <input id="batchSize" matInput placeholder="150" name="MachineIdentifier" [(ngModel)]="this.data.server.episodeBatchSize" value="{{this.data.server.episodeBatchSize}}">
       <mat-hint>
         150 by default, you shouldn't need to change this, this sets how many episodes we request from Plex at a single time.
       </mat-hint>
     </mat-form-field>
 
     <h2>Libraries</h2>
     <div>
-      <button mat-raised-button (click)="loadLibraries()"
+      <button id="loadLibs" mat-raised-button (click)="loadLibraries()"
           class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
           <i class="fas fa-film"></i>
       </button>
   </div>
     <div *ngIf="this.data.server.plexSelectedLibraries && this.data.server.plexSelectedLibraries.length > 0">
       <label>Please select the libraries for Ombi to monitor. If nothing is selected, Ombi will monitor all
         libraries.</label>
-        <div *ngFor="let lib of this.data.server.plexSelectedLibraries">
+        <div *ngFor="let lib of this.data.server.plexSelectedLibraries; let i = index">
           <div class="md-form-field">
               <div class="checkbox">
-                  <mat-slide-toggle [(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>
@@ -87,31 +87,31 @@ <h2>Libraries</h2>
 </mat-dialog-content>
 
 <mat-dialog-actions align=end>
-  <button style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="accent"
+  <button id="testPlexButton" style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="accent"
     (click)="testPlex()">
     <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
       <i class="fas fa-vial"></i>
       <span> Test</span>
     </span>
   </button>
 
-  <button style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="warn"
+  <button id="deleteServer" style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="warn"
   (click)="delete()">
   <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
     <i class="fas fa-trash"></i>
     <span> Delete</span>
   </span>
 </button>
 
-  <button style="margin: .5em 0 0 0.5em;" mat-stroked-button color="basic" (click)="cancel()">
+  <button id="cancel" style="margin: .5em 0 0 0.5em;" mat-stroked-button color="basic" (click)="cancel()">
     <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
       <i class="fas fa-times"></i>
       <span> Cancel</span>
     </span>
   </button>
 
 
-  <button style="margin: .5em 0 0 .5em;" mat-stroked-button color="accent"
+  <button id="saveServer" style="margin: .5em 0 0 .5em;" mat-stroked-button color="accent"
      (click)="save()">
     <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
       <i style="vertical-align: text-top;" class="fas fa-check"></i>

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}!`);

src/Ombi/ClientApp/src/app/settings/plex/plex.component.html

@@ -30,13 +30,13 @@
         <h2 style="margin: 1em 0 0 0;">Servers</h2>
         <mat-list style="display:flex; flex-flow: wrap;">
             <mat-card class="server-card" *ngFor="let server of settings.servers">
-                <button mat-button (click)="edit(server)">
+                <button mat-button (click)="edit(server)" id="{{server.name}}-button">
                     <h3>{{server.name}}</h3>
                 </button>
             </mat-card>
 
             <mat-card class="server-card new-server-card">
-                <button mat-button (click)="newServer()">
+                <button mat-button (click)="newServer()" id="newServer">
                     <i class="fas fa-plus fa-xl"></i>
                     <h3>Manually Add Server</h3>
                 </button>
@@ -114,13 +114,13 @@ <h3>Plex Credentials</h3>
             <div class="md-form-field col-10">
                 <div *ngIf="!loadedServers">
                     <mat-form-field appearance="outline" floatLabel=auto>
-                        <input disabled  matInput placeholder="No Servers Loaded" id="selectServer-noservers">
+                        <input disabled  matInput placeholder="No Servers Loaded" id="servers">
                     </mat-form-field>
                 </div>
 
                 <div *ngIf="loadedServers">
                     <mat-form-field appearance="outline">
-                        <mat-select placeholder="Servers Loaded! Please Select">
+                        <mat-select placeholder="Servers Loaded! Please Select" id="servers">
                             <mat-option (click)="selectServer(s)"
                                 *ngFor="let s of loadedServers.servers.server" [value]="s.server">
                                 {{s.name}}</mat-option>

src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts

@@ -86,8 +86,8 @@ export class UserPreferenceComponent implements OnInit {
 
     public languageSelected() {
         this.identityService.updateLanguage(this.selectedLang).subscribe(_ => {
+            this.translate.use(this.selectedLang).subscribe();
             this.notification.success(this.translate.instant("UserPreferences.Updated"))
-            this.translate.use(this.selectedLang);
         });
     }