test: Upcoming bookings sorting order (#10950)
* Fix order by for bookings array Fix orderBy for bookings * Test * Text change * Add comments
This commit is contained in:
parent
1727eb5625
commit
25d90e3e12
|
@ -336,7 +336,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
<tr className="hover:bg-muted group flex flex-col sm:flex-row">
|
<tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
|
||||||
<td
|
<td
|
||||||
className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
|
className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
|
||||||
onClick={onClickTableData}>
|
onClick={onClickTableData}>
|
||||||
|
|
|
@ -179,7 +179,7 @@ export default function Bookings() {
|
||||||
)}
|
)}
|
||||||
<div className="pt-2 xl:pt-0">
|
<div className="pt-2 xl:pt-0">
|
||||||
<div className="border-subtle overflow-hidden rounded-md border">
|
<div className="border-subtle overflow-hidden rounded-md border">
|
||||||
<table className="w-full max-w-full table-fixed">
|
<table data-testid={`${status}-bookings`} className="w-full max-w-full table-fixed">
|
||||||
<tbody className="bg-default divide-subtle divide-y" data-testid="bookings">
|
<tbody className="bg-default divide-subtle divide-y" data-testid="bookings">
|
||||||
{query.data.pages.map((page, index) => (
|
{query.data.pages.map((page, index) => (
|
||||||
<Fragment key={index}>
|
<Fragment key={index}>
|
||||||
|
|
|
@ -0,0 +1,113 @@
|
||||||
|
import { expect } from "@playwright/test";
|
||||||
|
|
||||||
|
import { BookingStatus } from "@calcom/prisma/client";
|
||||||
|
|
||||||
|
import type { Fixtures } from "./lib/fixtures";
|
||||||
|
import { test } from "./lib/fixtures";
|
||||||
|
|
||||||
|
test.afterEach(({ users }) => users.deleteAll());
|
||||||
|
|
||||||
|
test.describe("Bookings", () => {
|
||||||
|
test.describe("Upcoming bookings", () => {
|
||||||
|
test("show attendee bookings and organizer bookings in asc order by startDate", async ({
|
||||||
|
page,
|
||||||
|
users,
|
||||||
|
bookings,
|
||||||
|
}) => {
|
||||||
|
const firstUser = await users.create();
|
||||||
|
const secondUser = await users.create();
|
||||||
|
|
||||||
|
const bookingWhereFirstUserIsOrganizerFixture = await createBooking({
|
||||||
|
title: "Booking as organizer",
|
||||||
|
bookingsFixture: bookings,
|
||||||
|
// Create a booking 3 days from today
|
||||||
|
relativeDate: 3,
|
||||||
|
organizer: firstUser,
|
||||||
|
organizerEventType: firstUser.eventTypes[0],
|
||||||
|
attendees: [
|
||||||
|
{ name: "First", email: "first@cal.com", timeZone: "Europe/Berlin" },
|
||||||
|
{ name: "Second", email: "second@cal.com", timeZone: "Europe/Berlin" },
|
||||||
|
{ name: "Third", email: "third@cal.com", timeZone: "Europe/Berlin" },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const bookingWhereFirstUserIsOrganizer = await bookingWhereFirstUserIsOrganizerFixture.self();
|
||||||
|
|
||||||
|
const bookingWhereFirstUserIsAttendeeFixture = await createBooking({
|
||||||
|
title: "Booking as attendee",
|
||||||
|
bookingsFixture: bookings,
|
||||||
|
organizer: secondUser,
|
||||||
|
// Booking created 2 days from today
|
||||||
|
relativeDate: 2,
|
||||||
|
organizerEventType: secondUser.eventTypes[0],
|
||||||
|
attendees: [
|
||||||
|
{ name: "OrganizerAsBooker", email: firstUser.email, timeZone: "Europe/Berlin" },
|
||||||
|
{ name: "Second", email: "second@cal.com", timeZone: "Europe/Berlin" },
|
||||||
|
{ name: "Third", email: "third@cal.com", timeZone: "Europe/Berlin" },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const bookingWhereFirstUserIsAttendee = await bookingWhereFirstUserIsAttendeeFixture.self();
|
||||||
|
|
||||||
|
await firstUser.apiLogin();
|
||||||
|
await page.goto(`/bookings/upcoming`);
|
||||||
|
const upcomingBookings = page.locator('[data-testid="upcoming-bookings"]');
|
||||||
|
const firstUpcomingBooking = upcomingBookings.locator('[data-testid="booking-item"]').nth(0);
|
||||||
|
const secondUpcomingBooking = upcomingBookings.locator('[data-testid="booking-item"]').nth(1);
|
||||||
|
await expect(
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
firstUpcomingBooking.locator(`text=${bookingWhereFirstUserIsAttendee!.title}`)
|
||||||
|
).toBeVisible();
|
||||||
|
await expect(
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
secondUpcomingBooking.locator(`text=${bookingWhereFirstUserIsOrganizer!.title}`)
|
||||||
|
).toBeVisible();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function createBooking({
|
||||||
|
bookingsFixture,
|
||||||
|
organizer,
|
||||||
|
organizerEventType,
|
||||||
|
attendees,
|
||||||
|
/**
|
||||||
|
* Relative date from today
|
||||||
|
* 0 means today
|
||||||
|
* 1 means tomorrow
|
||||||
|
*/
|
||||||
|
relativeDate = 0,
|
||||||
|
durationMins = 30,
|
||||||
|
title,
|
||||||
|
}: {
|
||||||
|
bookingsFixture: Fixtures["bookings"];
|
||||||
|
organizer: {
|
||||||
|
id: number;
|
||||||
|
username: string | null;
|
||||||
|
};
|
||||||
|
organizerEventType: {
|
||||||
|
id: number;
|
||||||
|
};
|
||||||
|
attendees: {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
timeZone: string;
|
||||||
|
}[];
|
||||||
|
relativeDate?: number;
|
||||||
|
durationMins?: number;
|
||||||
|
title: string;
|
||||||
|
}) {
|
||||||
|
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||||
|
const bookingDurationMs = durationMins * 60 * 1000;
|
||||||
|
const startTime = new Date(Date.now() + relativeDate * DAY_MS);
|
||||||
|
const endTime = new Date(Date.now() + relativeDate * DAY_MS + bookingDurationMs);
|
||||||
|
return await bookingsFixture.create(organizer.id, organizer.username, organizerEventType.id, {
|
||||||
|
title,
|
||||||
|
status: BookingStatus.ACCEPTED,
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
attendees: {
|
||||||
|
createMany: {
|
||||||
|
data: [...attendees],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
|
@ -19,9 +19,12 @@ export const createBookingsFixture = (page: Page) => {
|
||||||
username: string | null,
|
username: string | null,
|
||||||
eventTypeId = -1,
|
eventTypeId = -1,
|
||||||
{
|
{
|
||||||
|
title = "",
|
||||||
rescheduled = false,
|
rescheduled = false,
|
||||||
paid = false,
|
paid = false,
|
||||||
status = "ACCEPTED",
|
status = "ACCEPTED",
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
attendees = {
|
attendees = {
|
||||||
create: {
|
create: {
|
||||||
email: "attendee@example.com",
|
email: "attendee@example.com",
|
||||||
|
@ -39,9 +42,9 @@ export const createBookingsFixture = (page: Page) => {
|
||||||
const booking = await prisma.booking.create({
|
const booking = await prisma.booking.create({
|
||||||
data: {
|
data: {
|
||||||
uid: uid,
|
uid: uid,
|
||||||
title: "30min",
|
title: title || "30min",
|
||||||
startTime: startDate,
|
startTime: startTime || startDate,
|
||||||
endTime: endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
|
endTime: endTime || endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
|
||||||
user: {
|
user: {
|
||||||
connect: {
|
connect: {
|
||||||
id: userId,
|
id: userId,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user