Merge pull request #27 from UKHomeOffice/drt-1444-flight-flagger-country

Created Country type for nationalities
UKHomeOffice · Jul 25, 2024 · 304b038 · 304b038
2 parents 33ebe6c + fe5375d
commit 304b038
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 102 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ coverage
 storybook-static
 .jest-test-results.json
 .yarn
+.idea
diff --git a/src/components/FlightFlagger/FlightFlagger.stories.tsx b/src/components/FlightFlagger/FlightFlagger.stories.tsx
@@ -1,28 +1,31 @@
-import { SearchFilterPayload } from "./FlightFlaggerFilters";
+import {SearchFilterPayload} from "./FlightFlaggerFilters";
 import ExampleFlights from "./ExampleFlights";
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
-import { default as FlightFlaggerComponent } from "./";
+import {default as FlightFlaggerComponent} from "./";
 
 const meta: Meta<typeof FlightFlaggerComponent> = {
-  title: "DRT Components/Flight Flagger",
-  component: FlightFlaggerComponent,
+    title: "DRT Components/Flight Flagger",
+    component: FlightFlaggerComponent,
 };
 
 export default meta;
 type Story = StoryObj<typeof FlightFlaggerComponent>;
 
 export const FlightFlagger: Story = {
-  args: {
-    nationalities: ["FRA", "GBR", "USA", "CHL"],
-    ageGroups: ["0-9", "10-24", "25-39", "40-55", "55-69", "70+"],
-    submitCallback: (searchFilters: SearchFilterPayload) =>
-      console.log(searchFilters),
-    flights: ExampleFlights,
-    isLoading: false,
-  },
-  parameters: {
-    jest: ["FlightFlagger.test.tsx"],
-  }
+    args: {
+        nationalities: [{name: 'France', code: 'FRA'},
+            {name: 'Great Britain', code: 'GBR'},
+            {name: 'America', code: 'USA'},
+            {name: 'Chile', code: 'CHL'}],
+        ageGroups: ["0-9", "10-24", "25-39", "40-55", "55-69", "70+"],
+        submitCallback: (searchFilters: SearchFilterPayload) =>
+            console.log(searchFilters),
+        flights: ExampleFlights,
+        isLoading: false,
+    },
+    parameters: {
+        jest: ["FlightFlagger.test.tsx"],
+    }
 };
diff --git a/src/components/FlightFlagger/FlightFlagger.tsx b/src/components/FlightFlagger/FlightFlagger.tsx
@@ -1,13 +1,13 @@
 import React, {useState} from "react";
