From 3c1a859d449e38296654ec9bf6252072c88adf84 Mon Sep 17 00:00:00 2001 From: Cesare De Cal Date: Thu, 4 Jul 2024 07:05:24 +0200 Subject: [PATCH] add more e2e tests, add new script to package.json --- frontend/package.json | 3 +- frontend/src/components/table/table.tsx | 2 - frontend/src/swapi-people-columns.json | 106 ----------- frontend/src/swapi-people.json | 237 ------------------------ frontend/src/swapi-planets-columns.json | 100 ---------- frontend/src/swapi-planets.json | 222 ---------------------- frontend/tests/home.spec.ts | 65 ++++++- 7 files changed, 64 insertions(+), 671 deletions(-) delete mode 100644 frontend/src/swapi-people-columns.json delete mode 100644 frontend/src/swapi-people.json delete mode 100644 frontend/src/swapi-planets-columns.json delete mode 100644 frontend/src/swapi-planets.json diff --git a/frontend/package.json b/frontend/package.json index 00cadfd..09ad8b9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,7 +28,8 @@ "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", - "eject": "react-app-rewired eject" + "eject": "react-app-rewired eject", + "test:e2e": "npx playwright test" }, "eslintConfig": { "extends": [ diff --git a/frontend/src/components/table/table.tsx b/frontend/src/components/table/table.tsx index 06e321f..039bf41 100644 --- a/frontend/src/components/table/table.tsx +++ b/frontend/src/components/table/table.tsx @@ -18,8 +18,6 @@ export const DataTable: React.FC = ({ rows, columns, onSortChang return; } - console.log('hello sort!', model); - const sortItem = model[0]; onSortChange(sortItem.field, sortItem.sort); }; diff --git a/frontend/src/swapi-people-columns.json b/frontend/src/swapi-people-columns.json deleted file mode 100644 index 9e7e392..0000000 --- a/frontend/src/swapi-people-columns.json +++ /dev/null @@ -1,106 +0,0 @@ -[ - { - "field": "name", - "headerName": "Name", - "description": "The name of the character.", - "sortable": true, - "width": 150 - }, - { - "field": "height", - "headerName": "Height", - "description": "The height of the character in centimeters.", - "sortable": false, - "width": 150 - }, - { - "field": "mass", - "headerName": "Mass", - "description": "The mass of the character in kilograms.", - "sortable": false, - "width": 150 - }, - { - "field": "hair_color", - "headerName": "Hair Color", - "description": "The color of the character's hair.", - "sortable": false, - "width": 150 - }, - { - "field": "skin_color", - "headerName": "Skin Color", - "description": "The color of the character's skin.", - "sortable": false, - "width": 150 - }, - { - "field": "eye_color", - "headerName": "Eye Color", - "description": "The color of the character's eyes.", - "sortable": false, - "width": 150 - }, - { - "field": "birth_year", - "headerName": "Birth Year", - "description": "The birth year of the character.", - "sortable": false, - "width": 150 - }, - { - "field": "gender", - "headerName": "Gender", - "description": "The gender of the character.", - "sortable": false, - "width": 150 - }, - { - "field": "homeworld", - "headerName": "Homeworld", - "description": "The URL of the character's homeworld.", - "sortable": false, - "width": 150 - }, - { - "field": "films", - "headerName": "Films", - "description": "The URLs of the films the character appears in.", - "sortable": false - }, - { - "field": "vehicles", - "headerName": "Vehicles", - "description": "The URLs of the vehicles the character owns.", - "sortable": false, - "width": 150 - }, - { - "field": "starships", - "headerName": "Starships", - "description": "The URLs of the starships the character owns.", - "sortable": false, - "width": 150 - }, - { - "field": "created", - "headerName": "Created", - "description": "The date and time the character entry was created.", - "sortable": true, - "width": 150 - }, - { - "field": "edited", - "headerName": "Edited", - "description": "The date and time the character entry was last edited.", - "sortable": false, - "width": 150 - }, - { - "field": "url", - "headerName": "URL", - "description": "The URL of the character resource.", - "sortable": false, - "width": 150 - } -] diff --git a/frontend/src/swapi-people.json b/frontend/src/swapi-people.json deleted file mode 100644 index b925ba3..0000000 --- a/frontend/src/swapi-people.json +++ /dev/null @@ -1,237 +0,0 @@ -{ - "count": 82, - "next": "https://swapi.dev/api/people/?page=2", - "previous": null, - "results": [ - { - "name": "Luke Skywalker", - "height": "172", - "mass": "77", - "hair_color": "blond", - "skin_color": "fair", - "eye_color": "blue", - "birth_year": "19BBY", - "gender": "male", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/6/" - ], - "species": [], - "vehicles": ["https://swapi.dev/api/vehicles/14/", "https://swapi.dev/api/vehicles/30/"], - "starships": ["https://swapi.dev/api/starships/12/", "https://swapi.dev/api/starships/22/"], - "created": "2014-12-09T13:50:51.644000Z", - "edited": "2014-12-20T21:17:56.891000Z", - "url": "https://swapi.dev/api/people/1/" - }, - { - "name": "C-3PO", - "height": "167", - "mass": "75", - "hair_color": "n/a", - "skin_color": "gold", - "eye_color": "yellow", - "birth_year": "112BBY", - "gender": "n/a", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/4/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "species": ["https://swapi.dev/api/species/2/"], - "vehicles": [], - "starships": [], - "created": "2014-12-10T15:10:51.357000Z", - "edited": "2014-12-20T21:17:50.309000Z", - "url": "https://swapi.dev/api/people/2/" - }, - { - "name": "R2-D2", - "height": "96", - "mass": "32", - "hair_color": "n/a", - "skin_color": "white, blue", - "eye_color": "red", - "birth_year": "33BBY", - "gender": "n/a", - "homeworld": "https://swapi.dev/api/planets/8/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/4/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "species": ["https://swapi.dev/api/species/2/"], - "vehicles": [], - "starships": [], - "created": "2014-12-10T15:11:50.376000Z", - "edited": "2014-12-20T21:17:50.311000Z", - "url": "https://swapi.dev/api/people/3/" - }, - { - "name": "Darth Vader", - "height": "202", - "mass": "136", - "hair_color": "none", - "skin_color": "white", - "eye_color": "yellow", - "birth_year": "41.9BBY", - "gender": "male", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/6/" - ], - "species": [], - "vehicles": [], - "starships": ["https://swapi.dev/api/starships/13/"], - "created": "2014-12-10T15:18:20.704000Z", - "edited": "2014-12-20T21:17:50.313000Z", - "url": "https://swapi.dev/api/people/4/" - }, - { - "name": "Leia Organa", - "height": "150", - "mass": "49", - "hair_color": "brown", - "skin_color": "light", - "eye_color": "brown", - "birth_year": "19BBY", - "gender": "female", - "homeworld": "https://swapi.dev/api/planets/2/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/6/" - ], - "species": [], - "vehicles": ["https://swapi.dev/api/vehicles/30/"], - "starships": [], - "created": "2014-12-10T15:20:09.791000Z", - "edited": "2014-12-20T21:17:50.315000Z", - "url": "https://swapi.dev/api/people/5/" - }, - { - "name": "Owen Lars", - "height": "178", - "mass": "120", - "hair_color": "brown, grey", - "skin_color": "light", - "eye_color": "blue", - "birth_year": "52BBY", - "gender": "male", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "species": [], - "vehicles": [], - "starships": [], - "created": "2014-12-10T15:52:14.024000Z", - "edited": "2014-12-20T21:17:50.317000Z", - "url": "https://swapi.dev/api/people/6/" - }, - { - "name": "Beru Whitesun lars", - "height": "165", - "mass": "75", - "hair_color": "brown", - "skin_color": "light", - "eye_color": "blue", - "birth_year": "47BBY", - "gender": "female", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "species": [], - "vehicles": [], - "starships": [], - "created": "2014-12-10T15:53:41.121000Z", - "edited": "2014-12-20T21:17:50.319000Z", - "url": "https://swapi.dev/api/people/7/" - }, - { - "name": "R5-D4", - "height": "97", - "mass": "32", - "hair_color": "n/a", - "skin_color": "white, red", - "eye_color": "red", - "birth_year": "unknown", - "gender": "n/a", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": ["https://swapi.dev/api/films/1/"], - "species": ["https://swapi.dev/api/species/2/"], - "vehicles": [], - "starships": [], - "created": "2014-12-10T15:57:50.959000Z", - "edited": "2014-12-20T21:17:50.321000Z", - "url": "https://swapi.dev/api/people/8/" - }, - { - "name": "Biggs Darklighter", - "height": "183", - "mass": "84", - "hair_color": "black", - "skin_color": "light", - "eye_color": "brown", - "birth_year": "24BBY", - "gender": "male", - "homeworld": "https://swapi.dev/api/planets/1/", - "films": ["https://swapi.dev/api/films/1/"], - "species": [], - "vehicles": [], - "starships": ["https://swapi.dev/api/starships/12/"], - "created": "2014-12-10T15:59:50.509000Z", - "edited": "2014-12-20T21:17:50.323000Z", - "url": "https://swapi.dev/api/people/9/" - }, - { - "name": "Obi-Wan Kenobi", - "height": "182", - "mass": "77", - "hair_color": "auburn, white", - "skin_color": "fair", - "eye_color": "blue-gray", - "birth_year": "57BBY", - "gender": "male", - "homeworld": "https://swapi.dev/api/planets/20/", - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/4/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "species": [], - "vehicles": ["https://swapi.dev/api/vehicles/38/"], - "starships": [ - "https://swapi.dev/api/starships/48/", - "https://swapi.dev/api/starships/59/", - "https://swapi.dev/api/starships/64/", - "https://swapi.dev/api/starships/65/", - "https://swapi.dev/api/starships/74/" - ], - "created": "2014-12-10T16:16:29.192000Z", - "edited": "2014-12-20T21:17:50.325000Z", - "url": "https://swapi.dev/api/people/10/" - } - ] -} diff --git a/frontend/src/swapi-planets-columns.json b/frontend/src/swapi-planets-columns.json deleted file mode 100644 index 780d5c4..0000000 --- a/frontend/src/swapi-planets-columns.json +++ /dev/null @@ -1,100 +0,0 @@ -[ - { - "field": "name", - "headerName": "Name", - "description": "The name of the planet.", - "sortable": false, - "width": 150 - }, - { - "field": "rotation_period", - "headerName": "Rotation Period", - "description": "The length of a day on the planet in hours.", - "sortable": false, - "width": 150 - }, - { - "field": "orbital_period", - "headerName": "Orbital Period", - "description": "The time it takes for the planet to complete one orbit around its star in days.", - "sortable": false, - "width": 150 - }, - { - "field": "diameter", - "headerName": "Diameter", - "description": "The diameter of the planet in kilometers.", - "sortable": false, - "width": 150 - }, - { - "field": "climate", - "headerName": "Climate", - "description": "The typical climate of the planet.", - "sortable": false, - "width": 150 - }, - { - "field": "gravity", - "headerName": "Gravity", - "description": "The gravitational force experienced on the planet's surface.", - "sortable": false, - "width": 150 - }, - { - "field": "terrain", - "headerName": "Terrain", - "description": "The main types of terrain on the planet.", - "sortable": false, - "width": 150 - }, - { - "field": "surface_water", - "headerName": "Surface Water", - "description": "The percentage of the planet's surface covered in water.", - "sortable": false, - "width": 150 - }, - { - "field": "population", - "headerName": "Population", - "description": "The estimated population of the planet.", - "sortable": false, - "width": 150 - }, - { - "field": "residents", - "headerName": "Residents", - "description": "The URLs of the residents who inhabit the planet.", - "sortable": false, - "width": 150 - }, - { - "field": "films", - "headerName": "Films", - "description": "The URLs of the films in which the planet appears.", - "sortable": false, - "width": 150 - }, - { - "field": "created", - "headerName": "Created", - "description": "The date and time when the planet entry was created.", - "sortable": false, - "width": 150 - }, - { - "field": "edited", - "headerName": "Edited", - "description": "The date and time when the planet entry was last edited.", - "sortable": false, - "width": 150 - }, - { - "field": "url", - "headerName": "URL", - "description": "The URL of the planet resource.", - "sortable": false, - "width": 150 - } -] diff --git a/frontend/src/swapi-planets.json b/frontend/src/swapi-planets.json deleted file mode 100644 index e2ad267..0000000 --- a/frontend/src/swapi-planets.json +++ /dev/null @@ -1,222 +0,0 @@ -{ - "count": 60, - "next": "https://swapi.dev/api/planets/?page=2", - "previous": null, - "results": [ - { - "name": "Tatooine", - "rotation_period": "23", - "orbital_period": "304", - "diameter": "10465", - "climate": "arid", - "gravity": "1 standard", - "terrain": "desert", - "surface_water": "1", - "population": "200000", - "residents": [ - "https://swapi.dev/api/people/1/", - "https://swapi.dev/api/people/2/", - "https://swapi.dev/api/people/4/", - "https://swapi.dev/api/people/6/", - "https://swapi.dev/api/people/7/", - "https://swapi.dev/api/people/8/", - "https://swapi.dev/api/people/9/", - "https://swapi.dev/api/people/11/", - "https://swapi.dev/api/people/43/", - "https://swapi.dev/api/people/62/" - ], - "films": [ - "https://swapi.dev/api/films/1/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/4/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "created": "2014-12-09T13:50:49.641000Z", - "edited": "2014-12-20T20:58:18.411000Z", - "url": "https://swapi.dev/api/planets/1/" - }, - { - "name": "Alderaan", - "rotation_period": "24", - "orbital_period": "364", - "diameter": "12500", - "climate": "temperate", - "gravity": "1 standard", - "terrain": "grasslands, mountains", - "surface_water": "40", - "population": "2000000000", - "residents": [ - "https://swapi.dev/api/people/5/", - "https://swapi.dev/api/people/68/", - "https://swapi.dev/api/people/81/" - ], - "films": ["https://swapi.dev/api/films/1/", "https://swapi.dev/api/films/6/"], - "created": "2014-12-10T11:35:48.479000Z", - "edited": "2014-12-20T20:58:18.420000Z", - "url": "https://swapi.dev/api/planets/2/" - }, - { - "name": "Yavin IV", - "rotation_period": "24", - "orbital_period": "4818", - "diameter": "10200", - "climate": "temperate, tropical", - "gravity": "1 standard", - "terrain": "jungle, rainforests", - "surface_water": "8", - "population": "1000", - "residents": [], - "films": ["https://swapi.dev/api/films/1/"], - "created": "2014-12-10T11:37:19.144000Z", - "edited": "2014-12-20T20:58:18.421000Z", - "url": "https://swapi.dev/api/planets/3/" - }, - { - "name": "Hoth", - "rotation_period": "23", - "orbital_period": "549", - "diameter": "7200", - "climate": "frozen", - "gravity": "1.1 standard", - "terrain": "tundra, ice caves, mountain ranges", - "surface_water": "100", - "population": "unknown", - "residents": [], - "films": ["https://swapi.dev/api/films/2/"], - "created": "2014-12-10T11:39:13.934000Z", - "edited": "2014-12-20T20:58:18.423000Z", - "url": "https://swapi.dev/api/planets/4/" - }, - { - "name": "Dagobah", - "rotation_period": "23", - "orbital_period": "341", - "diameter": "8900", - "climate": "murky", - "gravity": "N/A", - "terrain": "swamp, jungles", - "surface_water": "8", - "population": "unknown", - "residents": [], - "films": [ - "https://swapi.dev/api/films/2/", - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/6/" - ], - "created": "2014-12-10T11:42:22.590000Z", - "edited": "2014-12-20T20:58:18.425000Z", - "url": "https://swapi.dev/api/planets/5/" - }, - { - "name": "Bespin", - "rotation_period": "12", - "orbital_period": "5110", - "diameter": "118000", - "climate": "temperate", - "gravity": "1.5 (surface), 1 standard (Cloud City)", - "terrain": "gas giant", - "surface_water": "0", - "population": "6000000", - "residents": ["https://swapi.dev/api/people/26/"], - "films": ["https://swapi.dev/api/films/2/"], - "created": "2014-12-10T11:43:55.240000Z", - "edited": "2014-12-20T20:58:18.427000Z", - "url": "https://swapi.dev/api/planets/6/" - }, - { - "name": "Endor", - "rotation_period": "18", - "orbital_period": "402", - "diameter": "4900", - "climate": "temperate", - "gravity": "0.85 standard", - "terrain": "forests, mountains, lakes", - "surface_water": "8", - "population": "30000000", - "residents": ["https://swapi.dev/api/people/30/"], - "films": ["https://swapi.dev/api/films/3/"], - "created": "2014-12-10T11:50:29.349000Z", - "edited": "2014-12-20T20:58:18.429000Z", - "url": "https://swapi.dev/api/planets/7/" - }, - { - "name": "Naboo", - "rotation_period": "26", - "orbital_period": "312", - "diameter": "12120", - "climate": "temperate", - "gravity": "1 standard", - "terrain": "grassy hills, swamps, forests, mountains", - "surface_water": "12", - "population": "4500000000", - "residents": [ - "https://swapi.dev/api/people/3/", - "https://swapi.dev/api/people/21/", - "https://swapi.dev/api/people/35/", - "https://swapi.dev/api/people/36/", - "https://swapi.dev/api/people/37/", - "https://swapi.dev/api/people/38/", - "https://swapi.dev/api/people/39/", - "https://swapi.dev/api/people/42/", - "https://swapi.dev/api/people/60/", - "https://swapi.dev/api/people/61/", - "https://swapi.dev/api/people/66/" - ], - "films": [ - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/4/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "created": "2014-12-10T11:52:31.066000Z", - "edited": "2014-12-20T20:58:18.430000Z", - "url": "https://swapi.dev/api/planets/8/" - }, - { - "name": "Coruscant", - "rotation_period": "24", - "orbital_period": "368", - "diameter": "12240", - "climate": "temperate", - "gravity": "1 standard", - "terrain": "cityscape, mountains", - "surface_water": "unknown", - "population": "1000000000000", - "residents": [ - "https://swapi.dev/api/people/34/", - "https://swapi.dev/api/people/55/", - "https://swapi.dev/api/people/74/" - ], - "films": [ - "https://swapi.dev/api/films/3/", - "https://swapi.dev/api/films/4/", - "https://swapi.dev/api/films/5/", - "https://swapi.dev/api/films/6/" - ], - "created": "2014-12-10T11:54:13.921000Z", - "edited": "2014-12-20T20:58:18.432000Z", - "url": "https://swapi.dev/api/planets/9/" - }, - { - "name": "Kamino", - "rotation_period": "27", - "orbital_period": "463", - "diameter": "19720", - "climate": "temperate", - "gravity": "1 standard", - "terrain": "ocean", - "surface_water": "100", - "population": "1000000000", - "residents": [ - "https://swapi.dev/api/people/22/", - "https://swapi.dev/api/people/72/", - "https://swapi.dev/api/people/73/" - ], - "films": ["https://swapi.dev/api/films/5/"], - "created": "2014-12-10T12:45:06.577000Z", - "edited": "2014-12-20T20:58:18.434000Z", - "url": "https://swapi.dev/api/planets/10/" - } - ] -} diff --git a/frontend/tests/home.spec.ts b/frontend/tests/home.spec.ts index fd38169..e357579 100644 --- a/frontend/tests/home.spec.ts +++ b/frontend/tests/home.spec.ts @@ -1,6 +1,7 @@ import { test, expect } from '@playwright/test'; test('has header', async ({ page }) => { + // The frontend app and the backend app should be running await page.goto('http://localhost:3000'); // The title should be visible @@ -11,8 +12,7 @@ test('has header', async ({ page }) => { await expect(page.getByRole('tab', { name: '🪐 PLANETS' })).toBeVisible(); }); - -test('people happy path', async ({ page }) => { +test('display people data and search functionality', async ({ page }) => { await page.goto('http://localhost:3000'); // Luke Skywalker should be visible @@ -27,7 +27,7 @@ test('people happy path', async ({ page }) => { await expect(page.getByText('Luke Skywalker')).not.toBeVisible(); }); -test('planets happy path', async ({ page }) => { +test('display planets data and search functionality', async ({ page }) => { await page.goto('http://localhost:3000'); await page.getByRole('tab', { name: '🪐 PLANETS' }).click(); @@ -42,3 +42,62 @@ test('planets happy path', async ({ page }) => { await expect(page.getByText('Felucia')).toBeVisible(); await expect(page.getByText('Tatooine')).not.toBeVisible(); }); + +test('switching tabs should maintain search bar state', async ({ page }) => { + await page.goto('http://localhost:3000'); + + const peopleSearchBar = page.getByPlaceholder('Search people...'); + await peopleSearchBar.fill("hello"); + + await page.getByRole('tab', { name: '🪐 PLANETS' }).click(); + + const planetsSearchBar = page.getByPlaceholder('Search planets...'); + await planetsSearchBar.fill("world"); + + // Go back to first tab ("people") and check if the search bar input is still there + await page.getByRole('tab', { name: '🤖 PEOPLE' }).click(); + await expect(peopleSearchBar).toHaveValue("hello"); + + // Go back to second tab ("planets") and check if the search bar input is still there + await page.getByRole('tab', { name: '🪐 PLANETS' }).click(); + await expect(planetsSearchBar).toHaveValue("world"); +}); + +test('pagination', async ({ page }) => { + await page.goto('http://localhost:3000'); + + // First page + await expect(page.getByText('Luke Skywalker')).toBeVisible(); + await expect(page.getByText('Jabba Desilijic Tiure')).not.toBeVisible(); + + // Go to second page + await page.getByRole('button', { name: 'Next page' }).click(); + + // Second page + await expect(page.getByText('Jabba Desilijic Tiure')).toBeVisible(); + await expect(page.getByText('Luke Skywalker')).not.toBeVisible(); +}); + +test('sorting', async ({ page }) => { + await page.goto('http://localhost:3000'); + + // Initial state + await expect(page.getByText('Luke Skywalker')).toBeVisible(); + await expect(page.getByText('Ackbar')).not.toBeVisible(); + await expect(page.getByText('Zam')).not.toBeVisible(); + + const nameColumnHeader = page.getByRole('columnheader', { name: 'Name'}); + + await nameColumnHeader.click(); + + // Sorting (ascending order) + await expect(page.getByText('Ackbar')).toBeVisible(); + await expect(page.getByText('Luke Skywalker')).not.toBeVisible(); + + // Update sort order (descending order) + await nameColumnHeader.click(); + + await expect(page.getByText('Zam')).toBeVisible(); + await expect(page.getByText('Luke Skywalker')).not.toBeVisible(); + await expect(page.getByText('Ackbar')).not.toBeVisible(); +});