feat: supoprt individual arrival and departure rerouts #91

This commit will update the previous rerouting feature to support individual use cases using either the `reroutedArrivalStation` or `reroutedDepartureStation` parts of the API for a desired UI. Changes to be committed: new file: apiExamples/reroute1.html new file: apiExamples/reroute2.html modified: demo/demo.md modified: docs/partials/demo.md modified: src/auro-flight-main.js modified: test/auro-flight-main.test.js
AlaskaAirlines · Jul 19, 2023 · 1448823 · 1448823
1 parent 7cca093
commit 1448823
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 12 deletions.
diff --git a/apiExamples/reroute1.html b/apiExamples/reroute1.html
@@ -0,0 +1,12 @@
+<auro-flight
+  flights='["AS 8"]'
+  duration="330"
+  departureTime="2022-07-30T07:40:00-07:00"
+  departureStation="SEA"
+  arrivalTime="2022-07-30T16:40:00-04:00"
+  arrivalStation="EWR"
+  reroutedArrivalStation="AVP">
+  <auro-flightline></auro-flightline>
+  <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
+  <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
+</auro-flight>
diff --git a/apiExamples/reroute2.html b/apiExamples/reroute2.html
@@ -0,0 +1,12 @@
+<auro-flight
+  flights='["AS 8"]'
+  duration="330"
+  departureTime="2022-07-30T07:40:00-07:00"
+  departureStation="SEA"
+  arrivalTime="2022-07-30T16:40:00-04:00"
+  arrivalStation="EWR"
+  reroutedDepartureStation="PAE">
+  <auro-flightline></auro-flightline>
+  <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
+  <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
+</auro-flight>
diff --git a/demo/demo.md b/demo/demo.md
@@ -341,6 +341,92 @@ In this example, the `footer` slot is used to alert the customer that a First Cl
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Using the optional departure reroute information
+
+The following example illustrates additional data regarding departure reroute information.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/reroute1.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/reroute1.html -->
+  <auro-flight
+    flights='["AS 8"]'
+    duration="330"
+    departureTime="2022-07-30T07:40:00-07:00"
+    departureStation="SEA"
+    arrivalTime="2022-07-30T16:40:00-04:00"
+    arrivalStation="EWR"
+    reroutedArrivalStation="AVP">
+    <auro-flightline></auro-flightline>
+    <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
+    <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
+  </auro-flight>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/reroute1.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/reroute1.html -->
+
+```html
+<auro-flight
+  flights='["AS 8"]'
+  duration="330"
+  departureTime="2022-07-30T07:40:00-07:00"
+  departureStation="SEA"
+  arrivalTime="2022-07-30T16:40:00-04:00"
+  arrivalStation="EWR"
+  reroutedArrivalStation="AVP">
+  <auro-flightline></auro-flightline>
+  <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
+  <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
+</auro-flight>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Using the optional arrival reroute information
+
+The following example illustrates additional data regarding arrival reroute information.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/reroute2.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/reroute2.html -->
+  <auro-flight
+    flights='["AS 8"]'
+    duration="330"
+    departureTime="2022-07-30T07:40:00-07:00"
+    departureStation="SEA"
+    arrivalTime="2022-07-30T16:40:00-04:00"
+    arrivalStation="EWR"
+    reroutedDepartureStation="PAE">
+    <auro-flightline></auro-flightline>
+    <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
+    <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
+  </auro-flight>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/reroute2.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/reroute2.html -->
+
+```html
+<auro-flight
+  flights='["AS 8"]'
+  duration="330"
+  departureTime="2022-07-30T07:40:00-07:00"
+  departureStation="SEA"
+  arrivalTime="2022-07-30T16:40:00-04:00"
+  arrivalStation="EWR"
+  reroutedDepartureStation="PAE">
+  <auro-flightline></auro-flightline>
+  <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
+  <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
+</auro-flight>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Using the optional departure/arrival header slots
 
 The following example illustrates additional data regarding departure and arrival information.

diff --git a/docs/partials/demo.md b/docs/partials/demo.md
@@ -125,6 +125,40 @@ In this example, the `footer` slot is used to alert the customer that a First Cl
 
 </auro-accordion>
 
