Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)
feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
206
apps/partner-sas/tests/booking-widget.spec.ts
Normal file
206
apps/partner-sas/tests/booking-widget.spec.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
import { expect, type Page, test } from "@playwright/test"
|
||||
|
||||
import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
|
||||
import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
|
||||
|
||||
test("can make a search with city", async ({ page }) => {
|
||||
await page.goto("/")
|
||||
|
||||
// Search for city
|
||||
const combobox = page.getByRole("combobox", { name: /where to/i })
|
||||
await combobox.click()
|
||||
await combobox.fill("stockholm")
|
||||
await page.getByRole("option", { name: /stockholm sweden/i }).click()
|
||||
|
||||
// Open datepicker
|
||||
// If we had better accessibility for our datepicker this would be so much easier
|
||||
const today = new Date()
|
||||
const tomorrow = new Date(today)
|
||||
tomorrow.setDate(today.getDate() + 1)
|
||||
|
||||
await page
|
||||
.getByRole("button", {
|
||||
name: `${formatDate(today)} - ${formatDate(tomorrow)}`,
|
||||
})
|
||||
.click()
|
||||
|
||||
// Select future dates
|
||||
const twoDaysFromNow = new Date(today)
|
||||
twoDaysFromNow.setDate(today.getDate() + 2)
|
||||
await clickDatePickerDate(page, twoDaysFromNow)
|
||||
|
||||
const threeDaysFromNow = new Date(today)
|
||||
threeDaysFromNow.setDate(today.getDate() + 3)
|
||||
await clickDatePickerDate(page, threeDaysFromNow)
|
||||
|
||||
await page
|
||||
.getByRole("button", {
|
||||
name: /select dates/i,
|
||||
})
|
||||
.click()
|
||||
|
||||
// Select rooms and guests
|
||||
// Once again, better accessibility would make this so much easier
|
||||
await page.getByRole("button", { name: /1 room, 1 adult/i }).click()
|
||||
const roomsDialog = page.getByRole("dialog")
|
||||
const room1section = roomsDialog.getByText(/room 1/i).locator("..")
|
||||
|
||||
// Add 1 adult
|
||||
await room1section
|
||||
.locator("section")
|
||||
.filter({ hasText: /adults/i })
|
||||
.getByRole("button", { name: /add/i })
|
||||
.click()
|
||||
|
||||
// Add 1 child aged 10
|
||||
await room1section
|
||||
.locator("section")
|
||||
.filter({ hasText: /children/i })
|
||||
.getByRole("button", { name: /add/i })
|
||||
.click()
|
||||
await room1section.getByRole("button", { name: /age/i }).click()
|
||||
await page.getByRole("option", { name: /10/i }).click()
|
||||
|
||||
await page.getByRole("button", { name: /add room/i }).click()
|
||||
|
||||
const room2section = roomsDialog.getByText(/room 2/i).locator("..")
|
||||
|
||||
// Add 2 adults
|
||||
await room2section
|
||||
.locator("section")
|
||||
.filter({ hasText: /adults/i })
|
||||
.getByRole("button", { name: /add/i })
|
||||
.click({ clickCount: 2 })
|
||||
|
||||
await roomsDialog.getByRole("button", { name: /done/i }).click()
|
||||
|
||||
await page.getByRole("button", { name: /search/i }).click()
|
||||
|
||||
// Assert that we navigated to the correct URL
|
||||
const expectedSearchParams = serializeBookingSearchParams({
|
||||
rooms: [
|
||||
{
|
||||
adults: 2,
|
||||
childrenInRoom: [{ age: 10, bed: ChildBedMapEnum.IN_EXTRA_BED }],
|
||||
},
|
||||
{
|
||||
adults: 3,
|
||||
childrenInRoom: [],
|
||||
},
|
||||
],
|
||||
fromDate: twoDaysFromNow.toISOString().split("T")[0],
|
||||
toDate: threeDaysFromNow.toISOString().split("T")[0],
|
||||
city: "STOCKHOLM",
|
||||
})
|
||||
|
||||
await expect(page).toHaveURL(
|
||||
`/en/hotelreservation/select-hotel?${expectedSearchParams}`
|
||||
)
|
||||
})
|
||||
|
||||
test("can make a search with hotel", async ({ page }) => {
|
||||
await page.goto("/")
|
||||
|
||||
// Search for hotel
|
||||
const combobox = page.getByRole("combobox", { name: /where to/i })
|
||||
await combobox.click()
|
||||
await combobox.fill("downtown camper")
|
||||
await page.getByRole("option", { name: /downtown camper/i }).click()
|
||||
|
||||
// Open datepicker
|
||||
// If we had better accessibility for our datepicker this would be so much easier
|
||||
const today = new Date()
|
||||
const tomorrow = new Date(today)
|
||||
tomorrow.setDate(today.getDate() + 1)
|
||||
|
||||
await page
|
||||
.getByRole("button", {
|
||||
name: `${formatDate(today)} - ${formatDate(tomorrow)}`,
|
||||
})
|
||||
.click()
|
||||
|
||||
// Select future dates
|
||||
const twoDaysFromNow = new Date(today)
|
||||
twoDaysFromNow.setDate(today.getDate() + 2)
|
||||
await clickDatePickerDate(page, twoDaysFromNow)
|
||||
|
||||
const threeDaysFromNow = new Date(today)
|
||||
threeDaysFromNow.setDate(today.getDate() + 3)
|
||||
await clickDatePickerDate(page, threeDaysFromNow)
|
||||
|
||||
await page
|
||||
.getByRole("button", {
|
||||
name: /select dates/i,
|
||||
})
|
||||
.click()
|
||||
|
||||
// Select rooms and guests
|
||||
// Once again, better accessibility would make this so much easier
|
||||
await page.getByRole("button", { name: /1 room, 1 adult/i }).click()
|
||||
const roomsDialog = page.getByRole("dialog")
|
||||
const room1section = roomsDialog.getByText(/room 1/i).locator("..")
|
||||
|
||||
// Add 1 adult
|
||||
await room1section
|
||||
.locator("section")
|
||||
.filter({ hasText: /adults/i })
|
||||
.getByRole("button", { name: /add/i })
|
||||
.click()
|
||||
|
||||
// Add 1 child aged 10
|
||||
await room1section
|
||||
.locator("section")
|
||||
.filter({ hasText: /children/i })
|
||||
.getByRole("button", { name: /add/i })
|
||||
.click()
|
||||
await room1section.getByRole("button", { name: /age/i }).click()
|
||||
await page.getByRole("option", { name: /10/i }).click()
|
||||
|
||||
await page.getByRole("button", { name: /add room/i }).click()
|
||||
|
||||
const room2section = roomsDialog.getByText(/room 2/i).locator("..")
|
||||
|
||||
// Add 2 adults
|
||||
await room2section
|
||||
.locator("section")
|
||||
.filter({ hasText: /adults/i })
|
||||
.getByRole("button", { name: /add/i })
|
||||
.click({ clickCount: 2 })
|
||||
|
||||
await roomsDialog.getByRole("button", { name: /done/i }).click()
|
||||
|
||||
await page.getByRole("button", { name: /search/i }).click()
|
||||
|
||||
// Assert that we navigated to the correct URL
|
||||
const expectedSearchParams = serializeBookingSearchParams({
|
||||
rooms: [
|
||||
{
|
||||
adults: 2,
|
||||
childrenInRoom: [{ age: 10, bed: ChildBedMapEnum.IN_EXTRA_BED }],
|
||||
},
|
||||
{
|
||||
adults: 3,
|
||||
childrenInRoom: [],
|
||||
},
|
||||
],
|
||||
fromDate: twoDaysFromNow.toISOString().split("T")[0],
|
||||
toDate: threeDaysFromNow.toISOString().split("T")[0],
|
||||
hotelId: "879", // Downtown Camper
|
||||
})
|
||||
|
||||
await expect(page).toHaveURL(
|
||||
`/en/hotelreservation/select-rate?${expectedSearchParams}`
|
||||
)
|
||||
})
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
const day = date.getDate()
|
||||
const month = date.toLocaleDateString("en-US", { month: "short" })
|
||||
const weekday = date.toLocaleDateString("en-US", { weekday: "short" })
|
||||
return `${weekday}, ${day} ${month}`
|
||||
}
|
||||
|
||||
const clickDatePickerDate = async (page: Page, date: Date) => {
|
||||
const dateString = date.toISOString().split("T")[0] // YYYY-MM-DD format
|
||||
await page.locator(`[data-day="${dateString}"]`).getByRole("button").click()
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
|
||||
test("has text", async ({ page }) => {
|
||||
await page.goto("/")
|
||||
|
||||
await expect(page.getByText(/hello world/i)).toBeVisible()
|
||||
})
|
||||
Reference in New Issue
Block a user