Scouting App: Add tests for driver ranking

Signed-off-by: Filip Kujawa <filip.j.kujawa@gmail.com>
Change-Id: I9d942ed1558305f253eb3c8ffd41d4b013b047ea
diff --git a/scouting/scouting_test.ts b/scouting/scouting_test.ts
index 93423f6..8623fa1 100644
--- a/scouting/scouting_test.ts
+++ b/scouting/scouting_test.ts
@@ -391,4 +391,39 @@
       ).toEqual('text-input-' + i);
     }
   });
+  it('should: submit driver ranking', async () => {
+    // Navigate to Driver Ranking Page.
+    await loadPage();
+    await element(by.cssContainingText('.nav-link', 'Driver Ranking')).click();
+    expect(await element(by.id('page-title')).getText()).toEqual(
+      'Driver Ranking'
+    );
+
+    // Input match and team numbers.
+    await setTextboxByIdTo('match_number_selection', '11');
+    await setTextboxByIdTo('team_input_0', '123');
+    await setTextboxByIdTo('team_input_1', '456');
+    await setTextboxByIdTo('team_input_2', '789');
+    await element(by.id('select_button')).click();
+
+    // Verify match and team key input.
+    expect(await element(by.id('match_number_heading')).getText()).toEqual(
+      'Match #11'
+    );
+    expect(await element(by.id('team_key_label_0')).getText()).toEqual('123');
+    expect(await element(by.id('team_key_label_1')).getText()).toEqual('456');
+    expect(await element(by.id('team_key_label_2')).getText()).toEqual('789');
+
+    // Rank teams.
+    await element(by.id('up_button_2')).click();
+    await element(by.id('down_button_0')).click();
+
+    // Verify ranking change.
+    expect(await element(by.id('team_key_label_0')).getText()).toEqual('789');
+    expect(await element(by.id('team_key_label_1')).getText()).toEqual('123');
+    expect(await element(by.id('team_key_label_2')).getText()).toEqual('456');
+
+    // Submit.
+    await element(by.id('submit_button')).click();
+  });
 });
diff --git a/scouting/www/driver_ranking/driver_ranking.ng.html b/scouting/www/driver_ranking/driver_ranking.ng.html
index 21aeec1..452359c 100644
--- a/scouting/www/driver_ranking/driver_ranking.ng.html
+++ b/scouting/www/driver_ranking/driver_ranking.ng.html
@@ -1,4 +1,4 @@
-<h2>Driver Ranking</h2>
+<h2 id="page-title">Driver Ranking</h2>
 
 <ng-container [ngSwitch]="section">
   <div *ngSwitchCase="'TeamSelection'">
@@ -19,20 +19,43 @@
       type="number"
       min="1"
       max="9999"
+      id="team_input_{{i}}"
     />
-    <button class="btn btn-primary" (click)="setTeamNumbers()">Select</button>
+    <button
+      class="btn btn-primary"
+      (click)="setTeamNumbers()"
+      id="select_button"
+    >
+      Select
+    </button>
   </div>
   <div *ngSwitchCase="'Data'">
-    <h4>Match #{{match_number}}</h4>
+    <h4 id="match_number_heading">Match #{{match_number}}</h4>
     <div *ngFor="let team_key of team_ranking; let i = index">
       <div class="d-flex flex-row justify-content-center pt-2">
         <div class="d-flex flex-row">
-          <h4 class="align-self-center">{{i + 1}}</h4>
-          <h1 class="align-self-center">{{team_key}}</h1>
+          <h4 class="align-self-center" id="team_rank_label_{{i}}">
+            {{i + 1}}
+          </h4>
+          <h1 class="align-self-center" id="team_key_label_{{i}}">
+            {{team_key}}
+          </h1>
         </div>
-        <button class="btn btn-success" (click)="rankUp(i)">&uarr;</button>
+        <button
+          class="btn btn-success"
+          (click)="rankUp(i)"
+          id="up_button_{{i}}"
+        >
+          &uarr;
+        </button>
         <!--&uarr; is the html code for an up arrow-->
-        <button class="btn btn-danger" (click)="rankDown(i)">&darr;</button>
+        <button
+          class="btn btn-danger"
+          (click)="rankDown(i)"
+          id="down_button_{{i}}"
+        >
+          &darr;
+        </button>
         <!--&darr; is the html code for a down arrow-->
       </div>
     </div>
@@ -43,7 +66,13 @@
         </button>
       </div>
       <div>
-        <button class="btn btn-success" (click)="submitData()">Submit</button>
+        <button
+          class="btn btn-success"
+          (click)="submitData()"
+          id="submit_button"
+        >
+          Submit
+        </button>
       </div>
     </div>
   </div>