+## Using the optional departure reroute information
+
+The following example illustrates additional data regarding departure reroute information.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/reroute1.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/reroute1.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
+## Using the optional arrival reroute information
+
+The following example illustrates additional data regarding arrival reroute information.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/reroute2.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/reroute2.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ## Using the optional departure/arrival header slots
 
 The following example illustrates additional data regarding departure and arrival information.
@@ -145,6 +179,7 @@ The following example illustrates additional data regarding departure and arriva
 <hr/>
 
 
+
 ## DoT regulations
 
 Department of Transportation regulations mandate that the arrival and departure cities' font size and color be identical to the operational disclosures (for instance, AA 3210 is operated by Envoy Air on behalf of American Airlines).

diff --git a/src/auro-flight-main.js b/src/auro-flight-main.js
@@ -99,7 +99,9 @@ class AuroFlightMain extends LitElement {
    * @returns Composed screen reader summary.
    */
   composeScreenReaderSummary() {
-    const hasReroute = this.reroutedDepartureStation && this.reroutedDepartureStation !== 'undefined';
+    const hasDepartureReroute = this.reroutedDepartureStation && this.reroutedDepartureStation !== 'undefined';
+    const hasArrivalReroute = this.reroutedArrivalStation && this.reroutedArrivalStation !== 'undefined';
+    const hasReroute = hasDepartureReroute || hasArrivalReroute;
     const dayDiff = getDateDifference(this.departureTime, this.arrivalTime);
     const daysFromDeparture = dayDiff === 1 ? 'next day' : `${dayDiff} days later`;
     const secondToLastIndex = 2;
@@ -117,24 +119,29 @@ class AuroFlightMain extends LitElement {
     let reroutedDepartureStation = '';
     let reroutedArrivalStation = '';
 
-    if (hasReroute) {
+    if (hasDepartureReroute) {
       reroutedDepartureStation = this.readStation(this.reroutedDepartureStation);
+    }
+
+    if (hasArrivalReroute) {
       reroutedArrivalStation = this.readStation(this.reroutedArrivalStation);
     }
 
     return html`
       ${!hasReroute
         ? `Departs from ${departureStation} at ${departureTime}, arrives ${arrivalStation} at ${arrivalTime}`
-        : `Flight ${reroutedDepartureStation} to ${reroutedArrivalStation} has been re-routed.
-        The flight now departs from ${departureStation} at ${departureTime},
-        and arrives ${arrivalStation} at ${arrivalTime}`} ${dayDiff > 0 ? `, ${daysFromDeparture}` : ''}
+        : `Flight ${departureStation} to ${arrivalStation} has been re-routed.
+        The flight now departs from ${hasDepartureReroute ? reroutedDepartureStation : departureStation} at 
+        ${departureTime},
+        and arrives  ${hasArrivalReroute ? reroutedArrivalStation : arrivalStation} at ${arrivalTime}`} ${dayDiff > 0 ? `, ${daysFromDeparture}` : ''}
         ${this.stops ? ', ' : ''} ${layoverStopoverStringArray}.
     `;
   }
 
   // function that renders the HTML and CSS into  the scope of the component
   render() {
-    const hasReroute = this.reroutedDepartureStation && this.reroutedDepartureStation !== 'undefined';
+    const hasDepartureReroute = this.reroutedDepartureStation && this.reroutedDepartureStation !== 'undefined';
+    const hasArrivalReroute = this.reroutedArrivalStation && this.reroutedArrivalStation !== 'undefined';
     return html`
         <script type="application/ld+json">
           {
@@ -157,7 +164,7 @@ class AuroFlightMain extends LitElement {
             <auro-datetime type="tzTime" setDate="${this.departureTime}"></auro-datetime>
           </time>
           <span class="departureStation">
-          ${hasReroute
+          ${hasDepartureReroute
             ? html`
               <span class="util_lineThrough">
                 ${this.reroutedDepartureStation}
@@ -175,7 +182,7 @@ class AuroFlightMain extends LitElement {
             <auro-datetime type="tzTime" setDate="${this.arrivalTime}"></auro-datetime>
           </time>
           <span class="arrivalStation">
-            ${hasReroute
+            ${hasArrivalReroute
               ? html`
                 <span class="util_lineThrough">
                   ${this.reroutedArrivalStation}

diff --git a/test/auro-flight-main.test.js b/test/auro-flight-main.test.js
@@ -93,6 +93,56 @@ describe('auro-flight-main', () => {
     await expect(actual.includes(expectedComposition)).is.true;
   })
 
+  it('auro flight with a departure reroute', async () => {
+    const el = await fixture(html`
+      <auro-flight-main 
+        departureTime="2022-05-04T00:30:00-07:00" 
+        departureStation="SEA" 
+        arrivalTime="2022-05-04T11:55:00-04:00"
+        arrivalStation="PVD"
+        flights='["AS 1436"]'
+        reroutedDepartureStation="LAX">
+      </auro-flight-main>
+    `);
+
+    const expectedDeparture = 'The flight now departs from L A X at         12:30 AM',
+    expectedReroutedFlight = 'Flight S E A to P V D has been re-routed.';
+
+    const actual = el.shadowRoot.querySelector('.util_displayHiddenVisually').textContent.trim().replace(/\n|\r/g, "");
+    const departureRerouteSpan = el.shadowRoot.querySelector('.departureStation .util_lineThrough');
+    const arrivalRerouteSpan = el.shadowRoot.querySelector('.arrivalStation .util_lineThrough');
+
+    await expect(arrivalRerouteSpan).to.be.null;
+    await expect(departureRerouteSpan).to.not.be.null;
+    await expect(actual.includes(expectedReroutedFlight)).is.true;
+    await expect(actual.includes(expectedDeparture)).is.true;
+  })
+
+  it('auro flight with an arrival reroute', async () => {
+    const el = await fixture(html`
+      <auro-flight-main 
+        departureTime="2022-05-04T00:30:00-07:00" 
+        departureStation="SEA" 
+        arrivalTime="2022-05-04T11:55:00-04:00"
+        arrivalStation="PVD"
+        flights='["AS 1436"]'
+        reroutedArrivalStation="SFO">
+      </auro-flight-main>
+    `);
+
+    const expectedArrival = 'and arrives  S F O at 11:55 AM',
+    expectedReroutedFlight = 'Flight S E A to P V D has been re-routed.';
+
+    const actual = el.shadowRoot.querySelector('.util_displayHiddenVisually').textContent.trim().replace(/\n|\r/g, "");
+    const departureRerouteSpan = el.shadowRoot.querySelector('.departureStation .util_lineThrough');
+    const arrivalRerouteSpan = el.shadowRoot.querySelector('.arrivalStation .util_lineThrough');
+
+    await expect(arrivalRerouteSpan).to.not.be.null;
+    await expect(departureRerouteSpan).to.be.null;
+    await expect(actual.includes(expectedReroutedFlight)).is.true;
+    await expect(actual.includes(expectedArrival)).is.true;
+  })
+
   it('auro flight with reroutes', async () => {
     const el = await fixture(html`
       <auro-flight-main 
@@ -106,12 +156,12 @@ describe('auro-flight-main', () => {
       </auro-flight-main>
     `);
 
-    const expectedDeparture = 'The flight now departs from S E A at 12:30 AM',
-    expectedArrival = 'and arrives P V D at 11:55 AM',
-    expectedReroutedFlight = 'Flight L A X to S F O has been re-routed';
+    const expectedDeparture = 'The flight now departs from L A X at         12:30 AM',
+    expectedArrival = 'and arrives  S F O at 11:55 AM',
+    expectedReroutedFlight = 'Flight S E A to P V D has been re-routed.';
 
     const actual = el.shadowRoot.querySelector('.util_displayHiddenVisually').textContent.trim().replace(/\n|\r/g, "");
-    
+
     await expect(actual.includes(expectedReroutedFlight)).is.true;
     await expect(actual.includes(expectedDeparture)).is.true;
     await expect(actual.includes(expectedArrival)).is.true;