import { test , expect , Page } from "@playwright/test" ; import { GraphQLResponseWithData as RelayGraphQLResponseWithData } from "relay-runtime" ; import path from "path" ; import { AppQueryResponse } from "./__generated__/AppQuery.graphql" ; type Mutable < T > = { - readonly [ P in keyof T ] : T [ P ] ; } ; interface GraphQLResponseWithData < T > extends Omit < RelayGraphQLResponseWithData , "data" > { data : T ; } async function modifyGraphQLResponse ( page , url , mutator ) { await page . route ( url , async ( route ) => { const response = await page . request . fetch ( route . request ( ) ) ; route . fulfill ( { response , body : JSON . stringify ( mutator ( await response . json ( ) ) ) , } ) ; } ) ; } test . beforeEach ( async ( { page } ) => { await page . route ( "http://localhost/**" , ( route ) => { if ( route . request ( ) . resourceType ( ) === "document" ) { return route . fulfill ( { status : 200 , path : path . join ( __dirname , "../dist/index.html" ) , } ) ; } else { const url = new URL ( route . request ( ) . url ( ) ) ; return route . fulfill ( { status : 200 , path : path . join ( __dirname , "../dist" , url . pathname ) , } ) ; } } ) ; } ) ; test ( "renders list with many ships" , async ( { page } ) => { await modifyGraphQLResponse ( page , "https://api.spacex.land/graphql" , ( body ) => { body . data . ships = [ { id : "one" , name : "Ship One" , } , { id : "two" , name : "Ship Two" , } , ] ; return body ; } ) ; await page . goto ( `http://localhost` , { waitUntil : "networkidle" } ) ; const titleTxt = page . locator ( "h1" ) ; await expect ( await titleTxt . count ( ) ) . toBe ( 1 ) ; await expect ( await titleTxt . textContent ( ) ) . toBe ( "SpaceX Data Viewer" ) ; const shipsList = page . locator ( "[aria-labelledby=ships-heading]" ) ; await expect ( await shipsList . count ( ) ) . toBe ( 1 ) ; const shipsListChildren = shipsList . locator ( "li" ) ; await expect ( await shipsListChildren . count ( ) ) . toBe ( 2 ) ; await expect ( await shipsListChildren . nth ( 0 ) . textContent ( ) ) . toBe ( "Ship One" ) ; await expect ( await shipsListChildren . nth ( 1 ) . textContent ( ) ) . toBe ( "Ship Two" ) ; } ) ; test ( "renders list with no ships" , async ( { page } ) => { await modifyGraphQLResponse ( page , "https://api.spacex.land/graphql" , ( body ) => { body . data . ships = [ ] ; return body ; } ) ; await page . goto ( `http://localhost` , { waitUntil : "networkidle" } ) ; const titleTxt = page . locator ( "h1" ) ; await expect ( await titleTxt . count ( ) ) . toBe ( 1 ) ; await expect ( await titleTxt . textContent ( ) ) . toBe ( "SpaceX Data Viewer" ) ; const shipsList = page . locator ( "[aria-labelledby=ships-heading]" ) ; await expect ( await shipsList . count ( ) ) . toBe ( 1 ) ; const shipsListChildren = shipsList . locator ( "li" ) ; await expect ( await shipsListChildren . count ( ) ) . toBe ( 0 ) ; } ) ;