fix(#123): rerouted departure and arrival stations display as expecte…

…d now
AlaskaAirlines · Aug 8, 2024 · 5201a33 · 5201a33
1 parent e0d5cc6
commit 5201a33
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/src/auro-flight-main.js b/src/auro-flight-main.js
@@ -33,14 +33,14 @@ export class AuroFlightMain extends LitElement {
   // function to define props used within the scope of this component
   static get properties() {
     return {
-      stops:                    { type: Array },
-      flights:                  { type: Array },
-      duration:                 { type: Number },
-      arrivalTime:              { type: String },
-      arrivalStation:           { type: String },
-      departureTime:            { type: String },
-      departureStation:         { type: String },
-      reroutedArrivalStation:   { type: String },
+      stops: { type: Array },
+      flights: { type: Array },
+      duration: { type: Number },
+      arrivalTime: { type: String },
+      arrivalStation: { type: String },
+      departureTime: { type: String },
+      departureStation: { type: String },
+      reroutedArrivalStation: { type: String },
       reroutedDepartureStation: { type: String },
     };
   }
@@ -154,13 +154,14 @@ export class AuroFlightMain extends LitElement {
           </time>
           <span class="departureStation">
           ${hasDepartureReroute
-            ? html`
-              <span class="util_lineThrough">
+        ? html`
+              <span>
                 ${this.reroutedDepartureStation}
               </span>`
-            : html``}
+        : html``}
 
-            ${this.departureStation}
+            <span class=${hasDepartureReroute ? "util_lineThrough" : ""}>
+              ${this.departureStation}
           </span>
         </div>
         <div class="slotContainer" aria-hidden="true">
@@ -172,13 +173,15 @@ export class AuroFlightMain extends LitElement {
           </time>
           <span class="arrivalStation">
             ${hasArrivalReroute
-              ? html`
-                <span class="util_lineThrough">
+        ? html`
+                <span>
                   ${this.reroutedArrivalStation}
                 </span>`
-              : html``}
+        : html``}
 
-            ${this.arrivalStation}
+            <span class=${hasArrivalReroute ? "util_lineThrough" : ""}>
+              ${this.arrivalStation}
+            </span>
           </span>
         </div>
     `;

diff --git a/test/auro-flight-main.test.js b/test/auro-flight-main.test.js
@@ -106,15 +106,15 @@ describe('auro-flight-main', () => {
     `);
 
     const expectedDepartureCity = `L A X`,
-    expectedDepartureTime = `12:30 AM`,
-    expectedReroutedFlight = 'Flight S E A to P V D has been re-routed.';
+      expectedDepartureTime = `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(departureRerouteSpan.textContent.includes("SEA")).is.true;
     await expect(actual.includes(expectedReroutedFlight)).is.true;
     await expect(actual.includes(expectedDepartureCity)).is.true;
     await expect(actual.includes(expectedDepartureTime)).is.true;
@@ -133,13 +133,13 @@ describe('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.';
+      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(arrivalRerouteSpan.textContent.includes("PVD")).is.true;
     await expect(departureRerouteSpan).to.be.null;
     await expect(actual.includes(expectedReroutedFlight)).is.true;
     await expect(actual.includes(expectedArrival)).is.true;
@@ -159,16 +159,20 @@ describe('auro-flight-main', () => {
     `);
 
     const expectedDepartureCity = `L A X`,
-    expectedDepartureTime = `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.';
+      expectedDepartureTime = `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, "");
+    const departureRerouteSpan = el.shadowRoot.querySelector('.departureStation .util_lineThrough');
+    const arrivalRerouteSpan = el.shadowRoot.querySelector('.arrivalStation .util_lineThrough');
 
     await expect(actual.includes(expectedReroutedFlight)).is.true;
     await expect(actual.includes(expectedDepartureTime)).is.true;
     await expect(actual.includes(expectedDepartureCity)).is.true;
     await expect(actual.includes(expectedArrival)).is.true;
+    await expect(arrivalRerouteSpan.textContent.includes("PVD")).is.true;
+    await expect(departureRerouteSpan.textContent.includes("SEA")).is.true;
   })
 
   it('flight with a stopover', async () => {