diff --git a/.gitignore b/.gitignore index 1f59ecf..fbc0134 100644 --- 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 index e14fbdb..7c6077e 100644 --- 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 = { - title: "DRT Components/Flight Flagger", - component: FlightFlaggerComponent, + title: "DRT Components/Flight Flagger", + component: FlightFlaggerComponent, }; export default meta; type Story = StoryObj; 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 index 40ca799..2bdec27 100644 --- a/src/components/FlightFlagger/FlightFlagger.tsx +++ b/src/components/FlightFlagger/FlightFlagger.tsx @@ -1,5 +1,5 @@ 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"; @@ -7,7 +7,7 @@ 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 index edd9944..2f3caa2 100644 --- 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) => 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({ diff --git a/src/components/FlightFlagger/__tests__/FlightFlagger.test.tsx b/src/components/FlightFlagger/__tests__/FlightFlagger.test.tsx index e88bf9d..a3518d4 100644 --- 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( console.log(payload)} />); + + render( 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( console.log(payload)} />); + render( console.log(payload)}/>); fireEvent.click(screen.getByTestId('show-highlighted-only')); @@ -46,12 +49,12 @@ describe("Flight Flagger", () => { }) test("accepts an initial state", async () => { - render( console.log(payload)} />); + render( 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( console.log(payload)} />); + + render( 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( console.log(payload) } />); + render( console.log(payload)}/>); let filters = await screen.queryByTestId('flight-flagger-filters') await waitFor(() => { @@ -118,12 +121,12 @@ describe("Flight Flagger", () => { flightNumber: 'BA1234' } - render(); + render(); 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(); + render(); 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(); + render(); 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( console.log(payload)} />); + + render( console.log(payload)}/>); const desktopResults = await screen.queryByTestId('flight-flagger-desktop-results') const mobileResults = await screen.queryByTestId('flight-flagger-mobile-results')