-import { FlightFlaggerFilters } from "./FlightFlaggerFilters";
+import {Country, FlightFlaggerFilters} from "./FlightFlaggerFilters";
 import { FlightFlaggerResults } from "./FlightFlaggerResults";
 import { SearchFilterPayload } from "./FlightFlaggerFilters";
 import {CircularProgress} from "@mui/material";
 import { FlightArrival } from "./FlightArrival";
 
 
 export interface IFlightFlagger {
-  nationalities: string[],
+  nationalities: Country[],
   ageGroups: string[],
   submitCallback: (payload:SearchFilterPayload) => void,
   flights: FlightArrival[],

diff --git a/src/components/FlightFlagger/FlightFlaggerFilters.tsx b/src/components/FlightFlagger/FlightFlaggerFilters.tsx
@@ -14,6 +14,11 @@ type FormState = {
   flightNumber: string
 }
 
+export type Country = {
+    name: string,
+    code: string
+}
+
 export type SearchFilterPayload = {
   showTransitPaxNumber: boolean,
   showNumberOfVisaNationals: boolean,
@@ -24,7 +29,7 @@ export type SearchFilterPayload = {
 }
 
 export interface IFlightFlaggerFilters {
-  nationalities: string[],
+  nationalities: Country[],
   ageGroups: string[],
   submitCallback: (payload:SearchFilterPayload) => void,
   showAllCallback: (event: React.ChangeEvent<HTMLInputElement>) => void,
@@ -51,7 +56,7 @@ export const FlightFlaggerFilters = ({
   initialState,
 }: IFlightFlaggerFilters) => {
 
-  const nationalitiesOptions = nationalities.map((nationality) => { return { title: nationality }});
+  const nationalitiesOptions = nationalities.map((nationality) => { return { title: nationality.code }});
   const ageOptions = ageGroups.map((ageGroup) => { return { title: ageGroup }});
 
   const [searchFlags, setSearchFlags] = useState<FormState>({

diff --git a/src/components/FlightFlagger/__tests__/FlightFlagger.test.tsx b/src/components/FlightFlagger/__tests__/FlightFlagger.test.tsx
@@ -1,38 +1,41 @@
 import React from "react";
-import { render } from "../../TestProviderRenderer";
-import { screen } from "@testing-library/dom";
-import { fireEvent } from "@testing-library/react";
+import {render} from "../../TestProviderRenderer";
+import {screen} from "@testing-library/dom";
+import {fireEvent} from "@testing-library/react";
 import FlightFlagger from "../FlightFlagger";
 import ExampleFlights from "../ExampleFlights";
-import { waitFor, within } from "@testing-library/react";
+import {waitFor, within} from "@testing-library/react";
 import '@testing-library/jest-dom'
-import { SearchFilterPayload } from "../FlightFlaggerFilters";
+import {SearchFilterPayload} from "../FlightFlaggerFilters";
 
-
-const nationalities = ['GBR','FRA','SPA'];
-const ageGroups = ['0-9','10-24','24+'];
+const nationalities = [
+  {name: 'Great Britain', code: 'GBR'},
+  {name: 'France', code: 'FRA'},
+  {name: 'Spain', code: 'SPA'}
+];
+const ageGroups = ['0-9', '10-24', '24+'];
 
 describe("Flight Flagger", () => {
   test("displays all flight results", async () => {
-  
-    render(<FlightFlagger 
-            flights={ExampleFlights} 
-            nationalities={nationalities} 
-            ageGroups={ageGroups} 
-            isLoading={false} 
-            submitCallback={(payload: SearchFilterPayload)=> console.log(payload)} />);
+
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={(payload: SearchFilterPayload) => console.log(payload)}/>);
 
     const tableRows = await screen.getByTestId('flight-flagger-results-table').querySelectorAll('tbody tr');
     expect(tableRows).toHaveLength(ExampleFlights.length)
   })
 
   test("hides and shows non-highlighted flights correctly", async () => {
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={(payload: SearchFilterPayload)=> console.log(payload)} />);
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={(payload: SearchFilterPayload) => console.log(payload)}/>);
 
     fireEvent.click(screen.getByTestId('show-highlighted-only'));
 
@@ -46,12 +49,12 @@ describe("Flight Flagger", () => {
   })
 
   test("accepts an initial state", async () => {
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={(payload: SearchFilterPayload)=> console.log(payload)} />);
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={(payload: SearchFilterPayload) => console.log(payload)}/>);
 
     fireEvent.click(screen.getByTestId('show-highlighted-only'));
 
@@ -65,13 +68,13 @@ describe("Flight Flagger", () => {
   })
 
   test("displays the circular spinner and hides results when loading prop is true", async () => {
-    
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={true} 
-      submitCallback={(payload: SearchFilterPayload)=> console.log(payload)} />);
+
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={true}
+      submitCallback={(payload: SearchFilterPayload) => console.log(payload)}/>);
 
     const table = await screen.queryByTestId('flight-flagger-results-table')
     const loadingSpinner = await screen.queryByTestId('flight-flagger-loading-spinner')
@@ -80,12 +83,12 @@ describe("Flight Flagger", () => {
   })
 
   test("hides and shows the search filters", async () => {
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={(payload: SearchFilterPayload)=> console.log(payload) } />);
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={(payload: SearchFilterPayload) => console.log(payload)}/>);
 
     let filters = await screen.queryByTestId('flight-flagger-filters')
     await waitFor(() => {
@@ -118,12 +121,12 @@ describe("Flight Flagger", () => {
       flightNumber: 'BA1234'
     }
 
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={callBack} />);
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={callBack}/>);
 
     await fireEvent.click(screen.getByTestId('show-filters'));
     const filters = await screen.queryByTestId('flight-flagger-filters')
@@ -138,18 +141,18 @@ describe("Flight Flagger", () => {
     const nationalitiesInput = within(nationalitiesAutocomplete).getByRole('combobox')
     nationalitiesAutocomplete.focus()
 
-    fireEvent.change(nationalitiesInput, { target: { value: 'G' } })
-    fireEvent.keyDown(nationalitiesAutocomplete, { key: 'ArrowDown' })
-    fireEvent.keyDown(nationalitiesAutocomplete, { key: 'Enter' })
+    fireEvent.change(nationalitiesInput, {target: {value: 'G'}})
+    fireEvent.keyDown(nationalitiesAutocomplete, {key: 'ArrowDown'})
+    fireEvent.keyDown(nationalitiesAutocomplete, {key: 'Enter'})
 
     const ageAutocomplete = screen.getByTestId('age-autocomplete');
     const ageInput = within(ageAutocomplete).getByRole('combobox')
     ageAutocomplete.focus()
 
-    fireEvent.change(ageInput, { target: { value: 'G' } })
-    fireEvent.keyDown(ageAutocomplete, { key: 'ArrowDown' })
-    fireEvent.keyDown(ageAutocomplete, { key: 'Enter' })
-    
+    fireEvent.change(ageInput, {target: {value: 'G'}})
+    fireEvent.keyDown(ageAutocomplete, {key: 'ArrowDown'})
+    fireEvent.keyDown(ageAutocomplete, {key: 'Enter'})
+
     await fireEvent.click(screen.getByTestId('show-visa-nationals-check'));
     await fireEvent.click(screen.getByTestId('require-all-selected-check'));
 
@@ -170,12 +173,12 @@ describe("Flight Flagger", () => {
       flightNumber: 'BA1234'
     }
 
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={callBack} />);
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={callBack}/>);
 
     await fireEvent.click(screen.getByTestId('show-filters'));
     const filters = await screen.queryByTestId('flight-flagger-filters')
@@ -185,8 +188,8 @@ describe("Flight Flagger", () => {
 
     const flightNumber = screen.getByLabelText('Enter flight details')
     fireEvent.change(flightNumber, {target: {value: 'BA1234'}})
-    fireEvent.keyDown(flightNumber, { key: 'Enter' })
-  
+    fireEvent.keyDown(flightNumber, {key: 'Enter'})
+
     expect(callBack).toHaveBeenCalledWith(expectedPayload)
   })
 
@@ -203,12 +206,12 @@ describe("Flight Flagger", () => {
       flightNumber: 'BA1234'
     }
 
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={callBack} />);
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={callBack}/>);
 
     await fireEvent.click(screen.getByTestId('show-filters'));
     const filters = await screen.queryByTestId('flight-flagger-filters')
@@ -218,29 +221,29 @@ describe("Flight Flagger", () => {
 
     const flightNumber = screen.getByLabelText('Enter flight details')
     fireEvent.change(flightNumber, {target: {value: 'BA1234'}})
-    fireEvent.keyDown(flightNumber, { key: 'Enter' })
+    fireEvent.keyDown(flightNumber, {key: 'Enter'})
 
     const nationalitiesAutocomplete = screen.getByTestId('nationalities-autocomplete');
     const nationalitiesInput = within(nationalitiesAutocomplete).getByRole('combobox')
     nationalitiesAutocomplete.focus()
 
-    fireEvent.change(nationalitiesInput, { target: { value: 'G' } })
-    fireEvent.keyDown(nationalitiesAutocomplete, { key: 'ArrowDown' })
-    fireEvent.keyDown(nationalitiesAutocomplete, { key: 'Enter' })
+    fireEvent.change(nationalitiesInput, {target: {value: 'G'}})
+    fireEvent.keyDown(nationalitiesAutocomplete, {key: 'ArrowDown'})
+    fireEvent.keyDown(nationalitiesAutocomplete, {key: 'Enter'})
 
     const ageAutocomplete = screen.getByTestId('age-autocomplete');
     const ageInput = within(ageAutocomplete).getByRole('combobox')
     ageAutocomplete.focus()
 
-    fireEvent.change(ageInput, { target: { value: 'G' } })
-    fireEvent.keyDown(ageAutocomplete, { key: 'ArrowDown' })
-    fireEvent.keyDown(ageAutocomplete, { key: 'Enter' })
+    fireEvent.change(ageInput, {target: {value: 'G'}})
+    fireEvent.keyDown(ageAutocomplete, {key: 'ArrowDown'})
+    fireEvent.keyDown(ageAutocomplete, {key: 'Enter'})
 
     await fireEvent.click(screen.getByTestId('show-visa-nationals-check'));
     await fireEvent.click(screen.getByTestId('require-all-selected-check'));
 
     await fireEvent.click(screen.getByTestId('flight-flagger-clear-filters'));
-    
+
     await fireEvent.click(screen.getByTestId('flight-flagger-filter-submit'));
     expect(callBack).toHaveBeenCalledWith(expectedPayload)
   })
@@ -253,13 +256,13 @@ describe("Flight Flagger", () => {
       addListener: jest.fn(),
       removeListener: jest.fn()
     }));
-    
-    render(<FlightFlagger 
-      flights={ExampleFlights} 
-      nationalities={nationalities} 
-      ageGroups={ageGroups} 
-      isLoading={false} 
-      submitCallback={(payload: SearchFilterPayload)=> console.log(payload)} />);
+
+    render(<FlightFlagger
+      flights={ExampleFlights}
+      nationalities={nationalities}
+      ageGroups={ageGroups}
+      isLoading={false}
+      submitCallback={(payload: SearchFilterPayload) => console.log(payload)}/>);
 
     const desktopResults = await screen.queryByTestId('flight-flagger-desktop-results')
     const mobileResults = await screen.queryByTestId('flight-flagger-mobile-results')
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ coverage @@
     storybook-static
     .jest-test-results.json
     .yarn
+    .idea