eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#708 apply strictier linting rules (#717)

Browse Source 
* #708 apply strictier linting rules and fix simple eslint bugs

* #708 fix eslint errors relate to promise

* #708 fix eslint import/no-extraneous-dependencies

* #708 fix eslint errors of react-hook

* #708 enable eslint check for typescript

---------

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
This commit is contained in:
lethemanh
2026-04-01 22:15:10 +07:00
committed by GitHub
parent 2bff6aae78
commit cadfa70e60
321 changed files with 27452 additions and 27600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/features/Calendars/CalendarAPI.test.tsx
+124 -124
View File
@@ -6,197 +6,197 @@ import {
getSecretLink,
postCalendar,
proppatchCalendar,
removeCalendar,
} from "@/features/Calendars/CalendarApi";
import { clientConfig } from "@/features/User/oidcAuth";
import { api } from "@/utils/apiUtils";
clientConfig.url = "https://example.com";
removeCalendar
} from '@/features/Calendars/CalendarApi'
import { clientConfig } from '@/features/User/oidcAuth'
import { api } from '@/utils/apiUtils'
clientConfig.url = 'https://example.com'
jest.mock("@/utils/apiUtils");
jest.mock('@/utils/apiUtils')
describe("Calendar API", () => {
describe('Calendar API', () => {
afterEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
it("fetches calendar list for a user", async () => {
const mockUserId = "user123";
const mockResponse = [{ id: "calendar1" }, { id: "calendar2" }];
it('fetches calendar list for a user', async () => {
const mockUserId = 'user123'
const mockResponse = [{ id: 'calendar1' }, { id: 'calendar2' }]
(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockResponse),
});
;(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockResponse)
})
const calendars = await getCalendars(mockUserId);
const calendars = await getCalendars(mockUserId)
expect(api.get).toHaveBeenCalledWith(
`dav/calendars/${mockUserId}.json?personal=true&sharedDelegationStatus=accepted&sharedPublicSubscription=true&withRights=true`,
{
headers: { Accept: "application/calendar+json" },
headers: { Accept: 'application/calendar+json' }
}
);
expect(calendars).toEqual(mockResponse);
});
)
expect(calendars).toEqual(mockResponse)
})
it("fetches calendar events for a given ID and match window", async () => {
const calendarId = "calendar1";
const match = { start: "2025-07-01", end: "2025-07-31" };
const mockCalendarData = { events: ["event1", "event2"] };
it('fetches calendar events for a given ID and match window', async () => {
const calendarId = 'calendar1'
const match = { start: '2025-07-01', end: '2025-07-31' }
const mockCalendarData = { events: ['event1', 'event2'] }
(api as unknown as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockCalendarData),
});
;(api as unknown as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockCalendarData)
})
const result = await getCalendar(calendarId, match);
const result = await getCalendar(calendarId, match)
expect(api).toHaveBeenCalledWith(`dav/calendars/${calendarId}.json`, {
method: "REPORT",
method: 'REPORT',
headers: {
Accept: "application/json, text/plain, */*",
Accept: 'application/json, text/plain, */*'
},
body: JSON.stringify({ match }),
});
body: JSON.stringify({ match })
})
expect(result).toEqual(mockCalendarData);
});
it("postCalendar", async () => {
const calId = "calId";
const userId = "userId";
const color = { light: "calId" };
const name = "new cal";
const desc = "desc";
expect(result).toEqual(mockCalendarData)
})
it('postCalendar', async () => {
const calId = 'calId'
const userId = 'userId'
const color = { light: 'calId' }
const name = 'new cal'
const desc = 'desc'
const result = await postCalendar(userId, calId, color, name, desc);
const result = await postCalendar(userId, calId, color, name, desc)
expect(api.post).toHaveBeenCalledWith(`dav/calendars/${userId}.json`, {
headers: {
Accept: "application/json, text/plain, */*",
Accept: 'application/json, text/plain, */*'
},
body: JSON.stringify({
id: "calId",
"dav:name": "new cal",
"apple:color": "calId",
"caldav:description": "desc",
}),
});
});
it("patch Calendar", async () => {
const calId = "calId";
const calLink = "/calendars/calId.json";
const color = { light: "calIdLight", dark: "calIdDark" };
const name = "new cal";
const desc = "desc";
id: 'calId',
'dav:name': 'new cal',
'apple:color': 'calId',
'caldav:description': 'desc'
})
})
})
it('patch Calendar', async () => {
const calId = 'calId'
const calLink = '/calendars/calId.json'
const color = { light: 'calIdLight', dark: 'calIdDark' }
const name = 'new cal'
const desc = 'desc'
const result = await proppatchCalendar(calLink, { color, name, desc });
const result = await proppatchCalendar(calLink, { color, name, desc })
expect(api).toHaveBeenCalledWith(`dav${calLink}`, {
method: "PROPPATCH",
method: 'PROPPATCH',
headers: {
Accept: "application/json, text/plain, */*",
Accept: 'application/json, text/plain, */*'
},
body: JSON.stringify({
"dav:name": "new cal",
"caldav:description": "desc",
"apple:color": "calIdLight",
}),
});
});
'dav:name': 'new cal',
'caldav:description': 'desc',
'apple:color': 'calIdLight'
})
})
})
it("remove Calendar", async () => {
const calLink = "/calendars/calId.json";
const result = await removeCalendar(calLink);
it('remove Calendar', async () => {
const calLink = '/calendars/calId.json'
const result = await removeCalendar(calLink)
expect(api).toHaveBeenCalledWith(`dav${calLink}`, {
method: "DELETE",
method: 'DELETE',
headers: {
Accept: "application/json, text/plain, */*",
},
});
});
Accept: 'application/json, text/plain, */*'
}
})
})
it("get secret link without reset", async () => {
const calLink = "/calendars/calId.json";
(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue("link"),
});
it('get secret link without reset', async () => {
const calLink = '/calendars/calId.json'
;(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue('link')
})
const noreset = await getSecretLink(calLink, false);
const noreset = await getSecretLink(calLink, false)
expect(api.get).toHaveBeenCalledWith(
`calendar/api${calLink}/secret-link?shouldResetLink=false`,
{
headers: {
Accept: "application/json, text/plain, */*",
},
Accept: 'application/json, text/plain, */*'
}
}
);
});
it("get secret link with reset", async () => {
const calLink = "/calendars/calId.json";
(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue("link"),
});
const reset = await getSecretLink(calLink, true);
)
})
it('get secret link with reset', async () => {
const calLink = '/calendars/calId.json'
;(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue('link')
})
const reset = await getSecretLink(calLink, true)
expect(api.get).toHaveBeenCalledWith(
`calendar/api${calLink}/secret-link?shouldResetLink=true`,
{
headers: {
Accept: "application/json, text/plain, */*",
},
Accept: 'application/json, text/plain, */*'
}
}
);
});
)
})
it("get export data ", async () => {
const calLink = "/calendars/calId.json";
(api.get as jest.Mock).mockReturnValue({
text: jest.fn().mockResolvedValue("data"),
});
const data = await exportCalendar(calLink);
it('get export data ', async () => {
const calLink = '/calendars/calId.json'
;(api.get as jest.Mock).mockReturnValue({
text: jest.fn().mockResolvedValue('data')
})
const data = await exportCalendar(calLink)
expect(api.get).toHaveBeenCalledWith(`dav${calLink}?export`, {
headers: {
Accept: "application/calendar",
},
});
});
Accept: 'application/calendar'
}
})
})
it("When adding a sharedCal with #default #default is preserved", async () => {
const mockApiPost = jest.spyOn(api, "post");
it('When adding a sharedCal with #default #default is preserved', async () => {
const mockApiPost = jest.spyOn(api, 'post')
const calData = {
cal: {
id: "cal123",
"dav:name": "#default",
"apple:color": "#FF5733",
"caldav:description": "Default calendar",
id: 'cal123',
'dav:name': '#default',
'apple:color': '#FF5733',
'caldav:description': 'Default calendar',
acl: [],
invite: [],
_links: {
self: {
href: "/calendars/owner123/cal123.json",
},
},
href: '/calendars/owner123/cal123.json'
}
}
},
owner: {
displayName: "John Doe",
email: "john.doe@example.com",
openpaasId: "owner123",
displayName: 'John Doe',
email: 'john.doe@example.com',
openpaasId: 'owner123'
},
color: "#FF5733",
};
color: '#FF5733'
}
await addSharedCalendar("currentUserId", "newCalId123", calData);
await addSharedCalendar('currentUserId', 'newCalId123', calData)
expect(mockApiPost).toHaveBeenCalledWith(
"dav/calendars/currentUserId.json",
'dav/calendars/currentUserId.json',
expect.objectContaining({
body: expect.stringContaining('"dav:name":"#default"'),
body: expect.stringContaining('"dav:name":"#default"')
})
);
)
const callBody = JSON.parse(String(mockApiPost.mock.calls[0][1]?.body));
expect(callBody["dav:name"]).toBe("#default");
});
});
const callBody = JSON.parse(String(mockApiPost.mock.calls[0][1]?.body))
expect(callBody['dav:name']).toBe('#default')
})
})
__test__/features/Calendars/CalendarAccessRights.test.tsx
+255 -257
View File
@@ -1,103 +1,103 @@
import { AccessTab } from "@/components/Calendar/AccessTab";
import { AccessTab } from '@/components/Calendar/AccessTab'
import {
CalendarAccessRights,
UserWithAccess,
} from "@/components/Calendar/CalendarAccessRights";
import CalendarPopover from "@/components/Calendar/CalendarModal";
import { updateDelegationCalendar } from "@/features/Calendars/api/updateDelegationCalendar";
import { AccessRight, Calendar } from "@/features/Calendars/CalendarTypes";
import * as eventThunks from "@/features/Calendars/services";
import * as delegationThunks from "@/features/Calendars/services/updateDelegationCalendarAsync";
import { getUserDetails } from "@/features/User/userAPI";
import { accessRightToDavProp } from "@/utils/accessRightToDavProp";
import { api } from "@/utils/apiUtils";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
UserWithAccess
} from '@/components/Calendar/CalendarAccessRights'
import CalendarPopover from '@/components/Calendar/CalendarModal'
import { updateDelegationCalendar } from '@/features/Calendars/api/updateDelegationCalendar'
import { AccessRight, Calendar } from '@/features/Calendars/CalendarTypes'
import * as eventThunks from '@/features/Calendars/services'
import * as delegationThunks from '@/features/Calendars/services/updateDelegationCalendarAsync'
import { getUserDetails } from '@/features/User/userAPI'
import { accessRightToDavProp } from '@/utils/accessRightToDavProp'
import { api } from '@/utils/apiUtils'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/utils/apiUtils", () => ({
api: { post: jest.fn() },
}));
jest.mock('@/utils/apiUtils', () => ({
api: { post: jest.fn() }
}))
jest.mock("@/features/User/userAPI", () => ({
getUserDetails: jest.fn(),
}));
jest.mock('@/features/User/userAPI', () => ({
getUserDetails: jest.fn()
}))
jest.mock("@/features/Calendars/CalendarApi", () => ({
getSecretLink: jest.fn().mockReturnValue(""),
exportCalendar: jest.fn(),
}));
jest.mock('@/features/Calendars/CalendarApi', () => ({
getSecretLink: jest.fn().mockReturnValue(''),
exportCalendar: jest.fn()
}))
const mockThunkWithUnwrap = (resolvedValue: unknown = {}) =>
jest.fn().mockImplementation(() => {
const result = Object.assign(Promise.resolve(resolvedValue), {
unwrap: () => Promise.resolve(resolvedValue),
});
return jest.fn().mockReturnValue(result);
});
unwrap: () => Promise.resolve(resolvedValue)
})
return jest.fn().mockReturnValue(result)
})
describe("accessRightToDavProp", () => {
it("maps 5 (ADMIN) → dav:administration", () => {
expect(accessRightToDavProp(5)).toBe("dav:administration");
});
describe('accessRightToDavProp', () => {
it('maps 5 (ADMIN) → dav:administration', () => {
expect(accessRightToDavProp(5)).toBe('dav:administration')
})
it("maps 3 (EDITOR) → dav:read-write", () => {
expect(accessRightToDavProp(3)).toBe("dav:read-write");
});
it('maps 3 (EDITOR) → dav:read-write', () => {
expect(accessRightToDavProp(3)).toBe('dav:read-write')
})
it("maps 2 (VIEW) → dav:read", () => {
expect(accessRightToDavProp(2)).toBe("dav:read");
});
it('maps 2 (VIEW) → dav:read', () => {
expect(accessRightToDavProp(2)).toBe('dav:read')
})
it("defaults to dav:read for unknown values (covered by default case)", () => {
expect(accessRightToDavProp(999 as AccessRight)).toBe("dav:read");
});
});
it('defaults to dav:read for unknown values (covered by default case)', () => {
expect(accessRightToDavProp(999 as AccessRight)).toBe('dav:read')
})
})
describe("updateDelegationCalendar", () => {
beforeEach(() => jest.clearAllMocks());
describe('updateDelegationCalendar', () => {
beforeEach(() => jest.clearAllMocks())
it("posts to the correct DAV endpoint with the share body", async () => {
(api.post as jest.Mock).mockResolvedValue({ ok: true });
it('posts to the correct DAV endpoint with the share body', async () => {
;(api.post as jest.Mock).mockResolvedValue({ ok: true })
const share = {
set: [{ "dav:href": "mailto:alice@example.com", "dav:read": true }],
remove: [],
};
set: [{ 'dav:href': 'mailto:alice@example.com', 'dav:read': true }],
remove: []
}
await updateDelegationCalendar("/calendars/user/cal1.json", share);
await updateDelegationCalendar('/calendars/user/cal1.json', share)
await waitFor(() =>
expect(api.post).toHaveBeenCalledWith(
"dav/calendars/user/cal1.json",
'dav/calendars/user/cal1.json',
expect.objectContaining({
body: JSON.stringify({ share }),
body: JSON.stringify({ share })
})
)
);
});
});
)
})
})
const baseCalendar: Calendar = {
id: "user1/cal1",
name: "My Calendar",
description: "",
color: { color: "#0062FF", dark: "#FFF" },
link: "/calendars/user1/cal1.json",
visibility: "public",
id: 'user1/cal1',
name: 'My Calendar',
description: '',
color: { color: '#0062FF', dark: '#FFF' },
link: '/calendars/user1/cal1.json',
visibility: 'public',
events: {},
invite: [],
owner: { emails: ["user1@example.com"] },
owner: { emails: ['user1@example.com'] },
access: { write: true } as any,
delegated: true,
};
delegated: true
}
describe("CalendarAccessRights", () => {
const mockOnChange = jest.fn();
const mockOnInvitesLoaded = jest.fn();
describe('CalendarAccessRights', () => {
const mockOnChange = jest.fn()
const mockOnInvitesLoaded = jest.fn()
beforeEach(() => jest.clearAllMocks());
beforeEach(() => jest.clearAllMocks())
it("renders the grant access rights section", () => {
it('renders the grant access rights section', () => {
renderWithProviders(
<CalendarAccessRights
calendar={baseCalendar}
@@ -106,22 +106,22 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
expect(
screen.getByText("calendarPopover.access.grantAccessRights")
).toBeInTheDocument();
});
screen.getByText('calendarPopover.access.grantAccessRights')
).toBeInTheDocument()
})
it("shows a list of users already passed in via value prop", () => {
it('shows a list of users already passed in via value prop', () => {
const users: UserWithAccess[] = [
{
openpaasId: "user1",
displayName: "Alice",
email: "alice@example.com",
accessRight: 2,
},
];
openpaasId: 'user1',
displayName: 'Alice',
email: 'alice@example.com',
accessRight: 2
}
]
renderWithProviders(
<CalendarAccessRights
@@ -130,21 +130,21 @@ describe("CalendarAccessRights", () => {
onChange={mockOnChange}
onInvitesLoaded={mockOnInvitesLoaded}
/>
);
)
expect(screen.getByText("Alice")).toBeInTheDocument();
expect(screen.getByText("alice@example.com")).toBeInTheDocument();
});
expect(screen.getByText('Alice')).toBeInTheDocument()
expect(screen.getByText('alice@example.com')).toBeInTheDocument()
})
it("calls onChange with user removed when remove button is clicked", () => {
it('calls onChange with user removed when remove button is clicked', () => {
const users: UserWithAccess[] = [
{
openpaasId: "user1",
displayName: "Alice",
email: "alice@example.com",
accessRight: 5,
},
];
openpaasId: 'user1',
displayName: 'Alice',
email: 'alice@example.com',
accessRight: 5
}
]
renderWithProviders(
<CalendarAccessRights
@@ -154,31 +154,31 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
fireEvent.click(screen.getByLabelText(/remove/i));
expect(mockOnChange).toHaveBeenCalledWith([]);
});
fireEvent.click(screen.getByLabelText(/remove/i))
expect(mockOnChange).toHaveBeenCalledWith([])
})
it("loads invited users from calendar.invite on mount", async () => {
it('loads invited users from calendar.invite on mount', async () => {
const calendarWithInvite: Calendar = {
...baseCalendar,
invite: [
{
href: "mailto:bob@example.com",
principal: "/principals/users/bob123",
href: 'mailto:bob@example.com',
principal: '/principals/users/bob123',
access: 3,
inviteStatus: 1,
},
],
};
inviteStatus: 1
}
]
}
(getUserDetails as jest.Mock).mockResolvedValue({
preferredEmail: "bob@example.com",
firstname: "Bob",
lastname: "Smith",
emails: ["bob@example.com"],
});
;(getUserDetails as jest.Mock).mockResolvedValue({
preferredEmail: 'bob@example.com',
firstname: 'Bob',
lastname: 'Smith',
emails: ['bob@example.com']
})
renderWithProviders(
<CalendarAccessRights
@@ -188,35 +188,35 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
await waitFor(() => expect(getUserDetails).toHaveBeenCalledWith("bob123"));
await waitFor(() => expect(getUserDetails).toHaveBeenCalledWith('bob123'))
await waitFor(() =>
expect(mockOnInvitesLoaded).toHaveBeenCalledWith(
expect.arrayContaining([
expect.objectContaining({
email: "bob@example.com",
accessRight: 3,
}),
email: 'bob@example.com',
accessRight: 3
})
])
)
);
});
)
})
it("skips invite entries where getUserDetails throws", async () => {
it('skips invite entries where getUserDetails throws', async () => {
const calendarWithInvite: Calendar = {
...baseCalendar,
invite: [
{
href: "mailto:ghost@example.com",
principal: "/principals/users/ghost",
href: 'mailto:ghost@example.com',
principal: '/principals/users/ghost',
access: 2,
inviteStatus: 1,
},
],
};
inviteStatus: 1
}
]
}
(getUserDetails as jest.Mock).mockRejectedValue(new Error("Not found"));
;(getUserDetails as jest.Mock).mockRejectedValue(new Error('Not found'))
renderWithProviders(
<CalendarAccessRights
@@ -226,28 +226,28 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
await waitFor(() => expect(mockOnInvitesLoaded).toHaveBeenCalledWith([]));
});
await waitFor(() => expect(mockOnInvitesLoaded).toHaveBeenCalledWith([]))
})
it("shows a loading spinner while invite users are being fetched", async () => {
it('shows a loading spinner while invite users are being fetched', async () => {
const calendarWithInvite: Calendar = {
...baseCalendar,
invite: [
{
href: "mailto:carol@example.com",
principal: "/principals/users/carol",
href: 'mailto:carol@example.com',
principal: '/principals/users/carol',
access: 2,
inviteStatus: 1,
},
],
};
inviteStatus: 1
}
]
}
// Never resolves during the assertion window
(getUserDetails as jest.Mock).mockImplementation(
;(getUserDetails as jest.Mock).mockImplementation(
() => new Promise(() => {})
);
)
renderWithProviders(
<CalendarAccessRights
@@ -257,12 +257,12 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
expect(document.querySelector('[role="progressbar"]')).toBeInTheDocument();
});
expect(document.querySelector('[role="progressbar"]')).toBeInTheDocument()
})
it("displays the calendar owner information", () => {
it('displays the calendar owner information', () => {
renderWithProviders(
<CalendarAccessRights
calendar={baseCalendar}
@@ -271,46 +271,44 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
expect(screen.getAllByText("user1@example.com").length).toBeGreaterThan(0);
expect(
screen.getByText("calendarPopover.access.owner")
).toBeInTheDocument();
});
expect(screen.getAllByText('user1@example.com').length).toBeGreaterThan(0)
expect(screen.getByText('calendarPopover.access.owner')).toBeInTheDocument()
})
it("fetches and displays resource administrators for resource calendars", async () => {
it('fetches and displays resource administrators for resource calendars', async () => {
const resourceCalendar: any = {
...baseCalendar,
owner: {
_id: "resource1",
_id: 'resource1',
resource: true,
emails: ["resource1@example.com"],
emails: ['resource1@example.com'],
administrators: [
{ id: "admin1" },
{ id: "admin2" },
{ id: "resource1" }, // Owner shouldn't be loaded as an admin
],
},
};
{ id: 'admin1' },
{ id: 'admin2' },
{ id: 'resource1' } // Owner shouldn't be loaded as an admin
]
}
}
(getUserDetails as jest.Mock).mockImplementation((id: string) => {
if (id === "admin1") {
;(getUserDetails as jest.Mock).mockImplementation((id: string) => {
if (id === 'admin1') {
return Promise.resolve({
preferredEmail: "admin1@example.com",
firstname: "Admin",
lastname: "One",
});
preferredEmail: 'admin1@example.com',
firstname: 'Admin',
lastname: 'One'
})
}
if (id === "admin2") {
if (id === 'admin2') {
return Promise.resolve({
preferredEmail: "admin2@example.com",
firstname: "Admin",
lastname: "Two",
});
preferredEmail: 'admin2@example.com',
firstname: 'Admin',
lastname: 'Two'
})
}
return Promise.resolve(null);
});
return Promise.resolve(null)
})
renderWithProviders(
<CalendarAccessRights
@@ -320,37 +318,37 @@ describe("CalendarAccessRights", () => {
onInvitesLoaded={mockOnInvitesLoaded}
/>,
{ ...userState }
);
)
await waitFor(() => {
expect(getUserDetails).toHaveBeenCalledWith("admin1");
expect(getUserDetails).toHaveBeenCalledWith("admin2");
});
expect(getUserDetails).toHaveBeenCalledWith('admin1')
expect(getUserDetails).toHaveBeenCalledWith('admin2')
})
expect(getUserDetails).not.toHaveBeenCalledWith("resource1");
expect(getUserDetails).not.toHaveBeenCalledWith('resource1')
expect(await screen.findByText("Admin One")).toBeInTheDocument();
expect(screen.getByText("admin1@example.com")).toBeInTheDocument();
expect(screen.getByText("Admin Two")).toBeInTheDocument();
expect(screen.getByText("admin2@example.com")).toBeInTheDocument();
expect(await screen.findByText('Admin One')).toBeInTheDocument()
expect(screen.getByText('admin1@example.com')).toBeInTheDocument()
expect(screen.getByText('Admin Two')).toBeInTheDocument()
expect(screen.getByText('admin2@example.com')).toBeInTheDocument()
expect(
screen.getAllByText("calendarPopover.access.administrator")
).toHaveLength(2);
});
});
screen.getAllByText('calendarPopover.access.administrator')
).toHaveLength(2)
})
})
const userState = {
user: {
userData: { openpaasId: "user1", email: "user1@example.com" },
},
};
userData: { openpaasId: 'user1', email: 'user1@example.com' }
}
}
describe("AccessTab – conditional rendering of CalendarAccessRights", () => {
const noop = jest.fn();
describe('AccessTab – conditional rendering of CalendarAccessRights', () => {
const noop = jest.fn()
afterEach(() => jest.clearAllMocks());
afterEach(() => jest.clearAllMocks())
it("shows CalendarAccessRights when the current user owns the calendar", () => {
it('shows CalendarAccessRights when the current user owns the calendar', () => {
renderWithProviders(
<AccessTab
calendar={baseCalendar}
@@ -360,21 +358,21 @@ describe("AccessTab – conditional rendering of CalendarAccessRights", () => {
/>,
{
...userState,
calendars: { list: { "user1/cal1": baseCalendar } },
calendars: { list: { 'user1/cal1': baseCalendar } }
}
);
)
expect(
screen.getByText("calendarPopover.access.grantAccessRights")
).toBeInTheDocument();
});
screen.getByText('calendarPopover.access.grantAccessRights')
).toBeInTheDocument()
})
it("hides CalendarAccessRights textfield for a non-owner without admin delegation", () => {
it('hides CalendarAccessRights textfield for a non-owner without admin delegation', () => {
const foreignCalendar: Calendar = {
...baseCalendar,
id: "otherUser/cal1",
invite: [],
};
id: 'otherUser/cal1',
invite: []
}
renderWithProviders(
<AccessTab
@@ -385,29 +383,29 @@ describe("AccessTab – conditional rendering of CalendarAccessRights", () => {
/>,
{
...userState,
calendars: { list: { "otherUser/cal1": foreignCalendar } },
calendars: { list: { 'otherUser/cal1': foreignCalendar } }
}
);
)
expect(screen.queryByText("peopleSearch.label")).not.toBeInTheDocument();
expect(screen.queryByText('peopleSearch.label')).not.toBeInTheDocument()
expect(
screen.getByText("calendarPopover.access.accessRights")
).toBeInTheDocument();
});
screen.getByText('calendarPopover.access.accessRights')
).toBeInTheDocument()
})
it("shows CalendarAccessRights when the user has access=5 (admin) delegation", () => {
it('shows CalendarAccessRights when the user has access=5 (admin) delegation', () => {
const delegatedCalendar: Calendar = {
...baseCalendar,
id: "otherUser/cal1",
id: 'otherUser/cal1',
invite: [
{
href: "mailto:user1@example.com",
principal: "/principals/users/user1",
href: 'mailto:user1@example.com',
principal: '/principals/users/user1',
access: 5,
inviteStatus: 1,
},
],
};
inviteStatus: 1
}
]
}
renderWithProviders(
<AccessTab
@@ -418,78 +416,78 @@ describe("AccessTab – conditional rendering of CalendarAccessRights", () => {
/>,
{
...userState,
calendars: { list: { "otherUser/cal1": delegatedCalendar } },
calendars: { list: { 'otherUser/cal1': delegatedCalendar } }
}
);
)
expect(
screen.getByText("calendarPopover.access.grantAccessRights")
).toBeInTheDocument();
});
});
screen.getByText('calendarPopover.access.grantAccessRights')
).toBeInTheDocument()
})
})
const existingCalendar: Calendar = {
id: "user1/cal1",
name: "Existing Cal",
description: "Desc",
color: { color: "#0062FF", dark: "#FFF" },
link: "/calendars/user/cal1",
visibility: "public",
id: 'user1/cal1',
name: 'Existing Cal',
description: 'Desc',
color: { color: '#0062FF', dark: '#FFF' },
link: '/calendars/user/cal1',
visibility: 'public',
events: {},
invite: [],
owner: { emails: ["user1@example.com"] },
};
owner: { emails: ['user1@example.com'] }
}
describe("CalendarModal – updateDelegationCalendarAsync integration", () => {
const mockOnClose = jest.fn();
describe('CalendarModal – updateDelegationCalendarAsync integration', () => {
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
jest.clearAllMocks()
jest
.spyOn(eventThunks, "patchCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'patchCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
jest
.spyOn(eventThunks, "patchACLCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'patchACLCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
jest
.spyOn(delegationThunks, "updateDelegationCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
});
.spyOn(delegationThunks, 'updateDelegationCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
})
it("does NOT call updateDelegationCalendarAsync when no users are added or removed", async () => {
it('does NOT call updateDelegationCalendarAsync when no users are added or removed', async () => {
renderWithProviders(
<CalendarPopover
open={true}
onClose={mockOnClose}
calendar={existingCalendar}
/>,
{ ...userState, calendars: { list: { "user1/cal1": existingCalendar } } }
);
{ ...userState, calendars: { list: { 'user1/cal1': existingCalendar } } }
)
fireEvent.click(screen.getByRole("button", { name: /save/i }));
fireEvent.click(screen.getByRole('button', { name: /save/i }))
await waitFor(() => expect(mockOnClose).toHaveBeenCalled());
await waitFor(() => expect(mockOnClose).toHaveBeenCalled())
expect(
delegationThunks.updateDelegationCalendarAsync
).not.toHaveBeenCalled();
});
});
).not.toHaveBeenCalled()
})
})
describe("CalendarModal – cancel button", () => {
const mockOnClose = jest.fn();
describe('CalendarModal – cancel button', () => {
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
jest.clearAllMocks()
jest
.spyOn(delegationThunks, "updateDelegationCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(delegationThunks, 'updateDelegationCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
jest
.spyOn(eventThunks, "patchCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
});
.spyOn(eventThunks, 'patchCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
})
it("calls onClose without saving when Cancel is clicked", async () => {
it('calls onClose without saving when Cancel is clicked', async () => {
renderWithProviders(
<CalendarPopover
open={true}
@@ -497,14 +495,14 @@ describe("CalendarModal – cancel button", () => {
calendar={existingCalendar}
/>,
{ ...userState }
);
)
fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
await waitFor(() => expect(mockOnClose).toHaveBeenCalled());
await waitFor(() => expect(mockOnClose).toHaveBeenCalled())
expect(
delegationThunks.updateDelegationCalendarAsync
).not.toHaveBeenCalled();
expect(eventThunks.patchCalendarAsync).not.toHaveBeenCalled();
});
});
).not.toHaveBeenCalled()
expect(eventThunks.patchCalendarAsync).not.toHaveBeenCalled()
})
})
__test__/features/Calendars/CalendarModal.test.tsx
+258 -259
View File
@@ -1,141 +1,141 @@
import CalendarPopover from "@/components/Calendar/CalendarModal";
import { getSecretLink } from "@/features/Calendars/CalendarApi";
import { Calendar } from "@/features/Calendars/CalendarTypes";
import * as eventThunks from "@/features/Calendars/services";
import * as delegationThunks from "@/features/Calendars/services/updateDelegationCalendarAsync";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import CalendarPopover from '@/components/Calendar/CalendarModal'
import { getSecretLink } from '@/features/Calendars/CalendarApi'
import { Calendar } from '@/features/Calendars/CalendarTypes'
import * as eventThunks from '@/features/Calendars/services'
import * as delegationThunks from '@/features/Calendars/services/updateDelegationCalendarAsync'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/features/Calendars/CalendarApi", () => ({
getSecretLink: jest.fn(),
}));
jest.mock('@/features/Calendars/CalendarApi', () => ({
getSecretLink: jest.fn()
}))
const mockThunkWithUnwrap = (resolvedValue: unknown = {}) =>
jest.fn().mockImplementation(() => {
const dispatchResult = Object.assign(Promise.resolve(resolvedValue), {
unwrap: () => Promise.resolve(resolvedValue),
});
return jest.fn().mockReturnValue(dispatchResult);
});
unwrap: () => Promise.resolve(resolvedValue)
})
return jest.fn().mockReturnValue(dispatchResult)
})
describe("CalendarPopover", () => {
const mockOnClose = jest.fn();
describe('CalendarPopover', () => {
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
jest.clearAllMocks()
jest
.spyOn(delegationThunks, "updateDelegationCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
});
.spyOn(delegationThunks, 'updateDelegationCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
})
const renderPopover = (open = true) => {
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
openpaasId: "667037022b752d0026472254",
},
sub: 'test',
email: 'test@test.com',
sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
openpaasId: '667037022b752d0026472254'
}
},
calendars: { list: {}, pending: true },
};
calendars: { list: {}, pending: true }
}
renderWithProviders(
<CalendarPopover open={open} onClose={mockOnClose} />,
preloadedState
);
};
)
}
it("renders popover and inputs", () => {
renderPopover();
it('renders popover and inputs', () => {
renderPopover()
expect(screen.getByLabelText(/Name/i)).toBeInTheDocument();
expect(screen.getByText("event.form.addDescription")).toBeInTheDocument();
});
expect(screen.getByLabelText(/Name/i)).toBeInTheDocument()
expect(screen.getByText('event.form.addDescription')).toBeInTheDocument()
})
it("updates name and description fields", () => {
renderPopover();
it('updates name and description fields', () => {
renderPopover()
const nameInput = screen.getByLabelText(/Name/i);
fireEvent.change(nameInput, { target: { value: "My Calendar" } });
expect(nameInput).toHaveValue("My Calendar");
const nameInput = screen.getByLabelText(/Name/i)
fireEvent.change(nameInput, { target: { value: 'My Calendar' } })
expect(nameInput).toHaveValue('My Calendar')
fireEvent.click(screen.getByText("event.form.addDescription"));
const descInput = screen.getByLabelText(/Description/i);
fireEvent.change(descInput, { target: { value: "Test description" } });
expect(descInput).toHaveValue("Test description");
});
fireEvent.click(screen.getByText('event.form.addDescription'))
const descInput = screen.getByLabelText(/Description/i)
fireEvent.change(descInput, { target: { value: 'Test description' } })
expect(descInput).toHaveValue('Test description')
})
it("dispatches createCalendar and calls onClose when Save clicked", async () => {
it('dispatches createCalendar and calls onClose when Save clicked', async () => {
jest
.spyOn(eventThunks, "createCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'createCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
renderPopover();
renderPopover()
fireEvent.change(screen.getByLabelText(/Name/i), {
target: { value: "Test Calendar" },
});
fireEvent.click(screen.getByText("event.form.addDescription"));
target: { value: 'Test Calendar' }
})
fireEvent.click(screen.getByText('event.form.addDescription'))
fireEvent.change(screen.getByLabelText(/Description/i), {
target: { value: "Test Description" },
});
target: { value: 'Test Description' }
})
const colorButtons = screen.getAllByRole("button", {
name: /select color/i,
});
fireEvent.click(colorButtons[0]);
const colorButtons = screen.getAllByRole('button', {
name: /select color/i
})
fireEvent.click(colorButtons[0])
fireEvent.click(screen.getByRole("button", { name: /Create/i }));
fireEvent.click(screen.getByRole('button', { name: /Create/i }))
await waitFor(() =>
expect(eventThunks.createCalendarAsync).toHaveBeenCalled()
);
)
await waitFor(() =>
expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick")
);
});
expect(mockOnClose).toHaveBeenCalledWith({}, 'backdropClick')
)
})
it("calls onClose when Cancel clicked", () => {
renderPopover();
it('calls onClose when Cancel clicked', () => {
renderPopover()
fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
fireEvent.click(screen.getByRole('button', { name: /Cancel/i }))
expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
});
});
expect(mockOnClose).toHaveBeenCalledWith({}, 'backdropClick')
})
})
describe("CalendarPopover (editing mode)", () => {
const mockOnClose = jest.fn();
describe('CalendarPopover (editing mode)', () => {
const mockOnClose = jest.fn()
const baseUser = {
userData: {
sub: "test",
email: "test@test.com",
sid: "mockSid",
openpaasId: "user1",
},
};
sub: 'test',
email: 'test@test.com',
sid: 'mockSid',
openpaasId: 'user1'
}
}
const existingCalendar: Calendar = {
id: "user1/cal1",
link: "/calendars/user/cal1",
name: "Work Calendar",
description: "Team meetings",
color: { light: "#33B679" },
owner: { firstname: "alice", emails: ["alice@example.com"] },
visibility: "public",
events: {},
};
id: 'user1/cal1',
link: '/calendars/user/cal1',
name: 'Work Calendar',
description: 'Team meetings',
color: { light: '#33B679' },
owner: { firstname: 'alice', emails: ['alice@example.com'] },
visibility: 'public',
events: {}
}
beforeEach(() => {
jest.clearAllMocks();
jest.clearAllMocks()
jest
.spyOn(delegationThunks, "updateDelegationCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
});
.spyOn(delegationThunks, 'updateDelegationCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
})
it("prefills fields when calendar prop is given", () => {
it('prefills fields when calendar prop is given', () => {
renderWithProviders(
<CalendarPopover
open={true}
@@ -143,34 +143,34 @@ describe("CalendarPopover (editing mode)", () => {
calendar={existingCalendar}
/>,
{ user: baseUser }
);
)
expect(screen.getByLabelText(/Name/i)).toHaveValue("Work Calendar");
expect(screen.getByLabelText(/Description/i)).toHaveValue("Team meetings");
});
expect(screen.getByLabelText(/Name/i)).toHaveValue('Work Calendar')
expect(screen.getByLabelText(/Description/i)).toHaveValue('Team meetings')
})
test("Save button is disabled when name is empty or whitespace only", () => {
test('Save button is disabled when name is empty or whitespace only', () => {
renderWithProviders(<CalendarPopover open={true} onClose={jest.fn()} />, {
user: baseUser,
});
user: baseUser
})
const saveButton = screen.getByRole("button", { name: /create/i });
expect(saveButton).toBeDisabled();
const saveButton = screen.getByRole('button', { name: /create/i })
expect(saveButton).toBeDisabled()
// only spaces
const nameInput = screen.getByLabelText(/name/i);
fireEvent.change(nameInput, { target: { value: " " } });
const nameInput = screen.getByLabelText(/name/i)
fireEvent.change(nameInput, { target: { value: ' ' } })
expect(saveButton).toBeDisabled();
expect(saveButton).toBeDisabled()
// valid name
fireEvent.change(nameInput, { target: { value: "Work Calendar" } });
expect(saveButton).toBeEnabled();
});
fireEvent.change(nameInput, { target: { value: 'Work Calendar' } })
expect(saveButton).toBeEnabled()
})
it("allows modifying and saving existing calendar", async () => {
it('allows modifying and saving existing calendar', async () => {
jest
.spyOn(eventThunks, "patchCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'patchCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
renderWithProviders(
<CalendarPopover
@@ -179,87 +179,87 @@ describe("CalendarPopover (editing mode)", () => {
calendar={existingCalendar}
/>,
{ user: baseUser }
);
)
// Change name
fireEvent.change(screen.getByLabelText(/Name/i), {
target: { value: "Updated Calendar" },
});
target: { value: 'Updated Calendar' }
})
// Save
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
await waitFor(() =>
expect(eventThunks.patchCalendarAsync).toHaveBeenCalledWith(
expect.objectContaining({
calId: "user1/cal1",
calLink: "/calendars/user/cal1",
calId: 'user1/cal1',
calLink: '/calendars/user/cal1',
patch: {
color: { light: "#33B679" },
desc: "Team meetings",
name: "Updated Calendar",
},
color: { light: '#33B679' },
desc: 'Team meetings',
name: 'Updated Calendar'
}
})
)
);
await waitFor(() => expect(mockOnClose).toHaveBeenCalled());
});
});
)
await waitFor(() => expect(mockOnClose).toHaveBeenCalled())
})
})
describe("CalendarPopover - Tabs Scenarios", () => {
const mockOnClose = jest.fn();
describe('CalendarPopover - Tabs Scenarios', () => {
const mockOnClose = jest.fn()
const baseUser = {
userData: {
openpaasId: "user1",
},
};
openpaasId: 'user1'
}
}
const writeText = jest.fn();
const writeText = jest.fn()
Object.assign(navigator, {
clipboard: {
writeText,
},
});
writeText
}
})
const existingCalendar: Calendar = {
id: "user1/cal1",
link: "/calendars/user1/cal1.json",
name: "Work Calendar",
description: "Team meetings",
color: { light: "#33B679" },
owner: { firstname: "alice", emails: ["alice@example.com"] },
visibility: "public",
events: {},
};
id: 'user1/cal1',
link: '/calendars/user1/cal1.json',
name: 'Work Calendar',
description: 'Team meetings',
color: { light: '#33B679' },
owner: { firstname: 'alice', emails: ['alice@example.com'] },
visibility: 'public',
events: {}
}
beforeEach(() => {
jest.clearAllMocks();
jest.clearAllMocks()
jest
.spyOn(delegationThunks, "updateDelegationCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
});
.spyOn(delegationThunks, 'updateDelegationCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
})
it("resets state after closing and reopening", () => {
it('resets state after closing and reopening', () => {
const { rerender } = renderWithProviders(
<CalendarPopover open={true} onClose={mockOnClose} />,
{ user: baseUser }
);
)
// Enter some data
fireEvent.change(screen.getByLabelText(/Name/i), {
target: { value: "Temp Calendar" },
});
fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
target: { value: 'Temp Calendar' }
})
fireEvent.click(screen.getByRole('button', { name: /Cancel/i }))
expect(mockOnClose).toHaveBeenCalled();
expect(mockOnClose).toHaveBeenCalled()
// Reopen: state should be reset
rerender(<CalendarPopover open={true} onClose={mockOnClose} />);
expect(screen.getByLabelText(/Name/i)).toHaveValue("");
});
rerender(<CalendarPopover open={true} onClose={mockOnClose} />)
expect(screen.getByLabelText(/Name/i)).toHaveValue('')
})
it("shows Access tab only when editing an existing calendar", () => {
it('shows Access tab only when editing an existing calendar', () => {
renderWithProviders(
<CalendarPopover
open={true}
@@ -267,29 +267,29 @@ describe("CalendarPopover - Tabs Scenarios", () => {
calendar={existingCalendar}
/>,
{ user: baseUser }
);
)
expect(screen.getByRole("tab", { name: /Access/i })).toBeInTheDocument();
});
expect(screen.getByRole('tab', { name: /Access/i })).toBeInTheDocument()
})
it("does not show Access tab when creating new calendar", () => {
it('does not show Access tab when creating new calendar', () => {
renderWithProviders(<CalendarPopover open={true} onClose={mockOnClose} />, {
user: baseUser,
});
user: baseUser
})
expect(
screen.queryByRole("tab", { name: /Access/i })
).not.toBeInTheDocument();
});
screen.queryByRole('tab', { name: /Access/i })
).not.toBeInTheDocument()
})
it("patches ACL when visibility changes", async () => {
it('patches ACL when visibility changes', async () => {
jest
.spyOn(eventThunks, "patchCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'patchCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
jest
.spyOn(eventThunks, "patchACLCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'patchACLCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
renderWithProviders(
<CalendarPopover
@@ -298,42 +298,42 @@ describe("CalendarPopover - Tabs Scenarios", () => {
calendar={existingCalendar}
/>,
{ user: baseUser }
);
)
// By default: "All" (public) is selected
const publicButton = screen.getByRole("button", { name: /All/i });
const privateButton = screen.getByRole("button", { name: /You/i });
const publicButton = screen.getByRole('button', { name: /All/i })
const privateButton = screen.getByRole('button', { name: /You/i })
expect(publicButton).toHaveAttribute("aria-pressed", "true");
expect(privateButton).toHaveAttribute("aria-pressed", "false");
expect(publicButton).toHaveAttribute('aria-pressed', 'true')
expect(privateButton).toHaveAttribute('aria-pressed', 'false')
// Change to private
fireEvent.click(privateButton);
fireEvent.click(privateButton)
expect(privateButton).toHaveAttribute("aria-pressed", "true");
expect(publicButton).toHaveAttribute("aria-pressed", "false");
expect(privateButton).toHaveAttribute('aria-pressed', 'true')
expect(publicButton).toHaveAttribute('aria-pressed', 'false')
// Save
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
await waitFor(() =>
expect(eventThunks.patchACLCalendarAsync).toHaveBeenCalledWith(
expect.objectContaining({
calId: "user1/cal1",
request: "",
calId: 'user1/cal1',
request: ''
})
)
);
});
)
})
it("copies CalDAV link from Access tab", async () => {
window.DAV_BASE_URL = "https://cal.example.org";
it('copies CalDAV link from Access tab', async () => {
window.DAV_BASE_URL = 'https://cal.example.org'
Object.assign(navigator, {
clipboard: { writeText: jest.fn() },
});
(getSecretLink as jest.Mock).mockResolvedValue({
secretLink: "https://example.org/secret/initial",
});
clipboard: { writeText: jest.fn() }
})
;(getSecretLink as jest.Mock).mockResolvedValue({
secretLink: 'https://example.org/secret/initial'
})
renderWithProviders(
<CalendarPopover
@@ -342,79 +342,79 @@ describe("CalendarPopover - Tabs Scenarios", () => {
calendar={existingCalendar}
/>,
{ user: baseUser }
);
)
// Switch to Access tab
fireEvent.click(screen.getByRole("tab", { name: /Access/i }));
fireEvent.click(screen.getByRole('tab', { name: /Access/i }))
// Expect text field with caldav link
const input = screen.getByLabelText("calendar.caldav_access");
expect(input).toHaveValue("https://cal.example.org/calendars/user1/cal1");
const input = screen.getByLabelText('calendar.caldav_access')
expect(input).toHaveValue('https://cal.example.org/calendars/user1/cal1')
// Click copy button (find button containing ContentCopyIcon)
const copyIcon = screen.getAllByTestId("ContentCopyIcon")[0];
const copyButton = copyIcon.closest("button");
const copyIcon = screen.getAllByTestId('ContentCopyIcon')[0]
const copyButton = copyIcon.closest('button')
if (copyButton) {
fireEvent.click(copyButton);
fireEvent.click(copyButton)
}
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
"https://cal.example.org/calendars/user1/cal1"
);
'https://cal.example.org/calendars/user1/cal1'
)
// Snackbar should appear
await waitFor(() =>
expect(screen.getByText("common.link_copied")).toBeInTheDocument()
);
});
expect(screen.getByText('common.link_copied')).toBeInTheDocument()
)
})
describe("Import flow", () => {
const file = new File(["test"], "events.ics", { type: "text/calendar" });
describe('Import flow', () => {
const file = new File(['test'], 'events.ics', { type: 'text/calendar' })
it("creates a new calendar and imports events when Import with 'new' target", async () => {
jest
.spyOn(eventThunks, "createCalendarAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'createCalendarAsync')
.mockImplementation(mockThunkWithUnwrap())
jest
.spyOn(eventThunks, "importEventFromFileAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'importEventFromFileAsync')
.mockImplementation(mockThunkWithUnwrap())
renderWithProviders(
<CalendarPopover open={true} onClose={mockOnClose} />,
{
user: baseUser,
user: baseUser
}
);
)
// Switch to Import tab
fireEvent.click(screen.getByRole("tab", { name: /Import/i }));
fireEvent.click(screen.getByRole('tab', { name: /Import/i }))
// Provide new calendar params
fireEvent.change(screen.getByLabelText(/Name/i), {
target: { value: "Imported Calendar" },
});
const fileInput = screen.getByLabelText("common.select_file");
fireEvent.change(fileInput, { target: { files: [file] } });
target: { value: 'Imported Calendar' }
})
const fileInput = screen.getByLabelText('common.select_file')
fireEvent.change(fileInput, { target: { files: [file] } })
// Click Import
fireEvent.click(screen.getByRole("button", { name: "actions.import" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.import' }))
await waitFor(() =>
expect(eventThunks.createCalendarAsync).toHaveBeenCalled()
);
)
await waitFor(() =>
expect(eventThunks.importEventFromFileAsync).toHaveBeenCalled()
);
});
)
})
it("imports into an existing calendar when target is set", async () => {
it('imports into an existing calendar when target is set', async () => {
jest
.spyOn(eventThunks, "importEventFromFileAsync")
.mockImplementation(mockThunkWithUnwrap());
.spyOn(eventThunks, 'importEventFromFileAsync')
.mockImplementation(mockThunkWithUnwrap())
const calendars = {
"user1/cal1": existingCalendar,
};
'user1/cal1': existingCalendar
}
renderWithProviders(
<CalendarPopover
@@ -423,51 +423,50 @@ describe("CalendarPopover - Tabs Scenarios", () => {
calendar={existingCalendar}
/>,
{ user: baseUser, calendars: { list: calendars } }
);
)
fireEvent.click(screen.getByRole("tab", { name: /Import/i }));
const fileInput = screen.getByLabelText("common.select_file");
fireEvent.change(fileInput, { target: { files: [file] } });
fireEvent.click(screen.getByRole('tab', { name: /Import/i }))
const fileInput = screen.getByLabelText('common.select_file')
fireEvent.change(fileInput, { target: { files: [file] } })
fireEvent.click(screen.getByRole("button", { name: "actions.import" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.import' }))
await waitFor(() =>
expect(eventThunks.importEventFromFileAsync).toHaveBeenCalledWith(
expect.objectContaining({
calLink: "/calendars/user1/cal1.json",
file,
calLink: '/calendars/user1/cal1.json',
file
})
)
);
});
)
})
it("disables Import button until a file is uploaded", () => {
it('disables Import button until a file is uploaded', () => {
renderWithProviders(
<CalendarPopover open={true} onClose={mockOnClose} />,
{
user: baseUser,
user: baseUser
}
);
)
fireEvent.click(screen.getByRole("tab", { name: /Import/i }));
fireEvent.click(screen.getByRole('tab', { name: /Import/i }))
const importButton = screen.getByRole("button", {
name: "actions.import",
});
expect(importButton).toBeDisabled();
});
});
const importButton = screen.getByRole('button', {
name: 'actions.import'
})
expect(importButton).toBeDisabled()
})
})
it("fetches and resets the secret link", async () => {
window.DAV_BASE_URL = "https://cal.example.org";
(getSecretLink as jest.Mock)
it('fetches and resets the secret link', async () => {
window.DAV_BASE_URL = 'https://cal.example.org'
;(getSecretLink as jest.Mock)
.mockResolvedValueOnce({
secretLink: "https://example.org/secret/initial",
secretLink: 'https://example.org/secret/initial'
})
.mockResolvedValueOnce({
secretLink: "https://example.org/secret/new",
});
secretLink: 'https://example.org/secret/new'
})
renderWithProviders(
<CalendarPopover
@@ -476,27 +475,27 @@ describe("CalendarPopover - Tabs Scenarios", () => {
calendar={existingCalendar}
/>,
{ user: baseUser }
);
)
fireEvent.click(screen.getByRole("tab", { name: /Access/i }));
fireEvent.click(screen.getByRole('tab', { name: /Access/i }))
await waitFor(() =>
expect(
screen.getByDisplayValue("https://example.org/secret/initial")
screen.getByDisplayValue('https://example.org/secret/initial')
).toBeInTheDocument()
);
)
fireEvent.click(screen.getByRole("button", { name: /reset/i }));
fireEvent.click(screen.getByRole('button', { name: /reset/i }))
await waitFor(() =>
expect(
screen.getByDisplayValue("https://example.org/secret/new")
screen.getByDisplayValue('https://example.org/secret/new')
).toBeInTheDocument()
);
)
expect(getSecretLink).toHaveBeenCalledWith(
existingCalendar.link.replace(".json", ""),
existingCalendar.link.replace('.json', ''),
true
);
});
});
)
})
})
__test__/features/Calendars/CalendarSlice.test.tsx
+355 -355
View File
@@ -1,12 +1,12 @@
import * as calAPI from "@/features/Calendars/CalendarApi";
import * as calAPI from '@/features/Calendars/CalendarApi'
import reducer, {
addEvent,
createCalendar,
removeEvent,
removeTempCal,
updateEventLocal,
} from "@/features/Calendars/CalendarSlice";
import { Calendar } from "@/features/Calendars/CalendarTypes";
updateEventLocal
} from '@/features/Calendars/CalendarSlice'
import { Calendar } from '@/features/Calendars/CalendarTypes'
import {
addSharedCalendarAsync,
createCalendarAsync,
@@ -14,523 +14,523 @@ import {
getCalendarsListAsync,
getEventAsync,
getTempCalendarsListAsync,
patchACLCalendarAsync,
} from "@/features/Calendars/services";
import { CalendarEvent } from "@/features/Events/EventsTypes";
import * as userAPI from "@/features/User/userAPI";
import userReducer, { setUserData } from "@/features/User/userSlice";
import { configureStore } from "@reduxjs/toolkit";
patchACLCalendarAsync
} from '@/features/Calendars/services'
import { CalendarEvent } from '@/features/Events/EventsTypes'
import * as userAPI from '@/features/User/userAPI'
import userReducer, { setUserData } from '@/features/User/userSlice'
import { configureStore } from '@reduxjs/toolkit'
jest.mock("@/features/Calendars/CalendarApi");
jest.mock("@/features/User/userAPI");
jest.mock("@/features/Events/EventApi");
jest.mock("@/features/Events/utils");
jest.mock("@/utils/apiUtils");
jest.mock('@/features/Calendars/CalendarApi')
jest.mock('@/features/User/userAPI')
jest.mock('@/features/Events/EventApi')
jest.mock('@/features/Events/utils')
jest.mock('@/utils/apiUtils')
describe("CalendarSlice", () => {
describe('CalendarSlice', () => {
const initialState = {
list: {},
templist: {},
pending: false,
error: null,
};
error: null
}
beforeEach(() => {
jest.resetAllMocks();
});
jest.resetAllMocks()
})
describe("reducers", () => {
it("createCalendar adds new calendar", () => {
describe('reducers', () => {
it('createCalendar adds new calendar', () => {
const action = createCalendar({
name: "Test Cal",
color: "#ff0000",
description: "desc",
});
const state = reducer(initialState, action);
const values = Object.values(state.list);
expect(values[0].name).toBe("Test Cal");
expect(values[0].color).toBe("#ff0000");
});
name: 'Test Cal',
color: '#ff0000',
description: 'desc'
})
const state = reducer(initialState, action)
const values = Object.values(state.list)
expect(values[0].name).toBe('Test Cal')
expect(values[0].color).toBe('#ff0000')
})
it("addEvent adds event to calendar", () => {
const calId = "user/cal";
const event = { uid: "event1", title: "My Event" } as any;
it('addEvent adds event to calendar', () => {
const calId = 'user/cal'
const event = { uid: 'event1', title: 'My Event' } as any
const stateWithCal = {
...initialState,
list: { [calId]: { id: calId, events: {} } as any },
};
list: { [calId]: { id: calId, events: {} } as any }
}
const state = reducer(
stateWithCal,
addEvent({ calendarUid: calId, event })
);
expect(state.list[calId].events["event1"]).toEqual(
expect.objectContaining({ uid: "event1" })
);
});
)
expect(state.list[calId].events['event1']).toEqual(
expect.objectContaining({ uid: 'event1' })
)
})
it("removeEvent deletes event", () => {
const calId = "user/cal";
it('removeEvent deletes event', () => {
const calId = 'user/cal'
const stateWithEvent = {
...initialState,
list: {
[calId]: {
id: calId,
events: { e1: { uid: "e1" } },
} as unknown as Calendar,
},
};
events: { e1: { uid: 'e1' } }
} as unknown as Calendar
}
}
const state = reducer(
stateWithEvent,
removeEvent({ calendarUid: calId, eventUid: "e1" })
);
expect(state.list[calId].events).toEqual({});
});
removeEvent({ calendarUid: calId, eventUid: 'e1' })
)
expect(state.list[calId].events).toEqual({})
})
it("updateEventLocal updates an event", () => {
const calId = "user/cal";
it('updateEventLocal updates an event', () => {
const calId = 'user/cal'
const stateWithEvent = {
...initialState,
list: {
[calId]: {
id: calId,
events: { e1: { uid: "e1", title: "Old" } },
} as unknown as Calendar,
},
};
events: { e1: { uid: 'e1', title: 'Old' } }
} as unknown as Calendar
}
}
const state = reducer(
stateWithEvent,
updateEventLocal({ calId, event: { uid: "e1", title: "New" } as any })
);
expect(state.list[calId].events.e1.title).toBe("New");
});
updateEventLocal({ calId, event: { uid: 'e1', title: 'New' } as any })
)
expect(state.list[calId].events.e1.title).toBe('New')
})
it("removeTempCal deletes temp calendar", () => {
it('removeTempCal deletes temp calendar', () => {
const stateWithTemp = {
...initialState,
templist: { temp1: { id: "temp1" } as any },
};
const state = reducer(stateWithTemp, removeTempCal("temp1"));
expect(state.templist).toEqual({});
});
});
templist: { temp1: { id: 'temp1' } as any }
}
const state = reducer(stateWithTemp, removeTempCal('temp1'))
expect(state.templist).toEqual({})
})
})
describe("extraReducers (thunks)", () => {
describe('extraReducers (thunks)', () => {
const storeFactory = () =>
configureStore({
reducer: { calendars: reducer, user: userReducer },
});
reducer: { calendars: reducer, user: userReducer }
})
beforeEach(() => {
jest.resetAllMocks();
});
it("getCalendarsListAsync.fulfilled replaces list", async () => {
(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: "u1" });
(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { "dav:calendar": [] },
});
(userAPI.getUserDetails as jest.Mock).mockResolvedValue({
firstname: "Alice",
lastname: "Smith",
emails: ["a@b.com"],
});
jest.resetAllMocks()
})
it('getCalendarsListAsync.fulfilled replaces list', async () => {
;(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: 'u1' })
;(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { 'dav:calendar': [] }
})
;(userAPI.getUserDetails as jest.Mock).mockResolvedValue({
firstname: 'Alice',
lastname: 'Smith',
emails: ['a@b.com']
})
const store = storeFactory();
await store.dispatch(getCalendarsListAsync() as any);
const state = store.getState().calendars;
expect(state.list).toEqual({});
});
const store = storeFactory()
await store.dispatch(getCalendarsListAsync() as any)
const state = store.getState().calendars
expect(state.list).toEqual({})
})
it("getCalendarsListAsync loads user details in parallel for multiple owners", async () => {
it('getCalendarsListAsync loads user details in parallel for multiple owners', async () => {
const mockCalendars = [
{
_links: { self: { href: "/calendars/u1/cal1.json" } },
"dav:name": "Calendar 1",
"apple:color": "#FF0000",
acl: [],
_links: { self: { href: '/calendars/u1/cal1.json' } },
'dav:name': 'Calendar 1',
'apple:color': '#FF0000',
acl: []
},
{
_links: { self: { href: "/calendars/u2/cal2.json" } },
"dav:name": "Calendar 2",
"apple:color": "#00FF00",
acl: [],
_links: { self: { href: '/calendars/u2/cal2.json' } },
'dav:name': 'Calendar 2',
'apple:color': '#00FF00',
acl: []
},
{
_links: { self: { href: "/calendars/u3/cal3.json" } },
"dav:name": "Calendar 3",
"apple:color": "#0000FF",
acl: [],
},
];
_links: { self: { href: '/calendars/u3/cal3.json' } },
'dav:name': 'Calendar 3',
'apple:color': '#0000FF',
acl: []
}
]
(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: "u1" });
(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { "dav:calendar": mockCalendars },
});
;(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: 'u1' })
;(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { 'dav:calendar': mockCalendars }
})
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock;
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock
getUserDetailsMock
.mockResolvedValueOnce({
firstname: "Alice",
lastname: "Smith",
emails: ["alice@example.com"],
firstname: 'Alice',
lastname: 'Smith',
emails: ['alice@example.com']
})
.mockResolvedValueOnce({
firstname: "Bob",
lastname: "Jones",
emails: ["bob@example.com"],
firstname: 'Bob',
lastname: 'Jones',
emails: ['bob@example.com']
})
.mockResolvedValueOnce({
firstname: "Charlie",
lastname: "Brown",
emails: ["charlie@example.com"],
});
firstname: 'Charlie',
lastname: 'Brown',
emails: ['charlie@example.com']
})
const store = storeFactory();
await store.dispatch(getCalendarsListAsync() as any);
const store = storeFactory()
await store.dispatch(getCalendarsListAsync() as any)
expect(getUserDetailsMock).toHaveBeenCalledTimes(3);
expect(getUserDetailsMock).toHaveBeenCalledWith("u1");
expect(getUserDetailsMock).toHaveBeenCalledWith("u2");
expect(getUserDetailsMock).toHaveBeenCalledWith("u3");
expect(getUserDetailsMock).toHaveBeenCalledTimes(3)
expect(getUserDetailsMock).toHaveBeenCalledWith('u1')
expect(getUserDetailsMock).toHaveBeenCalledWith('u2')
expect(getUserDetailsMock).toHaveBeenCalledWith('u3')
const state = store.getState().calendars;
expect(state.list["u1/cal1"].owner.firstname).toContain("Alice");
expect(state.list["u2/cal2"].owner.firstname).toContain("Bob");
expect(state.list["u3/cal3"].owner.firstname).toContain("Charlie");
});
const state = store.getState().calendars
expect(state.list['u1/cal1'].owner.firstname).toContain('Alice')
expect(state.list['u2/cal2'].owner.firstname).toContain('Bob')
expect(state.list['u3/cal3'].owner.firstname).toContain('Charlie')
})
it("getCalendarsListAsync deduplicates getUserDetails calls for same ownerId", async () => {
it('getCalendarsListAsync deduplicates getUserDetails calls for same ownerId', async () => {
const mockCalendars = [
{
_links: { self: { href: "/calendars/u1/cal1.json" } },
"dav:name": "Calendar 1",
"apple:color": "#FF0000",
acl: [],
_links: { self: { href: '/calendars/u1/cal1.json' } },
'dav:name': 'Calendar 1',
'apple:color': '#FF0000',
acl: []
},
{
_links: { self: { href: "/calendars/u1/cal2.json" } },
"dav:name": "Calendar 2",
"apple:color": "#00FF00",
acl: [],
_links: { self: { href: '/calendars/u1/cal2.json' } },
'dav:name': 'Calendar 2',
'apple:color': '#00FF00',
acl: []
},
{
_links: { self: { href: "/calendars/u1/cal3.json" } },
"dav:name": "Calendar 3",
"apple:color": "#0000FF",
acl: [],
},
];
_links: { self: { href: '/calendars/u1/cal3.json' } },
'dav:name': 'Calendar 3',
'apple:color': '#0000FF',
acl: []
}
]
(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: "u1" });
(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { "dav:calendar": mockCalendars },
});
;(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: 'u1' })
;(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { 'dav:calendar': mockCalendars }
})
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock;
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock
getUserDetailsMock.mockResolvedValue({
firstname: "Alice",
lastname: "Smith",
emails: ["alice@example.com"],
});
firstname: 'Alice',
lastname: 'Smith',
emails: ['alice@example.com']
})
const store = storeFactory();
await store.dispatch(getCalendarsListAsync() as any);
const store = storeFactory()
await store.dispatch(getCalendarsListAsync() as any)
expect(getUserDetailsMock).toHaveBeenCalledTimes(1);
expect(getUserDetailsMock).toHaveBeenCalledWith("u1");
});
expect(getUserDetailsMock).toHaveBeenCalledTimes(1)
expect(getUserDetailsMock).toHaveBeenCalledWith('u1')
})
it("getCalendarsListAsync processes owners in batches of 20", async () => {
it('getCalendarsListAsync processes owners in batches of 20', async () => {
const mockCalendars = Array.from({ length: 45 }, (_, i) => ({
_links: { self: { href: `/calendars/u${i + 1}/cal${i + 1}.json` } },
"dav:name": `Calendar ${i + 1}`,
"apple:color": "#FF0000",
acl: [],
}));
'dav:name': `Calendar ${i + 1}`,
'apple:color': '#FF0000',
acl: []
}))
(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: "u1" });
(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { "dav:calendar": mockCalendars },
});
;(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: 'u1' })
;(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { 'dav:calendar': mockCalendars }
})
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock;
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock
getUserDetailsMock.mockImplementation((ownerId: string) =>
Promise.resolve({
firstname: "User",
firstname: 'User',
lastname: ownerId,
emails: [`${ownerId}@example.com`],
emails: [`${ownerId}@example.com`]
})
);
)
const store = storeFactory();
await store.dispatch(getCalendarsListAsync() as any);
const store = storeFactory()
await store.dispatch(getCalendarsListAsync() as any)
expect(getUserDetailsMock).toHaveBeenCalledTimes(45);
const state = store.getState().calendars;
expect(Object.keys(state.list)).toHaveLength(45);
});
expect(getUserDetailsMock).toHaveBeenCalledTimes(45)
const state = store.getState().calendars
expect(Object.keys(state.list)).toHaveLength(45)
})
it("getCalendarsListAsync doesnt call getUserDetails if userdata exist in store", async () => {
it('getCalendarsListAsync doesnt call getUserDetails if userdata exist in store', async () => {
const existingCalendars = {
"u1/cal1": {
id: "u1/cal1",
name: "Existing Calendar",
events: {},
} as Calendar,
};
'u1/cal1': {
id: 'u1/cal1',
name: 'Existing Calendar',
events: {}
} as Calendar
}
const store = storeFactory();
const store = storeFactory()
store.dispatch({
type: "calendars/getCalendars/fulfilled",
payload: { importedCalendars: existingCalendars, errors: "" },
});
store.dispatch(setUserData({ openpaasId: "bla" }));
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock;
type: 'calendars/getCalendars/fulfilled',
payload: { importedCalendars: existingCalendars, errors: '' }
})
store.dispatch(setUserData({ openpaasId: 'bla' }))
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock
await store.dispatch(getCalendarsListAsync() as any);
await store.dispatch(getCalendarsListAsync() as any)
expect(getUserDetailsMock).not.toHaveBeenCalled();
expect(getUserDetailsMock).not.toHaveBeenCalled()
const state = store.getState().calendars;
expect(state.list).toEqual(existingCalendars);
});
const state = store.getState().calendars
expect(state.list).toEqual(existingCalendars)
})
it("getCalendarsListAsync handles errors in getUserDetails gracefully", async () => {
it('getCalendarsListAsync handles errors in getUserDetails gracefully', async () => {
const mockCalendars = [
{
_links: { self: { href: "/calendars/u1/cal1.json" } },
"dav:name": "Calendar 1",
"apple:color": "#FF0000",
acl: [],
_links: { self: { href: '/calendars/u1/cal1.json' } },
'dav:name': 'Calendar 1',
'apple:color': '#FF0000',
acl: []
},
{
_links: { self: { href: "/calendars/u2/cal2.json" } },
"dav:name": "Calendar 2",
"apple:color": "#00FF00",
acl: [],
},
];
_links: { self: { href: '/calendars/u2/cal2.json' } },
'dav:name': 'Calendar 2',
'apple:color': '#00FF00',
acl: []
}
]
(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: "u1" });
(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { "dav:calendar": mockCalendars },
});
;(userAPI.getOpenPaasUser as jest.Mock).mockResolvedValue({ id: 'u1' })
;(calAPI.getCalendars as jest.Mock).mockResolvedValue({
_embedded: { 'dav:calendar': mockCalendars }
})
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock;
const getUserDetailsMock = userAPI.getUserDetails as jest.Mock
getUserDetailsMock
.mockResolvedValueOnce({
firstname: "Alice",
lastname: "Smith",
emails: ["alice@example.com"],
firstname: 'Alice',
lastname: 'Smith',
emails: ['alice@example.com']
})
.mockRejectedValueOnce(new Error("Failed to fetch user"));
.mockRejectedValueOnce(new Error('Failed to fetch user'))
const store = storeFactory();
const result = await store.dispatch(getCalendarsListAsync() as any);
const store = storeFactory()
const result = await store.dispatch(getCalendarsListAsync() as any)
expect(getUserDetailsMock).toHaveBeenCalledTimes(2);
const state = store.getState().calendars;
expect(state.list["u1/cal1"].owner.firstname).toContain("Alice");
expect(state.list["u2/cal2"].owner.lastname).toContain("Unknown User");
expect(result.payload.errors).toBeTruthy();
});
expect(getUserDetailsMock).toHaveBeenCalledTimes(2)
const state = store.getState().calendars
expect(state.list['u1/cal1'].owner.firstname).toContain('Alice')
expect(state.list['u2/cal2'].owner.lastname).toContain('Unknown User')
expect(result.payload.errors).toBeTruthy()
})
it("patchACLCalendarAsync.fulfilled sets visibility", () => {
it('patchACLCalendarAsync.fulfilled sets visibility', () => {
const prev = {
...initialState,
list: { c1: { id: "c1", visibility: "public" } as any },
};
list: { c1: { id: 'c1', visibility: 'public' } as any }
}
const state = reducer(
prev,
patchACLCalendarAsync.fulfilled(
{ calId: "c1", calLink: "l", request: "" },
"req3",
{ calId: "c1", calLink: "l", request: "" }
{ calId: 'c1', calLink: 'l', request: '' },
'req3',
{ calId: 'c1', calLink: 'l', request: '' }
)
);
expect(state.list.c1.visibility).toBe("private");
});
)
expect(state.list.c1.visibility).toBe('private')
})
it("createCalendarAsync.fulfilled adds a new calendar", () => {
it('createCalendarAsync.fulfilled adds a new calendar', () => {
const payload = {
userData: {
openpaasId: "u1",
family_name: "Owner",
email: "o@example.com",
sid: "",
sub: "",
given_name: "Test",
name: "Test Owner",
openpaasId: 'u1',
family_name: 'Owner',
email: 'o@example.com',
sid: '',
sub: '',
given_name: 'Test',
name: 'Test Owner'
},
calId: "cal1",
color: { "apple:color": "#f00" },
name: "Test",
desc: "Desc",
};
calId: 'cal1',
color: { 'apple:color': '#f00' },
name: 'Test',
desc: 'Desc'
}
const payloadResponse = {
userId: "u1",
calId: "cal1",
color: { "apple:color": "#f00" },
name: "Test",
desc: "Desc",
owner: { firstname: "Owner", emails: ["o@example.com"] },
};
userId: 'u1',
calId: 'cal1',
color: { 'apple:color': '#f00' },
name: 'Test',
desc: 'Desc',
owner: { firstname: 'Owner', emails: ['o@example.com'] }
}
const state = reducer(
initialState,
createCalendarAsync.fulfilled(payloadResponse, "req4", payload)
);
expect(state.list["u1/cal1"].name).toBe("Test");
expect(state.list["u1/cal1"].color?.["apple:color"]).toBe("#f00");
});
createCalendarAsync.fulfilled(payloadResponse, 'req4', payload)
)
expect(state.list['u1/cal1'].name).toBe('Test')
expect(state.list['u1/cal1'].color?.['apple:color']).toBe('#f00')
})
it("addSharedCalendarAsync.fulfilled adds shared calendar", () => {
it('addSharedCalendarAsync.fulfilled adds shared calendar', () => {
const payload = {
calId: "c1",
color: { "apple:color": "#0f0" },
link: "/calendars/u1/c1.json",
name: "Shared",
desc: "Shared Desc",
owner: { firstname: "O", emails: ["o@example.com"] },
};
calId: 'c1',
color: { 'apple:color': '#0f0' },
link: '/calendars/u1/c1.json',
name: 'Shared',
desc: 'Shared Desc',
owner: { firstname: 'O', emails: ['o@example.com'] }
}
const mockCal = {
cal: {
_links: { self: { href: "/calendars/u1/c1.json" } },
"apple:color": "#0f0",
"caldav:description": "Shared Desc",
"dav:name": "Shared",
},
};
_links: { self: { href: '/calendars/u1/c1.json' } },
'apple:color': '#0f0',
'caldav:description': 'Shared Desc',
'dav:name': 'Shared'
}
}
const state = reducer(
initialState,
addSharedCalendarAsync.fulfilled(payload, "req5", {
userId: "u1",
calId: "c1",
cal: mockCal,
addSharedCalendarAsync.fulfilled(payload, 'req5', {
userId: 'u1',
calId: 'c1',
cal: mockCal
})
);
expect(state.list["c1"].name).toBe("Shared");
});
)
expect(state.list['c1'].name).toBe('Shared')
})
it("getTempCalendarsListAsync.fulfilled updates templist", () => {
it('getTempCalendarsListAsync.fulfilled updates templist', () => {
const payload = {
t1: {
id: "t1",
name: "Temp",
color: { "apple:color": "#aaa" },
id: 't1',
name: 'Temp',
color: { 'apple:color': '#aaa' },
events: {},
visibility: "public",
owner: { firstname: "O", emails: ["o@o.com"] },
link: "/calendars/t1.json",
description: "desc",
} as Calendar,
};
visibility: 'public',
owner: { firstname: 'O', emails: ['o@o.com'] },
link: '/calendars/t1.json',
description: 'desc'
} as Calendar
}
const state = reducer(
initialState,
getTempCalendarsListAsync.fulfilled(payload, "req7", {
openpaasId: "u1",
color: { "apple:color": "#aaa" },
displayName: "test",
avatarUrl: "",
email: "test@test.com",
getTempCalendarsListAsync.fulfilled(payload, 'req7', {
openpaasId: 'u1',
color: { 'apple:color': '#aaa' },
displayName: 'test',
avatarUrl: '',
email: 'test@test.com'
})
);
expect(state.templist.t1.name).toBe("Temp");
});
)
expect(state.templist.t1.name).toBe('Temp')
})
it("getEventAsync.fulfilled adds single event", () => {
const payload = { calId: "c1", event: { uid: "e1" } as any };
it('getEventAsync.fulfilled adds single event', () => {
const payload = { calId: 'c1', event: { uid: 'e1' } as any }
const state = reducer(
initialState,
getEventAsync.fulfilled(payload, "req9", { uid: "e1" } as any)
);
expect(state.list.c1.events.e1.uid).toBe("e1");
});
getEventAsync.fulfilled(payload, 'req9', { uid: 'e1' } as any)
)
expect(state.list.c1.events.e1.uid).toBe('e1')
})
it("getCalendarDetailAsync.fulfilled adds calendar events", () => {
const payload = { calId: "c1", events: [{ uid: "e1" }] as any[] };
it('getCalendarDetailAsync.fulfilled adds calendar events', () => {
const payload = { calId: 'c1', events: [{ uid: 'e1' }] as any[] }
const state = reducer(
{
...initialState,
list: {
["c1"]: {
id: "c1",
events: {},
} as unknown as Calendar,
},
['c1']: {
id: 'c1',
events: {}
} as unknown as Calendar
}
},
getCalendarDetailAsync.fulfilled(payload, "req11", {
calId: "c1",
match: { start: "", end: "" },
getCalendarDetailAsync.fulfilled(payload, 'req11', {
calId: 'c1',
match: { start: '', end: '' }
})
);
expect(state.list.c1.events.e1.uid).toBe("e1");
});
)
expect(state.list.c1.events.e1.uid).toBe('e1')
})
it("getEventAsync.fulfilled doesnt create new events when there are already event with base UID", () => {
const baseUid = "recurring-event-base";
it('getEventAsync.fulfilled doesnt create new events when there are already event with base UID', () => {
const baseUid = 'recurring-event-base'
const existingEvent = {
uid: `${baseUid}/20240115`,
title: "Existing Recurring Event",
recurrenceId: null,
} as unknown as CalendarEvent;
title: 'Existing Recurring Event',
recurrenceId: null
} as unknown as CalendarEvent
const newEventInstance = {
uid: baseUid,
title: "Fetched Master Event",
recurrenceId: "20240115",
} as CalendarEvent;
title: 'Fetched Master Event',
recurrenceId: '20240115'
} as CalendarEvent
const stateWithEvent = {
...initialState,
list: {
c1: {
id: "c1",
events: { [`${baseUid}/20240115`]: existingEvent },
} as unknown as Calendar,
},
};
id: 'c1',
events: { [`${baseUid}/20240115`]: existingEvent }
} as unknown as Calendar
}
}
const payload = { calId: "c1", event: newEventInstance };
const payload = { calId: 'c1', event: newEventInstance }
const state = reducer(
stateWithEvent,
getEventAsync.fulfilled(payload, "req", newEventInstance)
);
getEventAsync.fulfilled(payload, 'req', newEventInstance)
)
// Should still only have the base event, not the instance
expect(Object.keys(state.list.c1.events)).toHaveLength(1);
expect(state.list.c1.events[`${baseUid}/20240115`]).toBeDefined();
expect(state.list.c1.events[baseUid]).toBeUndefined();
});
expect(Object.keys(state.list.c1.events)).toHaveLength(1)
expect(state.list.c1.events[`${baseUid}/20240115`]).toBeDefined()
expect(state.list.c1.events[baseUid]).toBeUndefined()
})
it("getEventAsync.fulfilled create new event when there isn't any event with base UID", () => {
const eventUid = "new-event-uid";
const eventUid = 'new-event-uid'
const newEvent = {
uid: eventUid,
title: "New Event",
recurrenceId: null,
} as unknown as CalendarEvent;
title: 'New Event',
recurrenceId: null
} as unknown as CalendarEvent
const stateWithoutEvent = {
...initialState,
list: {
c1: {
id: "c1",
events: {},
} as unknown as Calendar,
},
};
id: 'c1',
events: {}
} as unknown as Calendar
}
}
const payload = { calId: "c1", event: newEvent };
const payload = { calId: 'c1', event: newEvent }
const state = reducer(
stateWithoutEvent,
getEventAsync.fulfilled(payload, "req", newEvent)
);
getEventAsync.fulfilled(payload, 'req', newEvent)
)
// Should create the new event
expect(Object.keys(state.list.c1.events)).toHaveLength(1);
expect(state.list.c1.events[eventUid]).toBeDefined();
expect(state.list.c1.events[eventUid].uid).toBe(eventUid);
expect(state.list.c1.events[eventUid].title).toBe("New Event");
});
});
});
expect(Object.keys(state.list.c1.events)).toHaveLength(1)
expect(state.list.c1.events[eventUid]).toBeDefined()
expect(state.list.c1.events[eventUid].uid).toBe(eventUid)
expect(state.list.c1.events[eventUid].title).toBe('New Event')
})
})
})
__test__/features/Calendars/TimezoneInGrid.test.tsx
+142 -142
View File
@@ -1,196 +1,196 @@
import CalendarApp from "@/components/Calendar/Calendar";
import * as calendarUtils from "@/components/Calendar/utils/calendarUtils";
import { updateSlotLabelVisibility } from "@/components/Calendar/utils/calendarUtils";
import EventPreviewModal from "@/features/Events/EventPreview";
import { CalendarEvent } from "@/features/Events/EventsTypes";
import * as SettingsSlice from "@/features/Settings/SettingsSlice";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import CalendarApp from '@/components/Calendar/Calendar'
import * as calendarUtils from '@/components/Calendar/utils/calendarUtils'
import { updateSlotLabelVisibility } from '@/components/Calendar/utils/calendarUtils'
import EventPreviewModal from '@/features/Events/EventPreview'
import { CalendarEvent } from '@/features/Events/EventsTypes'
import * as SettingsSlice from '@/features/Settings/SettingsSlice'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
describe("Calendar - Timezone Integration", () => {
const mockCalendarRef = { current: null };
describe('Calendar - Timezone Integration', () => {
const mockCalendarRef = { current: null }
const baseState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "testSid",
openpaasId: "user1",
},
sub: 'test',
email: 'test@test.com',
sid: 'testSid',
openpaasId: 'user1'
}
},
calendars: {
list: {
"user1/cal1": {
id: "user1/cal1",
link: "/calendars/user1/cal1.json",
name: "Test Calendar",
description: "",
color: "#33B679",
owner: { firstname: "user1", emails: ["test@test.com"] },
visibility: "public",
events: {},
},
'user1/cal1': {
id: 'user1/cal1',
link: '/calendars/user1/cal1.json',
name: 'Test Calendar',
description: '',
color: '#33B679',
owner: { firstname: 'user1', emails: ['test@test.com'] },
visibility: 'public',
events: {}
}
},
timeZone: "America/New_York",
pending: false,
},
};
timeZone: 'America/New_York',
pending: false
}
}
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
it("renders TimezoneSelector in week view", async () => {
it('renders TimezoneSelector in week view', async () => {
renderWithProviders(
<CalendarApp calendarRef={mockCalendarRef} />,
baseState
);
)
// Look for timezone selector button (should show offset)
await waitFor(() => {
expect(screen.getByText(/UTC/)).toBeInTheDocument();
});
});
expect(screen.getByText(/UTC/)).toBeInTheDocument()
})
})
it("dispatches setTimeZone action when timezone is changed", async () => {
const setTimeZoneSpy = jest.spyOn(SettingsSlice, "setTimeZone");
it('dispatches setTimeZone action when timezone is changed', async () => {
const setTimeZoneSpy = jest.spyOn(SettingsSlice, 'setTimeZone')
renderWithProviders(
<CalendarApp calendarRef={mockCalendarRef} />,
baseState
);
)
// Find and click timezone selector
await waitFor(() => {
const timezoneButton = screen.getByText(/UTC/i);
fireEvent.click(timezoneButton);
const timezoneButton = screen.getByText(/UTC/i)
fireEvent.click(timezoneButton)
// Select a different timezone
const autocomplete = screen.getByRole("combobox");
fireEvent.change(autocomplete, { target: { value: "Tokyo" } });
});
const option = await screen.findByText(/Tokyo/i);
fireEvent.click(option);
const autocomplete = screen.getByRole('combobox')
fireEvent.change(autocomplete, { target: { value: 'Tokyo' } })
})
const option = await screen.findByText(/Tokyo/i)
fireEvent.click(option)
expect(setTimeZoneSpy).toHaveBeenCalledWith("Asia/Tokyo");
});
});
expect(setTimeZoneSpy).toHaveBeenCalledWith('Asia/Tokyo')
})
})
describe("Calendar - Timezone Slot Label Visibility", () => {
it("hides slot labels within 15 minutes of current time", () => {
const currentTime = new Date("2025-01-15T14:30:00Z");
const timezone = "UTC";
describe('Calendar - Timezone Slot Label Visibility', () => {
it('hides slot labels within 15 minutes of current time', () => {
const currentTime = new Date('2025-01-15T14:30:00Z')
const timezone = 'UTC'
jest
.spyOn(calendarUtils, "checkIfCurrentWeekOrDay")
.mockImplementation(() => true);
.spyOn(calendarUtils, 'checkIfCurrentWeekOrDay')
.mockImplementation(() => true)
// 14:25 - within 15 minutes
const slot1425 = { text: "14:25" };
const slot1425 = { text: '14:25' }
expect(updateSlotLabelVisibility(currentTime, slot1425, timezone)).toBe(
"timegrid-slot-label-hidden"
);
'timegrid-slot-label-hidden'
)
// 14:30 - exact match
const slot1430 = { text: "14:30" };
const slot1430 = { text: '14:30' }
expect(updateSlotLabelVisibility(currentTime, slot1430, timezone)).toBe(
"timegrid-slot-label-hidden"
);
'timegrid-slot-label-hidden'
)
// 14:35 - within 15 minutes
const slot1435 = { text: "14:35" };
const slot1435 = { text: '14:35' }
expect(updateSlotLabelVisibility(currentTime, slot1435, timezone)).toBe(
"timegrid-slot-label-hidden"
);
});
'timegrid-slot-label-hidden'
)
})
it("shows slot labels more than 15 minutes from current time", () => {
it('shows slot labels more than 15 minutes from current time', () => {
jest
.spyOn(calendarUtils, "checkIfCurrentWeekOrDay")
.mockImplementation(() => true);
.spyOn(calendarUtils, 'checkIfCurrentWeekOrDay')
.mockImplementation(() => true)
const currentTime = new Date("2025-01-15T14:30:00");
const timezone = "UTC";
const currentTime = new Date('2025-01-15T14:30:00')
const timezone = 'UTC'
// 14:00 - 30 minutes before
const slot1400 = { text: "14:00" };
const slot1400 = { text: '14:00' }
expect(updateSlotLabelVisibility(currentTime, slot1400, timezone)).toBe(
"fc-timegrid-slot-label"
);
'fc-timegrid-slot-label'
)
// 15:00 - 30 minutes after
const slot1500 = { text: "15:00" };
const slot1500 = { text: '15:00' }
expect(updateSlotLabelVisibility(currentTime, slot1500, timezone)).toBe(
"fc-timegrid-slot-label"
);
});
'fc-timegrid-slot-label'
)
})
it("returns visible class when not in current week/day", () => {
it('returns visible class when not in current week/day', () => {
jest
.spyOn(calendarUtils, "checkIfCurrentWeekOrDay")
.mockImplementation(() => false);
const currentTime = new Date("2025-01-15T14:30:00");
const timezone = "UTC";
const slot = { text: "14:30" };
.spyOn(calendarUtils, 'checkIfCurrentWeekOrDay')
.mockImplementation(() => false)
const currentTime = new Date('2025-01-15T14:30:00')
const timezone = 'UTC'
const slot = { text: '14:30' }
// Should return visible class when not in current view
const result = updateSlotLabelVisibility(currentTime, slot, timezone);
expect(result).toBe("fc-timegrid-slot-label");
});
});
const result = updateSlotLabelVisibility(currentTime, slot, timezone)
expect(result).toBe('fc-timegrid-slot-label')
})
})
describe("EventDisplayPreview - Timezone Display", () => {
const mockOnClose = jest.fn();
describe('EventDisplayPreview - Timezone Display', () => {
const mockOnClose = jest.fn()
const baseEvent: CalendarEvent = {
uid: "event1",
title: "Team Meeting",
start: new Date("2025-01-15T14:00:00Z"),
end: new Date("2025-01-15T15:00:00Z"),
calendarId: "user1/cal1",
allday: false,
};
uid: 'event1',
title: 'Team Meeting',
start: new Date('2025-01-15T14:00:00Z'),
end: new Date('2025-01-15T15:00:00Z'),
calendarId: 'user1/cal1',
allday: false
}
const allDayEvent = {
...baseEvent,
allday: true,
start: new Date("2025-01-15"),
end: new Date("2025-01-16"),
};
start: new Date('2025-01-15'),
end: new Date('2025-01-16')
}
const baseState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "testSid",
openpaasId: "user1",
},
sub: 'test',
email: 'test@test.com',
sid: 'testSid',
openpaasId: 'user1'
}
},
calendars: {
list: {
"user1/cal1": {
id: "user1/cal1",
name: "Test Calendar",
color: "#33B679",
owner: { firstname: "user1", emails: ["test@test.com"] },
visibility: "public",
'user1/cal1': {
id: 'user1/cal1',
name: 'Test Calendar',
color: '#33B679',
owner: { firstname: 'user1', emails: ['test@test.com'] },
visibility: 'public',
events: {
event1: baseEvent,
allDayEvent,
},
},
allDayEvent
}
}
},
timeZone: "America/New_York",
pending: false,
},
};
timeZone: 'America/New_York',
pending: false
}
}
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
it("does not show timezone offset for all-day events", async () => {
it('does not show timezone offset for all-day events', async () => {
renderWithProviders(
<EventPreviewModal
open={true}
@@ -199,33 +199,33 @@ describe("EventDisplayPreview - Timezone Display", () => {
calId="user1/cal1"
/>,
baseState
);
)
await waitFor(() => {
const title = screen.getByText(/Team Meeting/i);
expect(title).toBeInTheDocument();
});
const title = screen.getByText(/Team Meeting/i)
expect(title).toBeInTheDocument()
})
// Should not show UTC offset
expect(screen.queryByText(/UTC[+-]\d+/i)).not.toBeInTheDocument();
});
expect(screen.queryByText(/UTC[+-]\d+/i)).not.toBeInTheDocument()
})
it("displays correct timezone offset for different timezones", async () => {
it('displays correct timezone offset for different timezones', async () => {
const timezones = [
{ tz: "America/New_York", expectedOffset: /UTC[-−][45]/ },
{ tz: "Europe/Paris", expectedOffset: /UTC\+[12]/ },
{ tz: "Asia/Tokyo", expectedOffset: /UTC\+9/ },
{ tz: "Australia/Sydney", expectedOffset: /UTC\+1[01]/ },
{ tz: "Asia/Kolkata", expectedOffset: /UTC\+5:30/ },
];
{ tz: 'America/New_York', expectedOffset: /UTC[-−][45]/ },
{ tz: 'Europe/Paris', expectedOffset: /UTC\+[12]/ },
{ tz: 'Asia/Tokyo', expectedOffset: /UTC\+9/ },
{ tz: 'Australia/Sydney', expectedOffset: /UTC\+1[01]/ },
{ tz: 'Asia/Kolkata', expectedOffset: /UTC\+5:30/ }
]
for (const { tz, expectedOffset } of timezones) {
const state = {
...baseState,
settings: {
timeZone: tz,
},
};
timeZone: tz
}
}
renderWithProviders(
<EventPreviewModal
@@ -235,12 +235,12 @@ describe("EventDisplayPreview - Timezone Display", () => {
onClose={mockOnClose}
/>,
state
);
)
await waitFor(() => {
const content = document.body.textContent || "";
expect(content).toMatch(expectedOffset);
});
const content = document.body.textContent || ''
expect(content).toMatch(expectedOffset)
})
}
});
});
})
})
__test__/features/Calendars/TimezoneSelector.test.tsx
+62 -62
View File
@@ -1,134 +1,134 @@
import { TimezoneSelector } from "@/components/Calendar/TimezoneSelector";
import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import { TimezoneSelector } from '@/components/Calendar/TimezoneSelector'
import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
describe("TimezoneSelector", () => {
const mockOnChange = jest.fn();
describe('TimezoneSelector', () => {
const mockOnChange = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
it("renders with initial timezone value", () => {
it('renders with initial timezone value', () => {
renderWithProviders(
<TimezoneSelector
referenceDate={new Date()}
value="America/New_York"
onChange={mockOnChange}
/>
);
)
const button = screen.getByRole("button");
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent(/UTC[-−][45]/i); // New York offset
});
const button = screen.getByRole('button')
expect(button).toBeInTheDocument()
expect(button).toHaveTextContent(/UTC[-−][45]/i) // New York offset
})
it("opens popover when button is clicked", async () => {
it('opens popover when button is clicked', async () => {
renderWithProviders(
<TimezoneSelector
referenceDate={new Date()}
value="Europe/Paris"
onChange={mockOnChange}
/>
);
)
const button = screen.getByRole("button");
fireEvent.click(button);
const button = screen.getByRole('button')
fireEvent.click(button)
await waitFor(() => {
expect(screen.getByRole("combobox")).toBeInTheDocument();
});
});
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
})
it("calls onChange when a new timezone is selected", async () => {
it('calls onChange when a new timezone is selected', async () => {
renderWithProviders(
<TimezoneSelector
referenceDate={new Date()}
value="Europe/Paris"
onChange={mockOnChange}
/>
);
)
const button = screen.getByRole("button");
fireEvent.click(button);
const button = screen.getByRole('button')
fireEvent.click(button)
await waitFor(() => {
expect(screen.getByRole("combobox")).toBeInTheDocument();
});
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
const autocomplete = screen.getByRole("combobox");
fireEvent.change(autocomplete, { target: { value: "Los Angeles" } });
const autocomplete = screen.getByRole('combobox')
fireEvent.change(autocomplete, { target: { value: 'Los Angeles' } })
// Find and click the Los Angeles option
const option = await screen.findByText(/Los Angeles/i);
fireEvent.click(option);
const option = await screen.findByText(/Los Angeles/i)
fireEvent.click(option)
expect(mockOnChange).toHaveBeenCalledWith("America/Los_Angeles");
});
expect(mockOnChange).toHaveBeenCalledWith('America/Los_Angeles')
})
it("closes popover after timezone selection", async () => {
it('closes popover after timezone selection', async () => {
renderWithProviders(
<TimezoneSelector
referenceDate={new Date()}
value="Europe/Paris"
onChange={mockOnChange}
/>
);
)
const button = screen.getByRole("button");
fireEvent.click(button);
const button = screen.getByRole('button')
fireEvent.click(button)
await waitFor(() => {
expect(screen.getByRole("combobox")).toBeInTheDocument();
});
expect(screen.getByRole('combobox')).toBeInTheDocument()
})
const autocomplete = screen.getByRole("combobox");
fireEvent.change(autocomplete, { target: { value: "Tokyo" } });
const autocomplete = screen.getByRole('combobox')
fireEvent.change(autocomplete, { target: { value: 'Tokyo' } })
const option = await screen.findByText(/Tokyo/i);
fireEvent.click(option);
const option = await screen.findByText(/Tokyo/i)
fireEvent.click(option)
await waitFor(() => {
expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
});
});
expect(screen.queryByRole('combobox')).not.toBeInTheDocument()
})
})
it("displays timezones with half-hour offsets correctly", () => {
it('displays timezones with half-hour offsets correctly', () => {
renderWithProviders(
<TimezoneSelector
referenceDate={new Date()}
value="Asia/Kolkata"
onChange={mockOnChange}
/>
);
)
const button = screen.getByRole("button");
expect(button).toHaveTextContent("UTC+5:30"); // India offset
});
const button = screen.getByRole('button')
expect(button).toHaveTextContent('UTC+5:30') // India offset
})
it("shows correct offset for Europe/Paris depending on daylight saving time", () => {
it('shows correct offset for Europe/Paris depending on daylight saving time', () => {
// Summer date (DST on)
const summerDate = new Date("2025-07-15T12:00:00Z");
const summerDate = new Date('2025-07-15T12:00:00Z')
renderWithProviders(
<TimezoneSelector
value="Europe/Paris"
onChange={mockOnChange}
referenceDate={summerDate}
/>
);
let button = screen.getByRole("button");
expect(button).toHaveTextContent(/UTC\+2\b/);
cleanup();
)
let button = screen.getByRole('button')
expect(button).toHaveTextContent(/UTC\+2\b/)
cleanup()
// Rerender with a winter date (DST off)
const winterDate = new Date("2025-01-15T12:00:00Z");
const winterDate = new Date('2025-01-15T12:00:00Z')
renderWithProviders(
<TimezoneSelector
value="Europe/Paris"
onChange={mockOnChange}
referenceDate={winterDate}
/>
);
button = screen.getByRole("button");
expect(button).toHaveTextContent(/UTC\+1\b/);
});
});
)
button = screen.getByRole('button')
expect(button).toHaveTextContent(/UTC\+1\b/)
})
})
__test__/features/Calendars/api/addCalendarResourceAsync.test.tsx
+93 -95
View File
@@ -1,152 +1,150 @@
import { addCalendarResourceAsync } from "@/features/Calendars/api/addCalendarResourceAsync";
import { addSharedCalendar } from "@/features/Calendars/CalendarApi";
import { fetchOwnerOfResource } from "@/features/Calendars/services/helpers";
import { toRejectedError } from "@/utils/errorUtils";
import { configureStore } from "@reduxjs/toolkit";
import { addCalendarResourceAsync } from '@/features/Calendars/api/addCalendarResourceAsync'
import { addSharedCalendar } from '@/features/Calendars/CalendarApi'
import { fetchOwnerOfResource } from '@/features/Calendars/services/helpers'
import { toRejectedError } from '@/utils/errorUtils'
import { configureStore } from '@reduxjs/toolkit'
jest.mock("@/features/Calendars/CalendarApi");
jest.mock("@/features/Calendars/services/helpers");
jest.mock("@/utils/errorUtils");
jest.mock('@/features/Calendars/CalendarApi')
jest.mock('@/features/Calendars/services/helpers')
jest.mock('@/utils/errorUtils')
const mockedAddSharedCalendar = addSharedCalendar as jest.Mock;
const mockedFetchOwnerOfResource = fetchOwnerOfResource as jest.Mock;
const mockedToRejectedError = toRejectedError as jest.Mock;
const mockedAddSharedCalendar = addSharedCalendar as jest.Mock
const mockedFetchOwnerOfResource = fetchOwnerOfResource as jest.Mock
const mockedToRejectedError = toRejectedError as jest.Mock
describe("addCalendarResourceAsync thunk", () => {
let store: ReturnType<typeof configureStore>;
const dispatch = jest.fn();
describe('addCalendarResourceAsync thunk', () => {
let store: ReturnType<typeof configureStore>
const dispatch = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
jest.clearAllMocks()
store = configureStore({
reducer: () => ({}),
});
});
reducer: () => ({})
})
})
const mockPayload = {
userId: "user-123",
calId: "cal-123",
userId: 'user-123',
calId: 'cal-123',
cal: {
color: {
background: "#000000",
foreground: "#FFFFFF",
background: '#000000',
foreground: '#FFFFFF'
},
cal: {
"dav:name": "Resource Room A",
"caldav:description": "A meeting room",
'dav:name': 'Resource Room A',
'caldav:description': 'A meeting room',
_links: {
self: {
href: "/calendars/res-456/cal-123.json",
},
},
},
},
};
href: '/calendars/res-456/cal-123.json'
}
}
}
}
}
const mockResolvedResourceData = {
_id: "res-456",
id: "res-456",
name: "Resource Room A",
description: "A meeting room",
creator: "user-789",
_id: 'res-456',
id: 'res-456',
name: 'Resource Room A',
description: 'A meeting room',
creator: 'user-789',
deleted: false,
_rev: "1",
};
_rev: '1'
}
it("should add shared calendar, fetch resource details, map userData", async () => {
it('should add shared calendar, fetch resource details, map userData', async () => {
mockedFetchOwnerOfResource.mockResolvedValueOnce({
firstname: "Creator",
lastname: "User",
emails: ["creator@example.com"],
});
mockedAddSharedCalendar.mockResolvedValueOnce({});
firstname: 'Creator',
lastname: 'User',
emails: ['creator@example.com']
})
mockedAddSharedCalendar.mockResolvedValueOnce({})
const result = await addCalendarResourceAsync(
mockPayload as unknown as Parameters<typeof addCalendarResourceAsync>[0]
)(dispatch, store.getState, undefined);
)(dispatch, store.getState, undefined)
expect(mockedAddSharedCalendar).toHaveBeenCalledWith(
mockPayload.userId,
mockPayload.calId,
mockPayload.cal
);
expect(mockedFetchOwnerOfResource).toHaveBeenCalledWith("res-456");
)
expect(mockedFetchOwnerOfResource).toHaveBeenCalledWith('res-456')
expect(result.type).toBe("calendars/addCalendarResource/fulfilled");
expect(result.type).toBe('calendars/addCalendarResource/fulfilled')
expect(result.payload).toEqual({
calId: "res-456/cal-123",
color: { background: "#000000", foreground: "#FFFFFF" },
desc: "A meeting room",
link: "/calendars/user-123/cal-123.json",
name: "Resource Room A",
calId: 'res-456/cal-123',
color: { background: '#000000', foreground: '#FFFFFF' },
desc: 'A meeting room',
link: '/calendars/user-123/cal-123.json',
name: 'Resource Room A',
owner: {
firstname: "Creator",
lastname: "User",
emails: ["creator@example.com"],
resource: true,
},
});
});
firstname: 'Creator',
lastname: 'User',
emails: ['creator@example.com'],
resource: true
}
})
})
it("should fallback to name if resource details fetch fails", async () => {
mockedAddSharedCalendar.mockResolvedValueOnce({});
const errorDetails = new Error("Fetch failed");
mockedFetchOwnerOfResource.mockRejectedValueOnce(errorDetails);
it('should fallback to name if resource details fetch fails', async () => {
mockedAddSharedCalendar.mockResolvedValueOnce({})
const errorDetails = new Error('Fetch failed')
mockedFetchOwnerOfResource.mockRejectedValueOnce(errorDetails)
// Silence expected console error in tests
const consoleSpy = jest
.spyOn(console, "error")
.mockImplementation(() => {});
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
const result = await addCalendarResourceAsync(
mockPayload as unknown as Parameters<typeof addCalendarResourceAsync>[0]
)(dispatch, store.getState, undefined);
)(dispatch, store.getState, undefined)
expect(mockedAddSharedCalendar).toHaveBeenCalledWith(
mockPayload.userId,
mockPayload.calId,
mockPayload.cal
);
expect(mockedFetchOwnerOfResource).toHaveBeenCalledWith("res-456");
)
expect(mockedFetchOwnerOfResource).toHaveBeenCalledWith('res-456')
consoleSpy.mockRestore();
consoleSpy.mockRestore()
expect(result.type).toBe("calendars/addCalendarResource/fulfilled");
expect(result.type).toBe('calendars/addCalendarResource/fulfilled')
expect(result.payload).toEqual({
calId: "res-456/cal-123",
color: { background: "#000000", foreground: "#FFFFFF" },
desc: "A meeting room",
link: "/calendars/user-123/cal-123.json",
name: "Resource Room A",
calId: 'res-456/cal-123',
color: { background: '#000000', foreground: '#FFFFFF' },
desc: 'A meeting room',
link: '/calendars/user-123/cal-123.json',
name: 'Resource Room A',
owner: {
firstname: "",
lastname: "Resource Room A",
firstname: '',
lastname: 'Resource Room A',
emails: [],
resource: true,
},
});
});
resource: true
}
})
})
it("should handle error if addSharedCalendar fails", async () => {
const errorAdd = new Error("Add failed");
mockedAddSharedCalendar.mockRejectedValueOnce(errorAdd);
const mockRejectedErrorResult = { message: "Add failed" };
mockedToRejectedError.mockReturnValueOnce(mockRejectedErrorResult);
it('should handle error if addSharedCalendar fails', async () => {
const errorAdd = new Error('Add failed')
mockedAddSharedCalendar.mockRejectedValueOnce(errorAdd)
const mockRejectedErrorResult = { message: 'Add failed' }
mockedToRejectedError.mockReturnValueOnce(mockRejectedErrorResult)
const result = await addCalendarResourceAsync(
mockPayload as unknown as Parameters<typeof addCalendarResourceAsync>[0]
)(dispatch, store.getState, undefined);
)(dispatch, store.getState, undefined)
expect(mockedAddSharedCalendar).toHaveBeenCalledWith(
mockPayload.userId,
mockPayload.calId,
mockPayload.cal
);
expect(mockedFetchOwnerOfResource).not.toHaveBeenCalled();
)
expect(mockedFetchOwnerOfResource).not.toHaveBeenCalled()
expect(mockedToRejectedError).toHaveBeenCalledWith(errorAdd);
expect(mockedToRejectedError).toHaveBeenCalledWith(errorAdd)
expect(result.type).toBe("calendars/addCalendarResource/rejected");
expect(result.payload).toEqual(mockRejectedErrorResult);
});
});
expect(result.type).toBe('calendars/addCalendarResource/rejected')
expect(result.payload).toEqual(mockRejectedErrorResult)
})
})
__test__/features/Calendars/services/getCalendarsListAsync.test.tsx
+159 -159
View File
@@ -1,234 +1,234 @@
import { getCalendarsListAsync } from "@/features/Calendars/services/getCalendarsListAsync";
import { getOpenPaasUser } from "@/features/User/userAPI";
import { fetchOwnerData } from "@/features/Calendars/services/helpers";
import { getCalendars } from "@/features/Calendars/CalendarApi";
import { formatReduxError } from "@/utils/errorUtils";
import { normalizeCalendar } from "@/features/Calendars/utils/normalizeCalendar";
import { getCalendarsListAsync } from '@/features/Calendars/services/getCalendarsListAsync'
import { getOpenPaasUser } from '@/features/User/userAPI'
import { fetchOwnerData } from '@/features/Calendars/services/helpers'
import { getCalendars } from '@/features/Calendars/CalendarApi'
import { formatReduxError } from '@/utils/errorUtils'
import { normalizeCalendar } from '@/features/Calendars/utils/normalizeCalendar'
jest.mock("@/features/User/userAPI");
jest.mock("@/features/Calendars/services/helpers");
jest.mock("@/features/Calendars/CalendarApi");
jest.mock("@/utils/errorUtils");
jest.mock("@/features/Calendars/utils/normalizeCalendar");
jest.mock("@/utils/getAccessiblePair", () => ({
getAccessiblePair: jest.fn().mockReturnValue("#FFF"),
}));
jest.mock('@/features/User/userAPI')
jest.mock('@/features/Calendars/services/helpers')
jest.mock('@/features/Calendars/CalendarApi')
jest.mock('@/utils/errorUtils')
jest.mock('@/features/Calendars/utils/normalizeCalendar')
jest.mock('@/utils/getAccessiblePair', () => ({
getAccessiblePair: jest.fn().mockReturnValue('#FFF')
}))
jest.mock("@mui/material/styles", () => ({
createTheme: jest.fn().mockReturnValue({}),
}));
jest.mock('@mui/material/styles', () => ({
createTheme: jest.fn().mockReturnValue({})
}))
const mockedGetOpenPaasUser = getOpenPaasUser as jest.Mock;
const mockedFetchOwnerData = fetchOwnerData as jest.Mock;
const mockedGetCalendars = getCalendars as jest.Mock;
const mockedFormatReduxError = formatReduxError as jest.Mock;
const mockedNormalizeCalendar = normalizeCalendar as jest.Mock;
const mockedGetOpenPaasUser = getOpenPaasUser as jest.Mock
const mockedFetchOwnerData = fetchOwnerData as jest.Mock
const mockedGetCalendars = getCalendars as jest.Mock
const mockedFormatReduxError = formatReduxError as jest.Mock
const mockedNormalizeCalendar = normalizeCalendar as jest.Mock
describe("getCalendarsListAsync", () => {
let dispatch: jest.Mock;
let getState: jest.Mock;
describe('getCalendarsListAsync', () => {
let dispatch: jest.Mock
let getState: jest.Mock
beforeEach(() => {
dispatch = jest.fn();
getState = jest.fn();
jest.clearAllMocks();
dispatch = jest.fn()
getState = jest.fn()
jest.clearAllMocks()
mockedFormatReduxError.mockImplementation((err) => {
if (err?.message) return err.message;
if (typeof err === "string") return err;
return JSON.stringify(err);
});
});
mockedFormatReduxError.mockImplementation(err => {
if (err?.message) return err.message
if (typeof err === 'string') return err
return JSON.stringify(err)
})
})
it("should handle successful execution and merge with existing calendars", async () => {
it('should handle successful execution and merge with existing calendars', async () => {
getState.mockReturnValue({
calendars: {
list: {
"cal-existing": {
id: "cal-existing",
color: { light: "red", dark: "#FFF" },
events: { "event-1": {} },
},
},
'cal-existing': {
id: 'cal-existing',
color: { light: 'red', dark: '#FFF' },
events: { 'event-1': {} }
}
}
},
user: {
userData: { openpaasId: "user-123" },
},
});
userData: { openpaasId: 'user-123' }
}
})
const mockCalendarsResponse = {
_embedded: {
"dav:calendar": [{ id: "cal-existing" }, { id: "cal-new" }],
},
};
mockedGetCalendars.mockResolvedValue(mockCalendarsResponse);
'dav:calendar': [{ id: 'cal-existing' }, { id: 'cal-new' }]
}
}
mockedGetCalendars.mockResolvedValue(mockCalendarsResponse)
mockedNormalizeCalendar
.mockReturnValueOnce({
cal: { "dav:name": "Existing Cal", "apple:color": "blue" },
id: "cal-existing",
ownerId: "user-123",
description: "old cal",
cal: { 'dav:name': 'Existing Cal', 'apple:color': 'blue' },
id: 'cal-existing',
ownerId: 'user-123',
description: 'old cal',
delegated: false,
link: "/link/1",
link: '/link/1',
visibility: 1,
access: 3,
access: 3
})
.mockReturnValueOnce({
cal: { "dav:name": "New Cal" },
id: "cal-new",
ownerId: "user-456",
description: "new cal",
cal: { 'dav:name': 'New Cal' },
id: 'cal-new',
ownerId: 'user-456',
description: 'new cal',
delegated: true,
link: "/link/2",
link: '/link/2',
visibility: 2,
access: 2,
invite: [{ href: "", principal: "", access: 3, inviteStatus: 1 }],
});
invite: [{ href: '', principal: '', access: 3, inviteStatus: 1 }]
})
mockedFetchOwnerData
.mockResolvedValueOnce({
firstname: "John",
lastname: "Doe",
emails: ["john@example.com"],
firstname: 'John',
lastname: 'Doe',
emails: ['john@example.com']
})
.mockResolvedValueOnce({
firstname: "Jane",
lastname: "Smith",
emails: ["jane@example.com"],
});
firstname: 'Jane',
lastname: 'Smith',
emails: ['jane@example.com']
})
const thunk = getCalendarsListAsync();
const result = await thunk(dispatch, getState, undefined);
const thunk = getCalendarsListAsync()
const result = await thunk(dispatch, getState, undefined)
expect(result.type).toBe("calendars/getCalendars/fulfilled");
expect(result.type).toBe('calendars/getCalendars/fulfilled')
const payload = result.payload as {
importedCalendars: any;
errors: string;
};
importedCalendars: any
errors: string
}
expect(payload.errors).toBe("");
expect(Object.keys(payload.importedCalendars)).toHaveLength(2);
expect(payload.errors).toBe('')
expect(Object.keys(payload.importedCalendars)).toHaveLength(2)
expect(payload.importedCalendars["cal-existing"]).toMatchObject({
id: "cal-existing",
color: { light: "blue", dark: "#FFF" },
events: { "event-1": {} },
});
expect(payload.importedCalendars['cal-existing']).toMatchObject({
id: 'cal-existing',
color: { light: 'blue', dark: '#FFF' },
events: { 'event-1': {} }
})
expect(payload.importedCalendars["cal-new"]).toMatchObject({
id: "cal-new",
name: "New Cal",
owner: { firstname: "Jane", lastname: "Smith" },
});
expect(payload.importedCalendars['cal-new']).toMatchObject({
id: 'cal-new',
name: 'New Cal',
owner: { firstname: 'Jane', lastname: 'Smith' }
})
expect(mockedGetOpenPaasUser).not.toHaveBeenCalled(); // User ID existed in state
expect(mockedGetCalendars).toHaveBeenCalledWith("user-123");
});
expect(mockedGetOpenPaasUser).not.toHaveBeenCalled() // User ID existed in state
expect(mockedGetCalendars).toHaveBeenCalledWith('user-123')
})
it("should fetch user using getOpenPaasUser if openpaasId is not in state", async () => {
getState.mockReturnValue({ calendars: {}, user: {} });
mockedGetOpenPaasUser.mockResolvedValue({ id: "fetched-user-123" });
mockedGetCalendars.mockResolvedValue({ _embedded: { "dav:calendar": [] } });
it('should fetch user using getOpenPaasUser if openpaasId is not in state', async () => {
getState.mockReturnValue({ calendars: {}, user: {} })
mockedGetOpenPaasUser.mockResolvedValue({ id: 'fetched-user-123' })
mockedGetCalendars.mockResolvedValue({ _embedded: { 'dav:calendar': [] } })
const thunk = getCalendarsListAsync();
await thunk(dispatch, getState, undefined);
const thunk = getCalendarsListAsync()
await thunk(dispatch, getState, undefined)
expect(mockedGetOpenPaasUser).toHaveBeenCalled();
expect(mockedGetCalendars).toHaveBeenCalledWith("fetched-user-123");
});
expect(mockedGetOpenPaasUser).toHaveBeenCalled()
expect(mockedGetCalendars).toHaveBeenCalledWith('fetched-user-123')
})
it("should handle error when API call fails", async () => {
getState.mockReturnValue({ calendars: {}, user: {} });
mockedGetOpenPaasUser.mockResolvedValue({ id: "fetched-user-123" });
it('should handle error when API call fails', async () => {
getState.mockReturnValue({ calendars: {}, user: {} })
mockedGetOpenPaasUser.mockResolvedValue({ id: 'fetched-user-123' })
mockedGetCalendars.mockRejectedValue({
response: { status: 500 },
message: "Server Error",
});
message: 'Server Error'
})
// toRejectedError is imported from a mocked module; provide the expected return
const { toRejectedError } = jest.requireMock("@/utils/errorUtils") as {
toRejectedError: jest.Mock;
};
const { toRejectedError } = jest.requireMock('@/utils/errorUtils') as {
toRejectedError: jest.Mock
}
toRejectedError.mockReturnValueOnce({
status: 500,
message: "Server Error",
});
message: 'Server Error'
})
const thunk = getCalendarsListAsync();
const result = await thunk(dispatch, getState, undefined);
const thunk = getCalendarsListAsync()
const result = await thunk(dispatch, getState, undefined)
expect(result.type).toBe("calendars/getCalendars/rejected");
expect(result.type).toBe('calendars/getCalendars/rejected')
expect(result.payload).toEqual({
status: 500,
message: "Server Error",
});
});
message: 'Server Error'
})
})
it("should handle error when fetching owner data fails", async () => {
it('should handle error when fetching owner data fails', async () => {
getState.mockReturnValue({
calendars: {},
user: { userData: { openpaasId: "user-123" } },
});
user: { userData: { openpaasId: 'user-123' } }
})
mockedGetCalendars.mockResolvedValue({
_embedded: { "dav:calendar": [{ id: "cal-1" }] },
});
_embedded: { 'dav:calendar': [{ id: 'cal-1' }] }
})
mockedNormalizeCalendar.mockReturnValue({
cal: { "dav:name": "Error Cal" },
id: "cal-1",
ownerId: "error-123",
});
cal: { 'dav:name': 'Error Cal' },
id: 'cal-1',
ownerId: 'error-123'
})
// fetchOwnerData fails
mockedFetchOwnerData.mockRejectedValueOnce(new Error("Network Error"));
mockedFetchOwnerData.mockRejectedValueOnce(new Error('Network Error'))
const thunk = getCalendarsListAsync();
const result = await thunk(dispatch, getState, undefined);
const thunk = getCalendarsListAsync()
const result = await thunk(dispatch, getState, undefined)
const payload = result.payload as any;
expect(mockedFetchOwnerData).toHaveBeenCalledWith("error-123");
expect(payload.importedCalendars["cal-1"].owner).toEqual({
firstname: "",
lastname: "Unknown User",
emails: [],
});
const payload = result.payload as any
expect(mockedFetchOwnerData).toHaveBeenCalledWith('error-123')
expect(payload.importedCalendars['cal-1'].owner).toEqual({
firstname: '',
lastname: 'Unknown User',
emails: []
})
// Errors array should contain the error
expect(payload.errors).toContain("Network Error");
});
expect(payload.errors).toContain('Network Error')
})
it("should return owner data mapping properly (including resource: true)", async () => {
it('should return owner data mapping properly (including resource: true)', async () => {
getState.mockReturnValue({
calendars: {},
user: { userData: { openpaasId: "user-123" } },
});
user: { userData: { openpaasId: 'user-123' } }
})
mockedGetCalendars.mockResolvedValue({
_embedded: { "dav:calendar": [{ id: "cal-1" }] },
});
_embedded: { 'dav:calendar': [{ id: 'cal-1' }] }
})
mockedNormalizeCalendar.mockReturnValue({
cal: { "dav:name": "Resource Cal" },
id: "cal-1",
ownerId: "resource-123",
});
cal: { 'dav:name': 'Resource Cal' },
id: 'cal-1',
ownerId: 'resource-123'
})
// fetchOwnerData succeeds and returns a resource config structure
mockedFetchOwnerData.mockResolvedValueOnce({
firstname: "Creator",
lastname: "User",
firstname: 'Creator',
lastname: 'User',
emails: [],
resource: true,
});
resource: true
})
const thunk = getCalendarsListAsync();
const result = await thunk(dispatch, getState, undefined);
const thunk = getCalendarsListAsync()
const result = await thunk(dispatch, getState, undefined)
const payload = result.payload as any;
expect(mockedFetchOwnerData).toHaveBeenCalledWith("resource-123");
expect(payload.importedCalendars["cal-1"].owner).toEqual({
firstname: "Creator",
lastname: "User",
const payload = result.payload as any
expect(mockedFetchOwnerData).toHaveBeenCalledWith('resource-123')
expect(payload.importedCalendars['cal-1'].owner).toEqual({
firstname: 'Creator',
lastname: 'User',
emails: [],
resource: true,
});
});
});
resource: true
})
})
})
__test__/features/Calendars/services/helpers.test.tsx
+56 -56
View File
@@ -1,90 +1,90 @@
import { fetchOwnerData } from "@/features/Calendars/services/helpers";
import { getResourceDetails, getUserDetails } from "@/features/User/userAPI";
import { fetchOwnerData } from '@/features/Calendars/services/helpers'
import { getResourceDetails, getUserDetails } from '@/features/User/userAPI'
jest.mock("@/features/User/userAPI");
jest.mock('@/features/User/userAPI')
const mockedGetUserDetails = getUserDetails as jest.Mock;
const mockedGetResourceDetails = getResourceDetails as jest.Mock;
const mockedGetUserDetails = getUserDetails as jest.Mock
const mockedGetResourceDetails = getResourceDetails as jest.Mock
describe("helpers", () => {
describe('helpers', () => {
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
describe("fetchOwnerData", () => {
it("should return user details successfully", async () => {
describe('fetchOwnerData', () => {
it('should return user details successfully', async () => {
const mockUser = {
firstname: "John",
lastname: "Doe",
emails: ["john@example.com"],
};
mockedGetUserDetails.mockResolvedValueOnce(mockUser);
firstname: 'John',
lastname: 'Doe',
emails: ['john@example.com']
}
mockedGetUserDetails.mockResolvedValueOnce(mockUser)
const result = await fetchOwnerData("user-123");
const result = await fetchOwnerData('user-123')
expect(mockedGetUserDetails).toHaveBeenCalledWith("user-123");
expect(mockedGetResourceDetails).not.toHaveBeenCalled();
expect(result).toEqual(mockUser);
});
expect(mockedGetUserDetails).toHaveBeenCalledWith('user-123')
expect(mockedGetResourceDetails).not.toHaveBeenCalled()
expect(result).toEqual(mockUser)
})
it("should fetch resource details and its creator when user is not found", async () => {
const mockResource = { creator: "creator-456" };
it('should fetch resource details and its creator when user is not found', async () => {
const mockResource = { creator: 'creator-456' }
const mockCreator = {
firstname: "Creator",
lastname: "User",
emails: ["creator@example.com"],
};
firstname: 'Creator',
lastname: 'User',
emails: ['creator@example.com']
}
// Mock getUserDetails to fail with 404 for the initial call
mockedGetUserDetails.mockRejectedValueOnce({
response: { status: 404 },
});
response: { status: 404 }
})
// Mock getResourceDetails to succeed and return a creator ID
mockedGetResourceDetails.mockResolvedValueOnce(mockResource);
mockedGetResourceDetails.mockResolvedValueOnce(mockResource)
// Mock getUserDetails to succeed when called for the creator
mockedGetUserDetails.mockResolvedValueOnce(mockCreator);
mockedGetUserDetails.mockResolvedValueOnce(mockCreator)
const result = await fetchOwnerData("resource-123");
const result = await fetchOwnerData('resource-123')
expect(mockedGetUserDetails).toHaveBeenNthCalledWith(1, "resource-123");
expect(mockedGetResourceDetails).toHaveBeenCalledWith("resource-123");
expect(mockedGetUserDetails).toHaveBeenNthCalledWith(2, "creator-456");
expect(mockedGetUserDetails).toHaveBeenNthCalledWith(1, 'resource-123')
expect(mockedGetResourceDetails).toHaveBeenCalledWith('resource-123')
expect(mockedGetUserDetails).toHaveBeenNthCalledWith(2, 'creator-456')
expect(result).toEqual({
...mockCreator,
resource: true,
administrators: undefined,
resourceIcon: undefined,
});
});
resourceIcon: undefined
})
})
it("should throw error when getUserDetails fails with non-404 error", async () => {
const mockError = { response: { status: 500 } };
mockedGetUserDetails.mockRejectedValueOnce(mockError);
it('should throw error when getUserDetails fails with non-404 error', async () => {
const mockError = { response: { status: 500 } }
mockedGetUserDetails.mockRejectedValueOnce(mockError)
await expect(fetchOwnerData("user-123")).rejects.toEqual(mockError);
await expect(fetchOwnerData('user-123')).rejects.toEqual(mockError)
expect(mockedGetUserDetails).toHaveBeenCalledWith("user-123");
expect(mockedGetResourceDetails).not.toHaveBeenCalled();
});
expect(mockedGetUserDetails).toHaveBeenCalledWith('user-123')
expect(mockedGetResourceDetails).not.toHaveBeenCalled()
})
it("should throw error when getResourceDetails fails", async () => {
const mockError = new Error("Resource not found");
it('should throw error when getResourceDetails fails', async () => {
const mockError = new Error('Resource not found')
// Mock getUserDetails to fail with 404 for the initial call
mockedGetUserDetails.mockRejectedValueOnce({
response: { status: 404 },
});
response: { status: 404 }
})
// Mock getResourceDetails to fail
mockedGetResourceDetails.mockRejectedValueOnce(mockError);
mockedGetResourceDetails.mockRejectedValueOnce(mockError)
await expect(fetchOwnerData("resource-123")).rejects.toEqual(mockError);
await expect(fetchOwnerData('resource-123')).rejects.toEqual(mockError)
expect(mockedGetUserDetails).toHaveBeenCalledWith("resource-123");
expect(mockedGetResourceDetails).toHaveBeenCalledWith("resource-123");
expect(mockedGetUserDetails).toHaveBeenCalledTimes(1); // Only called once
});
});
});
expect(mockedGetUserDetails).toHaveBeenCalledWith('resource-123')
expect(mockedGetResourceDetails).toHaveBeenCalledWith('resource-123')
expect(mockedGetUserDetails).toHaveBeenCalledTimes(1) // Only called once
})
})
})
__test__/features/Calendars/services/refreshCalendar.test.tsx
+370 -370
View File
File diff suppressed because it is too large Load Diff
__test__/features/Error/ErrorHandler.test.tsx
+26 -26
View File
@@ -1,35 +1,35 @@
import { EventErrorHandler } from "@/components/Error/EventErrorHandler";
import { EventErrorHandler } from '@/components/Error/EventErrorHandler'
describe("EventErrorHandler", () => {
it("calls the callback when a new error is reported", () => {
const handler = new EventErrorHandler();
const callback = jest.fn();
describe('EventErrorHandler', () => {
it('calls the callback when a new error is reported', () => {
const handler = new EventErrorHandler()
const callback = jest.fn()
handler.setErrorCallback(callback);
handler.reportError("123", "Something broke");
handler.setErrorCallback(callback)
handler.reportError('123', 'Something broke')
expect(callback).toHaveBeenCalledWith(["Something broke"]);
});
expect(callback).toHaveBeenCalledWith(['Something broke'])
})
it("does not duplicate errors for same eventId", () => {
const handler = new EventErrorHandler();
const callback = jest.fn();
it('does not duplicate errors for same eventId', () => {
const handler = new EventErrorHandler()
const callback = jest.fn()
handler.setErrorCallback(callback);
handler.reportError("A", "Error 1");
handler.reportError("A", "Error 1 again");
handler.setErrorCallback(callback)
handler.reportError('A', 'Error 1')
handler.reportError('A', 'Error 1 again')
expect(callback).toHaveBeenCalledTimes(1);
});
expect(callback).toHaveBeenCalledTimes(1)
})
it("clears errors properly", () => {
const handler = new EventErrorHandler();
const callback = jest.fn();
it('clears errors properly', () => {
const handler = new EventErrorHandler()
const callback = jest.fn()
handler.setErrorCallback(callback);
handler.reportError("A", "Error 1");
handler.clearAll();
handler.setErrorCallback(callback)
handler.reportError('A', 'Error 1')
handler.clearAll()
expect(callback).toHaveBeenLastCalledWith([]);
});
});
expect(callback).toHaveBeenLastCalledWith([])
})
})
__test__/features/Events/AttendanceValidation.delegated.test.tsx
+90 -92
View File
@@ -1,183 +1,181 @@
import { Calendar } from "@/features/Calendars/CalendarTypes";
import { AttendanceValidation } from "@/features/Events/AttendanceValidation/AttendanceValidation";
import { ContextualizedEvent } from "@/features/Events/EventsTypes";
import { userAttendee } from "@/features/User/models/attendee";
import { userData } from "@/features/User/userDataTypes";
import { render } from "@testing-library/react";
import { Calendar } from '@/features/Calendars/CalendarTypes'
import { AttendanceValidation } from '@/features/Events/AttendanceValidation/AttendanceValidation'
import { ContextualizedEvent } from '@/features/Events/EventsTypes'
import { userAttendee } from '@/features/User/models/attendee'
import { userData } from '@/features/User/userDataTypes'
import { render } from '@testing-library/react'
jest.mock("twake-i18n", () => ({
useI18n: () => ({ t: (key: string) => key }),
}));
jest.mock('twake-i18n', () => ({
useI18n: () => ({ t: (key: string) => key })
}))
jest.mock("@/app/hooks", () => ({
jest.mock('@/app/hooks', () => ({
useAppDispatch: () => jest.fn(),
useAppSelector: jest.fn(),
}));
useAppSelector: jest.fn()
}))
const makeUser = (email: string): userData => ({
email,
given_name: "Alice",
family_name: "User",
name: "Alice User",
sid: "user1",
sub: "user1",
});
given_name: 'Alice',
family_name: 'User',
name: 'Alice User',
sid: 'user1',
sub: 'user1'
})
const makeContext = (
overrides: Partial<ContextualizedEvent> = {}
): ContextualizedEvent =>
({
event: {
uid: "event-1",
calId: "user1/cal1",
title: "Test",
start: "2024-01-15T10:00:00",
end: "2024-01-15T11:00:00",
organizer: { cal_address: "owner@example.com" },
attendee: [
{ cal_address: "owner@example.com", partstat: "NEEDS-ACTION" },
],
uid: 'event-1',
calId: 'user1/cal1',
title: 'Test',
start: '2024-01-15T10:00:00',
end: '2024-01-15T11:00:00',
organizer: { cal_address: 'owner@example.com' },
attendee: [{ cal_address: 'owner@example.com', partstat: 'NEEDS-ACTION' }]
},
calendar: {
id: "user1/cal1",
name: "Test",
id: 'user1/cal1',
name: 'Test',
delegated: false,
owner: { emails: ["alice@example.com"] },
events: {},
owner: { emails: ['alice@example.com'] },
events: {}
},
currentUserAttendee: {
cal_address: "alice@example.com",
partstat: "NEEDS-ACTION",
cal_address: 'alice@example.com',
partstat: 'NEEDS-ACTION'
},
isOwn: true,
isOrganizer: false,
isRecurring: false,
...overrides,
}) as unknown as ContextualizedEvent;
...overrides
}) as unknown as ContextualizedEvent
const noopSetFunc = jest.fn();
const noopSetFunc = jest.fn()
describe("AttendanceValidation - delegation", () => {
describe("non-delegated calendar", () => {
it("renders when isOwn and currentUserAttendee exists", () => {
describe('AttendanceValidation - delegation', () => {
describe('non-delegated calendar', () => {
it('renders when isOwn and currentUserAttendee exists', () => {
const { container } = render(
<AttendanceValidation
contextualizedEvent={makeContext({ isOwn: true })}
user={makeUser("alice@example.com")}
user={makeUser('alice@example.com')}
setAfterChoiceFunc={noopSetFunc}
setOpenEditModePopup={noopSetFunc}
/>
);
expect(container.firstChild).not.toBeNull();
});
)
expect(container.firstChild).not.toBeNull()
})
it("returns null when not isOwn and not delegated", () => {
it('returns null when not isOwn and not delegated', () => {
const { container } = render(
<AttendanceValidation
contextualizedEvent={makeContext({ isOwn: false })}
user={makeUser("other@example.com")}
user={makeUser('other@example.com')}
setAfterChoiceFunc={noopSetFunc}
setOpenEditModePopup={noopSetFunc}
/>
);
expect(container.firstChild).toBeNull();
});
});
)
expect(container.firstChild).toBeNull()
})
})
describe("delegated calendar", () => {
describe('delegated calendar', () => {
const delegatedContext = makeContext({
isOwn: false, // logged-in user is not the owner
calendar: {
id: "user2/cal1",
name: "Delegated Cal",
id: 'user2/cal1',
name: 'Delegated Cal',
delegated: true,
owner: { emails: ["owner@example.com"] },
events: {},
owner: { emails: ['owner@example.com'] },
events: {}
} as Calendar,
currentUserAttendee: {
cal_address: "owner@example.com",
partstat: "NEEDS-ACTION",
cal_address: 'owner@example.com',
partstat: 'NEEDS-ACTION'
} as userAttendee,
event: { class: "PUBLIC" },
});
event: { class: 'PUBLIC' }
})
it("renders even when isOwn is false", () => {
it('renders even when isOwn is false', () => {
const { container } = render(
<AttendanceValidation
contextualizedEvent={delegatedContext}
user={makeUser("alice@example.com")}
user={makeUser('alice@example.com')}
setAfterChoiceFunc={noopSetFunc}
setOpenEditModePopup={noopSetFunc}
/>
);
expect(container.firstChild).not.toBeNull();
});
)
expect(container.firstChild).not.toBeNull()
})
it("renders regardless of currentUserAttendee presence", () => {
it('renders regardless of currentUserAttendee presence', () => {
const { container } = render(
<AttendanceValidation
contextualizedEvent={{
...delegatedContext,
currentUserAttendee: undefined,
currentUserAttendee: undefined
}}
user={makeUser("alice@example.com")}
user={makeUser('alice@example.com')}
setAfterChoiceFunc={noopSetFunc}
setOpenEditModePopup={noopSetFunc}
/>
);
)
// delegated flag alone should keep it visible
expect(container.firstChild).not.toBeNull();
});
});
expect(container.firstChild).not.toBeNull()
})
})
describe("resource calendar", () => {
describe('resource calendar', () => {
const resourceContext = makeContext({
isOwn: false,
calendar: {
id: "res1/cal1",
name: "Resource Cal",
id: 'res1/cal1',
name: 'Resource Cal',
delegated: false,
owner: {
emails: ["resource@example.com"],
emails: ['resource@example.com'],
resource: true,
administrators: [{ id: "admin1" }],
administrators: [{ id: 'admin1' }]
},
events: {},
} as Calendar,
});
events: {}
} as Calendar
})
it("renders when user is an administrator of the resource", () => {
it('renders when user is an administrator of the resource', () => {
const { getByText } = render(
<AttendanceValidation
contextualizedEvent={resourceContext}
user={
{
...makeUser("admin@example.com"),
openpaasId: "admin1",
...makeUser('admin@example.com'),
openpaasId: 'admin1'
} as userData
}
setAfterChoiceFunc={noopSetFunc}
setOpenEditModePopup={noopSetFunc}
/>
);
expect(getByText("eventPreview.authorizeQuestion")).toBeTruthy();
});
)
expect(getByText('eventPreview.authorizeQuestion')).toBeTruthy()
})
it("returns null when user is not an administrator of the resource", () => {
it('returns null when user is not an administrator of the resource', () => {
const { container } = render(
<AttendanceValidation
contextualizedEvent={resourceContext}
user={
{
...makeUser("other@example.com"),
openpaasId: "other1",
...makeUser('other@example.com'),
openpaasId: 'other1'
} as userData
}
setAfterChoiceFunc={noopSetFunc}
setOpenEditModePopup={noopSetFunc}
/>
);
expect(container.firstChild).toBeNull();
});
});
});
)
expect(container.firstChild).toBeNull()
})
})
})
__test__/features/Events/EventApi.test.tsx
+372 -376
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/EventDisplay.test.tsx
+987 -989
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/EventFullDisplay.delegated.test.tsx
+78 -78
View File
@@ -1,131 +1,131 @@
import * as eventThunks from "@/features/Calendars/services";
import EventUpdateModal from "@/features/Events/EventUpdateModal";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import * as eventThunks from '@/features/Calendars/services'
import EventUpdateModal from '@/features/Events/EventUpdateModal'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
describe("Event Full Display — delegated calendar move", () => {
const mockOnClose = jest.fn();
describe('Event Full Display — delegated calendar move', () => {
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
const testDate = new Date("2025-01-15T10:00:00.000Z");
const testEndDate = new Date("2025-01-15T11:00:00.000Z");
const testDate = new Date('2025-01-15T10:00:00.000Z')
const testEndDate = new Date('2025-01-15T11:00:00.000Z')
const baseUserState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
openpaasId: "user1",
sub: 'test',
email: 'test@test.com',
sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
openpaasId: 'user1'
},
organiserData: {
cn: "test",
cal_address: "test@test.com",
},
},
};
cn: 'test',
cal_address: 'test@test.com'
}
}
}
const preloadedDelegatedCals = {
...baseUserState,
calendars: {
pending: false,
list: {
"user1/cal1": {
id: "user1/cal1",
name: "Calendar One",
color: "#FF0000",
'user1/cal1': {
id: 'user1/cal1',
name: 'Calendar One',
color: '#FF0000',
events: {
event1: {
uid: "event1",
title: "Test Event",
calId: "user1/cal1",
uid: 'event1',
title: 'Test Event',
calId: 'user1/cal1',
start: testDate.toISOString(),
end: testEndDate.toISOString(),
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
URL: "/calendar/user1/cal1/event1.ics",
},
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: '/calendar/user1/cal1/event1.ics'
}
},
link: "/calendar/user1/cal1.json",
link: '/calendar/user1/cal1.json'
},
"user2/cal2": {
id: "user2/cal2",
name: "Delegated Calendar",
color: "#00FF00",
'user2/cal2': {
id: 'user2/cal2',
name: 'Delegated Calendar',
color: '#00FF00',
delegated: true,
access: { write: true },
owner: {
emails: ["delegate@test.com"],
name: "Delegate User",
emails: ['delegate@test.com'],
name: 'Delegate User'
},
events: {},
link: "/calendar/user2/cal2.json",
},
},
},
};
link: '/calendar/user2/cal2.json'
}
}
}
}
it("calls deleteEventAsync and putEventAsync — and NOT moveEventAsync — when moving to a delegated calendar", async () => {
it('calls deleteEventAsync and putEventAsync — and NOT moveEventAsync — when moving to a delegated calendar', async () => {
const spyPut = jest
.spyOn(eventThunks, "putEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'putEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
const spyDelete = jest
.spyOn(eventThunks, "deleteEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'deleteEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
const spyMove = jest
.spyOn(eventThunks, "moveEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'moveEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
await act(async () =>
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"user1/cal1"}
eventId={"event1"}
calId={'user1/cal1'}
eventId={'event1'}
/>,
preloadedDelegatedCals
)
);
)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
const calendarSelect = screen.getByLabelText("event.form.calendar");
await act(async () => fireEvent.mouseDown(calendarSelect));
const option = await screen.findByText("Delegated Calendar");
fireEvent.click(option);
const calendarSelect = screen.getByLabelText('event.form.calendar')
await act(async () => fireEvent.mouseDown(calendarSelect))
const option = await screen.findByText('Delegated Calendar')
fireEvent.click(option)
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
});
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
})
await waitFor(
() => {
expect(spyPut).toHaveBeenCalled();
expect(spyPut).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
await waitFor(
() => {
expect(spyDelete).toHaveBeenCalled();
expect(spyDelete).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
expect(spyMove).not.toHaveBeenCalled();
});
});
expect(spyMove).not.toHaveBeenCalled()
})
})
__test__/features/Events/EventFullDisplay.test.tsx
+233 -233
View File
@@ -1,422 +1,422 @@
import { InfoRow } from "@/components/Event/InfoRow";
import { LONG_DATE_FORMAT } from "@/components/Event/utils/dateTimeFormatters";
import * as eventThunks from "@/features/Calendars/services";
import EventUpdateModal from "@/features/Events/EventUpdateModal";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import dayjs from "dayjs";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import { InfoRow } from '@/components/Event/InfoRow'
import { LONG_DATE_FORMAT } from '@/components/Event/utils/dateTimeFormatters'
import * as eventThunks from '@/features/Calendars/services'
import EventUpdateModal from '@/features/Events/EventUpdateModal'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import dayjs from 'dayjs'
import { renderWithProviders } from '../../utils/Renderwithproviders'
describe("Event Full Display", () => {
const mockOnClose = jest.fn();
const day = new Date("2025-01-15T10:00:00.000Z"); // Fixed date in UTC: Jan 15, 2025 10:00 AM UTC
describe('Event Full Display', () => {
const mockOnClose = jest.fn()
const day = new Date('2025-01-15T10:00:00.000Z') // Fixed date in UTC: Jan 15, 2025 10:00 AM UTC
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
openpaasId: '667037022b752d0026472254'
},
organiserData: {
cn: "test",
cal_address: "test@test.com",
},
cn: 'test',
cal_address: 'test@test.com'
}
},
calendars: {
list: {
"667037022b752d0026472254/cal1": {
id: "667037022b752d0026472254/cal1",
name: "First Calendar",
color: "#FF0000",
'667037022b752d0026472254/cal1': {
id: '667037022b752d0026472254/cal1',
name: 'First Calendar',
color: '#FF0000',
events: {
event1: {
uid: "event1",
title: "Test Event",
calId: "667037022b752d0026472254/cal1",
uid: 'event1',
title: 'Test Event',
calId: '667037022b752d0026472254/cal1',
start: day.toISOString(),
end: day.toISOString(),
organizer: { cn: "test", cal_address: "test@test.com" },
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [
{
cn: "test",
cal_address: "test@test.com",
partstat: "NEEDS-ACTION",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cn: 'test',
cal_address: 'test@test.com',
partstat: 'NEEDS-ACTION',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL'
},
{
cn: "John",
cal_address: "john@test.com",
partstat: "NEEDS-ACTION",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
},
],
},
},
cn: 'John',
cal_address: 'john@test.com',
partstat: 'NEEDS-ACTION',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL'
}
]
}
}
},
"otherCal/cal": {
id: "otherCal/cal",
name: "Calendar 1",
color: "#FF0000",
'otherCal/cal': {
id: 'otherCal/cal',
name: 'Calendar 1',
color: '#FF0000',
events: {
event1: {
uid: "event1",
calId: "otherCal/cal",
title: "Test Event Other cal",
uid: 'event1',
calId: 'otherCal/cal',
title: 'Test Event Other cal',
start: day.toISOString(),
end: day.toISOString(),
organizer: { cn: "john", cal_address: "john@test.com" },
},
},
},
},
},
};
organizer: { cn: 'john', cal_address: 'john@test.com' }
}
}
}
}
}
}
it("renders correctly event data with fixed timezone", () => {
it('renders correctly event data with fixed timezone', () => {
// Use fixed timezone UTC for consistent test results across all environments
const fixedDate = new Date("2025-01-15T10:00:00.000Z"); // 10AM UTC
const endDate = new Date(fixedDate.getTime() + 3600000); // 11AM UTC
const fixedDate = new Date('2025-01-15T10:00:00.000Z') // 10AM UTC
const endDate = new Date(fixedDate.getTime() + 3600000) // 11AM UTC
// With UTC timezone set, formatLocalDateTime produces predictable values
const expectedStart = "2025-01-15T10:00"; // 10:00 AM UTC
const expectedEnd = "2025-01-15T11:00"; // 11:00 AM UTC
const expectedStart = '2025-01-15T10:00' // 10:00 AM UTC
const expectedEnd = '2025-01-15T11:00' // 11:00 AM UTC
const stateWithFixedDate = {
...preloadedState,
calendars: {
pending: false,
list: {
"667037022b752d0026472254/cal1": {
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
'667037022b752d0026472254/cal1': {
...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
events: {
event1: {
...preloadedState.calendars.list[
"667037022b752d0026472254/cal1"
'667037022b752d0026472254/cal1'
].events.event1,
start: fixedDate.toISOString(),
end: endDate.toISOString(),
timezone: "UTC",
},
},
},
},
},
};
timezone: 'UTC'
}
}
}
}
}
}
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
stateWithFixedDate
);
)
expect(screen.getByDisplayValue("Test Event")).toBeInTheDocument();
expect(screen.getByDisplayValue('Test Event')).toBeInTheDocument()
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
const startDateInput = screen.getByTestId("start-date-input");
const startTimeInput = screen.getByTestId("start-time-input");
const endTimeInput = screen.getByTestId("end-time-input");
const startDateInput = screen.getByTestId('start-date-input')
const startTimeInput = screen.getByTestId('start-time-input')
const endTimeInput = screen.getByTestId('end-time-input')
expect(startDateInput).toBeInTheDocument();
expect(startTimeInput).toBeInTheDocument();
expect(endTimeInput).toBeInTheDocument();
expect(startDateInput).toBeInTheDocument()
expect(startTimeInput).toBeInTheDocument()
expect(endTimeInput).toBeInTheDocument()
expect(startDateInput).toHaveValue(
dayjs(expectedStart).format(LONG_DATE_FORMAT)
);
expect(startTimeInput).toHaveValue(dayjs(expectedStart).format("HH:mm"));
)
expect(startTimeInput).toHaveValue(dayjs(expectedStart).format('HH:mm'))
expect(endTimeInput).toHaveValue(dayjs(expectedEnd).format("HH:mm"));
expect(endTimeInput).toHaveValue(dayjs(expectedEnd).format('HH:mm'))
expect(screen.getByText("First Calendar")).toBeInTheDocument();
});
it("calls onClose when Cancel clicked", () => {
expect(screen.getByText('First Calendar')).toBeInTheDocument()
})
it('calls onClose when Cancel clicked', () => {
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
preloadedState
);
fireEvent.click(screen.getAllByTestId("CloseIcon")[0]);
)
fireEvent.click(screen.getAllByTestId('CloseIcon')[0])
expect(mockOnClose).toHaveBeenCalledWith({}, "backdropClick");
});
it("toggle Show More reveals extra fields", async () => {
expect(mockOnClose).toHaveBeenCalledWith({}, 'backdropClick')
})
it('toggle Show More reveals extra fields', async () => {
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
preloadedState
);
)
act(() => {
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
});
screen.getByRole('button', { name: 'common.moreOptions' })
)
})
await waitFor(() => {
expect(screen.getByText("event.form.notification")).toBeInTheDocument();
});
expect(screen.getByText('event.form.notification')).toBeInTheDocument()
})
// EventDisplay modal doesn't have Repeat checkbox, only RepeatEvent component
// which shows repetition settings when repetition data exists
// Since test event has no repetition data, RepeatEvent component won't show Repeat checkbox
fireEvent.click(screen.getByRole("button", { name: /Show Less/i }));
});
fireEvent.click(screen.getByRole('button', { name: /Show Less/i }))
})
it("can edit title when user is organizer", () => {
it('can edit title when user is organizer', () => {
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
preloadedState
);
const titleField = screen.getByLabelText("event.form.title");
fireEvent.change(titleField, { target: { value: "New Title" } });
expect(screen.getByDisplayValue("New Title")).toBeInTheDocument();
});
it("toggle all-day updates end date correctly", () => {
)
const titleField = screen.getByLabelText('event.form.title')
fireEvent.change(titleField, { target: { value: 'New Title' } })
expect(screen.getByDisplayValue('New Title')).toBeInTheDocument()
})
it('toggle all-day updates end date correctly', () => {
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
preloadedState
);
)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
fireEvent.click(allDayCheckbox);
expect(allDayCheckbox).toBeChecked();
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
const allDayCheckbox = screen.getByLabelText('event.form.allDay')
fireEvent.click(allDayCheckbox)
expect(allDayCheckbox).toBeChecked()
const expectedDate = dayjs(day).format(LONG_DATE_FORMAT);
const expectedDate = dayjs(day).format(LONG_DATE_FORMAT)
const startDateInput = screen.getByTestId("start-date-input");
const endDateInput = screen.getByTestId("end-date-input");
const startDateInput = screen.getByTestId('start-date-input')
const endDateInput = screen.getByTestId('end-date-input')
expect(startDateInput).toHaveValue(expectedDate);
expect(endDateInput).toHaveValue(expectedDate);
});
expect(startDateInput).toHaveValue(expectedDate)
expect(endDateInput).toHaveValue(expectedDate)
})
it("saves event and moves it when calendar is changed", async () => {
it('saves event and moves it when calendar is changed', async () => {
const spyPut = jest
.spyOn(eventThunks, "putEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'putEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
const spyMove = jest
.spyOn(eventThunks, "moveEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'moveEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
const testDate = new Date("2025-01-15T10:00:00.000Z");
const testEndDate = new Date("2025-01-15T11:00:00.000Z");
const testDate = new Date('2025-01-15T10:00:00.000Z')
const testEndDate = new Date('2025-01-15T11:00:00.000Z')
const preloadedTwoCals = {
...preloadedState,
calendars: {
pending: false,
list: {
"667037022b752d0026472254/cal1": {
id: "667037022b752d0026472254/cal1",
name: "Calendar One",
color: "#FF0000",
'667037022b752d0026472254/cal1': {
id: '667037022b752d0026472254/cal1',
name: 'Calendar One',
color: '#FF0000',
events: {
event1: {
uid: "event1",
title: "Test Event",
calId: "667037022b752d0026472254/cal1",
uid: 'event1',
title: 'Test Event',
calId: '667037022b752d0026472254/cal1',
start: testDate.toISOString(),
end: testEndDate.toISOString(),
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
},
},
},
"667037022b752d0026472254/cal2": {
id: "667037022b752d0026472254/cal2",
name: "Calendar Two",
color: "#00FF00",
events: {},
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }]
}
}
},
'667037022b752d0026472254/cal2': {
id: '667037022b752d0026472254/cal2',
name: 'Calendar Two',
color: '#00FF00',
events: {}
}
},
pending: false,
},
};
pending: false
}
}
await act(async () =>
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
preloadedTwoCals
)
);
)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const calendarSelect = screen.getByLabelText("event.form.calendar");
await act(async () => fireEvent.mouseDown(calendarSelect));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
const calendarSelect = screen.getByLabelText('event.form.calendar')
await act(async () => fireEvent.mouseDown(calendarSelect))
const option = await screen.findByText("Calendar Two");
fireEvent.click(option);
const option = await screen.findByText('Calendar Two')
fireEvent.click(option)
await act(async () => {
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
});
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
})
await waitFor(
() => {
expect(spyPut).toHaveBeenCalled();
expect(spyPut).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
await waitFor(
() => {
expect(spyMove).toHaveBeenCalled();
expect(spyMove).toHaveBeenCalled()
},
{ timeout: 3000 }
);
});
)
})
it("edit modal displays event time in original event timezone", () => {
it('edit modal displays event time in original event timezone', () => {
// GIVEN user timezone is UTC+2
// WHEN the user edits an event at 2PM UTC+7 (Asia/Bangkok)
// THEN the update modal displays the time as 2PM in Asia/Bangkok timezone
const eventDateUTC7 = new Date("2025-01-15T07:00:00.000Z"); // 7AM UTC = 2PM UTC+7
const eventDateUTC7 = new Date('2025-01-15T07:00:00.000Z') // 7AM UTC = 2PM UTC+7
const stateWithTimezone = {
...preloadedState,
calendars: {
pending: false,
list: {
"667037022b752d0026472254/cal1": {
id: "667037022b752d0026472254/cal1",
name: "Test Calendar",
color: "#FF0000",
'667037022b752d0026472254/cal1': {
id: '667037022b752d0026472254/cal1',
name: 'Test Calendar',
color: '#FF0000',
events: {
event1: {
uid: "event1",
title: "Timezone Edit Test",
calId: "667037022b752d0026472254/cal1",
uid: 'event1',
title: 'Timezone Edit Test',
calId: '667037022b752d0026472254/cal1',
start: eventDateUTC7.toISOString(),
end: new Date(eventDateUTC7.getTime() + 3600000).toISOString(),
timezone: "Asia/Bangkok",
timezone: 'Asia/Bangkok',
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
},
},
},
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }]
}
}
}
},
pending: false,
},
};
pending: false
}
}
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
stateWithTimezone
);
)
// Expand to show timezone selector (normal mode hides it)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
// The timezone select should have Asia/Bangkok selected
const timeZone = screen.getByDisplayValue(/Asia\/Bangkok/i);
expect(timeZone).toBeInTheDocument();
});
const timeZone = screen.getByDisplayValue(/Asia\/Bangkok/i)
expect(timeZone).toBeInTheDocument()
})
it("InfoRow renders error style when error prop is true", () => {
renderWithProviders(<InfoRow icon={<span>i</span>} text="Bad" error />);
expect(screen.getByText("Bad")).toBeInTheDocument();
});
it('InfoRow renders error style when error prop is true', () => {
renderWithProviders(<InfoRow icon={<span>i</span>} text="Bad" error />)
expect(screen.getByText('Bad')).toBeInTheDocument()
})
it("can remove an attendee with the close button", () => {
it('can remove an attendee with the close button', () => {
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
preloadedState
);
)
const removeBtn = screen.getAllByTestId("CloseIcon").pop()!;
fireEvent.click(removeBtn);
const removeBtn = screen.getAllByTestId('CloseIcon').pop()!
fireEvent.click(removeBtn)
expect(screen.queryByText(/John/)).not.toBeInTheDocument();
});
expect(screen.queryByText(/John/)).not.toBeInTheDocument()
})
it("renders video conference info when x_openpass_videoconference exists", () => {
it('renders video conference info when x_openpass_videoconference exists', () => {
const videoState = {
...preloadedState,
calendars: {
pending: false,
list: {
"667037022b752d0026472254/cal1": {
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
'667037022b752d0026472254/cal1': {
...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
events: {
event1: {
...preloadedState.calendars.list[
"667037022b752d0026472254/cal1"
'667037022b752d0026472254/cal1'
].events.event1,
x_openpass_videoconference: "https://meet.test/video",
},
},
},
},
},
};
x_openpass_videoconference: 'https://meet.test/video'
}
}
}
}
}
}
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"event1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'event1'}
/>,
videoState
);
)
expect(
screen.getByText("event.form.joinVisioConference")
).toBeInTheDocument();
});
});
screen.getByText('event.form.joinVisioConference')
).toBeInTheDocument()
})
})
__test__/features/Events/EventModal.test.tsx
+370 -372
View File
@@ -1,115 +1,115 @@
import * as calendarsApi from "@/features/Calendars/CalendarApi";
import * as eventThunks from "@/features/Calendars/services";
import EventPopover from "@/features/Events/EventModal";
import { api } from "@/utils/apiUtils";
import { DateSelectArg } from "@fullcalendar/core";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import * as calendarsApi from '@/features/Calendars/CalendarApi'
import * as eventThunks from '@/features/Calendars/services'
import EventPopover from '@/features/Events/EventModal'
import { api } from '@/utils/apiUtils'
import { DateSelectArg } from '@fullcalendar/core'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/utils/apiUtils");
jest.mock('@/utils/apiUtils')
describe("EventPopover", () => {
describe('EventPopover', () => {
beforeEach(() => {
sessionStorage.clear();
});
sessionStorage.clear()
})
const mockOnClose = jest.fn();
const mockSetSelectedRange = jest.fn();
const mockCalendarRef = { current: { select: jest.fn() } } as any;
const mockOnClose = jest.fn()
const mockSetSelectedRange = jest.fn()
const mockCalendarRef = { current: { select: jest.fn() } } as any
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
openpaasId: '667037022b752d0026472254'
},
organiserData: {
cn: "test",
cal_address: "test@test.com",
},
cn: 'test',
cal_address: 'test@test.com'
}
},
calendars: {
list: {
"667037022b752d0026472254/cal1": {
id: "667037022b752d0026472254/cal1",
name: "Calendar 1",
color: "#FF0000",
},
"667037022b752d0026472254/cal2": {
id: "667037022b752d0026472254/cal2",
name: "Calendar 2",
color: "#00FF00",
'667037022b752d0026472254/cal1': {
id: '667037022b752d0026472254/cal1',
name: 'Calendar 1',
color: '#FF0000'
},
'667037022b752d0026472254/cal2': {
id: '667037022b752d0026472254/cal2',
name: 'Calendar 2',
color: '#00FF00'
}
},
pending: false,
},
};
pending: false
}
}
const mockUsers = [
{
id: "john@example.com",
objectType: "user",
id: 'john@example.com',
objectType: 'user',
emailAddresses: [
{
value: "john@example.com",
type: "default",
},
value: 'john@example.com',
type: 'default'
}
],
names: [
{
displayName: "John Doe",
type: "default",
},
],
displayName: 'John Doe',
type: 'default'
}
]
},
{
id: "jane@example.com",
objectType: "user",
id: 'jane@example.com',
objectType: 'user',
emailAddresses: [
{
value: "jane@example.com",
type: "default",
},
value: 'jane@example.com',
type: 'default'
}
],
names: [
{
displayName: "Jane Smith",
type: "default",
},
],
displayName: 'Jane Smith',
type: 'default'
}
]
},
{
id: "room1@example.com",
objectType: "resource",
id: 'room1@example.com',
objectType: 'resource',
emailAddresses: [
{
value: "room1@example.com",
type: "default",
},
value: 'room1@example.com',
type: 'default'
}
],
names: [
{
displayName: "Room 1",
type: "default",
},
],
},
];
(api.post as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockUsers),
});
displayName: 'Room 1',
type: 'default'
}
]
}
]
;(api.post as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockUsers)
})
const defaultSelectedRange = {
startStr: "2025-07-18T09:00",
endStr: "2025-07-18T10:00",
start: new Date("2025-07-18T09:00"),
end: new Date("2025-07-18T10:00"),
startStr: '2025-07-18T09:00',
endStr: '2025-07-18T10:00',
start: new Date('2025-07-18T09:00'),
end: new Date('2025-07-18T10:00'),
allDay: false,
resource: undefined,
} as unknown as DateSelectArg;
resource: undefined
} as unknown as DateSelectArg
const renderPopover = (selectedRange = defaultSelectedRange) => {
renderWithProviders(
@@ -122,461 +122,459 @@ describe("EventPopover", () => {
calendarRef={mockCalendarRef}
/>,
preloadedState
);
};
)
}
it("renders correctly with inputs and calendar options", () => {
renderPopover();
it('renders correctly with inputs and calendar options', () => {
renderPopover()
// Check dialog title
expect(screen.getByText("event.createEvent")).toBeInTheDocument();
expect(screen.getByText('event.createEvent')).toBeInTheDocument()
// Check inputs exist by their roles
const titleInput = screen.getByRole("textbox", { name: /title/i });
expect(titleInput).toBeInTheDocument();
const titleInput = screen.getByRole('textbox', { name: /title/i })
expect(titleInput).toBeInTheDocument()
// Description input is only visible after clicking "Add description" button
const addDescriptionButton = screen.getByRole("button", {
name: "event.form.addDescription",
});
expect(addDescriptionButton).toBeInTheDocument();
const addDescriptionButton = screen.getByRole('button', {
name: 'event.form.addDescription'
})
expect(addDescriptionButton).toBeInTheDocument()
// In normal mode calendar is a SectionPreviewRow (button), not combobox
expect(
screen.getByRole("button", { name: "Calendar 1" })
).toBeInTheDocument();
screen.getByRole('button', { name: 'Calendar 1' })
).toBeInTheDocument()
// Check button
expect(
screen.getByRole("button", { name: "common.moreOptions" })
).toBeInTheDocument();
screen.getByRole('button', { name: 'common.moreOptions' })
).toBeInTheDocument()
// Extended mode
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
// Back button appears
expect(screen.getByLabelText("show less")).toBeInTheDocument();
expect(screen.getByLabelText('show less')).toBeInTheDocument()
// Extended labels appear
expect(screen.getAllByText("event.form.repeat")).toHaveLength(1);
expect(screen.getAllByText("event.form.notification")).toHaveLength(1);
expect(screen.getAllByText("event.form.visibleTo")).toHaveLength(1);
expect(screen.getAllByText("event.form.showMeAs")).toHaveLength(1);
});
expect(screen.getAllByText('event.form.repeat')).toHaveLength(1)
expect(screen.getAllByText('event.form.notification')).toHaveLength(1)
expect(screen.getAllByText('event.form.visibleTo')).toHaveLength(1)
expect(screen.getAllByText('event.form.showMeAs')).toHaveLength(1)
})
it("fills start from selectedRange", () => {
it('fills start from selectedRange', () => {
renderPopover({
startStr: "2026-07-20T10:00",
endStr: "2026-07-20T12:00",
start: new Date("2026-07-20T10:00"),
end: new Date("2026-07-20T12:00"),
allDay: false,
} as unknown as DateSelectArg);
startStr: '2026-07-20T10:00',
endStr: '2026-07-20T12:00',
start: new Date('2026-07-20T10:00'),
end: new Date('2026-07-20T12:00'),
allDay: false
} as unknown as DateSelectArg)
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
expect(screen.getByTestId('start-date-input')).toBeInTheDocument()
expect(screen.getByTestId('start-time-input')).toBeInTheDocument()
})
it("updates inputs on change", () => {
renderPopover();
it('updates inputs on change', () => {
renderPopover()
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: "My Event" },
});
expect(screen.getByLabelText("event.form.title")).toHaveValue("My Event");
fireEvent.change(screen.getByLabelText('event.form.title'), {
target: { value: 'My Event' }
})
expect(screen.getByLabelText('event.form.title')).toHaveValue('My Event')
// Click "Add description" button first
fireEvent.click(
screen.getByRole("button", { name: "event.form.addDescription" })
);
screen.getByRole('button', { name: 'event.form.addDescription' })
)
fireEvent.change(screen.getByLabelText("event.form.description"), {
target: { value: "Event Description" },
});
expect(screen.getByLabelText("event.form.description")).toHaveValue(
"Event Description"
);
fireEvent.change(screen.getByLabelText('event.form.description'), {
target: { value: 'Event Description' }
})
expect(screen.getByLabelText('event.form.description')).toHaveValue(
'Event Description'
)
// Expand location section (normal mode shows SectionPreviewRow)
fireEvent.click(
screen.getByRole("button", { name: "event.form.locationPlaceholder" })
);
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: "Conference Room" },
});
expect(screen.getByLabelText("event.form.location")).toHaveValue(
"Conference Room"
);
});
screen.getByRole('button', { name: 'event.form.locationPlaceholder' })
)
fireEvent.change(screen.getByLabelText('event.form.location'), {
target: { value: 'Conference Room' }
})
expect(screen.getByLabelText('event.form.location')).toHaveValue(
'Conference Room'
)
})
it("changes selected calendar", async () => {
renderPopover();
it('changes selected calendar', async () => {
renderPopover()
// Expand to show calendar combobox (normal mode shows SectionPreviewRow)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const select = screen.getByLabelText("event.form.calendar");
fireEvent.mouseDown(select); // Open menu
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
const select = screen.getByLabelText('event.form.calendar')
fireEvent.mouseDown(select) // Open menu
const option = await screen.findByText("Calendar 2");
fireEvent.click(option);
const option = await screen.findByText('Calendar 2')
fireEvent.click(option)
const calendarSelect = screen.getByRole("combobox", { name: /Calendar/i });
expect(calendarSelect).toHaveTextContent("Calendar 2");
});
it("adds a attendee", async () => {
jest.useFakeTimers();
const calendarSelect = screen.getByRole('combobox', { name: /Calendar/i })
expect(calendarSelect).toHaveTextContent('Calendar 2')
})
it('adds a attendee', async () => {
jest.useFakeTimers()
try {
jest
.spyOn(calendarsApi, "getCalendars")
.mockReturnValue({ json: jest.fn() });
renderPopover();
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: "newEvent" },
});
const select = screen.getByLabelText("peopleSearch.label");
.spyOn(calendarsApi, 'getCalendars')
.mockReturnValue({ json: jest.fn() })
renderPopover()
fireEvent.change(screen.getByLabelText('event.form.title'), {
target: { value: 'newEvent' }
})
const select = screen.getByLabelText('peopleSearch.label')
act(() => {
select.focus();
fireEvent.mouseDown(select);
userEvent.type(select, "john");
});
select.focus()
fireEvent.mouseDown(select)
userEvent.type(select, 'john')
})
await act(async () => {
jest.advanceTimersByTime(400);
});
await waitFor(() => expect(api.post).toHaveBeenCalledTimes(1));
jest.advanceTimersByTime(400)
})
await waitFor(() => expect(api.post).toHaveBeenCalledTimes(1))
await waitFor(() => {
expect(screen.getByText("John Doe")).toBeInTheDocument();
});
expect(screen.getByText('John Doe')).toBeInTheDocument()
})
await act(async () => {
userEvent.click(screen.getByText("John Doe"));
});
userEvent.click(screen.getByText('John Doe'))
})
const spy = jest
.spyOn(eventThunks, "putEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'putEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
await waitFor(() => {
expect(spy).toHaveBeenCalled();
});
expect(spy).toHaveBeenCalled()
})
const receivedPayload = spy.mock.calls[0][0];
const receivedPayload = spy.mock.calls[0][0]
expect(receivedPayload.cal).toEqual(
preloadedState.calendars.list["667037022b752d0026472254/cal1"]
);
preloadedState.calendars.list['667037022b752d0026472254/cal1']
)
expect(receivedPayload.newEvent.attendee).toHaveLength(2);
expect(receivedPayload.newEvent.attendee).toHaveLength(2)
expect(receivedPayload.newEvent.attendee).toStrictEqual([
{
cn: "test",
cal_address: "test@test.com",
partstat: "ACCEPTED",
rsvp: "FALSE",
role: "CHAIR",
cutype: "INDIVIDUAL",
cn: 'test',
cal_address: 'test@test.com',
partstat: 'ACCEPTED',
rsvp: 'FALSE',
role: 'CHAIR',
cutype: 'INDIVIDUAL'
},
{
cn: "John Doe",
cal_address: "john@example.com",
partstat: "NEEDS-ACTION",
rsvp: "FALSE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
},
]);
cn: 'John Doe',
cal_address: 'john@example.com',
partstat: 'NEEDS-ACTION',
rsvp: 'FALSE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL'
}
])
} finally {
jest.useRealTimers();
jest.useRealTimers()
}
});
})
it("adds a resource", async () => {
jest.useFakeTimers();
it('adds a resource', async () => {
jest.useFakeTimers()
try {
renderPopover();
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: "newEventWithResource" },
});
renderPopover()
fireEvent.change(screen.getByLabelText('event.form.title'), {
target: { value: 'newEventWithResource' }
})
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
const resourceCombobox = screen.getByPlaceholderText(
"resourceSearch.placeholder"
);
'resourceSearch.placeholder'
)
act(() => {
resourceCombobox.focus();
fireEvent.mouseDown(resourceCombobox);
});
await userEvent.type(resourceCombobox, "room");
resourceCombobox.focus()
fireEvent.mouseDown(resourceCombobox)
})
await userEvent.type(resourceCombobox, 'room')
await act(async () => {
jest.advanceTimersByTime(400);
});
jest.advanceTimersByTime(400)
})
await waitFor(() => {
expect(screen.getByText("Room 1")).toBeInTheDocument();
});
expect(screen.getByText('Room 1')).toBeInTheDocument()
})
await userEvent.click(screen.getByText("Room 1"));
await userEvent.click(screen.getByText('Room 1'))
const spy = jest
.spyOn(eventThunks, "putEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'putEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
await waitFor(() => {
expect(spy).toHaveBeenCalled();
});
expect(spy).toHaveBeenCalled()
})
const receivedPayload = spy.mock.calls[0][0];
const receivedPayload = spy.mock.calls[0][0]
expect(receivedPayload.newEvent.attendee).toHaveLength(2); // Organizer + 1 resource
expect(receivedPayload.newEvent.attendee).toHaveLength(2) // Organizer + 1 resource
expect(receivedPayload.newEvent.attendee[1]).toStrictEqual({
cn: "Room 1",
cal_address: "room1@example.com",
partstat: "NEEDS-ACTION",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "RESOURCE",
});
cn: 'Room 1',
cal_address: 'room1@example.com',
partstat: 'NEEDS-ACTION',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'RESOURCE'
})
} finally {
jest.useRealTimers();
jest.useRealTimers()
}
});
})
it("dispatches putEventAsync and calls onClose when Save is clicked", async () => {
renderPopover();
it('dispatches putEventAsync and calls onClose when Save is clicked', async () => {
renderPopover()
const newEvent = {
title: "Meeting",
title: 'Meeting',
allday: false,
uid: "6045c603-11ab-43c5-bc30-0641420bb3a8",
description: "Discuss project",
location: "Zoom",
organizer: { cn: "test", cal_address: "test@test.com" },
timezone: "Europe/Paris",
transp: "TRANSPARENT",
};
uid: '6045c603-11ab-43c5-bc30-0641420bb3a8',
description: 'Discuss project',
location: 'Zoom',
organizer: { cn: 'test', cal_address: 'test@test.com' },
timezone: 'Europe/Paris',
transp: 'TRANSPARENT'
}
// Fill inputs
fireEvent.change(screen.getByLabelText("event.form.title"), {
target: { value: newEvent.title },
});
fireEvent.change(screen.getByLabelText('event.form.title'), {
target: { value: newEvent.title }
})
// Click "Add description" button first
fireEvent.click(
screen.getByRole("button", { name: "event.form.addDescription" })
);
fireEvent.change(screen.getByLabelText("event.form.description"), {
target: { value: newEvent.description },
});
screen.getByRole('button', { name: 'event.form.addDescription' })
)
fireEvent.change(screen.getByLabelText('event.form.description'), {
target: { value: newEvent.description }
})
fireEvent.click(
screen.getByRole("button", { name: "event.form.locationPlaceholder" })
);
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: newEvent.location },
});
screen.getByRole('button', { name: 'event.form.locationPlaceholder' })
)
fireEvent.change(screen.getByLabelText('event.form.location'), {
target: { value: newEvent.location }
})
const spy = jest
.spyOn(eventThunks, "putEventAsync")
.mockImplementation((payload) => {
const promise = Promise.resolve(payload);
(promise as any).unwrap = () => promise;
return () => promise as any;
});
.spyOn(eventThunks, 'putEventAsync')
.mockImplementation(payload => {
const promise = Promise.resolve(payload)
;(promise as any).unwrap = () => promise
return () => promise as any
})
fireEvent.click(screen.getByRole("button", { name: "actions.save" }));
fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
await waitFor(() => {
expect(spy).toHaveBeenCalled();
});
expect(spy).toHaveBeenCalled()
})
const receivedPayload = spy.mock.calls[0][0];
const receivedPayload = spy.mock.calls[0][0]
expect(receivedPayload.cal).toEqual(
preloadedState.calendars.list["667037022b752d0026472254/cal1"]
);
preloadedState.calendars.list['667037022b752d0026472254/cal1']
)
expect(receivedPayload.newEvent.title).toBe(newEvent.title);
expect(receivedPayload.newEvent.description).toBe(newEvent.description);
expect(receivedPayload.newEvent.location).toBe(newEvent.location);
expect(receivedPayload.newEvent.organizer).toEqual(newEvent.organizer);
expect(receivedPayload.newEvent.title).toBe(newEvent.title)
expect(receivedPayload.newEvent.description).toBe(newEvent.description)
expect(receivedPayload.newEvent.location).toBe(newEvent.location)
expect(receivedPayload.newEvent.organizer).toEqual(newEvent.organizer)
expect(receivedPayload.newEvent.color).toEqual(
preloadedState.calendars.list["667037022b752d0026472254/cal1"].color
);
preloadedState.calendars.list['667037022b752d0026472254/cal1'].color
)
// onClose should be called
expect(mockOnClose).toHaveBeenCalledWith(true);
});
expect(mockOnClose).toHaveBeenCalledWith(true)
})
it("calls onClose with refresh = false when Cancel clicked", () => {
renderPopover();
it('calls onClose with refresh = false when Cancel clicked', () => {
renderPopover()
// Cancel button only appears in expanded mode
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
fireEvent.click(screen.getByRole('button', { name: /Cancel/i }))
expect(mockOnClose).toHaveBeenCalledWith(false);
});
expect(mockOnClose).toHaveBeenCalledWith(false)
})
it("BUGFIX: Prefill Calendar field", async () => {
renderPopover();
it('BUGFIX: Prefill Calendar field', async () => {
renderPopover()
// In normal mode calendar is a SectionPreviewRow (button) with calendar name
await waitFor(() =>
expect(
screen.getByRole("button", { name: "Calendar 1" })
).toHaveTextContent("Calendar 1")
);
});
screen.getByRole('button', { name: 'Calendar 1' })
).toHaveTextContent('Calendar 1')
)
})
describe("EventModal - Drag and Drop Scenarios", () => {
describe('EventModal - Drag and Drop Scenarios', () => {
// Test 2.1: Drag from allday slot (single day)
it("sets allday=true when drag from allday slot (single day)", async () => {
it('sets allday=true when drag from allday slot (single day)', async () => {
const selectedRange = {
startStr: "2025-07-18",
endStr: "2025-07-19",
start: new Date("2025-07-18"),
end: new Date("2025-07-19"),
allDay: true,
} as unknown as DateSelectArg;
startStr: '2025-07-18',
endStr: '2025-07-19',
start: new Date('2025-07-18'),
end: new Date('2025-07-19'),
allDay: true
} as unknown as DateSelectArg
renderPopover(selectedRange);
renderPopover(selectedRange)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
const allDayCheckbox = screen.getByLabelText('event.form.allDay')
await waitFor(() => {
expect(allDayCheckbox).toBeChecked();
});
});
expect(allDayCheckbox).toBeChecked()
})
})
// Test 2.2: Drag from allday slot (multiple days)
it("sets allday=true and shows 2 date fields when drag from allday slot (multiple days)", async () => {
it('sets allday=true and shows 2 date fields when drag from allday slot (multiple days)', async () => {
const selectedRange = {
startStr: "2025-07-18",
endStr: "2025-07-21",
start: new Date("2025-07-18"),
end: new Date("2025-07-21"),
allDay: true,
} as unknown as DateSelectArg;
startStr: '2025-07-18',
endStr: '2025-07-21',
start: new Date('2025-07-18'),
end: new Date('2025-07-21'),
allDay: true
} as unknown as DateSelectArg
renderPopover(selectedRange);
renderPopover(selectedRange)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
const allDayCheckbox = screen.getByLabelText('event.form.allDay')
await waitFor(() => {
expect(allDayCheckbox).toBeChecked();
});
expect(allDayCheckbox).toBeChecked()
})
// Verify only date fields are shown
await waitFor(() => {
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
expect(
screen.queryByTestId("start-time-input")
).not.toBeInTheDocument();
expect(screen.queryByTestId("end-time-input")).not.toBeInTheDocument();
});
});
expect(screen.getByTestId('start-date-input')).toBeInTheDocument()
expect(screen.getByTestId('end-date-input')).toBeInTheDocument()
expect(screen.queryByTestId('start-time-input')).not.toBeInTheDocument()
expect(screen.queryByTestId('end-time-input')).not.toBeInTheDocument()
})
})
// Test 2.3: Drag from week view (single day)
it("keeps allday=false when drag from week view (single day)", async () => {
it('keeps allday=false when drag from week view (single day)', async () => {
const selectedRange = {
startStr: "2025-07-18T09:00",
endStr: "2025-07-18T10:00",
start: new Date("2025-07-18T09:00"),
end: new Date("2025-07-18T10:00"),
allDay: false,
} as unknown as DateSelectArg;
startStr: '2025-07-18T09:00',
endStr: '2025-07-18T10:00',
start: new Date('2025-07-18T09:00'),
end: new Date('2025-07-18T10:00'),
allDay: false
} as unknown as DateSelectArg
renderPopover(selectedRange);
renderPopover(selectedRange)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
const allDayCheckbox = screen.getByLabelText('event.form.allDay')
await waitFor(() => {
expect(allDayCheckbox).not.toBeChecked();
});
expect(allDayCheckbox).not.toBeChecked()
})
// Verify time fields are shown
await waitFor(() => {
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
});
});
expect(screen.getByTestId('start-time-input')).toBeInTheDocument()
expect(screen.getByTestId('end-time-input')).toBeInTheDocument()
})
})
// Test 2.4: Drag from week view (multiple days) - CRITICAL TEST
it("keeps allday=false and shows 4 fields when drag from week view (multiple days)", async () => {
it('keeps allday=false and shows 4 fields when drag from week view (multiple days)', async () => {
const selectedRange = {
startStr: "2025-07-18T09:00",
endStr: "2025-07-20T10:00",
start: new Date("2025-07-18T09:00"),
end: new Date("2025-07-20T10:00"),
allDay: false,
} as unknown as DateSelectArg;
startStr: '2025-07-18T09:00',
endStr: '2025-07-20T10:00',
start: new Date('2025-07-18T09:00'),
end: new Date('2025-07-20T10:00'),
allDay: false
} as unknown as DateSelectArg
renderPopover(selectedRange);
renderPopover(selectedRange)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
const allDayCheckbox = screen.getByLabelText('event.form.allDay')
await waitFor(() => {
expect(allDayCheckbox).not.toBeChecked(); // CRITICAL: should NOT be checked
});
expect(allDayCheckbox).not.toBeChecked() // CRITICAL: should NOT be checked
})
// Verify all 4 fields are shown
await waitFor(() => {
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
});
});
expect(screen.getByTestId('start-date-input')).toBeInTheDocument()
expect(screen.getByTestId('start-time-input')).toBeInTheDocument()
expect(screen.getByTestId('end-date-input')).toBeInTheDocument()
expect(screen.getByTestId('end-time-input')).toBeInTheDocument()
})
})
// Test 2.5: Drag from week view (multiple days) - fallback path
it("handles drag from week view (multiple days) with Date objects only", async () => {
it('handles drag from week view (multiple days) with Date objects only', async () => {
const selectedRange = {
start: new Date("2025-07-18T09:00"),
end: new Date("2025-07-20T10:00"),
allDay: false,
} as unknown as DateSelectArg;
start: new Date('2025-07-18T09:00'),
end: new Date('2025-07-20T10:00'),
allDay: false
} as unknown as DateSelectArg
renderPopover(selectedRange);
renderPopover(selectedRange)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
const allDayCheckbox = screen.getByLabelText('event.form.allDay')
await waitFor(() => {
expect(allDayCheckbox).not.toBeChecked();
});
expect(allDayCheckbox).not.toBeChecked()
})
// Verify all 4 fields are shown
await waitFor(() => {
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
});
});
});
});
expect(screen.getByTestId('start-date-input')).toBeInTheDocument()
expect(screen.getByTestId('start-time-input')).toBeInTheDocument()
expect(screen.getByTestId('end-date-input')).toBeInTheDocument()
expect(screen.getByTestId('end-time-input')).toBeInTheDocument()
})
})
})
})
__test__/features/Events/EventPreview/utils/makeRecurrenceString.test.ts
+99 -99
View File
@@ -1,157 +1,157 @@
import { makeRecurrenceString } from "@/features/Events/EventPreview/utils/makeRecurrenceString";
import { RepetitionObject } from "@/features/Events/EventsTypes";
import { makeRecurrenceString } from '@/features/Events/EventPreview/utils/makeRecurrenceString'
import { RepetitionObject } from '@/features/Events/EventsTypes'
describe("makeRecurrenceString", () => {
describe('makeRecurrenceString', () => {
const mockT = jest.fn((key: string, params?: any) => {
if (params) {
if (key === "eventPreview.everyInterval") {
return `Every ${params.interval} ${params.unit}`;
if (key === 'eventPreview.everyInterval') {
return `Every ${params.interval} ${params.unit}`
}
if (key === "eventPreview.recurrenceOnDays") {
return `on ${params.days}`;
if (key === 'eventPreview.recurrenceOnDays') {
return `on ${params.days}`
}
if (key === "eventPreview.forOccurrences") {
return `for ${params.count} times`;
if (key === 'eventPreview.forOccurrences') {
return `for ${params.count} times`
}
if (key === "eventPreview.until") {
return `until ${params.date}`;
if (key === 'eventPreview.until') {
return `until ${params.date}`
}
}
const translations: Record<string, string> = {
"event.repeat.frequency.days": "days",
"event.repeat.frequency.weeks": "weeks",
"event.repeat.frequency.months": "months",
"event.repeat.frequency.years": "years",
"eventPreview.onDays.MO": "Monday",
"eventPreview.onDays.TU": "Tuesday",
"eventPreview.onDays.WE": "Wednesday",
"eventPreview.onDays.TH": "Thursday",
"eventPreview.onDays.FR": "Friday",
"eventPreview.onDays.SA": "Saturday",
"eventPreview.onDays.SU": "Sunday",
locale: "en-US",
};
'event.repeat.frequency.days': 'days',
'event.repeat.frequency.weeks': 'weeks',
'event.repeat.frequency.months': 'months',
'event.repeat.frequency.years': 'years',
'eventPreview.onDays.MO': 'Monday',
'eventPreview.onDays.TU': 'Tuesday',
'eventPreview.onDays.WE': 'Wednesday',
'eventPreview.onDays.TH': 'Thursday',
'eventPreview.onDays.FR': 'Friday',
'eventPreview.onDays.SA': 'Saturday',
'eventPreview.onDays.SU': 'Sunday',
locale: 'en-US'
}
return translations[key] || key;
});
return translations[key] || key
})
const startText = "Repeats";
const startText = 'Repeats'
beforeEach(() => {
mockT.mockClear();
});
mockT.mockClear()
})
it("formats string for interval === 1 when enableStrForOneTimeInterval is true", () => {
const repetition: RepetitionObject = { freq: "daily", interval: 1 };
it('formats string for interval === 1 when enableStrForOneTimeInterval is true', () => {
const repetition: RepetitionObject = { freq: 'daily', interval: 1 }
const result = makeRecurrenceString({
repetition,
t: mockT,
startText,
enableStrForOneTimeInterval: true,
});
enableStrForOneTimeInterval: true
})
expect(result).toBe("Repeats, days");
});
expect(result).toBe('Repeats, days')
})
it("formats string when interval is undefined", () => {
const repetition: RepetitionObject = { freq: "daily" };
it('formats string when interval is undefined', () => {
const repetition: RepetitionObject = { freq: 'daily' }
const result = makeRecurrenceString({
repetition,
t: mockT,
startText,
enableStrForOneTimeInterval: true,
});
enableStrForOneTimeInterval: true
})
expect(result).toBe("Repeats, days");
});
expect(result).toBe('Repeats, days')
})
it("formats string for interval > 1", () => {
const repetition: RepetitionObject = { freq: "weekly", interval: 2 };
const result = makeRecurrenceString({ repetition, t: mockT, startText });
it('formats string for interval > 1', () => {
const repetition: RepetitionObject = { freq: 'weekly', interval: 2 }
const result = makeRecurrenceString({ repetition, t: mockT, startText })
expect(result).toBe("Repeats, Every 2 weeks");
expect(mockT).toHaveBeenCalledWith("eventPreview.everyInterval", {
expect(result).toBe('Repeats, Every 2 weeks')
expect(mockT).toHaveBeenCalledWith('eventPreview.everyInterval', {
interval: 2,
unit: "weeks",
});
});
unit: 'weeks'
})
})
it("formats string with specific days and sorts them according to WEEK_DAYS order", () => {
it('formats string with specific days and sorts them according to WEEK_DAYS order', () => {
const repetition: RepetitionObject = {
freq: "weekly",
freq: 'weekly',
interval: 1,
byday: ["WE", "MO", "FR"],
};
const result = makeRecurrenceString({ repetition, t: mockT, startText });
byday: ['WE', 'MO', 'FR']
}
const result = makeRecurrenceString({ repetition, t: mockT, startText })
// Expected order: MO, WE, FR
expect(result).toBe("Repeats, on Monday, Wednesday, Friday");
});
expect(result).toBe('Repeats, on Monday, Wednesday, Friday')
})
it("formats string with occurrences count", () => {
it('formats string with occurrences count', () => {
const repetition: RepetitionObject = {
freq: "daily",
freq: 'daily',
interval: 1,
occurrences: 5,
};
const result = makeRecurrenceString({ repetition, t: mockT, startText });
occurrences: 5
}
const result = makeRecurrenceString({ repetition, t: mockT, startText })
expect(result).toBe("Repeats, for 5 times");
});
expect(result).toBe('Repeats, for 5 times')
})
it("formats string with end date", () => {
const endDate = "2025-12-31T00:00:00.000Z";
it('formats string with end date', () => {
const endDate = '2025-12-31T00:00:00.000Z'
const repetition: RepetitionObject = {
freq: "daily",
freq: 'daily',
interval: 1,
endDate,
};
const result = makeRecurrenceString({ repetition, t: mockT, startText });
endDate
}
const result = makeRecurrenceString({ repetition, t: mockT, startText })
const formattedDate = new Date(endDate).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
const formattedDate = new Date(endDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
expect(result).toBe(`Repeats, until ${formattedDate}`);
});
expect(result).toBe(`Repeats, until ${formattedDate}`)
})
it("combines multiple properties", () => {
const endDate = "2025-12-31T00:00:00.000Z";
it('combines multiple properties', () => {
const endDate = '2025-12-31T00:00:00.000Z'
const repetition: RepetitionObject = {
freq: "monthly",
freq: 'monthly',
interval: 3,
byday: ["TU", "TH"],
endDate,
};
const result = makeRecurrenceString({ repetition, t: mockT, startText });
byday: ['TU', 'TH'],
endDate
}
const result = makeRecurrenceString({ repetition, t: mockT, startText })
const formattedDate = new Date(endDate).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
const formattedDate = new Date(endDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
expect(result).toBe(
`Repeats, Every 3 months, on Tuesday, Thursday, until ${formattedDate}`
);
});
)
})
it("uses custom joinChar when provided", () => {
it('uses custom joinChar when provided', () => {
const repetition: RepetitionObject = {
freq: "weekly",
freq: 'weekly',
interval: 2,
occurrences: 10,
};
occurrences: 10
}
const result = makeRecurrenceString({
repetition,
t: mockT,
startText,
joinChar: ";",
});
joinChar: ';'
})
expect(result).toBe("Repeats; Every 2 weeks; for 10 times");
});
});
expect(result).toBe('Repeats; Every 2 weeks; for 10 times')
})
})
__test__/features/Events/EventRepetition.test.tsx
+661 -667
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/EventUpdateModal.recurring.test.tsx
+245 -247
View File
@@ -1,81 +1,81 @@
import * as CalendarApi from "@/features/Calendars/CalendarApi";
import * as eventThunks from "@/features/Calendars/services";
import * as EventApi from "@/features/Events/EventApi";
import { CalendarEvent } from "@/features/Events/EventsTypes";
import EventUpdateModal from "@/features/Events/EventUpdateModal";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import * as CalendarApi from '@/features/Calendars/CalendarApi'
import * as eventThunks from '@/features/Calendars/services'
import * as EventApi from '@/features/Events/EventApi'
import { CalendarEvent } from '@/features/Events/EventsTypes'
import EventUpdateModal from '@/features/Events/EventUpdateModal'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/features/Events/EventApi");
jest.mock("@/features/Calendars/CalendarApi");
jest.mock("@/features/Events/api/updateSeries");
jest.mock('@/features/Events/EventApi')
jest.mock('@/features/Calendars/CalendarApi')
jest.mock('@/features/Events/api/updateSeries')
describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
const mockOnClose = jest.fn();
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
jest.restoreAllMocks();
sessionStorage.clear();
});
jest.clearAllMocks()
jest.restoreAllMocks()
sessionStorage.clear()
})
const baseUID = "recurring-event-base";
const calId = "667037022b752d0026472254/cal1";
const baseUID = 'recurring-event-base'
const calId = '667037022b752d0026472254/cal1'
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "test-sid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
sid: 'test-sid',
openpaasId: '667037022b752d0026472254'
},
organiserData: {
cn: "test",
cal_address: "test@test.com",
},
cn: 'test',
cal_address: 'test@test.com'
}
},
calendars: {
list: {
[calId]: {
id: calId,
name: "Test Calendar",
color: "#FF0000",
name: 'Test Calendar',
color: '#FF0000',
events: {},
owner: { emails: ["test@test.com"] },
},
owner: { emails: ['test@test.com'] }
}
},
pending: false,
},
};
pending: false
}
}
describe("Master Event Display", () => {
describe('Master Event Display', () => {
it("should fetch and display master event when editing 'all events' of a recurring series", async () => {
// Given a recurring series with modified instances
const masterEvent = {
uid: baseUID,
title: "Master Event Title",
description: "Master Description",
title: 'Master Event Title',
description: 'Master Description',
calId,
start: "2025-01-15T10:00:00.000Z",
end: "2025-01-15T11:00:00.000Z",
repetition: { freq: "daily", interval: 1 },
start: '2025-01-15T10:00:00.000Z',
end: '2025-01-15T11:00:00.000Z',
repetition: { freq: 'daily', interval: 1 },
allday: false,
timezone: "America/New_York",
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
URL: `/calendars/${calId}/${baseUID}.ics`,
} as CalendarEvent;
timezone: 'America/New_York',
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: `/calendars/${calId}/${baseUID}.ics`
} as CalendarEvent
// Instance that was moved to different time
const modifiedInstance = {
...masterEvent,
uid: `${baseUID}/20250116`,
title: "Modified Instance Title", // Different title
start: "2025-01-16T14:00:00.000Z", // Different time (2PM instead of 10AM)
end: "2025-01-16T15:00:00.000Z",
};
title: 'Modified Instance Title', // Different title
start: '2025-01-16T14:00:00.000Z', // Different time (2PM instead of 10AM)
end: '2025-01-16T15:00:00.000Z'
}
const stateWithRecurringEvent = {
...preloadedState,
@@ -86,17 +86,17 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
...preloadedState.calendars.list[calId],
events: {
[baseUID]: masterEvent,
[`${baseUID}/20250116`]: modifiedInstance,
},
},
},
},
};
[`${baseUID}/20250116`]: modifiedInstance
}
}
}
}
}
// Mock getEvent to return master event
const mockGetEvent = jest
.spyOn(EventApi, "getEvent")
.mockResolvedValue(masterEvent);
.spyOn(EventApi, 'getEvent')
.mockResolvedValue(masterEvent)
renderWithProviders(
<EventUpdateModal
@@ -107,51 +107,51 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
typeOfAction="all"
/>,
stateWithRecurringEvent
);
)
// Wait for master event to be fetched
await waitFor(() => {
expect(mockGetEvent).toHaveBeenCalledWith(
expect.objectContaining({
uid: baseUID, // Should fetch base UID, not instance
uid: baseUID // Should fetch base UID, not instance
}),
true
);
});
)
})
// Should display master event data, NOT modified instance data
await waitFor(() => {
const titleInput = screen.getByDisplayValue("Master Event Title");
expect(titleInput).toBeInTheDocument();
});
const titleInput = screen.getByDisplayValue('Master Event Title')
expect(titleInput).toBeInTheDocument()
})
// Should NOT show modified instance title
expect(
screen.queryByDisplayValue("Modified Instance Title")
).not.toBeInTheDocument();
screen.queryByDisplayValue('Modified Instance Title')
).not.toBeInTheDocument()
// Expand more options to show timezone (normal mode shows summary first)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
screen.getByRole('button', { name: 'common.moreOptions' })
)
// Verify timezone dropdown shows master timezone
await waitFor(() => {
expect(screen.getByDisplayValue(/New York/i)).toBeDefined();
});
});
expect(screen.getByDisplayValue(/New York/i)).toBeDefined()
})
})
it("should use master event directly if clicked event is already the master", async () => {
it('should use master event directly if clicked event is already the master', async () => {
const masterEvent = {
uid: baseUID, // No recurrence-id
title: "Master Event",
title: 'Master Event',
calId,
start: "2025-01-15T10:00:00.000Z",
end: "2025-01-15T11:00:00.000Z",
repetition: { freq: "weekly", interval: 1 },
start: '2025-01-15T10:00:00.000Z',
end: '2025-01-15T11:00:00.000Z',
repetition: { freq: 'weekly', interval: 1 },
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
URL: `/calendars/${calId}/${baseUID}.ics`,
};
organizer: { cn: 'test', cal_address: 'test@test.com' },
URL: `/calendars/${calId}/${baseUID}.ics`
}
const stateWithMaster = {
...preloadedState,
@@ -161,14 +161,14 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
[calId]: {
...preloadedState.calendars.list[calId],
events: {
[baseUID]: masterEvent,
},
},
},
},
};
[baseUID]: masterEvent
}
}
}
}
}
const mockGetEvent = jest.spyOn(EventApi, "getEvent");
const mockGetEvent = jest.spyOn(EventApi, 'getEvent')
renderWithProviders(
<EventUpdateModal
@@ -179,28 +179,28 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
typeOfAction="all"
/>,
stateWithMaster
);
)
await waitFor(() => {
expect(screen.getByDisplayValue("Master Event")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Master Event')).toBeInTheDocument()
})
// Should NOT fetch from API since we already have master
expect(mockGetEvent).not.toHaveBeenCalled();
});
expect(mockGetEvent).not.toHaveBeenCalled()
})
it("should fallback to instance data if master event fetch fails", async () => {
it('should fallback to instance data if master event fetch fails', async () => {
const instance = {
uid: `${baseUID}/20250115`,
title: "Instance Event",
title: 'Instance Event',
calId,
start: "2025-01-15T10:00:00.000Z",
end: "2025-01-15T11:00:00.000Z",
repetition: { freq: "daily", interval: 1 },
start: '2025-01-15T10:00:00.000Z',
end: '2025-01-15T11:00:00.000Z',
repetition: { freq: 'daily', interval: 1 },
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
URL: `/calendars/${calId}/${baseUID}.ics`,
} as CalendarEvent;
organizer: { cn: 'test', cal_address: 'test@test.com' },
URL: `/calendars/${calId}/${baseUID}.ics`
} as CalendarEvent
const stateWithInstance = {
...preloadedState,
@@ -210,19 +210,19 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
[calId]: {
...preloadedState.calendars.list[calId],
events: {
[`${baseUID}/20250115`]: instance,
},
},
},
},
};
[`${baseUID}/20250115`]: instance
}
}
}
}
}
// Mock getEvent to fail
jest
.spyOn(EventApi, "getEvent")
.mockRejectedValue(new Error("Network error"));
.spyOn(EventApi, 'getEvent')
.mockRejectedValue(new Error('Network error'))
const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
renderWithProviders(
<EventUpdateModal
@@ -233,48 +233,48 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
typeOfAction="all"
/>,
stateWithInstance
);
)
// Should still display the instance data as fallback
await waitFor(() => {
expect(screen.getByDisplayValue("Instance Event")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Instance Event')).toBeInTheDocument()
})
expect(consoleErrorSpy).toHaveBeenCalledWith(
"Failed to fetch master event:",
'Failed to fetch master event:',
expect.any(Error)
);
)
consoleErrorSpy.mockRestore();
});
});
consoleErrorSpy.mockRestore()
})
})
describe("Update All Events - Using Base UID", () => {
it("should use base UID (not instance UID) when updating series with property changes", async () => {
describe('Update All Events - Using Base UID', () => {
it('should use base UID (not instance UID) when updating series with property changes', async () => {
const masterEvent = {
uid: baseUID,
title: "Weekly Meeting",
description: "Original description",
title: 'Weekly Meeting',
description: 'Original description',
calId,
start: "2025-01-15T10:00:00.000Z",
end: "2025-01-15T11:00:00.000Z",
repetition: { freq: "weekly", interval: 1 },
start: '2025-01-15T10:00:00.000Z',
end: '2025-01-15T11:00:00.000Z',
repetition: { freq: 'weekly', interval: 1 },
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
URL: `/calendars/${calId}/${baseUID}.ics`,
} as CalendarEvent;
organizer: { cn: 'test', cal_address: 'test@test.com' },
URL: `/calendars/${calId}/${baseUID}.ics`
} as CalendarEvent
const instance1 = {
...masterEvent,
uid: `${baseUID}/20250115`,
};
uid: `${baseUID}/20250115`
}
const instance2 = {
...masterEvent,
uid: `${baseUID}/20250122`,
start: "2025-01-22T10:00:00.000Z",
end: "2025-01-22T11:00:00.000Z",
};
start: '2025-01-22T10:00:00.000Z',
end: '2025-01-22T11:00:00.000Z'
}
const stateWithSeries = {
...preloadedState,
@@ -286,16 +286,16 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
events: {
[baseUID]: masterEvent,
[`${baseUID}/20250115`]: instance1,
[`${baseUID}/20250122`]: instance2,
},
},
},
},
};
[`${baseUID}/20250122`]: instance2
}
}
}
}
}
// Mock getEvent to return master
jest.spyOn(EventApi, "getEvent").mockResolvedValue(masterEvent);
const updateSeriesAsyncSpy = jest.spyOn(eventThunks, "updateSeriesAsync");
jest.spyOn(EventApi, 'getEvent').mockResolvedValue(masterEvent)
const updateSeriesAsyncSpy = jest.spyOn(eventThunks, 'updateSeriesAsync')
renderWithProviders(
<EventUpdateModal
@@ -306,61 +306,61 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
typeOfAction="all"
/>,
stateWithSeries
);
)
await waitFor(() => {
expect(screen.getByDisplayValue("Weekly Meeting")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Weekly Meeting')).toBeInTheDocument()
})
// Change only the title (property change, not recurrence rules)
const titleInput = screen.getByDisplayValue("Weekly Meeting");
fireEvent.change(titleInput, { target: { value: "Updated Meeting" } });
const titleInput = screen.getByDisplayValue('Weekly Meeting')
fireEvent.change(titleInput, { target: { value: 'Updated Meeting' } })
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
});
fireEvent.click(saveButton)
})
// Verify updateSeriesAsync was dispatched with base UID
await waitFor(() => {
expect(updateSeriesAsyncSpy).toHaveBeenCalledWith(
expect.objectContaining({
event: expect.objectContaining({
uid: "recurring-event-base",
recurrenceId: undefined,
uid: 'recurring-event-base',
recurrenceId: undefined
}),
removeOverrides: false,
removeOverrides: false
})
);
});
});
)
})
})
it("should use base UID when updating series with recurrence rule changes", async () => {
it('should use base UID when updating series with recurrence rule changes', async () => {
const masterEvent = {
uid: baseUID,
title: "Daily Standup",
title: 'Daily Standup',
calId,
start: "2025-01-15T09:00:00.000Z",
end: "2025-01-15T09:30:00.000Z",
repetition: { freq: "daily", interval: 1 }, // Daily
start: '2025-01-15T09:00:00.000Z',
end: '2025-01-15T09:30:00.000Z',
repetition: { freq: 'daily', interval: 1 }, // Daily
allday: false,
timezone: "America/New_York",
organizer: { cn: "test", cal_address: "test@test.com" },
URL: `/calendars/${calId}/${baseUID}.ics`,
} as CalendarEvent;
timezone: 'America/New_York',
organizer: { cn: 'test', cal_address: 'test@test.com' },
URL: `/calendars/${calId}/${baseUID}.ics`
} as CalendarEvent
const instance1 = {
...masterEvent,
uid: `${baseUID}/20250115`,
};
uid: `${baseUID}/20250115`
}
const instance2 = {
...masterEvent,
uid: `${baseUID}/20250116`,
start: "2025-01-16T09:00:00.000Z",
end: "2025-01-16T09:30:00.000Z",
};
start: '2025-01-16T09:00:00.000Z',
end: '2025-01-16T09:30:00.000Z'
}
const stateWithSeries = {
...preloadedState,
@@ -372,17 +372,17 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
events: {
[baseUID]: masterEvent,
[`${baseUID}/20250115`]: instance1,
[`${baseUID}/20250116`]: instance2,
},
},
},
},
};
[`${baseUID}/20250116`]: instance2
}
}
}
}
}
jest.spyOn(EventApi, "getEvent").mockResolvedValue(masterEvent);
jest.spyOn(CalendarApi, "getCalendar").mockResolvedValue({
_embedded: { "dav:item": [] },
} as any);
jest.spyOn(EventApi, 'getEvent').mockResolvedValue(masterEvent)
jest.spyOn(CalendarApi, 'getCalendar').mockResolvedValue({
_embedded: { 'dav:item': [] }
} as any)
const { store } = renderWithProviders(
<EventUpdateModal
@@ -393,72 +393,72 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
typeOfAction="all"
/>,
stateWithSeries
);
)
await waitFor(() => {
expect(screen.getByDisplayValue("Daily Standup")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Daily Standup')).toBeInTheDocument()
})
// Click More Options to access repeat settings
const moreOptionsButton = screen.getByText("common.moreOptions");
fireEvent.click(moreOptionsButton);
const moreOptionsButton = screen.getByText('common.moreOptions')
fireEvent.click(moreOptionsButton)
await waitFor(() => {
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
expect(repeatCheckbox).toBeInTheDocument();
expect(repeatCheckbox).toBeChecked();
});
const repeatCheckbox = screen.getByLabelText('event.form.repeat')
expect(repeatCheckbox).toBeInTheDocument()
expect(repeatCheckbox).toBeChecked()
})
// Change from daily to weekly
const frequencySelect = screen.getByText("event.repeat.frequency.days");
fireEvent.mouseDown(frequencySelect);
const weeklyOption = screen.getByRole("option", {
name: "event.repeat.frequency.weeks",
});
fireEvent.click(weeklyOption);
const frequencySelect = screen.getByText('event.repeat.frequency.days')
fireEvent.mouseDown(frequencySelect)
const weeklyOption = screen.getByRole('option', {
name: 'event.repeat.frequency.weeks'
})
fireEvent.click(weeklyOption)
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
await new Promise((resolve) => setTimeout(resolve, 100));
});
fireEvent.click(saveButton)
await new Promise(resolve => setTimeout(resolve, 100))
})
// Verify all old instances were removed from store
await waitFor(() => {
const state = store.getState();
const calendar = state.calendars.list[calId];
const state = store.getState()
const calendar = state.calendars.list[calId]
expect(calendar.events[baseUID]).toBeUndefined();
expect(calendar.events[`${baseUID}/20250115`]).toBeUndefined();
expect(calendar.events[`${baseUID}/20250116`]).toBeUndefined();
});
});
});
expect(calendar.events[baseUID]).toBeUndefined()
expect(calendar.events[`${baseUID}/20250115`]).toBeUndefined()
expect(calendar.events[`${baseUID}/20250116`]).toBeUndefined()
})
})
})
describe("Master Event Date Preservation", () => {
describe('Master Event Date Preservation', () => {
it("should preserve master event date when updating time in 'all events' mode", async () => {
// Master event starts on Jan 15 at 10:00 AM
const masterEvent = {
uid: baseUID,
title: "Daily Standup",
title: 'Daily Standup',
calId,
start: "2025-01-15T10:00:00.000Z",
end: "2025-01-15T10:30:00.000Z",
repetition: { freq: "daily", interval: 1 },
start: '2025-01-15T10:00:00.000Z',
end: '2025-01-15T10:30:00.000Z',
repetition: { freq: 'daily', interval: 1 },
allday: false,
timezone: "UTC",
organizer: { cn: "test", cal_address: "test@test.com" },
URL: `/calendars/${calId}/${baseUID}.ics`,
} as CalendarEvent;
timezone: 'UTC',
organizer: { cn: 'test', cal_address: 'test@test.com' },
URL: `/calendars/${calId}/${baseUID}.ics`
} as CalendarEvent
// Instance on Jan 17 (different date)
const instance = {
...masterEvent,
uid: `${baseUID}/20250117`,
start: "2025-01-17T10:00:00.000Z",
end: "2025-01-17T10:30:00.000Z",
};
start: '2025-01-17T10:00:00.000Z',
end: '2025-01-17T10:30:00.000Z'
}
const stateWithSeries = {
...preloadedState,
@@ -469,19 +469,17 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
...preloadedState.calendars.list[calId],
events: {
[baseUID]: masterEvent,
[`${baseUID}/20250117`]: instance,
},
},
},
},
};
[`${baseUID}/20250117`]: instance
}
}
}
}
}
jest.spyOn(EventApi, "getEvent").mockResolvedValue(masterEvent);
jest
.spyOn(EventApi, "putEvent")
.mockResolvedValue({ status: 201 } as any);
jest.spyOn(EventApi, 'getEvent').mockResolvedValue(masterEvent)
jest.spyOn(EventApi, 'putEvent').mockResolvedValue({ status: 201 } as any)
const updateSeriesAsyncSpy = jest.spyOn(eventThunks, "updateSeriesAsync");
const updateSeriesAsyncSpy = jest.spyOn(eventThunks, 'updateSeriesAsync')
renderWithProviders(
<EventUpdateModal
@@ -492,40 +490,40 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
typeOfAction="all"
/>,
stateWithSeries
);
)
await waitFor(() => {
expect(screen.getByDisplayValue("Daily Standup")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Daily Standup')).toBeInTheDocument()
})
// Expand more options to show date/time inputs (normal mode shows DateTimeSummary first)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const input = await waitFor(() => screen.getByTestId("start-time-input"));
screen.getByRole('button', { name: 'common.moreOptions' })
)
const input = await waitFor(() => screen.getByTestId('start-time-input'))
// Change time to 2:00 PM (14:00)
await userEvent.click(input);
await userEvent.clear(input);
await userEvent.type(input, "14:00{enter}");
await userEvent.click(input)
await userEvent.clear(input)
await userEvent.type(input, '14:00{enter}')
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
await new Promise((resolve) => setTimeout(resolve, 100));
});
fireEvent.click(saveButton)
await new Promise(resolve => setTimeout(resolve, 100))
})
// Verify the API was called with master date (Jan 15) + new time (14:00)
await waitFor(() => {
expect(updateSeriesAsyncSpy).toHaveBeenCalled();
const callArgs = updateSeriesAsyncSpy.mock.calls[0][0];
const updatedEvent = callArgs.event;
expect(updateSeriesAsyncSpy).toHaveBeenCalled()
const callArgs = updateSeriesAsyncSpy.mock.calls[0][0]
const updatedEvent = callArgs.event
// Should preserve Jan 15 date (master), not Jan 17 (clicked instance)
expect(updatedEvent.start).toContain("2025-01-15");
expect(updatedEvent.start).toContain('2025-01-15')
// But with new time 14:00 (in UTC, this is 14:00)
expect(updatedEvent.start).toContain("14:00");
});
});
});
});
expect(updatedEvent.start).toContain('14:00')
})
})
})
})
__test__/features/Events/EventUpdateModal.test.tsx
+317 -317
View File
@@ -1,329 +1,329 @@
import * as CalendarApi from "@/features/Calendars/CalendarApi";
import * as EventApi from "@/features/Events/EventApi";
import { CalendarEvent } from "@/features/Events/EventsTypes";
import EventUpdateModal from "@/features/Events/EventUpdateModal";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import * as CalendarApi from '@/features/Calendars/CalendarApi'
import * as EventApi from '@/features/Events/EventApi'
import { CalendarEvent } from '@/features/Events/EventsTypes'
import EventUpdateModal from '@/features/Events/EventUpdateModal'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/features/Events/EventApi");
jest.mock("@/features/Calendars/CalendarApi");
jest.mock('@/features/Events/EventApi')
jest.mock('@/features/Calendars/CalendarApi')
describe("EventUpdateModal Timezone Handling", () => {
const mockOnClose = jest.fn();
describe('EventUpdateModal Timezone Handling', () => {
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
sessionStorage.clear();
});
jest.clearAllMocks()
sessionStorage.clear()
})
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "test-sid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
sid: 'test-sid',
openpaasId: '667037022b752d0026472254'
},
organiserData: {
cn: "test",
cal_address: "test@test.com",
},
cn: 'test',
cal_address: 'test@test.com'
}
},
calendars: {
list: {
"667037022b752d0026472254/cal1": {
id: "667037022b752d0026472254/cal1",
name: "Test Calendar",
color: "#FF0000",
events: {},
},
'667037022b752d0026472254/cal1': {
id: '667037022b752d0026472254/cal1',
name: 'Test Calendar',
color: '#FF0000',
events: {}
}
},
pending: false,
},
};
pending: false
}
}
it("displays event time in original timezone when editing event", async () => {
it('displays event time in original timezone when editing event', async () => {
// GIVEN user timezone is UTC+2
// WHEN the user edits an event at 2PM UTC+7 (Asia/Bangkok)
// THEN the update modal prompts him date with 2PM UTC+7
// Create event at 2PM UTC+7 (Asia/Bangkok)
// 2PM UTC+7 = 14:00 in Bangkok = 07:00 UTC
const eventDateUTC = new Date("2025-01-15T07:00:00.000Z");
const eventDateUTC = new Date('2025-01-15T07:00:00.000Z')
const eventData = {
uid: "test-event-1",
title: "Timezone Event",
calId: "667037022b752d0026472254/cal1",
uid: 'test-event-1',
title: 'Timezone Event',
calId: '667037022b752d0026472254/cal1',
start: eventDateUTC.toISOString(),
end: new Date(eventDateUTC.getTime() + 3600000).toISOString(),
timezone: "Asia/Bangkok",
timezone: 'Asia/Bangkok',
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
URL: "/calendars/667037022b752d0026472254/cal1/test-event-1.ics",
} as CalendarEvent;
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: '/calendars/667037022b752d0026472254/cal1/test-event-1.ics'
} as CalendarEvent
const stateWithEvent = {
...preloadedState,
calendars: {
...preloadedState.calendars,
list: {
"667037022b752d0026472254/cal1": {
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
'667037022b752d0026472254/cal1': {
...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
events: {
"test-event-1": eventData,
},
},
},
},
};
'test-event-1': eventData
}
}
}
}
}
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"test-event-1"}
calId={'667037022b752d0026472254/cal1'}
eventId={'test-event-1'}
eventData={eventData}
/>,
stateWithEvent
);
)
// Verify title is displayed
const titleInput = screen.getByDisplayValue("Timezone Event");
expect(titleInput).toBeInTheDocument();
const titleInput = screen.getByDisplayValue('Timezone Event')
expect(titleInput).toBeInTheDocument()
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
// Verify the start date and time inputs exist
await waitFor(() => {
const startDateInput = screen.getByTestId("start-date-input");
const startTimeInput = screen.getByTestId("start-time-input");
const startDateInput = screen.getByTestId('start-date-input')
const startTimeInput = screen.getByTestId('start-time-input')
expect(startDateInput).toBeInTheDocument();
expect(startTimeInput).toBeInTheDocument();
expect(startDateInput).toBeInTheDocument()
expect(startTimeInput).toBeInTheDocument()
// MUI DatePicker/TimePicker values are stored differently - just check elements exist
// The actual values are verified through the form submission
});
});
})
})
it("preserves original timezone when editing event fields", async () => {
const eventDateUTC = new Date("2025-01-15T07:00:00.000Z");
it('preserves original timezone when editing event fields', async () => {
const eventDateUTC = new Date('2025-01-15T07:00:00.000Z')
const eventData = {
uid: "test-event-2",
title: "Original Event",
calId: "667037022b752d0026472254/cal1",
uid: 'test-event-2',
title: 'Original Event',
calId: '667037022b752d0026472254/cal1',
start: eventDateUTC.toISOString(),
end: new Date(eventDateUTC.getTime() + 3600000).toISOString(),
timezone: "Asia/Bangkok",
timezone: 'Asia/Bangkok',
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
URL: "/calendars/667037022b752d0026472254/cal1/test-event-2.ics",
} as CalendarEvent;
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: '/calendars/667037022b752d0026472254/cal1/test-event-2.ics'
} as CalendarEvent
const stateWithEvent = {
...preloadedState,
calendars: {
...preloadedState.calendars,
list: {
"667037022b752d0026472254/cal1": {
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
'667037022b752d0026472254/cal1': {
...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
events: {
"test-event-2": eventData,
},
},
},
},
};
'test-event-2': eventData
}
}
}
}
}
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"test-event-2"}
calId={'667037022b752d0026472254/cal1'}
eventId={'test-event-2'}
eventData={eventData}
/>,
stateWithEvent
);
)
// Edit the title
const titleInput = screen.getByDisplayValue("Original Event");
fireEvent.change(titleInput, { target: { value: "Updated Event" } });
const titleInput = screen.getByDisplayValue('Original Event')
fireEvent.change(titleInput, { target: { value: 'Updated Event' } })
// Verify the timezone is still preserved (should be Asia/Bangkok)
expect(titleInput).toHaveValue("Updated Event");
});
expect(titleInput).toHaveValue('Updated Event')
})
it("preserves resources when editing an event", async () => {
const eventDateUTC = new Date("2025-01-15T07:00:00.000Z");
it('preserves resources when editing an event', async () => {
const eventDateUTC = new Date('2025-01-15T07:00:00.000Z')
const eventData = {
uid: "test-event-resource",
title: "Resource Event",
calId: "667037022b752d0026472254/cal1",
uid: 'test-event-resource',
title: 'Resource Event',
calId: '667037022b752d0026472254/cal1',
start: eventDateUTC.toISOString(),
end: new Date(eventDateUTC.getTime() + 3600000).toISOString(),
timezone: "Asia/Bangkok",
timezone: 'Asia/Bangkok',
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [
{ cn: "test", cal_address: "test@test.com" },
{ cn: 'test', cal_address: 'test@test.com' },
{
cn: "Conference Room",
cal_address: "room@test.com",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "RESOURCE",
},
cn: 'Conference Room',
cal_address: 'room@test.com',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'RESOURCE'
}
],
URL: "/calendars/667037022b752d0026472254/cal1/test-event-resource.ics",
} as CalendarEvent;
URL: '/calendars/667037022b752d0026472254/cal1/test-event-resource.ics'
} as CalendarEvent
const stateWithEvent = {
...preloadedState,
calendars: {
...preloadedState.calendars,
list: {
"667037022b752d0026472254/cal1": {
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
'667037022b752d0026472254/cal1': {
...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
events: {
"test-event-resource": eventData,
},
},
},
},
};
'test-event-resource': eventData
}
}
}
}
}
const mockPutEvent = jest.spyOn(EventApi, "putEvent").mockResolvedValue({
const mockPutEvent = jest.spyOn(EventApi, 'putEvent').mockResolvedValue({
status: 201,
url: `/calendars/667037022b752d0026472254/cal1/test-event-resource.ics`,
} as any);
url: `/calendars/667037022b752d0026472254/cal1/test-event-resource.ics`
} as any)
renderWithProviders(
<EventUpdateModal
open={true}
onClose={mockOnClose}
calId={"667037022b752d0026472254/cal1"}
eventId={"test-event-resource"}
calId={'667037022b752d0026472254/cal1'}
eventId={'test-event-resource'}
eventData={eventData}
/>,
stateWithEvent
);
)
// Edit the title
const titleInput = screen.getByDisplayValue("Resource Event");
const titleInput = screen.getByDisplayValue('Resource Event')
fireEvent.change(titleInput, {
target: { value: "Updated Resource Event" },
});
target: { value: 'Updated Resource Event' }
})
// Click Save
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
});
fireEvent.click(saveButton)
})
await waitFor(() => {
expect(mockPutEvent).toHaveBeenCalled();
});
expect(mockPutEvent).toHaveBeenCalled()
})
const putEventCall = mockPutEvent.mock.calls[0][0];
expect(putEventCall.title).toBe("Updated Resource Event");
const putEventCall = mockPutEvent.mock.calls[0][0]
expect(putEventCall.title).toBe('Updated Resource Event')
// Check that the resource is still in the attendee list!
const attendees = putEventCall.attendee;
const resource = attendees.find((a: any) => a.cutype === "RESOURCE");
expect(resource).toBeDefined();
expect(resource!.cn).toBe("Conference Room");
expect(resource!.cal_address).toBe("room@test.com");
expect(resource!.partstat).toBe("ACCEPTED");
expect(resource!.rsvp).toBe("TRUE");
expect(resource!.role).toBe("REQ-PARTICIPANT");
expect(resource!.cutype).toBe("RESOURCE");
});
});
const attendees = putEventCall.attendee
const resource = attendees.find((a: any) => a.cutype === 'RESOURCE')
expect(resource).toBeDefined()
expect(resource!.cn).toBe('Conference Room')
expect(resource!.cal_address).toBe('room@test.com')
expect(resource!.partstat).toBe('ACCEPTED')
expect(resource!.rsvp).toBe('TRUE')
expect(resource!.role).toBe('REQ-PARTICIPANT')
expect(resource!.cutype).toBe('RESOURCE')
})
})
describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
const mockOnClose = jest.fn();
describe('EventUpdateModal Recurring to Non-Recurring Conversion', () => {
const mockOnClose = jest.fn()
beforeEach(() => {
jest.clearAllMocks();
jest.restoreAllMocks();
});
jest.clearAllMocks()
jest.restoreAllMocks()
})
const baseUID = "recurring-event-base";
const calId = "667037022b752d0026472254/cal1";
const baseUID = 'recurring-event-base'
const calId = '667037022b752d0026472254/cal1'
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "test-sid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
sid: 'test-sid',
openpaasId: '667037022b752d0026472254'
},
organiserData: {
cn: "test",
cal_address: "test@test.com",
},
cn: 'test',
cal_address: 'test@test.com'
}
},
calendars: {
list: {
[calId]: {
id: calId,
name: "Test Calendar",
color: "#FF0000",
events: {},
},
name: 'Test Calendar',
color: '#FF0000',
events: {}
}
},
pending: false,
},
};
pending: false
}
}
it("converts recurring event to non-recurring when repeat is disabled in edit all mode", async () => {
it('converts recurring event to non-recurring when repeat is disabled in edit all mode', async () => {
// Create recurring event with multiple instances
const eventDate = new Date("2025-01-15T10:00:00.000Z");
const eventDate = new Date('2025-01-15T10:00:00.000Z')
const masterEvent = {
uid: baseUID,
title: "Recurring Meeting",
title: 'Recurring Meeting',
calId,
start: eventDate.toISOString(),
end: new Date(eventDate.getTime() + 3600000).toISOString(),
repetition: { freq: "daily", interval: 1 },
repetition: { freq: 'daily', interval: 1 },
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: `/calendars/${calId}/${baseUID}.ics`,
timezone: "UTC",
} as CalendarEvent;
timezone: 'UTC'
} as CalendarEvent
const instance1 = {
...masterEvent,
uid: `${baseUID}/20250115`,
start: "2025-01-15T10:00:00.000Z",
end: "2025-01-15T11:00:00.000Z",
};
start: '2025-01-15T10:00:00.000Z',
end: '2025-01-15T11:00:00.000Z'
}
const instance2 = {
...masterEvent,
uid: `${baseUID}/20250116`,
start: "2025-01-16T10:00:00.000Z",
end: "2025-01-16T11:00:00.000Z",
};
start: '2025-01-16T10:00:00.000Z',
end: '2025-01-16T11:00:00.000Z'
}
const instance3 = {
...masterEvent,
uid: `${baseUID}/20250117`,
start: "2025-01-17T10:00:00.000Z",
end: "2025-01-17T11:00:00.000Z",
};
start: '2025-01-17T10:00:00.000Z',
end: '2025-01-17T11:00:00.000Z'
}
const stateWithRecurringEvent = {
...preloadedState,
@@ -336,29 +336,29 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
[baseUID]: masterEvent,
[`${baseUID}/20250115`]: instance1,
[`${baseUID}/20250116`]: instance2,
[`${baseUID}/20250117`]: instance3,
},
},
},
},
};
[`${baseUID}/20250117`]: instance3
}
}
}
}
}
// Mock API calls
const mockDeleteEvent = jest
.spyOn(EventApi, "deleteEvent")
.mockResolvedValue({} as any);
const mockPutEvent = jest.spyOn(EventApi, "putEvent").mockResolvedValue({
.spyOn(EventApi, 'deleteEvent')
.mockResolvedValue({} as any)
const mockPutEvent = jest.spyOn(EventApi, 'putEvent').mockResolvedValue({
status: 201,
url: `/calendars/${calId}/new-event.ics`,
} as any);
url: `/calendars/${calId}/new-event.ics`
} as any)
const mockGetMasterEvent = jest
.spyOn(EventApi, "getEvent")
.mockResolvedValue(masterEvent);
jest.spyOn(CalendarApi, "getCalendar").mockResolvedValue({
.spyOn(EventApi, 'getEvent')
.mockResolvedValue(masterEvent)
jest.spyOn(CalendarApi, 'getCalendar').mockResolvedValue({
_embedded: {
"dav:item": [],
},
} as any);
'dav:item': []
}
} as any)
const { store } = renderWithProviders(
<EventUpdateModal
@@ -369,97 +369,97 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
typeOfAction="all"
/>,
stateWithRecurringEvent
);
)
// Wait for master event to be fetched AND form to be initialized
await waitFor(() => {
expect(mockGetMasterEvent).toHaveBeenCalled();
});
expect(mockGetMasterEvent).toHaveBeenCalled()
})
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
// Wait for the repeat checkbox to be checked (indicating form is initialized)
const repeatCheckbox = await waitFor(() => {
const checkbox = screen.getByLabelText("event.form.repeat");
expect(checkbox).toBeChecked();
return checkbox;
});
const checkbox = screen.getByLabelText('event.form.repeat')
expect(checkbox).toBeChecked()
return checkbox
})
// Now uncheck repeat checkbox
await act(async () => {
fireEvent.click(repeatCheckbox);
});
fireEvent.click(repeatCheckbox)
})
// Wait for checkbox to be unchecked
await waitFor(() => {
expect(repeatCheckbox).not.toBeChecked();
});
expect(repeatCheckbox).not.toBeChecked()
})
// Click Save button
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
});
fireEvent.click(saveButton)
})
await waitFor(() => {
expect(mockPutEvent).toHaveBeenCalled();
});
expect(mockPutEvent).toHaveBeenCalled()
})
// Verify API calls - should delete all instances
await waitFor(
() => {
// Should have called deleteEvent for each instance (4 total: base + 3 recurrences)
expect(mockDeleteEvent).toHaveBeenCalled();
expect(mockDeleteEvent).toHaveBeenCalled()
// At least one instance should be deleted
expect(mockDeleteEvent.mock.calls.length).toBeGreaterThan(0);
expect(mockDeleteEvent.mock.calls.length).toBeGreaterThan(0)
},
{ timeout: 3000 }
);
)
// Verify new event was created via putEvent
expect(mockPutEvent).toHaveBeenCalled();
const putEventCall = mockPutEvent.mock.calls[0][0];
expect(putEventCall.title).toBe("Recurring Meeting");
expect(putEventCall.repetition?.freq).toBeFalsy();
expect(putEventCall.uid).not.toContain(baseUID);
expect(mockPutEvent).toHaveBeenCalled()
const putEventCall = mockPutEvent.mock.calls[0][0]
expect(putEventCall.title).toBe('Recurring Meeting')
expect(putEventCall.repetition?.freq).toBeFalsy()
expect(putEventCall.uid).not.toContain(baseUID)
// Verify Redux store state changes
const finalState = store.getState();
const calendar = finalState.calendars.list[calId];
const finalState = store.getState()
const calendar = finalState.calendars.list[calId]
// Old recurring instances should be removed from store
expect(calendar.events[baseUID]).toBeUndefined();
expect(calendar.events[`${baseUID}/20250115`]).toBeUndefined();
expect(calendar.events[`${baseUID}/20250116`]).toBeUndefined();
expect(calendar.events[`${baseUID}/20250117`]).toBeUndefined();
expect(calendar.events[baseUID]).toBeUndefined()
expect(calendar.events[`${baseUID}/20250115`]).toBeUndefined()
expect(calendar.events[`${baseUID}/20250116`]).toBeUndefined()
expect(calendar.events[`${baseUID}/20250117`]).toBeUndefined()
// Verify modal was closed after completion
await waitFor(() => {
expect(mockOnClose).toHaveBeenCalled();
});
});
expect(mockOnClose).toHaveBeenCalled()
})
})
it("gracefully handles deletion errors and continues to create new event", async () => {
const eventDate = new Date("2025-01-15T10:00:00.000Z");
it('gracefully handles deletion errors and continues to create new event', async () => {
const eventDate = new Date('2025-01-15T10:00:00.000Z')
const masterEvent = {
uid: baseUID,
title: "Recurring Meeting",
title: 'Recurring Meeting',
calId,
start: eventDate.toISOString(),
end: new Date(eventDate.getTime() + 3600000).toISOString(),
repetition: { freq: "weekly", interval: 1 },
repetition: { freq: 'weekly', interval: 1 },
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: `/calendars/${calId}/${baseUID}.ics`,
timezone: "UTC",
} as CalendarEvent;
timezone: 'UTC'
} as CalendarEvent
const instance1 = {
...masterEvent,
uid: `${baseUID}/20250115`,
};
uid: `${baseUID}/20250115`
}
const stateWithRecurringEvent = {
...preloadedState,
@@ -470,24 +470,24 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
...preloadedState.calendars.list[calId],
events: {
[baseUID]: masterEvent,
[`${baseUID}/20250115`]: instance1,
},
},
},
},
};
[`${baseUID}/20250115`]: instance1
}
}
}
}
}
// Mock deleteEvent to fail with a non-404 error
const mockDeleteEvent = jest
.spyOn(EventApi, "deleteEvent")
.mockRejectedValue(new Error("Network error"));
.spyOn(EventApi, 'deleteEvent')
.mockRejectedValue(new Error('Network error'))
const mockPutEvent = jest
.spyOn(EventApi, "putEvent")
.mockResolvedValue({ status: 201 } as any);
const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
.spyOn(EventApi, 'putEvent')
.mockResolvedValue({ status: 201 } as any)
const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
const mockGetMasterEvent = jest
.spyOn(EventApi, "getEvent")
.mockResolvedValue(masterEvent);
.spyOn(EventApi, 'getEvent')
.mockResolvedValue(masterEvent)
const { store } = renderWithProviders(
<EventUpdateModal
@@ -498,106 +498,106 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
typeOfAction="all"
/>,
stateWithRecurringEvent
);
)
// Wait for master event to be fetched
await waitFor(() => {
expect(mockGetMasterEvent).toHaveBeenCalled();
});
expect(mockGetMasterEvent).toHaveBeenCalled()
})
// Wait for component to load
await waitFor(() => {
expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Recurring Meeting')).toBeInTheDocument()
})
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
// Wait for repeat checkbox to be checked
const repeatCheckbox = await waitFor(() => {
const checkbox = screen.getByLabelText("event.form.repeat");
expect(checkbox).toBeChecked();
return checkbox;
});
const checkbox = screen.getByLabelText('event.form.repeat')
expect(checkbox).toBeChecked()
return checkbox
})
// Uncheck repeat checkbox and save
await act(async () => {
fireEvent.click(repeatCheckbox);
});
fireEvent.click(repeatCheckbox)
})
// Wait for checkbox to be unchecked
await waitFor(() => {
expect(repeatCheckbox).not.toBeChecked();
});
expect(repeatCheckbox).not.toBeChecked()
})
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
});
fireEvent.click(saveButton)
})
// Wait for delete to be attempted
await waitFor(
() => {
expect(mockDeleteEvent).toHaveBeenCalled();
expect(mockDeleteEvent).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
// Verify error was logged for failed deletion
await waitFor(
() => {
expect(consoleErrorSpy).toHaveBeenCalledWith(
expect.stringContaining("Failed to delete event file")
);
expect.stringContaining('Failed to delete event file')
)
},
{ timeout: 3000 }
);
)
// New implementation gracefully handles deletion errors:
// Even if some instances fail to delete, we still create the new event
// This ensures user gets their non-recurring event
await waitFor(
() => {
expect(mockPutEvent).toHaveBeenCalled();
expect(mockPutEvent).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
const putEventCall = mockPutEvent.mock.calls[0][0];
expect(putEventCall.title).toBe("Recurring Meeting");
expect(putEventCall.repetition?.freq).toBeFalsy();
const putEventCall = mockPutEvent.mock.calls[0][0]
expect(putEventCall.title).toBe('Recurring Meeting')
expect(putEventCall.repetition?.freq).toBeFalsy()
// Modal should close after operation completes
await waitFor(
() => {
expect(mockOnClose).toHaveBeenCalled();
expect(mockOnClose).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
consoleErrorSpy.mockRestore();
});
consoleErrorSpy.mockRestore()
})
it("closes all modals after converting recurring to non-recurring", async () => {
const eventDate = new Date("2025-01-15T10:00:00.000Z");
it('closes all modals after converting recurring to non-recurring', async () => {
const eventDate = new Date('2025-01-15T10:00:00.000Z')
const masterEvent = {
uid: baseUID,
title: "Recurring Meeting",
title: 'Recurring Meeting',
calId,
start: eventDate.toISOString(),
end: new Date(eventDate.getTime() + 3600000).toISOString(),
repetition: { freq: "monthly", interval: 1 },
repetition: { freq: 'monthly', interval: 1 },
allday: false,
organizer: { cn: "test", cal_address: "test@test.com" },
attendee: [{ cn: "test", cal_address: "test@test.com" }],
organizer: { cn: 'test', cal_address: 'test@test.com' },
attendee: [{ cn: 'test', cal_address: 'test@test.com' }],
URL: `/calendars/${calId}/${baseUID}.ics`,
timezone: "UTC",
} as CalendarEvent;
timezone: 'UTC'
} as CalendarEvent
const instance1 = {
...masterEvent,
uid: `${baseUID}/20250115`,
};
uid: `${baseUID}/20250115`
}
const stateWithRecurringEvent = {
...preloadedState,
@@ -608,24 +608,24 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
...preloadedState.calendars.list[calId],
events: {
[baseUID]: masterEvent,
[`${baseUID}/20250115`]: instance1,
},
},
},
},
};
[`${baseUID}/20250115`]: instance1
}
}
}
}
}
// Mock API calls
jest.spyOn(EventApi, "deleteEvent").mockResolvedValue({} as any);
jest.spyOn(EventApi, "putEvent").mockResolvedValue({ status: 201 } as any);
jest.spyOn(CalendarApi, "getCalendar").mockResolvedValue({
jest.spyOn(EventApi, 'deleteEvent').mockResolvedValue({} as any)
jest.spyOn(EventApi, 'putEvent').mockResolvedValue({ status: 201 } as any)
jest.spyOn(CalendarApi, 'getCalendar').mockResolvedValue({
_embedded: {
"dav:item": [],
},
} as any);
'dav:item': []
}
} as any)
// Mock onCloseAll to test closing both modals
const mockOnCloseAll = jest.fn();
const mockOnCloseAll = jest.fn()
renderWithProviders(
<EventUpdateModal
@@ -637,36 +637,36 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
typeOfAction="all"
/>,
stateWithRecurringEvent
);
)
// Wait for component to load
await waitFor(() => {
expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
});
expect(screen.getByDisplayValue('Recurring Meeting')).toBeInTheDocument()
})
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
// Uncheck repeat and save
const repeatCheckbox = screen.getByLabelText("event.form.repeat");
const repeatCheckbox = screen.getByLabelText('event.form.repeat')
await act(async () => {
fireEvent.click(repeatCheckbox);
});
fireEvent.click(repeatCheckbox)
})
const saveButton = screen.getByRole("button", { name: "actions.save" });
const saveButton = screen.getByRole('button', { name: 'actions.save' })
await act(async () => {
fireEvent.click(saveButton);
});
fireEvent.click(saveButton)
})
// Verify onCloseAll was called to close both preview and update modals
await waitFor(
() => {
expect(mockOnCloseAll).toHaveBeenCalled();
expect(mockOnCloseAll).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
// Verify onClose was NOT called (onCloseAll is used instead)
expect(mockOnClose).not.toHaveBeenCalled();
});
});
expect(mockOnClose).not.toHaveBeenCalled()
})
})
__test__/features/Events/FreeBusy.test.tsx
+185 -187
View File
@@ -1,95 +1,93 @@
import {
hasFreeBusyConflict,
useAttendeesFreeBusy,
} from "@/components/Attendees/useFreeBusy";
import * as getFreeBusyREPORT from "@/features/Events/api/getFreeBusyForAddedAttendeesREPORT";
import * as getFreeBusyPOST from "@/features/Events/api/getFreeBusyForEventAttendeesPOST";
import * as getUserData from "@/features/Events/api/getUserDataFromEmail";
import { renderHook, waitFor } from "@testing-library/react";
useAttendeesFreeBusy
} from '@/components/Attendees/useFreeBusy'
import * as getFreeBusyREPORT from '@/features/Events/api/getFreeBusyForAddedAttendeesREPORT'
import * as getFreeBusyPOST from '@/features/Events/api/getFreeBusyForEventAttendeesPOST'
import * as getUserData from '@/features/Events/api/getUserDataFromEmail'
import { renderHook, waitFor } from '@testing-library/react'
jest.mock("moment-timezone", () => {
const actual = jest.requireActual("moment-timezone");
return actual;
});
jest.mock('moment-timezone', () => {
const actual = jest.requireActual('moment-timezone')
return actual
})
jest.mock("@/features/Events/api/getUserDataFromEmail");
jest.mock("@/features/Events/api/getFreeBusyForAddedAttendeesREPORT");
jest.mock("@/features/Events/api/getFreeBusyForEventAttendeesPOST");
jest.mock('@/features/Events/api/getUserDataFromEmail')
jest.mock('@/features/Events/api/getFreeBusyForAddedAttendeesREPORT')
jest.mock('@/features/Events/api/getFreeBusyForEventAttendeesPOST')
const mockGetUserData = getUserData.getUserDataFromEmail as jest.MockedFunction<
typeof getUserData.getUserDataFromEmail
>;
>
const mockREPORT =
getFreeBusyREPORT.getFreeBusyForAddedAttendeesREPORT as jest.MockedFunction<
typeof getFreeBusyREPORT.getFreeBusyForAddedAttendeesREPORT
>;
>
const mockPOST =
getFreeBusyPOST.getFreeBusyForEventAttendeesPOST as jest.MockedFunction<
typeof getFreeBusyPOST.getFreeBusyForEventAttendeesPOST
>;
>
const START = "2026-03-14T14:00:00";
const END = "2026-03-14T15:00:00";
const TZ = "Europe/Paris";
const START = '2026-03-14T14:00:00'
const END = '2026-03-14T15:00:00'
const TZ = 'Europe/Paris'
describe("hasFreeBusyConflict", () => {
it("returns false for non-vcalendar data", () => {
expect(hasFreeBusyConflict({ data: ["not-vcalendar", [], []] })).toBe(
false
);
});
describe('hasFreeBusyConflict', () => {
it('returns false for non-vcalendar data', () => {
expect(hasFreeBusyConflict({ data: ['not-vcalendar', [], []] })).toBe(false)
})
it("returns false when vfreebusy has no freebusy property", () => {
it('returns false when vfreebusy has no freebusy property', () => {
const data = {
data: [
"vcalendar",
'vcalendar',
[],
[
[
"vfreebusy",
[["dtstart", {}, "date-time", "2026-03-14T14:00:00Z"]],
[],
],
],
],
};
expect(hasFreeBusyConflict(data)).toBe(false);
});
'vfreebusy',
[['dtstart', {}, 'date-time', '2026-03-14T14:00:00Z']],
[]
]
]
]
}
expect(hasFreeBusyConflict(data)).toBe(false)
})
it("returns true when vfreebusy contains a freebusy property", () => {
it('returns true when vfreebusy contains a freebusy property', () => {
const data = {
data: [
"vcalendar",
'vcalendar',
[],
[
[
"vfreebusy",
'vfreebusy',
[
["dtstart", {}, "date-time", "2026-03-14T14:00:00Z"],
["freebusy", {}, "period", "2026-03-14T14:00:00Z/PT1H"],
['dtstart', {}, 'date-time', '2026-03-14T14:00:00Z'],
['freebusy', {}, 'period', '2026-03-14T14:00:00Z/PT1H']
],
[],
],
],
],
};
expect(hasFreeBusyConflict(data)).toBe(true);
});
[]
]
]
]
}
expect(hasFreeBusyConflict(data)).toBe(true)
})
it("returns false for malformed data without throwing", () => {
expect(hasFreeBusyConflict(null)).toBe(false);
expect(hasFreeBusyConflict("garbage")).toBe(false);
expect(hasFreeBusyConflict({ data: null })).toBe(false);
});
});
it('returns false for malformed data without throwing', () => {
expect(hasFreeBusyConflict(null)).toBe(false)
expect(hasFreeBusyConflict('garbage')).toBe(false)
expect(hasFreeBusyConflict({ data: null })).toBe(false)
})
})
describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
beforeEach(() => jest.clearAllMocks());
describe('useAttendeesFreeBusy — Flow B (new attendees)', () => {
beforeEach(() => jest.clearAllMocks())
const newAttendee = { email: "alice@example.com", userId: "user-alice" };
const newAttendee = { email: 'alice@example.com', userId: 'user-alice' }
it("shows loading then free for a new attendee", async () => {
mockREPORT.mockResolvedValue(false);
it('shows loading then free for a new attendee', async () => {
mockREPORT.mockResolvedValue(false)
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -97,17 +95,17 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: [newAttendee],
start: START,
end: END,
timezone: TZ,
timezone: TZ
})
);
)
expect(result.current[newAttendee.email]).toBe("loading");
expect(result.current[newAttendee.email]).toBe('loading')
await waitFor(() => expect(result.current[newAttendee.email]).toBe("free"));
});
await waitFor(() => expect(result.current[newAttendee.email]).toBe('free'))
})
it("shows busy when REPORT returns true", async () => {
mockREPORT.mockResolvedValue(true);
it('shows busy when REPORT returns true', async () => {
mockREPORT.mockResolvedValue(true)
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -115,15 +113,15 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: [newAttendee],
start: START,
end: END,
timezone: TZ,
timezone: TZ
})
);
)
await waitFor(() => expect(result.current[newAttendee.email]).toBe("busy"));
});
await waitFor(() => expect(result.current[newAttendee.email]).toBe('busy'))
})
it("shows unknown when REPORT throws", async () => {
mockREPORT.mockRejectedValue(new Error("network error"));
it('shows unknown when REPORT throws', async () => {
mockREPORT.mockRejectedValue(new Error('network error'))
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -131,20 +129,20 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: [newAttendee],
start: START,
end: END,
timezone: TZ,
timezone: TZ
})
);
)
await waitFor(() =>
expect(result.current[newAttendee.email]).toBe("unknown")
);
});
expect(result.current[newAttendee.email]).toBe('unknown')
)
})
it("resolves userId via getUserDataFromEmail when not provided", async () => {
mockGetUserData.mockResolvedValue([{ _id: "resolved-id" }] as never);
mockREPORT.mockResolvedValue(false);
it('resolves userId via getUserDataFromEmail when not provided', async () => {
mockGetUserData.mockResolvedValue([{ _id: 'resolved-id' }] as never)
mockREPORT.mockResolvedValue(false)
const attendeeWithoutId = { email: "bob@example.com" };
const attendeeWithoutId = { email: 'bob@example.com' }
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -152,42 +150,42 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: [attendeeWithoutId],
start: START,
end: END,
timezone: TZ,
timezone: TZ
})
);
)
await waitFor(() =>
expect(result.current[attendeeWithoutId.email]).toBe("free")
);
expect(mockGetUserData).toHaveBeenCalledWith("bob@example.com");
expect(result.current[attendeeWithoutId.email]).toBe('free')
)
expect(mockGetUserData).toHaveBeenCalledWith('bob@example.com')
expect(mockREPORT).toHaveBeenCalledWith(
"resolved-id",
'resolved-id',
expect.any(String),
expect.any(String)
);
});
)
})
it("shows unknown when userId cannot be resolved", async () => {
mockGetUserData.mockResolvedValue([]);
it('shows unknown when userId cannot be resolved', async () => {
mockGetUserData.mockResolvedValue([])
const { result } = renderHook(() =>
useAttendeesFreeBusy({
existingAttendees: [],
newAttendees: [{ email: "ghost@example.com" }],
newAttendees: [{ email: 'ghost@example.com' }],
start: START,
end: END,
timezone: TZ,
timezone: TZ
})
);
)
await waitFor(() =>
expect(result.current["ghost@example.com"]).toBe("unknown")
);
expect(mockREPORT).not.toHaveBeenCalled();
});
expect(result.current['ghost@example.com']).toBe('unknown')
)
expect(mockREPORT).not.toHaveBeenCalled()
})
it("does not re-fetch an attendee already fetched", async () => {
mockREPORT.mockResolvedValue(false);
it('does not re-fetch an attendee already fetched', async () => {
mockREPORT.mockResolvedValue(false)
const { result, rerender } = renderHook(
({ attendees }) =>
@@ -196,19 +194,19 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: attendees,
start: START,
end: END,
timezone: TZ,
timezone: TZ
}),
{ initialProps: { attendees: [newAttendee] } }
);
)
await waitFor(() => expect(result.current[newAttendee.email]).toBe("free"));
await waitFor(() => expect(result.current[newAttendee.email]).toBe('free'))
rerender({ attendees: [newAttendee] });
expect(mockREPORT).toHaveBeenCalledTimes(1);
});
rerender({ attendees: [newAttendee] })
expect(mockREPORT).toHaveBeenCalledTimes(1)
})
it("removes departed attendee from the map", async () => {
mockREPORT.mockResolvedValue(false);
it('removes departed attendee from the map', async () => {
mockREPORT.mockResolvedValue(false)
const { result, rerender } = renderHook(
({ attendees }) =>
@@ -217,22 +215,22 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: attendees,
start: START,
end: END,
timezone: TZ,
timezone: TZ
}),
{ initialProps: { attendees: [newAttendee] } }
);
)
await waitFor(() => expect(result.current[newAttendee.email]).toBe("free"));
await waitFor(() => expect(result.current[newAttendee.email]).toBe('free'))
rerender({ attendees: [] });
rerender({ attendees: [] })
await waitFor(() =>
expect(result.current[newAttendee.email]).toBeUndefined()
);
});
)
})
it("invalidates cache and re-fetches when time window changes", async () => {
mockREPORT.mockResolvedValue(false);
it('invalidates cache and re-fetches when time window changes', async () => {
mockREPORT.mockResolvedValue(false)
const { result, rerender } = renderHook(
({ start, end }) =>
@@ -241,65 +239,65 @@ describe("useAttendeesFreeBusy — Flow B (new attendees)", () => {
newAttendees: [newAttendee],
start,
end,
timezone: TZ,
timezone: TZ
}),
{ initialProps: { start: START, end: END } }
);
)
await waitFor(() => expect(result.current[newAttendee.email]).toBe("free"));
await waitFor(() => expect(result.current[newAttendee.email]).toBe('free'))
rerender({ start: "2026-03-15T14:00:00", end: "2026-03-15T15:00:00" });
rerender({ start: '2026-03-15T14:00:00', end: '2026-03-15T15:00:00' })
await waitFor(() => expect(result.current[newAttendee.email]).toBe("free"));
await waitFor(() => expect(result.current[newAttendee.email]).toBe('free'))
expect(mockREPORT).toHaveBeenCalledTimes(2);
});
expect(mockREPORT).toHaveBeenCalledTimes(2)
})
it("passes UTC-converted iCal times to the API", async () => {
mockREPORT.mockResolvedValue(false);
it('passes UTC-converted iCal times to the API', async () => {
mockREPORT.mockResolvedValue(false)
renderHook(() =>
useAttendeesFreeBusy({
existingAttendees: [],
newAttendees: [newAttendee],
start: "2026-03-14T16:00:00", // 16:00 Paris = 15:00 UTC in winter
end: "2026-03-14T17:00:00",
timezone: "Europe/Paris",
start: '2026-03-14T16:00:00', // 16:00 Paris = 15:00 UTC in winter
end: '2026-03-14T17:00:00',
timezone: 'Europe/Paris'
})
);
)
await waitFor(() => expect(mockREPORT).toHaveBeenCalled());
await waitFor(() => expect(mockREPORT).toHaveBeenCalled())
// Paris is UTC+1 in March (before DST), so 16:00 → 15:00 UTC
expect(mockREPORT).toHaveBeenCalledWith(
"user-alice",
"20260314T150000",
"20260314T160000"
);
});
});
'user-alice',
'20260314T150000',
'20260314T160000'
)
})
})
describe("useAttendeesFreeBusy — Flow A (existing attendees)", () => {
beforeEach(() => jest.clearAllMocks());
describe('useAttendeesFreeBusy — Flow A (existing attendees)', () => {
beforeEach(() => jest.clearAllMocks())
const existingAttendee = { email: "carol@example.com", userId: "user-carol" };
const existingAttendee = { email: 'carol@example.com', userId: 'user-carol' }
it("does not fetch when eventUid is missing", () => {
it('does not fetch when eventUid is missing', () => {
renderHook(() =>
useAttendeesFreeBusy({
existingAttendees: [existingAttendee],
newAttendees: [],
start: START,
end: END,
timezone: TZ,
timezone: TZ
})
);
)
expect(mockPOST).not.toHaveBeenCalled();
});
expect(mockPOST).not.toHaveBeenCalled()
})
it("shows loading then free for existing attendees", async () => {
mockPOST.mockResolvedValue({ "user-carol": false });
it('shows loading then free for existing attendees', async () => {
mockPOST.mockResolvedValue({ 'user-carol': false })
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -308,19 +306,19 @@ describe("useAttendeesFreeBusy — Flow A (existing attendees)", () => {
start: START,
end: END,
timezone: TZ,
eventUid: "event-123",
eventUid: 'event-123'
})
);
)
expect(result.current[existingAttendee.email]).toBe("loading");
expect(result.current[existingAttendee.email]).toBe('loading')
await waitFor(() =>
expect(result.current[existingAttendee.email]).toBe("free")
);
});
expect(result.current[existingAttendee.email]).toBe('free')
)
})
it("shows busy when POST returns busy for userId", async () => {
mockPOST.mockResolvedValue({ "user-carol": true });
it('shows busy when POST returns busy for userId', async () => {
mockPOST.mockResolvedValue({ 'user-carol': true })
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -329,17 +327,17 @@ describe("useAttendeesFreeBusy — Flow A (existing attendees)", () => {
start: START,
end: END,
timezone: TZ,
eventUid: "event-123",
eventUid: 'event-123'
})
);
)
await waitFor(() =>
expect(result.current[existingAttendee.email]).toBe("busy")
);
});
expect(result.current[existingAttendee.email]).toBe('busy')
)
})
it("shows unknown when POST throws", async () => {
mockPOST.mockRejectedValue(new Error("server error"));
it('shows unknown when POST throws', async () => {
mockPOST.mockRejectedValue(new Error('server error'))
const { result } = renderHook(() =>
useAttendeesFreeBusy({
@@ -348,17 +346,17 @@ describe("useAttendeesFreeBusy — Flow A (existing attendees)", () => {
start: START,
end: END,
timezone: TZ,
eventUid: "event-123",
eventUid: 'event-123'
})
);
)
await waitFor(() =>
expect(result.current[existingAttendee.email]).toBe("unknown")
);
});
expect(result.current[existingAttendee.email]).toBe('unknown')
)
})
it("passes the eventUid to the POST API", async () => {
mockPOST.mockResolvedValue({ "user-carol": false });
it('passes the eventUid to the POST API', async () => {
mockPOST.mockResolvedValue({ 'user-carol': false })
renderHook(() =>
useAttendeesFreeBusy({
@@ -367,35 +365,35 @@ describe("useAttendeesFreeBusy — Flow A (existing attendees)", () => {
start: START,
end: END,
timezone: TZ,
eventUid: "event-abc",
eventUid: 'event-abc'
})
);
)
await waitFor(() => expect(mockPOST).toHaveBeenCalled());
await waitFor(() => expect(mockPOST).toHaveBeenCalled())
expect(mockPOST).toHaveBeenCalledWith(
["user-carol"],
['user-carol'],
expect.any(String),
expect.any(String),
"event-abc"
);
});
});
'event-abc'
)
})
})
describe("useAttendeesFreeBusy — enabled flag", () => {
it("does not fetch when disabled", () => {
describe('useAttendeesFreeBusy — enabled flag', () => {
it('does not fetch when disabled', () => {
renderHook(() =>
useAttendeesFreeBusy({
existingAttendees: [{ email: "x@x.com", userId: "uid" }],
newAttendees: [{ email: "y@y.com", userId: "uid2" }],
existingAttendees: [{ email: 'x@x.com', userId: 'uid' }],
newAttendees: [{ email: 'y@y.com', userId: 'uid2' }],
start: START,
end: END,
timezone: TZ,
eventUid: "event-123",
enabled: false,
eventUid: 'event-123',
enabled: false
})
);
)
expect(mockPOST).not.toHaveBeenCalled();
expect(mockREPORT).not.toHaveBeenCalled();
});
});
expect(mockPOST).not.toHaveBeenCalled()
expect(mockREPORT).not.toHaveBeenCalled()
})
})
__test__/features/Events/ICSPropertiesPreservation.test.tsx
+445 -447
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/ImportAlert.test.tsx
+70 -70
View File
@@ -1,67 +1,67 @@
import ImportAlert from "@/features/Events/ImportAlert";
import { fireEvent, screen } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import ImportAlert from '@/features/Events/ImportAlert'
import { fireEvent, screen } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
// Mock the ErrorSnackbar component since we want to test ImportAlert logic,
// but we can also test integration if we don't mock it.
// Given ImportAlert uses EventErrorSnackbar which uses MUI Snackbar,
// it's better to render it and check for text presence.
describe("ImportAlert", () => {
describe('ImportAlert', () => {
const preloadedState = {
calendars: {
list: {
cal1: {
id: "cal1",
name: "Calendar 1",
id: 'cal1',
name: 'Calendar 1',
events: {
event1: {
uid: "event1",
title: "Event 1",
error: "Error message 1",
uid: 'event1',
title: 'Event 1',
error: 'Error message 1'
},
event2: {
uid: "event2",
title: "Event 2",
uid: 'event2',
title: 'Event 2'
// No error
},
},
}
}
},
cal2: {
id: "cal2",
name: "Calendar 2",
id: 'cal2',
name: 'Calendar 2',
events: {
event3: {
uid: "event3",
title: "Event 3",
error: "Error message 2",
},
},
},
},
},
};
uid: 'event3',
title: 'Event 3',
error: 'Error message 2'
}
}
}
}
}
}
it("renders nothing when there are no errors", () => {
it('renders nothing when there are no errors', () => {
const state = {
calendars: {
list: {
cal1: {
id: "cal1",
id: 'cal1',
events: {
event1: { uid: "event1" },
},
},
},
},
};
event1: { uid: 'event1' }
}
}
}
}
}
const { container } = renderWithProviders(<ImportAlert />, state);
expect(container).toBeEmptyDOMElement();
});
const { container } = renderWithProviders(<ImportAlert />, state)
expect(container).toBeEmptyDOMElement()
})
it("renders snackbar with error message when there is one error", () => {
renderWithProviders(<ImportAlert />, preloadedState);
it('renders snackbar with error message when there is one error', () => {
renderWithProviders(<ImportAlert />, preloadedState)
// EventErrorSnackbar shows "multipleEvents" if > 1, or the message if 1.
// Here we have 2 errors in preloadedState.
@@ -70,24 +70,24 @@ describe("ImportAlert", () => {
calendars: {
list: {
cal1: {
id: "cal1",
id: 'cal1',
events: {
event1: {
uid: "event1",
error: "Single Error",
},
},
},
},
},
};
uid: 'event1',
error: 'Single Error'
}
}
}
}
}
}
renderWithProviders(<ImportAlert />, singleErrorState);
expect(screen.getByText("Single Error")).toBeInTheDocument();
});
renderWithProviders(<ImportAlert />, singleErrorState)
expect(screen.getByText('Single Error')).toBeInTheDocument()
})
it("renders summary message when there are multiple errors", () => {
renderWithProviders(<ImportAlert />, preloadedState);
it('renders summary message when there are multiple errors', () => {
renderWithProviders(<ImportAlert />, preloadedState)
// 2 errors in preloadedState
// "error.multipleEvents" key is used.
// In test environment, t function usually returns the key or formatted string.
@@ -108,34 +108,34 @@ describe("ImportAlert", () => {
// const summary = messages.length === 1 ? messages[0] : t("error.multipleEvents", { count: messages.length });
// We can check if the Alert is present.
expect(screen.getByRole("alert")).toBeInTheDocument();
});
expect(screen.getByRole('alert')).toBeInTheDocument()
})
it("dismisses error when close button is clicked", () => {
it('dismisses error when close button is clicked', () => {
const singleErrorState = {
calendars: {
list: {
cal1: {
id: "cal1",
id: 'cal1',
events: {
event1: {
uid: "event1",
error: "Dismiss Me",
},
},
},
},
},
};
uid: 'event1',
error: 'Dismiss Me'
}
}
}
}
}
}
renderWithProviders(<ImportAlert />, singleErrorState);
expect(screen.getByText("Dismiss Me")).toBeInTheDocument();
renderWithProviders(<ImportAlert />, singleErrorState)
expect(screen.getByText('Dismiss Me')).toBeInTheDocument()
const closeButton = screen.getByRole("button", { name: /ok/i }); // EventErrorSnackbar has an "OK" button
fireEvent.click(closeButton);
const closeButton = screen.getByRole('button', { name: /ok/i }) // EventErrorSnackbar has an "OK" button
fireEvent.click(closeButton)
// After clicking, it should disappear (or at least be removed from DOM or hidden)
// Since we use local state to filter dismissed errors, it should re-render with null.
expect(screen.queryByText("Dismiss Me")).not.toBeInTheDocument();
});
});
expect(screen.queryByText('Dismiss Me')).not.toBeInTheDocument()
})
})
__test__/features/Events/eventUtils.test.ts
+944 -952
View File
File diff suppressed because it is too large Load Diff
__test__/features/Events/updateEventHelpers/updateAttendeesAfterTimeChange.test.ts
+158 -158
View File
@@ -1,213 +1,213 @@
import { CalendarEvent } from "@/features/Events/EventsTypes";
import { updateAttendeesAfterTimeChange } from "@/features/Events/updateEventHelpers/updateAttendeesAfterTimeChange";
import { userAttendee } from "@/features/User/models/attendee";
import { userOrganiser } from "@/features/User/userDataTypes";
import { CalendarEvent } from '@/features/Events/EventsTypes'
import { updateAttendeesAfterTimeChange } from '@/features/Events/updateEventHelpers/updateAttendeesAfterTimeChange'
import { userAttendee } from '@/features/User/models/attendee'
import { userOrganiser } from '@/features/User/userDataTypes'
describe("updateAttendeesAfterTimeChange", () => {
describe('updateAttendeesAfterTimeChange', () => {
const mockAttendee: userAttendee = {
cal_address: "attendee@example.com",
partstat: "ACCEPTED",
rsvp: "FALSE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cn: "attendee",
};
cal_address: 'attendee@example.com',
partstat: 'ACCEPTED',
rsvp: 'FALSE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cn: 'attendee'
}
const mockOrganizer: userOrganiser = {
cn: "Organizer",
cal_address: "organizer@example.com",
};
cn: 'Organizer',
cal_address: 'organizer@example.com'
}
const organizerAttendee: userAttendee = {
cal_address: "organizer@example.com",
partstat: "ACCEPTED",
rsvp: "FALSE",
role: "CHAIR",
cutype: "INDIVIDUAL",
cn: "organizer",
};
cal_address: 'organizer@example.com',
partstat: 'ACCEPTED',
rsvp: 'FALSE',
role: 'CHAIR',
cutype: 'INDIVIDUAL',
cn: 'organizer'
}
const baseEvent: CalendarEvent = {
uid: "test-event",
URL: "/calendar/667037022b752d0026472254/cal1/test-event.ics",
title: "Test Event",
calId: "667037022b752d0026472254/cal1",
start: "2025-01-15T07:00:00.000Z",
end: "2025-01-15T08:00:00.000Z",
uid: 'test-event',
URL: '/calendar/667037022b752d0026472254/cal1/test-event.ics',
title: 'Test Event',
calId: '667037022b752d0026472254/cal1',
start: '2025-01-15T07:00:00.000Z',
end: '2025-01-15T08:00:00.000Z',
allday: false,
organizer: mockOrganizer,
attendee: [mockAttendee, organizerAttendee],
timezone: "ETC/UTC",
};
timezone: 'ETC/UTC'
}
describe("early returns", () => {
it("should return the event unchanged when attendee list is undefined", () => {
const event = { ...baseEvent, attendee: undefined };
describe('early returns', () => {
it('should return the event unchanged when attendee list is undefined', () => {
const event = { ...baseEvent, attendee: undefined }
const result = updateAttendeesAfterTimeChange(
event as unknown as CalendarEvent
);
expect(result).toBe(event);
});
)
expect(result).toBe(event)
})
it("should NOT bail out early when organizer is undefined", () => {
const event = { ...baseEvent, organizer: undefined };
const result = updateAttendeesAfterTimeChange(event);
expect(result.attendee).toBeDefined();
expect(result.attendee).toHaveLength(2);
});
});
it('should NOT bail out early when organizer is undefined', () => {
const event = { ...baseEvent, organizer: undefined }
const result = updateAttendeesAfterTimeChange(event)
expect(result.attendee).toBeDefined()
expect(result.attendee).toHaveLength(2)
})
})
describe("without provided attendees list", () => {
it("should return attendees unchanged when timeChanged is false", () => {
const result = updateAttendeesAfterTimeChange(baseEvent, false);
expect(result.attendee?.[0].partstat).toBe("ACCEPTED");
expect(result.attendee?.[0].rsvp).toBe("FALSE");
});
describe('without provided attendees list', () => {
it('should return attendees unchanged when timeChanged is false', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, false)
expect(result.attendee?.[0].partstat).toBe('ACCEPTED')
expect(result.attendee?.[0].rsvp).toBe('FALSE')
})
it("should mark non-organizer attendees as NEEDS-ACTION when timeChanged is true", () => {
const result = updateAttendeesAfterTimeChange(baseEvent, true);
it('should mark non-organizer attendees as NEEDS-ACTION when timeChanged is true', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, true)
const attendee = result.attendee?.find(
(a) => a.cal_address === "attendee@example.com"
);
expect(attendee?.partstat).toBe("NEEDS-ACTION");
expect(attendee?.rsvp).toBe("TRUE");
});
a => a.cal_address === 'attendee@example.com'
)
expect(attendee?.partstat).toBe('NEEDS-ACTION')
expect(attendee?.rsvp).toBe('TRUE')
})
it("should NOT mark the organizer as NEEDS-ACTION when timeChanged is true", () => {
const result = updateAttendeesAfterTimeChange(baseEvent, true);
it('should NOT mark the organizer as NEEDS-ACTION when timeChanged is true', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, true)
const organizer = result.attendee?.find(
(a) => a.cal_address === "organizer@example.com"
);
expect(organizer?.partstat).toBe("ACCEPTED");
expect(organizer?.rsvp).toBe("FALSE");
});
a => a.cal_address === 'organizer@example.com'
)
expect(organizer?.partstat).toBe('ACCEPTED')
expect(organizer?.rsvp).toBe('FALSE')
})
it("should return attendees unchanged when timeChanged is undefined", () => {
const result = updateAttendeesAfterTimeChange(baseEvent);
expect(result.attendee?.[0].partstat).toBe("ACCEPTED");
});
});
it('should return attendees unchanged when timeChanged is undefined', () => {
const result = updateAttendeesAfterTimeChange(baseEvent)
expect(result.attendee?.[0].partstat).toBe('ACCEPTED')
})
})
describe("with provided attendees list", () => {
describe('with provided attendees list', () => {
const newAttendee: userAttendee = {
cal_address: "new@example.com",
partstat: "ACCEPTED",
rsvp: "FALSE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cn: "new",
};
cal_address: 'new@example.com',
partstat: 'ACCEPTED',
rsvp: 'FALSE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cn: 'new'
}
it("should use existing attendee data when the address already exists in the event", () => {
it('should use existing attendee data when the address already exists in the event', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, false, [
mockAttendee,
]);
mockAttendee
])
const attendee = result.attendee?.find(
(a) => a.cal_address === "attendee@example.com"
);
expect(attendee?.partstat).toBe("ACCEPTED");
});
a => a.cal_address === 'attendee@example.com'
)
expect(attendee?.partstat).toBe('ACCEPTED')
})
it("should mark new attendee as NEEDS-ACTION when not found in existing list", () => {
it('should mark new attendee as NEEDS-ACTION when not found in existing list', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, false, [
newAttendee,
]);
newAttendee
])
const attendee = result.attendee?.find(
(a) => a.cal_address === "new@example.com"
);
expect(attendee?.partstat).toBe("NEEDS-ACTION");
expect(attendee?.rsvp).toBe("TRUE");
});
a => a.cal_address === 'new@example.com'
)
expect(attendee?.partstat).toBe('NEEDS-ACTION')
expect(attendee?.rsvp).toBe('TRUE')
})
it("should mark all attendees as NEEDS-ACTION when timeChanged is true", () => {
it('should mark all attendees as NEEDS-ACTION when timeChanged is true', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, true, [
mockAttendee,
newAttendee,
]);
newAttendee
])
const nonOrganizerAttendees = result.attendee?.filter(
(a) => a.cal_address !== "organizer@example.com"
);
nonOrganizerAttendees?.forEach((a) => {
expect(a.partstat).toBe("NEEDS-ACTION");
expect(a.rsvp).toBe("TRUE");
});
});
a => a.cal_address !== 'organizer@example.com'
)
nonOrganizerAttendees?.forEach(a => {
expect(a.partstat).toBe('NEEDS-ACTION')
expect(a.rsvp).toBe('TRUE')
})
})
it("should append organizer entry at the end of the attendee list", () => {
it('should append organizer entry at the end of the attendee list', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, false, [
mockAttendee,
]);
const last = result.attendee?.[result.attendee.length - 1];
expect(last?.cal_address).toBe("organizer@example.com");
});
mockAttendee
])
const last = result.attendee?.[result.attendee.length - 1]
expect(last?.cal_address).toBe('organizer@example.com')
})
it("should use existing organizer attendee data when found in event attendees", () => {
it('should use existing organizer attendee data when found in event attendees', () => {
const result = updateAttendeesAfterTimeChange(baseEvent, false, [
mockAttendee,
]);
mockAttendee
])
const organizer = result.attendee?.find(
(a) => a.cal_address === "organizer@example.com"
);
expect(organizer?.partstat).toBe("ACCEPTED");
});
a => a.cal_address === 'organizer@example.com'
)
expect(organizer?.partstat).toBe('ACCEPTED')
})
it("should fall back to organizer defaults when organizer is not in existing attendees", () => {
it('should fall back to organizer defaults when organizer is not in existing attendees', () => {
const eventWithoutOrganizerInAttendees: CalendarEvent = {
...baseEvent,
attendee: [mockAttendee], // organizer not in attendee list
};
attendee: [mockAttendee] // organizer not in attendee list
}
const result = updateAttendeesAfterTimeChange(
eventWithoutOrganizerInAttendees,
false,
[mockAttendee]
);
)
const organizer = result.attendee?.find(
(a) => a.cal_address === "organizer@example.com"
);
expect(organizer?.role).toBe("CHAIR");
expect(organizer?.partstat).toBe("NEEDS-ACTION");
});
});
a => a.cal_address === 'organizer@example.com'
)
expect(organizer?.role).toBe('CHAIR')
expect(organizer?.partstat).toBe('NEEDS-ACTION')
})
})
describe("organizer undefined", () => {
describe('organizer undefined', () => {
const eventNoOrganizer: CalendarEvent = {
...baseEvent,
organizer: undefined,
};
organizer: undefined
}
it("should return attendees without bailing out", () => {
const result = updateAttendeesAfterTimeChange(eventNoOrganizer);
expect(result.attendee).toHaveLength(2);
});
it('should return attendees without bailing out', () => {
const result = updateAttendeesAfterTimeChange(eventNoOrganizer)
expect(result.attendee).toHaveLength(2)
})
it("should mark attendees as NEEDS-ACTION when timeChanged is true", () => {
const result = updateAttendeesAfterTimeChange(eventNoOrganizer, true);
result.attendee?.forEach((a) => {
expect(a.partstat).toBe("NEEDS-ACTION");
expect(a.rsvp).toBe("TRUE");
});
});
it('should mark attendees as NEEDS-ACTION when timeChanged is true', () => {
const result = updateAttendeesAfterTimeChange(eventNoOrganizer, true)
result.attendee?.forEach(a => {
expect(a.partstat).toBe('NEEDS-ACTION')
expect(a.rsvp).toBe('TRUE')
})
})
it("should not mutate attendees when timeChanged is false", () => {
const result = updateAttendeesAfterTimeChange(eventNoOrganizer, false);
expect(result.attendee?.[0].partstat).toBe("ACCEPTED");
expect(result.attendee?.[0].rsvp).toBe("FALSE");
});
it('should not mutate attendees when timeChanged is false', () => {
const result = updateAttendeesAfterTimeChange(eventNoOrganizer, false)
expect(result.attendee?.[0].partstat).toBe('ACCEPTED')
expect(result.attendee?.[0].rsvp).toBe('FALSE')
})
it("should not append an organizer entry when organizer is undefined and attendees list is provided", () => {
it('should not append an organizer entry when organizer is undefined and attendees list is provided', () => {
const newAttendee: userAttendee = {
cal_address: "new@example.com",
partstat: "ACCEPTED",
rsvp: "FALSE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cn: "new",
};
cal_address: 'new@example.com',
partstat: 'ACCEPTED',
rsvp: 'FALSE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cn: 'new'
}
const result = updateAttendeesAfterTimeChange(eventNoOrganizer, false, [
newAttendee,
]);
expect(result.attendee).toHaveLength(1);
expect(result.attendee?.[0].cal_address).toBe("new@example.com");
});
});
});
newAttendee
])
expect(result.attendee).toHaveLength(1)
expect(result.attendee?.[0].cal_address).toBe('new@example.com')
})
})
})
__test__/features/Search/EventSearchBar.test.tsx
+227 -227
View File
@@ -1,344 +1,344 @@
import SearchBar from "@/components/Menubar/EventSearchBar";
import * as searchThunk from "@/features/Search/SearchSlice";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import SearchBar from '@/components/Menubar/EventSearchBar'
import * as searchThunk from '@/features/Search/SearchSlice'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { renderWithProviders } from '../../utils/Renderwithproviders'
describe("EventSearchBar", () => {
const today = new Date();
const start = new Date(today);
start.setHours(10, 0, 0, 0);
const end = new Date(today);
end.setHours(11, 0, 0, 0);
describe('EventSearchBar', () => {
const today = new Date()
const start = new Date(today)
start.setHours(10, 0, 0, 0)
const end = new Date(today)
end.setHours(11, 0, 0, 0)
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "mockSid",
openpaasId: "user1",
sub: 'test',
email: 'test@test.com',
sid: 'mockSid',
openpaasId: 'user1'
},
tokens: { accessToken: "token" },
tokens: { accessToken: 'token' }
},
calendars: {
list: {
"user1/cal1": {
name: "Calendar personal",
id: "user1/cal1",
color: { light: "#FF0000", dark: "#000" },
owner: { emails: ["alice@example.com"] },
'user1/cal1': {
name: 'Calendar personal',
id: 'user1/cal1',
color: { light: '#FF0000', dark: '#000' },
owner: { emails: ['alice@example.com'] },
events: {
event1: {
id: "event1",
calId: "user1/cal1",
uid: "event1",
title: "Test Event",
id: 'event1',
calId: 'user1/cal1',
uid: 'event1',
title: 'Test Event',
start: start.toISOString(),
end: end.toISOString(),
partstat: "ACCEPTED",
partstat: 'ACCEPTED',
organizer: {
cn: "Alice",
cal_address: "alice@example.com",
cn: 'Alice',
cal_address: 'alice@example.com'
},
attendee: [
{
cn: "Alice",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cal_address: "alice@example.com",
},
],
},
},
cn: 'Alice',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cal_address: 'alice@example.com'
}
]
}
}
},
"user2/cal1": {
name: "Calendar delegated",
'user2/cal1': {
name: 'Calendar delegated',
delegated: true,
id: "user2/cal1",
color: { light: "#FF0000", dark: "#000" },
owner: { emails: ["alice@example.com"] },
id: 'user2/cal1',
color: { light: '#FF0000', dark: '#000' },
owner: { emails: ['alice@example.com'] },
events: {
event1: {
id: "event1",
calId: "user2/cal1",
uid: "event1",
title: "Test Event",
id: 'event1',
calId: 'user2/cal1',
uid: 'event1',
title: 'Test Event',
start: start.toISOString(),
end: end.toISOString(),
partstat: "ACCEPTED",
partstat: 'ACCEPTED',
organizer: {
cn: "Alice",
cal_address: "alice@example.com",
cn: 'Alice',
cal_address: 'alice@example.com'
},
attendee: [
{
cn: "Alice",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cal_address: "alice@example.com",
},
],
},
},
cn: 'Alice',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cal_address: 'alice@example.com'
}
]
}
}
},
"user3/cal1": {
name: "Calendar shared",
id: "user3/cal1",
color: { light: "#FF0000", dark: "#000" },
owner: { emails: ["alice@example.com"] },
'user3/cal1': {
name: 'Calendar shared',
id: 'user3/cal1',
color: { light: '#FF0000', dark: '#000' },
owner: { emails: ['alice@example.com'] },
events: {
event1: {
id: "event1",
calId: "user3/cal1",
uid: "event1",
title: "Test Event",
id: 'event1',
calId: 'user3/cal1',
uid: 'event1',
title: 'Test Event',
start: start.toISOString(),
end: end.toISOString(),
partstat: "ACCEPTED",
partstat: 'ACCEPTED',
organizer: {
cn: "Alice",
cal_address: "alice@example.com",
cn: 'Alice',
cal_address: 'alice@example.com'
},
attendee: [
{
cn: "Alice",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cal_address: "alice@example.com",
},
],
},
},
},
cn: 'Alice',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cal_address: 'alice@example.com'
}
]
}
}
}
},
pending: false,
},
};
pending: false
}
}
it("should render search icon button initially", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should render search icon button initially', () => {
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
expect(searchButton).toBeInTheDocument();
});
const searchButton = screen.getByRole('button')
expect(searchButton).toBeInTheDocument()
})
it("should expand search bar when icon is clicked", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should expand search bar when icon is clicked', () => {
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
expect(searchInput).toBeInTheDocument();
});
const searchInput = screen.getByPlaceholderText('common.search')
expect(searchInput).toBeInTheDocument()
})
it("should unexpand search bar when field is unfocused and empty", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should unexpand search bar when field is unfocused and empty', () => {
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
fireEvent.mouseDown(document.body);
expect(searchInput).not.toBeInTheDocument();
});
const searchInput = screen.getByPlaceholderText('common.search')
fireEvent.mouseDown(document.body)
expect(searchInput).not.toBeInTheDocument()
})
it("should not unexpand search bar when field is unfocused but not empty", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should not unexpand search bar when field is unfocused but not empty', () => {
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
userEvent.type(searchInput, "test");
fireEvent.blur(searchInput);
expect(searchInput).toBeInTheDocument();
expect(searchInput).toHaveValue("test");
});
const searchInput = screen.getByPlaceholderText('common.search')
userEvent.type(searchInput, 'test')
fireEvent.blur(searchInput)
expect(searchInput).toBeInTheDocument()
expect(searchInput).toHaveValue('test')
})
it("should update search value on input", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should update search value on input', () => {
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
fireEvent.change(searchInput, { target: { value: "meeting" } });
const searchInput = screen.getByPlaceholderText('common.search')
fireEvent.change(searchInput, { target: { value: 'meeting' } })
expect(searchInput).toHaveValue("meeting");
});
expect(searchInput).toHaveValue('meeting')
})
it("should open filter popover when tune icon is clicked", async () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should open filter popover when tune icon is clicked', async () => {
renderWithProviders(<SearchBar />, preloadedState)
// Expand search bar
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
// Click tune icon
const tuneButton = screen.getByTestId("TuneIcon");
if (tuneButton) fireEvent.click(tuneButton);
const tuneButton = screen.getByTestId('TuneIcon')
if (tuneButton) fireEvent.click(tuneButton)
await waitFor(() => {
expect(screen.getByText("search.searchIn")).toBeInTheDocument();
});
});
expect(screen.getByText('search.searchIn')).toBeInTheDocument()
})
})
it("should clear search value when clear button is clicked", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('should clear search value when clear button is clicked', () => {
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
fireEvent.change(searchInput, { target: { value: "meeting" } });
const searchInput = screen.getByPlaceholderText('common.search')
fireEvent.change(searchInput, { target: { value: 'meeting' } })
const clearButton = screen.getByTestId("HighlightOffIcon");
fireEvent.click(clearButton);
const clearButton = screen.getByTestId('HighlightOffIcon')
fireEvent.click(clearButton)
expect(searchInput).toHaveValue("");
});
expect(searchInput).toHaveValue('')
})
it("should trigger search on Enter key", async () => {
const searchSpy = jest.spyOn(searchThunk, "searchEventsAsync");
it('should trigger search on Enter key', async () => {
const searchSpy = jest.spyOn(searchThunk, 'searchEventsAsync')
renderWithProviders(<SearchBar />, preloadedState);
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
fireEvent.change(searchInput, { target: { value: "test" } });
fireEvent.keyDown(searchInput, { key: "Enter" });
const searchInput = screen.getByPlaceholderText('common.search')
fireEvent.change(searchInput, { target: { value: 'test' } })
fireEvent.keyDown(searchInput, { key: 'Enter' })
await waitFor(() => {
expect(searchSpy).toHaveBeenCalledWith({
filters: {
keywords: "",
keywords: '',
organizers: [],
attendees: [],
searchIn: ["user1/cal1"],
searchIn: ['user1/cal1']
},
search: "test",
});
});
});
it("should not trigger search on Enter key when search is empty", async () => {
const searchSpy = jest.spyOn(searchThunk, "searchEventsAsync");
search: 'test'
})
})
})
it('should not trigger search on Enter key when search is empty', async () => {
const searchSpy = jest.spyOn(searchThunk, 'searchEventsAsync')
renderWithProviders(<SearchBar />, preloadedState);
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
const searchInput = screen.getByPlaceholderText("common.search");
fireEvent.keyDown(searchInput, { key: "Enter" });
const searchInput = screen.getByPlaceholderText('common.search')
fireEvent.keyDown(searchInput, { key: 'Enter' })
await waitFor(() => {
expect(searchSpy).not.toHaveBeenCalled();
});
});
expect(searchSpy).not.toHaveBeenCalled()
})
})
it("should not trigger search when filter keywords is empty", async () => {
const searchSpy = jest.spyOn(searchThunk, "searchEventsAsync");
it('should not trigger search when filter keywords is empty', async () => {
const searchSpy = jest.spyOn(searchThunk, 'searchEventsAsync')
renderWithProviders(<SearchBar />, preloadedState);
renderWithProviders(<SearchBar />, preloadedState)
const searchButton = screen.getByRole("button");
fireEvent.click(searchButton);
const searchButton = screen.getByRole('button')
fireEvent.click(searchButton)
// Click tune icon
const tuneButton = screen.getByTestId("TuneIcon");
if (tuneButton) fireEvent.click(tuneButton);
const tuneButton = screen.getByTestId('TuneIcon')
if (tuneButton) fireEvent.click(tuneButton)
fireEvent.click(screen.getByText("common.search"));
fireEvent.click(screen.getByText('common.search'))
await waitFor(() => {
expect(searchSpy).not.toHaveBeenCalled();
});
});
it("keeps search bar expanded when popover opens", () => {
renderWithProviders(<SearchBar />, preloadedState);
expect(searchSpy).not.toHaveBeenCalled()
})
})
it('keeps search bar expanded when popover opens', () => {
renderWithProviders(<SearchBar />, preloadedState)
fireEvent.click(screen.getByRole("button"));
fireEvent.click(screen.getByRole('button'))
const tuneBtn = screen
.getAllByRole("button")
.find((b) => b.querySelector('[data-testid="TuneIcon"]'));
.getAllByRole('button')
.find(b => b.querySelector('[data-testid="TuneIcon"]'))
fireEvent.click(tuneBtn!);
fireEvent.click(tuneBtn!)
expect(screen.getByPlaceholderText("common.search")).toBeInTheDocument();
});
expect(screen.getByPlaceholderText('common.search')).toBeInTheDocument()
})
it("does NOT collapse search when clicking inside popover", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('does NOT collapse search when clicking inside popover', () => {
renderWithProviders(<SearchBar />, preloadedState)
fireEvent.click(screen.getByRole("button"));
fireEvent.click(screen.getByRole('button'))
const tuneBtn = screen
.getAllByRole("button")
.find((b) => b.querySelector('[data-testid="TuneIcon"]'));
.getAllByRole('button')
.find(b => b.querySelector('[data-testid="TuneIcon"]'))
fireEvent.click(tuneBtn!);
fireEvent.click(tuneBtn!)
fireEvent.mouseDown(screen.getByText("search.searchIn"));
fireEvent.mouseDown(screen.getByText('search.searchIn'))
expect(screen.getByPlaceholderText("common.search")).toBeInTheDocument();
});
expect(screen.getByPlaceholderText('common.search')).toBeInTheDocument()
})
it("clicking Cancel closes popover and search collapses if empty", async () => {
renderWithProviders(<SearchBar />, preloadedState);
it('clicking Cancel closes popover and search collapses if empty', async () => {
renderWithProviders(<SearchBar />, preloadedState)
fireEvent.click(screen.getByRole("button"));
fireEvent.click(screen.getByRole('button'))
const tuneBtn = screen
.getAllByRole("button")
.find((b) => b.querySelector('[data-testid="TuneIcon"]'));
.getAllByRole('button')
.find(b => b.querySelector('[data-testid="TuneIcon"]'))
fireEvent.click(tuneBtn!);
fireEvent.click(tuneBtn!)
fireEvent.click(screen.getByText("common.cancel"));
fireEvent.click(screen.getByText('common.cancel'))
await waitFor(() =>
expect(screen.queryByText("search.searchIn")).not.toBeInTheDocument()
);
expect(screen.queryByPlaceholderText("common.search")).toBeNull();
});
expect(screen.queryByText('search.searchIn')).not.toBeInTheDocument()
)
expect(screen.queryByPlaceholderText('common.search')).toBeNull()
})
it("does not collapse when selecting a filter value", async () => {
renderWithProviders(<SearchBar />, preloadedState);
it('does not collapse when selecting a filter value', async () => {
renderWithProviders(<SearchBar />, preloadedState)
fireEvent.click(screen.getByRole("button"));
fireEvent.click(screen.getByRole('button'))
const tuneBtn = screen
.getAllByRole("button")
.find((b) => b.querySelector('[data-testid="TuneIcon"]'));
.getAllByRole('button')
.find(b => b.querySelector('[data-testid="TuneIcon"]'))
fireEvent.click(tuneBtn!);
fireEvent.click(tuneBtn!)
fireEvent.mouseDown(screen.getByText("search.searchIn")); // simulate interaction inside menu
fireEvent.mouseDown(screen.getByText('search.searchIn')) // simulate interaction inside menu
expect(screen.getByPlaceholderText("common.search")).toBeInTheDocument();
});
expect(screen.getByPlaceholderText('common.search')).toBeInTheDocument()
})
it("keeps input value after popover closes if not empty", () => {
renderWithProviders(<SearchBar />, preloadedState);
it('keeps input value after popover closes if not empty', () => {
renderWithProviders(<SearchBar />, preloadedState)
fireEvent.click(screen.getByRole("button"));
userEvent.type(screen.getByPlaceholderText("common.search"), "hello");
fireEvent.click(screen.getByRole('button'))
userEvent.type(screen.getByPlaceholderText('common.search'), 'hello')
const tuneBtn = screen
.getAllByRole("button")
.find((b) => b.querySelector('[data-testid="TuneIcon"]'));
.getAllByRole('button')
.find(b => b.querySelector('[data-testid="TuneIcon"]'))
fireEvent.click(tuneBtn!);
fireEvent.click(document.body);
fireEvent.click(tuneBtn!)
fireEvent.click(document.body)
const inputAfter = screen.getByPlaceholderText("common.search");
expect(inputAfter).toHaveValue("hello");
});
});
const inputAfter = screen.getByPlaceholderText('common.search')
expect(inputAfter).toHaveValue('hello')
})
})
__test__/features/Search/SearchResultsPage.test.tsx
+150 -150
View File
@@ -1,224 +1,224 @@
import SearchResultsPage from "@/features/Search/SearchResultsPage";
import { screen } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import SearchResultsPage from '@/features/Search/SearchResultsPage'
import { screen } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
describe("SearchResultsPage", () => {
const today = new Date();
const start = new Date(today);
start.setHours(10, 0, 0, 0);
const end = new Date(today);
end.setHours(11, 0, 0, 0);
describe('SearchResultsPage', () => {
const today = new Date()
const start = new Date(today)
start.setHours(10, 0, 0, 0)
const end = new Date(today)
end.setHours(11, 0, 0, 0)
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "mockSid",
openpaasId: "user1",
sub: 'test',
email: 'test@test.com',
sid: 'mockSid',
openpaasId: 'user1'
},
tokens: { accessToken: "token" },
tokens: { accessToken: 'token' }
},
calendars: {
list: {
"user1/cal1": {
name: "Calendar personal",
id: "user1/cal1",
color: { light: "#FF0000", dark: "#000" },
owner: { emails: ["alice@example.com"] },
'user1/cal1': {
name: 'Calendar personal',
id: 'user1/cal1',
color: { light: '#FF0000', dark: '#000' },
owner: { emails: ['alice@example.com'] },
events: {
event1: {
id: "event1",
calId: "user1/cal1",
uid: "event1",
title: "Test Event",
id: 'event1',
calId: 'user1/cal1',
uid: 'event1',
title: 'Test Event',
start: start.toISOString(),
end: end.toISOString(),
partstat: "ACCEPTED",
partstat: 'ACCEPTED',
organizer: {
cn: "Alice",
cal_address: "alice@example.com",
cn: 'Alice',
cal_address: 'alice@example.com'
},
attendee: [
{
cn: "Alice",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cal_address: "alice@example.com",
},
],
},
},
cn: 'Alice',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cal_address: 'alice@example.com'
}
]
}
}
},
"user2/cal1": {
name: "Calendar delegated",
'user2/cal1': {
name: 'Calendar delegated',
delegated: true,
id: "user2/cal1",
color: { light: "#FF0000", dark: "#000" },
owner: { emails: ["alice@example.com"] },
id: 'user2/cal1',
color: { light: '#FF0000', dark: '#000' },
owner: { emails: ['alice@example.com'] },
events: {
event1: {
id: "event1",
calId: "user2/cal1",
uid: "event1",
title: "Test Event",
id: 'event1',
calId: 'user2/cal1',
uid: 'event1',
title: 'Test Event',
start: start.toISOString(),
end: end.toISOString(),
partstat: "ACCEPTED",
partstat: 'ACCEPTED',
organizer: {
cn: "Alice",
cal_address: "alice@example.com",
cn: 'Alice',
cal_address: 'alice@example.com'
},
attendee: [
{
cn: "Alice",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cal_address: "alice@example.com",
},
],
},
},
cn: 'Alice',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cal_address: 'alice@example.com'
}
]
}
}
},
"user3/cal1": {
name: "Calendar shared",
id: "user3/cal1",
color: { light: "#FF0000", dark: "#000" },
owner: { emails: ["alice@example.com"] },
'user3/cal1': {
name: 'Calendar shared',
id: 'user3/cal1',
color: { light: '#FF0000', dark: '#000' },
owner: { emails: ['alice@example.com'] },
events: {
event1: {
id: "event1",
calId: "user3/cal1",
uid: "event1",
title: "Test Event",
id: 'event1',
calId: 'user3/cal1',
uid: 'event1',
title: 'Test Event',
start: start.toISOString(),
end: end.toISOString(),
partstat: "ACCEPTED",
partstat: 'ACCEPTED',
organizer: {
cn: "Alice",
cal_address: "alice@example.com",
cn: 'Alice',
cal_address: 'alice@example.com'
},
attendee: [
{
cn: "Alice",
partstat: "ACCEPTED",
rsvp: "TRUE",
role: "REQ-PARTICIPANT",
cutype: "INDIVIDUAL",
cal_address: "alice@example.com",
},
],
},
},
},
cn: 'Alice',
partstat: 'ACCEPTED',
rsvp: 'TRUE',
role: 'REQ-PARTICIPANT',
cutype: 'INDIVIDUAL',
cal_address: 'alice@example.com'
}
]
}
}
}
},
pending: false,
},
};
pending: false
}
}
it("should show loading spinner when loading", () => {
it('should show loading spinner when loading', () => {
renderWithProviders(<SearchResultsPage />, {
...preloadedState,
searchResult: { loading: true, error: null, hits: 0, results: [] },
});
expect(screen.getByRole("progressbar")).toBeInTheDocument();
});
searchResult: { loading: true, error: null, hits: 0, results: [] }
})
expect(screen.getByRole('progressbar')).toBeInTheDocument()
})
it("should show error message when error occurs", () => {
it('should show error message when error occurs', () => {
renderWithProviders(<SearchResultsPage />, {
...preloadedState,
searchResult: {
loading: false,
error: "Network error",
error: 'Network error',
hits: 0,
results: [],
},
});
expect(screen.getByText("Network error")).toBeInTheDocument();
});
results: []
}
})
expect(screen.getByText('Network error')).toBeInTheDocument()
})
it("should show no results message when no hits", () => {
it('should show no results message when no hits', () => {
renderWithProviders(<SearchResultsPage />, {
...preloadedState,
searchResult: { loading: false, error: null, hits: null, results: [] },
});
expect(screen.getByText("search.noResults")).toBeInTheDocument();
});
searchResult: { loading: false, error: null, hits: null, results: [] }
})
expect(screen.getByText('search.noResults')).toBeInTheDocument()
})
it("should render search results", () => {
it('should render search results', () => {
const mockResults = [
{
data: {
uid: "1",
summary: "Team Meeting",
start: "2025-06-26T15:00:00Z",
organizer: { cn: "John Doe", email: "john@example.com" },
allDay: false,
},
uid: '1',
summary: 'Team Meeting',
start: '2025-06-26T15:00:00Z',
organizer: { cn: 'John Doe', email: 'john@example.com' },
allDay: false
}
},
{
data: {
uid: "2",
summary: "Project Review",
start: "2025-06-27T10:00:00Z",
organizer: { cn: "Jane Smith", email: "jane@example.com" },
allDay: false,
},
},
];
uid: '2',
summary: 'Project Review',
start: '2025-06-27T10:00:00Z',
organizer: { cn: 'Jane Smith', email: 'jane@example.com' },
allDay: false
}
}
]
renderWithProviders(<SearchResultsPage />, {
...preloadedState,
searchResult: { results: mockResults, hits: 2 },
});
expect(screen.getByText("search.resultsTitle")).toBeInTheDocument();
expect(screen.getByText("Team Meeting")).toBeInTheDocument();
expect(screen.getByText("Project Review")).toBeInTheDocument();
expect(screen.getByText("John Doe")).toBeInTheDocument();
expect(screen.getByText("Jane Smith")).toBeInTheDocument();
});
searchResult: { results: mockResults, hits: 2 }
})
expect(screen.getByText('search.resultsTitle')).toBeInTheDocument()
expect(screen.getByText('Team Meeting')).toBeInTheDocument()
expect(screen.getByText('Project Review')).toBeInTheDocument()
expect(screen.getByText('John Doe')).toBeInTheDocument()
expect(screen.getByText('Jane Smith')).toBeInTheDocument()
})
it("should handle events without organizer", () => {
it('should handle events without organizer', () => {
const mockResults = [
{
data: {
uid: "1",
summary: "Untitled Event",
start: "2025-06-26T15:00:00Z",
allDay: false,
},
},
];
uid: '1',
summary: 'Untitled Event',
start: '2025-06-26T15:00:00Z',
allDay: false
}
}
]
renderWithProviders(<SearchResultsPage />, {
...preloadedState,
searchResult: { results: mockResults, hits: 1 },
});
searchResult: { results: mockResults, hits: 1 }
})
expect(screen.getByText("Untitled Event")).toBeInTheDocument();
});
expect(screen.getByText('Untitled Event')).toBeInTheDocument()
})
it("should format all-day events correctly", () => {
it('should format all-day events correctly', () => {
const mockResults = [
{
data: {
uid: "1",
summary: "All Day Event",
start: "2025-06-26T00:00:00Z",
organizer: { cn: "Organizer" },
allDay: true,
},
},
];
uid: '1',
summary: 'All Day Event',
start: '2025-06-26T00:00:00Z',
organizer: { cn: 'Organizer' },
allDay: true
}
}
]
renderWithProviders(<SearchResultsPage />, {
...preloadedState,
searchResult: { results: mockResults, hits: 1 },
});
searchResult: { results: mockResults, hits: 1 }
})
expect(screen.getByText("All Day Event")).toBeInTheDocument();
});
});
expect(screen.getByText('All Day Event')).toBeInTheDocument()
})
})
__test__/features/Search/SearchSlice.test.tsx
+83 -83
View File
@@ -1,126 +1,126 @@
import * as EventApi from "@/features/Events/EventApi";
import * as EventApi from '@/features/Events/EventApi'
import searchResultReducer, {
searchEventsAsync,
setHits,
setResults,
} from "@/features/Search/SearchSlice";
import { configureStore } from "@reduxjs/toolkit";
setResults
} from '@/features/Search/SearchSlice'
import { configureStore } from '@reduxjs/toolkit'
jest.mock("@/features/Events/EventApi");
jest.mock('@/features/Events/EventApi')
describe("SearchSlice", () => {
let store: any;
describe('SearchSlice', () => {
let store: any
beforeEach(() => {
store = configureStore({
reducer: {
searchResult: searchResultReducer,
},
});
});
searchResult: searchResultReducer
}
})
})
describe("initial state", () => {
it("should have correct initial state", () => {
const state = store.getState().searchResult;
describe('initial state', () => {
it('should have correct initial state', () => {
const state = store.getState().searchResult
expect(state).toEqual({
results: [],
hits: 0,
error: null,
loading: false,
});
});
});
loading: false
})
})
})
describe("reducers", () => {
it("should handle setResults", () => {
describe('reducers', () => {
it('should handle setResults', () => {
const mockResults = [
{ uid: "1", summary: "Event 1" },
{ uid: "2", summary: "Event 2" },
];
store.dispatch(setResults(mockResults as any));
expect(store.getState().searchResult.results).toEqual(mockResults);
});
{ uid: '1', summary: 'Event 1' },
{ uid: '2', summary: 'Event 2' }
]
store.dispatch(setResults(mockResults as any))
expect(store.getState().searchResult.results).toEqual(mockResults)
})
it("should handle setHits", () => {
store.dispatch(setHits(42));
expect(store.getState().searchResult.hits).toBe(42);
});
});
it('should handle setHits', () => {
store.dispatch(setHits(42))
expect(store.getState().searchResult.hits).toBe(42)
})
})
describe("searchEventsAsync", () => {
describe('searchEventsAsync', () => {
const mockFilters = {
searchIn: ["user1/calendar1"],
keywords: "meeting",
organizers: ["user@example.com"],
attendees: ["attendee@example.com"],
};
searchIn: ['user1/calendar1'],
keywords: 'meeting',
organizers: ['user@example.com'],
attendees: ['attendee@example.com']
}
it("should handle successful search", async () => {
it('should handle successful search', async () => {
const mockResponse = {
_total_hits: 5,
_embedded: {
events: [
{ data: { uid: "1", summary: "Test Event" } },
{ data: { uid: "2", summary: "Another Event" } },
],
},
};
{ data: { uid: '1', summary: 'Test Event' } },
{ data: { uid: '2', summary: 'Another Event' } }
]
}
}
(EventApi.searchEvent as jest.Mock).mockResolvedValue(mockResponse);
;(EventApi.searchEvent as jest.Mock).mockResolvedValue(mockResponse)
await store.dispatch(
searchEventsAsync({ search: "test", filters: mockFilters })
);
searchEventsAsync({ search: 'test', filters: mockFilters })
)
const state = store.getState().searchResult;
expect(state.loading).toBe(false);
expect(state.hits).toBe(5);
expect(state.results).toEqual(mockResponse._embedded.events);
expect(state.error).toBeNull();
});
const state = store.getState().searchResult
expect(state.loading).toBe(false)
expect(state.hits).toBe(5)
expect(state.results).toEqual(mockResponse._embedded.events)
expect(state.error).toBeNull()
})
it("should handle search with no results", async () => {
it('should handle search with no results', async () => {
const mockResponse = {
_total_hits: 0,
_embedded: { events: [] },
};
_embedded: { events: [] }
}
(EventApi.searchEvent as jest.Mock).mockResolvedValue(mockResponse);
;(EventApi.searchEvent as jest.Mock).mockResolvedValue(mockResponse)
await store.dispatch(
searchEventsAsync({ search: "nonexistent", filters: mockFilters })
);
searchEventsAsync({ search: 'nonexistent', filters: mockFilters })
)
const state = store.getState().searchResult;
expect(state.hits).toBe(0);
expect(state.results).toEqual([]);
});
const state = store.getState().searchResult
expect(state.hits).toBe(0)
expect(state.results).toEqual([])
})
it("should handle search error", async () => {
const mockError = new Error("Network error");
(EventApi.searchEvent as jest.Mock).mockRejectedValue(mockError);
it('should handle search error', async () => {
const mockError = new Error('Network error')
;(EventApi.searchEvent as jest.Mock).mockRejectedValue(mockError)
await store.dispatch(
searchEventsAsync({ search: "test", filters: mockFilters })
);
searchEventsAsync({ search: 'test', filters: mockFilters })
)
const state = store.getState().searchResult;
expect(state.loading).toBe(false);
expect(state.error).toBeTruthy();
expect(state.results).toEqual([]);
});
const state = store.getState().searchResult
expect(state.loading).toBe(false)
expect(state.error).toBeTruthy()
expect(state.results).toEqual([])
})
it("should set loading state during search", async () => {
(EventApi.searchEvent as jest.Mock).mockImplementation(
() => new Promise((resolve) => setTimeout(resolve, 100))
);
it('should set loading state during search', async () => {
;(EventApi.searchEvent as jest.Mock).mockImplementation(
() => new Promise(resolve => setTimeout(resolve, 100))
)
const promise = store.dispatch(
searchEventsAsync({ search: "test", filters: mockFilters })
);
searchEventsAsync({ search: 'test', filters: mockFilters })
)
expect(store.getState().searchResult.loading).toBe(true);
await promise;
});
});
});
expect(store.getState().searchResult.loading).toBe(true)
await promise
})
})
})
__test__/features/Settings/SettingUserSync.test.tsx
+286 -288
View File
@@ -1,482 +1,480 @@
import SettingsPage from "@/features/Settings/SettingsPage";
import SettingsPage from '@/features/Settings/SettingsPage'
import settingsReducer, {
setIsBrowserDefaultTimeZone,
setTimeZone,
} from "@/features/Settings/SettingsSlice";
setTimeZone
} from '@/features/Settings/SettingsSlice'
import userReducer, {
getOpenPaasUserDataAsync,
setTimezone as setUserTimeZone,
} from "@/features/User/userSlice";
import { api } from "@/utils/apiUtils";
import { browserDefaultTimeZone } from "@/utils/timezone";
import { configureStore } from "@reduxjs/toolkit";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
setTimezone as setUserTimeZone
} from '@/features/User/userSlice'
import { api } from '@/utils/apiUtils'
import { browserDefaultTimeZone } from '@/utils/timezone'
import { configureStore } from '@reduxjs/toolkit'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/utils/apiUtils");
jest.mock('@/utils/apiUtils')
describe("Timezone synchronization after getOpenPaasUserDataAsync", () => {
let apiGetSpy: jest.SpyInstance;
describe('Timezone synchronization after getOpenPaasUserDataAsync', () => {
let apiGetSpy: jest.SpyInstance
beforeEach(() => {
jest.clearAllMocks();
localStorage.clear();
apiGetSpy = jest.spyOn(api, "get");
});
jest.clearAllMocks()
localStorage.clear()
apiGetSpy = jest.spyOn(api, 'get')
})
afterEach(() => {
apiGetSpy.mockRestore();
});
apiGetSpy.mockRestore()
})
it("should sync timezone to both user and settings state after fetching user data", async () => {
it('should sync timezone to both user and settings state after fetching user data', async () => {
const mockUserData = {
id: "667037022b752d0026472254",
firstname: "John",
lastname: "Doe",
preferredEmail: ["test@test.com"],
id: '667037022b752d0026472254',
firstname: 'John',
lastname: 'Doe',
preferredEmail: ['test@test.com'],
configurations: {
modules: [
{
name: "core",
name: 'core',
configurations: [
{ name: "language", value: "fr" },
{ name: "datetime", value: { timeZone: "Europe/Paris" } },
],
},
],
},
};
{ name: 'language', value: 'fr' },
{ name: 'datetime', value: { timeZone: 'Europe/Paris' } }
]
}
]
}
}
// Return a fake fetch-like response
apiGetSpy.mockResolvedValue({
json: async () => mockUserData,
});
json: async () => mockUserData
})
const store = configureStore({
reducer: { user: userReducer, settings: settingsReducer },
preloadedState: {
user: {
userData: {
sub: "test",
email: "test@test.com",
family_name: "Doe",
name: "John",
sid: "mockSid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
family_name: 'Doe',
name: 'John',
sid: 'mockSid',
openpaasId: '667037022b752d0026472254'
},
organiserData: null,
tokens: null,
coreConfig: { language: "en", datetime: { timeZone: "UTC" } },
coreConfig: { language: 'en', datetime: { timeZone: 'UTC' } },
loading: false,
error: null,
error: null
},
settings: { language: "en", timeZone: "UTC", view: "calendar" },
},
});
settings: { language: 'en', timeZone: 'UTC', view: 'calendar' }
}
})
const result = await store.dispatch(getOpenPaasUserDataAsync());
const result = await store.dispatch(getOpenPaasUserDataAsync())
expect(result.type).toBe("user/getOpenPaasUserData/fulfilled");
expect(result.type).toBe('user/getOpenPaasUserData/fulfilled')
const state = store.getState();
expect(state.user.coreConfig.datetime.timeZone).toBe("Europe/Paris");
expect(state.settings.timeZone).toBe("Europe/Paris");
expect(localStorage.getItem("timeZone")).toBe("Europe/Paris");
});
const state = store.getState()
expect(state.user.coreConfig.datetime.timeZone).toBe('Europe/Paris')
expect(state.settings.timeZone).toBe('Europe/Paris')
expect(localStorage.getItem('timeZone')).toBe('Europe/Paris')
})
it("should keep browser timezone if API response has no timezone configuration", async () => {
it('should keep browser timezone if API response has no timezone configuration', async () => {
const mockUserData = {
id: "667037022b752d0026472254",
firstname: "John",
lastname: "Doe",
preferredEmail: "[test@test.com](mailto:test@test.com)",
id: '667037022b752d0026472254',
firstname: 'John',
lastname: 'Doe',
preferredEmail: '[test@test.com](mailto:test@test.com)',
configurations: {
modules: [
{ name: "core", configurations: [{ name: "language", value: "en" }] },
],
},
};
{ name: 'core', configurations: [{ name: 'language', value: 'en' }] }
]
}
}
apiGetSpy.mockResolvedValue({
json: async () => mockUserData,
});
json: async () => mockUserData
})
const browserTimezone = browserDefaultTimeZone ?? "UTC";
const browserTimezone = browserDefaultTimeZone ?? 'UTC'
const store = configureStore({
reducer: { user: userReducer, settings: settingsReducer },
preloadedState: {
user: {
userData: {
sub: "test",
email: "test@test.com",
family_name: "Doe",
name: "John",
sid: "mockSid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
family_name: 'Doe',
name: 'John',
sid: 'mockSid',
openpaasId: '667037022b752d0026472254'
},
organiserData: null,
tokens: null,
coreConfig: {
language: "en",
datetime: { timeZone: browserTimezone },
language: 'en',
datetime: { timeZone: browserTimezone }
},
loading: false,
error: null,
error: null
},
settings: {
language: "en",
language: 'en',
timeZone: browserTimezone,
view: "calendar",
},
},
});
view: 'calendar'
}
}
})
const result = await store.dispatch(getOpenPaasUserDataAsync());
const result = await store.dispatch(getOpenPaasUserDataAsync())
expect(result.type).toBe("user/getOpenPaasUserData/fulfilled");
expect(result.type).toBe('user/getOpenPaasUserData/fulfilled')
const state = store.getState();
expect(state.user.coreConfig.datetime.timeZone).toBe(null);
expect(state.settings.timeZone).toBe(browserTimezone);
});
});
const state = store.getState()
expect(state.user.coreConfig.datetime.timeZone).toBe(null)
expect(state.settings.timeZone).toBe(browserTimezone)
})
})
// Mock localStorage
const localStorageMock = (() => {
let store: Record<string, string> = {};
let store: Record<string, string> = {}
return {
getItem: (key: string) => store[key] || null,
setItem: (key: string, value: string) => {
store[key] = value;
store[key] = value
},
removeItem: (key: string) => {
delete store[key];
delete store[key]
},
clear: () => {
store = {};
},
};
})();
store = {}
}
}
})()
Object.defineProperty(window, "localStorage", {
value: localStorageMock,
});
Object.defineProperty(window, 'localStorage', {
value: localStorageMock
})
describe("Timezone Logic - Backend to Frontend Flow", () => {
let store: any;
describe('Timezone Logic - Backend to Frontend Flow', () => {
let store: any
beforeEach(() => {
localStorageMock.clear();
localStorageMock.clear()
store = configureStore({
reducer: {
settings: settingsReducer,
user: userReducer,
user: userReducer
},
preloadedState: {
user: {
userData: {
sub: "test",
email: "test@test.com",
family_name: "Doe",
name: "John",
sid: "mockSid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
family_name: 'Doe',
name: 'John',
sid: 'mockSid',
openpaasId: '667037022b752d0026472254'
},
organiserData: null,
tokens: null,
coreConfig: { language: "en", datetime: { timeZone: "UTC" } },
coreConfig: { language: 'en', datetime: { timeZone: 'UTC' } },
loading: false,
error: null,
error: null
},
settings: { language: "en", timeZone: "UTC", view: "calendar" },
},
});
});
settings: { language: 'en', timeZone: 'UTC', view: 'calendar' }
}
})
})
describe("Backend Response Handling", () => {
test("Backend returns NULL => Should use browser default timezone", async () => {
describe('Backend Response Handling', () => {
test('Backend returns NULL => Should use browser default timezone', async () => {
const backendResponse = {
firstname: "John",
lastname: "Doe",
id: "123",
preferredEmail: "john@example.com",
firstname: 'John',
lastname: 'Doe',
id: '123',
preferredEmail: 'john@example.com',
configurations: {
modules: [
{
name: "core",
name: 'core',
configurations: [
{
name: "datetime",
name: 'datetime',
value: {
timeZone: null,
},
},
],
},
],
},
};
timeZone: null
}
}
]
}
]
}
}
await store.dispatch(
getOpenPaasUserDataAsync.fulfilled(backendResponse, "", undefined)
);
getOpenPaasUserDataAsync.fulfilled(backendResponse, '', undefined)
)
const settingsState = store.getState().settings;
const userState = store.getState().user;
const settingsState = store.getState().settings
const userState = store.getState().user
expect(settingsState.timeZone).toBe(browserDefaultTimeZone);
expect(settingsState.isBrowserDefaultTimeZone).toBe(true);
expect(userState.coreConfig.datetime.timeZone).toBe(null);
expect(localStorage.getItem("timeZone")).toBe(browserDefaultTimeZone);
});
expect(settingsState.timeZone).toBe(browserDefaultTimeZone)
expect(settingsState.isBrowserDefaultTimeZone).toBe(true)
expect(userState.coreConfig.datetime.timeZone).toBe(null)
expect(localStorage.getItem('timeZone')).toBe(browserDefaultTimeZone)
})
test("Backend returns SPECIFIC VALUE => Should use that value", async () => {
const specificTimezone = "America/New_York";
test('Backend returns SPECIFIC VALUE => Should use that value', async () => {
const specificTimezone = 'America/New_York'
const backendResponse = {
firstname: "Jane",
lastname: "Smith",
id: "456",
preferredEmail: "jane@example.com",
firstname: 'Jane',
lastname: 'Smith',
id: '456',
preferredEmail: 'jane@example.com',
configurations: {
modules: [
{
name: "core",
name: 'core',
configurations: [
{
name: "datetime",
name: 'datetime',
value: {
timeZone: specificTimezone,
},
},
],
},
],
},
};
timeZone: specificTimezone
}
}
]
}
]
}
}
await store.dispatch(
getOpenPaasUserDataAsync.fulfilled(backendResponse, "", undefined)
);
getOpenPaasUserDataAsync.fulfilled(backendResponse, '', undefined)
)
const settingsState = store.getState().settings;
const userState = store.getState().user;
const settingsState = store.getState().settings
const userState = store.getState().user
expect(settingsState.timeZone).toBe(specificTimezone);
expect(settingsState.isBrowserDefaultTimeZone).toBe(false);
expect(userState.coreConfig.datetime.timeZone).toBe(specificTimezone);
expect(localStorage.getItem("timeZone")).toBe(specificTimezone);
});
expect(settingsState.timeZone).toBe(specificTimezone)
expect(settingsState.isBrowserDefaultTimeZone).toBe(false)
expect(userState.coreConfig.datetime.timeZone).toBe(specificTimezone)
expect(localStorage.getItem('timeZone')).toBe(specificTimezone)
})
test("Backend returns NO datetime config => Should use browser default", async () => {
test('Backend returns NO datetime config => Should use browser default', async () => {
const backendResponse = {
firstname: "Bob",
lastname: "Johnson",
id: "789",
preferredEmail: "bob@example.com",
firstname: 'Bob',
lastname: 'Johnson',
id: '789',
preferredEmail: 'bob@example.com',
configurations: {
modules: [
{
name: "core",
name: 'core',
configurations: [
// No datetime config
],
},
],
},
};
]
}
]
}
}
await store.dispatch(
getOpenPaasUserDataAsync.fulfilled(backendResponse, "", undefined)
);
getOpenPaasUserDataAsync.fulfilled(backendResponse, '', undefined)
)
const settingsState = store.getState().settings;
const userState = store.getState().user;
const settingsState = store.getState().settings
const userState = store.getState().user
expect(settingsState.timeZone).toBe(browserDefaultTimeZone);
expect(settingsState.isBrowserDefaultTimeZone).toBe(true);
expect(userState.coreConfig.datetime.timeZone).toBe(null);
expect(localStorage.getItem("timeZone")).toBe(browserDefaultTimeZone);
});
});
expect(settingsState.timeZone).toBe(browserDefaultTimeZone)
expect(settingsState.isBrowserDefaultTimeZone).toBe(true)
expect(userState.coreConfig.datetime.timeZone).toBe(null)
expect(localStorage.getItem('timeZone')).toBe(browserDefaultTimeZone)
})
})
test("Settings state ALWAYS has a concrete value (never null)", () => {
test('Settings state ALWAYS has a concrete value (never null)', () => {
// Test 1: Browser default scenario
store.dispatch(setIsBrowserDefaultTimeZone(true));
let settingsState = store.getState().settings;
store.dispatch(setIsBrowserDefaultTimeZone(true))
let settingsState = store.getState().settings
expect(settingsState.timeZone).toBe(browserDefaultTimeZone);
expect(settingsState.timeZone).not.toBe(null);
expect(settingsState.timeZone).toBe(browserDefaultTimeZone)
expect(settingsState.timeZone).not.toBe(null)
// Test 2: Specific timezone scenario
store.dispatch(setTimeZone("Europe/Paris"));
settingsState = store.getState().settings;
store.dispatch(setTimeZone('Europe/Paris'))
settingsState = store.getState().settings
expect(settingsState.timeZone).toBe("Europe/Paris");
expect(settingsState.timeZone).not.toBe(null);
});
expect(settingsState.timeZone).toBe('Europe/Paris')
expect(settingsState.timeZone).not.toBe(null)
})
describe("User Actions - Changing Timezone", () => {
describe('User Actions - Changing Timezone', () => {
beforeEach(() => {
(api.patch as jest.Mock).mockResolvedValue({ status: 204 });
});
test("User enables browser default => Settings gets browser TZ, User gets null", async () => {
;(api.patch as jest.Mock).mockResolvedValue({ status: 204 })
})
test('User enables browser default => Settings gets browser TZ, User gets null', async () => {
const { store } = renderWithProviders(<SettingsPage />, {
user: {
userData: { sub: "test" },
userData: { sub: 'test' },
organiserData: null,
tokens: null,
coreConfig: {
language: "en",
datetime: { timeZone: "America/Los_Angeles" },
language: 'en',
datetime: { timeZone: 'America/Los_Angeles' }
},
loading: false,
error: null,
error: null
},
settings: {
language: "en",
timeZone: "America/Los_Angeles",
language: 'en',
timeZone: 'America/Los_Angeles',
isBrowserDefaultTimeZone: false,
view: "settings",
},
});
view: 'settings'
}
})
const browserDefaultSwitch = screen.getAllByLabelText(
"settings.timeZoneBrowserDefault"
)[0];
expect(browserDefaultSwitch).toBeInTheDocument();
'settings.timeZoneBrowserDefault'
)[0]
expect(browserDefaultSwitch).toBeInTheDocument()
// Enable browser default
fireEvent.click(browserDefaultSwitch);
fireEvent.click(browserDefaultSwitch)
await waitFor(() => {
const state = store.getState();
expect(state.settings.isBrowserDefaultTimeZone).toBe(true);
});
const state = store.getState()
expect(state.settings.isBrowserDefaultTimeZone).toBe(true)
})
await waitFor(() => {
const state = store.getState();
expect(state.settings.timeZone).toBe(browserDefaultTimeZone);
});
const state = store.getState()
expect(state.settings.timeZone).toBe(browserDefaultTimeZone)
})
await waitFor(() => {
const state = store.getState();
expect(state.user.coreConfig.datetime.timeZone).toBe(null);
});
});
const state = store.getState()
expect(state.user.coreConfig.datetime.timeZone).toBe(null)
})
})
test("User selects specific timezone => Both states get the value", async () => {
test('User selects specific timezone => Both states get the value', async () => {
const { store } = renderWithProviders(<SettingsPage />, {
user: {
userData: { sub: "test" },
userData: { sub: 'test' },
organiserData: null,
tokens: null,
coreConfig: { language: "en", datetime: { timeZone: null } },
coreConfig: { language: 'en', datetime: { timeZone: null } },
loading: false,
error: null,
error: null
},
settings: {
language: "en",
language: 'en',
timeZone: browserDefaultTimeZone,
isBrowserDefaultTimeZone: true,
view: "settings",
},
});
view: 'settings'
}
})
const browserDefaultSwitch = screen.getAllByLabelText(
"settings.timeZoneBrowserDefault"
)[0];
'settings.timeZoneBrowserDefault'
)[0]
// Disable browser default so manual selector appears
fireEvent.click(browserDefaultSwitch);
fireEvent.click(browserDefaultSwitch)
// Now timezone combobox is visible
const timezoneInput = screen.getAllByRole("combobox")[1];
const timezoneInput = screen.getAllByRole('combobox')[1]
// Type to filter options
fireEvent.change(timezoneInput, {
target: { value: "Australia/Sydney" },
});
target: { value: 'Australia/Sydney' }
})
// Select from autocomplete dropdown
const option = await screen.findByText(/Australia\/Sydney/i);
fireEvent.click(option);
const option = await screen.findByText(/Australia\/Sydney/i)
fireEvent.click(option)
await waitFor(() => {
const state = store.getState();
expect(state.settings.isBrowserDefaultTimeZone).toBe(false);
});
const state = store.getState()
expect(state.settings.isBrowserDefaultTimeZone).toBe(false)
})
await waitFor(() => {
const state = store.getState();
expect(state.settings.timeZone).toBe("Australia/Sydney");
});
const state = store.getState()
expect(state.settings.timeZone).toBe('Australia/Sydney')
})
await waitFor(() => {
const state = store.getState();
expect(state.user.coreConfig.datetime.timeZone).toBe(
"Australia/Sydney"
);
});
});
});
const state = store.getState()
expect(state.user.coreConfig.datetime.timeZone).toBe('Australia/Sydney')
})
})
})
describe("LocalStorage Persistence", () => {
test("LocalStorage always stores concrete values (browser TZ or specific TZ)", () => {
describe('LocalStorage Persistence', () => {
test('LocalStorage always stores concrete values (browser TZ or specific TZ)', () => {
// Scenario 1: Browser default
store.dispatch(setTimeZone(browserDefaultTimeZone));
expect(localStorage.getItem("timeZone")).toBe(browserDefaultTimeZone);
expect(localStorage.getItem("timeZone")).not.toBe("null");
store.dispatch(setTimeZone(browserDefaultTimeZone))
expect(localStorage.getItem('timeZone')).toBe(browserDefaultTimeZone)
expect(localStorage.getItem('timeZone')).not.toBe('null')
// Scenario 2: Specific timezone
store.dispatch(setTimeZone("Africa/Cairo"));
expect(localStorage.getItem("timeZone")).toBe("Africa/Cairo");
});
});
store.dispatch(setTimeZone('Africa/Cairo'))
expect(localStorage.getItem('timeZone')).toBe('Africa/Cairo')
})
})
test("Full user journey: Backend null -> User changes -> Backend saves", async () => {
test('Full user journey: Backend null -> User changes -> Backend saves', async () => {
// Step 1: Backend returns null
const backendResponseNull = {
firstname: "Test",
lastname: "User",
id: "999",
preferredEmail: "test@example.com",
firstname: 'Test',
lastname: 'User',
id: '999',
preferredEmail: 'test@example.com',
configurations: {
modules: [
{
name: "core",
name: 'core',
configurations: [
{
name: "datetime",
value: { timeZone: null },
},
],
},
],
},
};
name: 'datetime',
value: { timeZone: null }
}
]
}
]
}
}
await store.dispatch(
getOpenPaasUserDataAsync.fulfilled(backendResponseNull, "", undefined)
);
getOpenPaasUserDataAsync.fulfilled(backendResponseNull, '', undefined)
)
// Verify initial state
expect(store.getState().settings.timeZone).toBe(browserDefaultTimeZone);
expect(store.getState().user.coreConfig.datetime.timeZone).toBe(null);
expect(store.getState().settings.timeZone).toBe(browserDefaultTimeZone)
expect(store.getState().user.coreConfig.datetime.timeZone).toBe(null)
// Step 2: User changes to specific timezone
const userSelectedTZ = "Europe/London";
store.dispatch(setIsBrowserDefaultTimeZone(false));
store.dispatch(setTimeZone(userSelectedTZ));
store.dispatch(setUserTimeZone(userSelectedTZ));
const userSelectedTZ = 'Europe/London'
store.dispatch(setIsBrowserDefaultTimeZone(false))
store.dispatch(setTimeZone(userSelectedTZ))
store.dispatch(setUserTimeZone(userSelectedTZ))
expect(store.getState().settings.timeZone).toBe(userSelectedTZ);
expect(store.getState().settings.timeZone).toBe(userSelectedTZ)
expect(store.getState().user.coreConfig.datetime.timeZone).toBe(
userSelectedTZ
);
)
// Step 3: User switches back to browser default
store.dispatch(setIsBrowserDefaultTimeZone(true));
store.dispatch(setUserTimeZone(null));
store.dispatch(setTimeZone(browserDefaultTimeZone));
store.dispatch(setIsBrowserDefaultTimeZone(true))
store.dispatch(setUserTimeZone(null))
store.dispatch(setTimeZone(browserDefaultTimeZone))
expect(store.getState().settings.timeZone).toBe(browserDefaultTimeZone);
expect(store.getState().user.coreConfig.datetime.timeZone).toBe(null);
});
});
expect(store.getState().settings.timeZone).toBe(browserDefaultTimeZone)
expect(store.getState().user.coreConfig.datetime.timeZone).toBe(null)
})
})
__test__/features/Settings/SettingsPage.test.tsx
+481 -483
View File
File diff suppressed because it is too large Load Diff
__test__/features/Settings/WorkingDays.test.tsx
+268 -272
View File
@@ -1,467 +1,463 @@
import SettingsPage from "@/features/Settings/SettingsPage";
import settingsReducer from "@/features/Settings/SettingsSlice";
import SettingsPage from '@/features/Settings/SettingsPage'
import settingsReducer from '@/features/Settings/SettingsSlice'
import userReducer, {
getOpenPaasUserDataAsync,
} from "@/features/User/userSlice";
import { api } from "@/utils/apiUtils";
import { configureStore } from "@reduxjs/toolkit";
import "@testing-library/jest-dom";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../../utils/Renderwithproviders";
getOpenPaasUserDataAsync
} from '@/features/User/userSlice'
import { api } from '@/utils/apiUtils'
import { configureStore } from '@reduxjs/toolkit'
import '@testing-library/jest-dom'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'
jest.mock("@/utils/apiUtils");
jest.mock('@/utils/apiUtils')
const basePreloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
family_name: "Doe",
name: "John",
sid: "mockSid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
family_name: 'Doe',
name: 'John',
sid: 'mockSid',
openpaasId: '667037022b752d0026472254'
},
organiserData: null,
tokens: null,
coreConfig: {
language: "en",
datetime: { timeZone: "UTC" },
language: 'en',
datetime: { timeZone: 'UTC' }
},
alarmEmailsEnabled: false,
loading: false,
error: null,
error: null
},
settings: {
language: "en",
timeZone: "UTC",
language: 'en',
timeZone: 'UTC',
isBrowserDefaultTimeZone: false,
view: "settings",
view: 'settings',
businessHours: {
start: "8:0",
end: "19:0",
daysOfWeek: [1, 2, 3, 4, 5],
start: '8:0',
end: '19:0',
daysOfWeek: [1, 2, 3, 4, 5]
},
workingDays: false,
},
};
workingDays: false
}
}
describe("Working Days and Business Hours Settings", () => {
describe('Working Days and Business Hours Settings', () => {
beforeEach(() => {
jest.clearAllMocks();
(api.patch as jest.Mock).mockResolvedValue({ status: 204 });
});
jest.clearAllMocks()
;(api.patch as jest.Mock).mockResolvedValue({ status: 204 })
})
describe("Initial rendering", () => {
it("renders the working days section with day selector", () => {
renderWithProviders(<SettingsPage />, basePreloadedState);
describe('Initial rendering', () => {
it('renders the working days section with day selector', () => {
renderWithProviders(<SettingsPage />, basePreloadedState)
expect(screen.getByText('settings.chooseWorkingDays')).toBeInTheDocument()
})
it('renders the show only working days toggle', () => {
renderWithProviders(<SettingsPage />, basePreloadedState)
expect(
screen.getByText("settings.chooseWorkingDays")
).toBeInTheDocument();
});
screen.getByRole('switch', { name: /settings.showOnlyWorkingDays/i })
).toBeInTheDocument()
})
it("renders the show only working days toggle", () => {
renderWithProviders(<SettingsPage />, basePreloadedState);
it('shows working days toggle as unchecked when workingDays is false', () => {
renderWithProviders(<SettingsPage />, basePreloadedState)
expect(
screen.getByRole("switch", { name: /settings.showOnlyWorkingDays/i })
).toBeInTheDocument();
});
const toggle = screen.getByRole('switch', {
name: /settings.showOnlyWorkingDays/i
}) as HTMLInputElement
expect(toggle.checked).toBe(false)
})
it("shows working days toggle as unchecked when workingDays is false", () => {
renderWithProviders(<SettingsPage />, basePreloadedState);
const toggle = screen.getByRole("switch", {
name: /settings.showOnlyWorkingDays/i,
}) as HTMLInputElement;
expect(toggle.checked).toBe(false);
});
it("shows working days toggle as checked when workingDays is true", () => {
it('shows working days toggle as checked when workingDays is true', () => {
renderWithProviders(<SettingsPage />, {
...basePreloadedState,
settings: { ...basePreloadedState.settings, workingDays: true },
});
settings: { ...basePreloadedState.settings, workingDays: true }
})
const toggle = screen.getByRole("switch", {
name: /settings.showOnlyWorkingDays/i,
}) as HTMLInputElement;
expect(toggle.checked).toBe(true);
});
const toggle = screen.getByRole('switch', {
name: /settings.showOnlyWorkingDays/i
}) as HTMLInputElement
expect(toggle.checked).toBe(true)
})
it("shows working days toggle as unchecked when workingDays is null", () => {
it('shows working days toggle as unchecked when workingDays is null', () => {
renderWithProviders(<SettingsPage />, {
...basePreloadedState,
settings: { ...basePreloadedState.settings, workingDays: null },
});
settings: { ...basePreloadedState.settings, workingDays: null }
})
const toggle = screen.getByRole("switch", {
name: /settings.showOnlyWorkingDays/i,
}) as HTMLInputElement;
expect(toggle.checked).toBe(false);
});
});
const toggle = screen.getByRole('switch', {
name: /settings.showOnlyWorkingDays/i
}) as HTMLInputElement
expect(toggle.checked).toBe(false)
})
})
describe("workingDays toggle", () => {
it("updates workingDays immediately (optimistic update) and calls API", async () => {
describe('workingDays toggle', () => {
it('updates workingDays immediately (optimistic update) and calls API', async () => {
const { store } = renderWithProviders(
<SettingsPage />,
basePreloadedState
);
)
const toggle = screen.getByRole("switch", {
name: /settings.showOnlyWorkingDays/i,
});
fireEvent.click(toggle);
const toggle = screen.getByRole('switch', {
name: /settings.showOnlyWorkingDays/i
})
fireEvent.click(toggle)
await waitFor(() => {
expect(store.getState().settings.workingDays).toBe(true);
});
expect(store.getState().settings.workingDays).toBe(true)
})
await waitFor(() => {
expect(api.patch).toHaveBeenCalledWith(
"api/configurations?scope=user",
'api/configurations?scope=user',
expect.objectContaining({
json: expect.arrayContaining([
expect.objectContaining({
name: "linagora.esn.calendar",
name: 'linagora.esn.calendar',
configurations: expect.arrayContaining([
expect.objectContaining({
name: "workingDays",
value: true,
}),
]),
}),
]),
name: 'workingDays',
value: true
})
])
})
])
})
);
});
});
)
})
})
it("rolls back workingDays if API call fails", async () => {
(api.patch as jest.Mock).mockRejectedValue(new Error("API Error"));
it('rolls back workingDays if API call fails', async () => {
;(api.patch as jest.Mock).mockRejectedValue(new Error('API Error'))
const { store } = renderWithProviders(
<SettingsPage />,
basePreloadedState
);
)
const toggle = screen.getByRole("switch", {
name: /settings.showOnlyWorkingDays/i,
});
fireEvent.click(toggle);
const toggle = screen.getByRole('switch', {
name: /settings.showOnlyWorkingDays/i
})
fireEvent.click(toggle)
await waitFor(
() => {
expect(store.getState().settings.workingDays).toBe(false);
expect(store.getState().settings.workingDays).toBe(false)
},
{ timeout: 3000 }
);
)
await waitFor(() => {
expect(
screen.getByText("settings.workingDaysUpdateError")
).toBeInTheDocument();
});
});
screen.getByText('settings.workingDaysUpdateError')
).toBeInTheDocument()
})
})
it("toggles workingDays from true to false", async () => {
it('toggles workingDays from true to false', async () => {
const { store } = renderWithProviders(<SettingsPage />, {
...basePreloadedState,
settings: { ...basePreloadedState.settings, workingDays: true },
});
settings: { ...basePreloadedState.settings, workingDays: true }
})
const toggle = screen.getByRole("switch", {
name: /settings.showOnlyWorkingDays/i,
});
fireEvent.click(toggle);
const toggle = screen.getByRole('switch', {
name: /settings.showOnlyWorkingDays/i
})
fireEvent.click(toggle)
await waitFor(() => {
expect(store.getState().settings.workingDays).toBe(false);
});
expect(store.getState().settings.workingDays).toBe(false)
})
await waitFor(() => {
expect(api.patch).toHaveBeenCalledWith(
"api/configurations?scope=user",
'api/configurations?scope=user',
expect.objectContaining({
json: expect.arrayContaining([
expect.objectContaining({
name: "linagora.esn.calendar",
name: 'linagora.esn.calendar',
configurations: expect.arrayContaining([
expect.objectContaining({
name: "workingDays",
value: false,
}),
]),
}),
]),
name: 'workingDays',
value: false
})
])
})
])
})
);
});
});
});
)
})
})
})
describe("businessHours day selector", () => {
it("updates businessHours in Redux immediately when a day is clicked", async () => {
describe('businessHours day selector', () => {
it('updates businessHours in Redux immediately when a day is clicked', async () => {
const { store } = renderWithProviders(
<SettingsPage />,
basePreloadedState
);
)
// Sunday (0) is not in initial daysOfWeek [1,2,3,4,5], click it to add
const sundayButton = screen.getByRole("button", {
name: /sunday/i,
});
fireEvent.click(sundayButton);
const sundayButton = screen.getByRole('button', {
name: /sunday/i
})
fireEvent.click(sundayButton)
await waitFor(() => {
expect(store.getState().settings.businessHours?.daysOfWeek).toContain(
0
);
});
});
expect(store.getState().settings.businessHours?.daysOfWeek).toContain(0)
})
})
it("removes a day from businessHours when an already selected day is clicked", async () => {
it('removes a day from businessHours when an already selected day is clicked', async () => {
const { store } = renderWithProviders(
<SettingsPage />,
basePreloadedState
);
)
// Monday (1) is in initial daysOfWeek, click to remove
const mondayButton = screen.getByRole("button", { name: /monday/i });
fireEvent.click(mondayButton);
const mondayButton = screen.getByRole('button', { name: /monday/i })
fireEvent.click(mondayButton)
await waitFor(() => {
expect(
store.getState().settings.businessHours?.daysOfWeek
).not.toContain(1);
});
});
).not.toContain(1)
})
})
it("debounces API call when multiple days are clicked rapidly", async () => {
jest.useFakeTimers();
it('debounces API call when multiple days are clicked rapidly', async () => {
jest.useFakeTimers()
renderWithProviders(<SettingsPage />, basePreloadedState);
renderWithProviders(<SettingsPage />, basePreloadedState)
const sundayButton = screen.getByRole("button", { name: /sunday/i });
const saturdayButton = screen.getByRole("button", { name: /saturday/i });
const sundayButton = screen.getByRole('button', { name: /sunday/i })
const saturdayButton = screen.getByRole('button', { name: /saturday/i })
fireEvent.click(sundayButton);
fireEvent.click(saturdayButton);
fireEvent.click(sundayButton);
fireEvent.click(sundayButton)
fireEvent.click(saturdayButton)
fireEvent.click(sundayButton)
// API should not have been called yet
expect(api.patch).not.toHaveBeenCalled();
expect(api.patch).not.toHaveBeenCalled()
// Advance timers past debounce threshold
jest.runAllTimers();
jest.runAllTimers()
await waitFor(() => {
expect(api.patch).toHaveBeenCalledTimes(1);
});
expect(api.patch).toHaveBeenCalledTimes(1)
})
jest.useRealTimers();
});
jest.useRealTimers()
})
it("sends businessHours as array to API", async () => {
jest.useFakeTimers();
it('sends businessHours as array to API', async () => {
jest.useFakeTimers()
renderWithProviders(<SettingsPage />, basePreloadedState);
renderWithProviders(<SettingsPage />, basePreloadedState)
const sundayButton = screen.getByRole("button", { name: /sunday/i });
fireEvent.click(sundayButton);
const sundayButton = screen.getByRole('button', { name: /sunday/i })
fireEvent.click(sundayButton)
jest.runAllTimers();
jest.runAllTimers()
await waitFor(() => {
expect(api.patch).toHaveBeenCalledWith(
"api/configurations?scope=user",
'api/configurations?scope=user',
expect.objectContaining({
json: expect.arrayContaining([
expect.objectContaining({
name: "core",
name: 'core',
configurations: expect.arrayContaining([
expect.objectContaining({
name: "businessHours",
name: 'businessHours',
value: expect.arrayContaining([
expect.objectContaining({
start: "8:0",
end: "19:0",
daysOfWeek: expect.arrayContaining([0]),
}),
]),
}),
]),
}),
]),
start: '8:0',
end: '19:0',
daysOfWeek: expect.arrayContaining([0])
})
])
})
])
})
])
})
);
});
)
})
jest.useRealTimers();
});
jest.useRealTimers()
})
it("rolls back businessHours if API call fails", async () => {
jest.useFakeTimers();
(api.patch as jest.Mock).mockRejectedValue(new Error("API Error"));
it('rolls back businessHours if API call fails', async () => {
jest.useFakeTimers()
;(api.patch as jest.Mock).mockRejectedValue(new Error('API Error'))
const { store } = renderWithProviders(
<SettingsPage />,
basePreloadedState
);
)
const sundayButton = screen.getByRole("button", { name: /sunday/i });
fireEvent.click(sundayButton);
const sundayButton = screen.getByRole('button', { name: /sunday/i })
fireEvent.click(sundayButton)
jest.runAllTimers();
jest.runAllTimers()
await waitFor(
() => {
expect(
store.getState().settings.businessHours?.daysOfWeek
).not.toContain(0);
).not.toContain(0)
},
{ timeout: 3000 }
);
)
await waitFor(() => {
expect(
screen.getByText("settings.workingDaysUpdateError")
).toBeInTheDocument();
});
screen.getByText('settings.workingDaysUpdateError')
).toBeInTheDocument()
})
jest.useRealTimers();
});
});
jest.useRealTimers()
})
})
describe("getOpenPaasUserDataAsync integration", () => {
it("populates businessHours from core module configurations", async () => {
describe('getOpenPaasUserDataAsync integration', () => {
it('populates businessHours from core module configurations', async () => {
const store = configureStore({
reducer: { user: userReducer, settings: settingsReducer },
preloadedState: {
user: {
userData: {
sub: "test",
email: "test@test.com",
family_name: "Doe",
name: "John",
sid: "mockSid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
family_name: 'Doe',
name: 'John',
sid: 'mockSid',
openpaasId: '667037022b752d0026472254'
},
organiserData: null,
tokens: null,
coreConfig: { language: "en", datetime: { timeZone: "UTC" } },
coreConfig: { language: 'en', datetime: { timeZone: 'UTC' } },
alarmEmailsEnabled: null,
loading: false,
error: null,
error: null
},
settings: {
language: "en",
timeZone: "UTC",
language: 'en',
timeZone: 'UTC',
isBrowserDefaultTimeZone: false,
view: "calendar",
view: 'calendar',
businessHours: null,
workingDays: null,
},
},
});
workingDays: null
}
}
})
const mockResponse = {
id: "667037022b752d0026472254",
firstname: "John",
lastname: "Doe",
preferredEmail: "test@test.com",
id: '667037022b752d0026472254',
firstname: 'John',
lastname: 'Doe',
preferredEmail: 'test@test.com',
configurations: {
modules: [
{
name: "core",
name: 'core',
configurations: [
{
name: "businessHours",
name: 'businessHours',
value: [
{ start: "8:0", end: "19:0", daysOfWeek: [1, 2, 3, 4, 5] },
],
},
],
{ start: '8:0', end: '19:0', daysOfWeek: [1, 2, 3, 4, 5] }
]
}
]
},
{
name: "linagora.esn.calendar",
configurations: [{ name: "workingDays", value: true }],
},
],
},
};
name: 'linagora.esn.calendar',
configurations: [{ name: 'workingDays', value: true }]
}
]
}
}
await store.dispatch(
getOpenPaasUserDataAsync.fulfilled(mockResponse, "", undefined)
);
getOpenPaasUserDataAsync.fulfilled(mockResponse, '', undefined)
)
const state = store.getState();
const state = store.getState()
expect(state.settings.businessHours).toEqual({
start: "8:0",
end: "19:0",
daysOfWeek: [1, 2, 3, 4, 5],
});
expect(state.settings.workingDays).toBe(true);
});
start: '8:0',
end: '19:0',
daysOfWeek: [1, 2, 3, 4, 5]
})
expect(state.settings.workingDays).toBe(true)
})
it("sets businessHours to null when not present in API response", async () => {
it('sets businessHours to null when not present in API response', async () => {
const store = configureStore({
reducer: { user: userReducer, settings: settingsReducer },
preloadedState: {
user: {
userData: {
sub: "test",
email: "test@test.com",
family_name: "Doe",
name: "John",
sid: "mockSid",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
family_name: 'Doe',
name: 'John',
sid: 'mockSid',
openpaasId: '667037022b752d0026472254'
},
organiserData: null,
tokens: null,
coreConfig: { language: "en", datetime: { timeZone: "UTC" } },
coreConfig: { language: 'en', datetime: { timeZone: 'UTC' } },
alarmEmailsEnabled: null,
loading: false,
error: null,
error: null
},
settings: {
language: "en",
timeZone: "UTC",
language: 'en',
timeZone: 'UTC',
isBrowserDefaultTimeZone: false,
view: "calendar",
view: 'calendar',
businessHours: null,
workingDays: null,
},
},
});
workingDays: null
}
}
})
const mockResponse = {
id: "667037022b752d0026472254",
firstname: "John",
lastname: "Doe",
preferredEmail: "test@test.com",
id: '667037022b752d0026472254',
firstname: 'John',
lastname: 'Doe',
preferredEmail: 'test@test.com',
configurations: {
modules: [
{
name: "core",
configurations: [],
name: 'core',
configurations: []
},
{
name: "linagora.esn.calendar",
configurations: [{ name: "workingDays", value: null }],
},
],
},
};
name: 'linagora.esn.calendar',
configurations: [{ name: 'workingDays', value: null }]
}
]
}
}
await store.dispatch(
getOpenPaasUserDataAsync.fulfilled(mockResponse, "", undefined)
);
getOpenPaasUserDataAsync.fulfilled(mockResponse, '', undefined)
)
const state = store.getState();
expect(state.settings.businessHours).toBeNull();
expect(state.settings.workingDays).toBeNull();
});
});
});
const state = store.getState()
expect(state.settings.businessHours).toBeNull()
expect(state.settings.workingDays).toBeNull()
})
})
})
__test__/features/user/HandleLogin.test.tsx
+88 -88
View File
@@ -1,45 +1,45 @@
import * as appHooks from "@/app/hooks";
import { AppDispatch, setupStore } from "@/app/store";
import HandleLogin from "@/features/User/HandleLogin";
import * as oidcAuth from "@/features/User/oidcAuth";
import { clientConfig } from "@/features/User/oidcAuth";
import { useInitializeApp } from "@/features/User/useInitializeApp";
import * as apiUtils from "@/utils/apiUtils";
import { renderHook, screen, waitFor } from "@testing-library/react";
import { Provider } from "react-redux";
import { push } from "redux-first-history";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import * as appHooks from '@/app/hooks'
import { AppDispatch, setupStore } from '@/app/store'
import HandleLogin from '@/features/User/HandleLogin'
import * as oidcAuth from '@/features/User/oidcAuth'
import { clientConfig } from '@/features/User/oidcAuth'
import { useInitializeApp } from '@/features/User/useInitializeApp'
import * as apiUtils from '@/utils/apiUtils'
import { renderHook, screen, waitFor } from '@testing-library/react'
import { Provider } from 'react-redux'
import { push } from 'redux-first-history'
import { renderWithProviders } from '../../utils/Renderwithproviders'
clientConfig.url = "https://example.com";
clientConfig.url = 'https://example.com'
describe("HandleLogin", () => {
describe('HandleLogin', () => {
beforeEach(() => {
jest.clearAllMocks();
jest.spyOn(apiUtils, "redirectTo").mockImplementation(() => {});
const dispatch = jest.fn() as AppDispatch;
jest.spyOn(appHooks, "useAppDispatch").mockReturnValue(dispatch);
sessionStorage.clear();
Object.defineProperty(window, "matchMedia", {
jest.clearAllMocks()
jest.spyOn(apiUtils, 'redirectTo').mockImplementation(() => {})
const dispatch = jest.fn() as AppDispatch
jest.spyOn(appHooks, 'useAppDispatch').mockReturnValue(dispatch)
sessionStorage.clear()
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query) => ({
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
});
dispatchEvent: jest.fn()
}))
})
})
test("redirects and sets sessionStorage when no userData", async () => {
test('redirects and sets sessionStorage when no userData', async () => {
const loginUrlMock = {
code_verifier: "verifier123",
state: "state123",
redirectTo: new URL("http://login.url"),
};
code_verifier: 'verifier123',
state: 'state123',
redirectTo: new URL('http://login.url')
}
jest.spyOn(oidcAuth, "Auth").mockResolvedValue(loginUrlMock);
jest.spyOn(oidcAuth, 'Auth').mockResolvedValue(loginUrlMock)
const { result } = renderHook(() => useInitializeApp(), {
wrapper: ({ children }) => (
@@ -50,118 +50,118 @@ describe("HandleLogin", () => {
tokens: null,
loading: false,
error: null,
coreConfig: { language: "en" },
coreConfig: { language: 'en' }
},
calendars: { list: {}, pending: false, error: null },
calendars: { list: {}, pending: false, error: null }
})}
>
{children}
</Provider>
),
});
)
})
await waitFor(
() => {
expect(oidcAuth.Auth).toHaveBeenCalled();
expect(oidcAuth.Auth).toHaveBeenCalled()
},
{ timeout: 3000 }
);
)
await waitFor(
() => {
expect(sessionStorage.getItem("redirectState")).toEqual(
expect(sessionStorage.getItem('redirectState')).toEqual(
JSON.stringify({
code_verifier: "verifier123",
state: "state123",
code_verifier: 'verifier123',
state: 'state123'
})
);
)
},
{ timeout: 3000 }
);
)
await waitFor(
() => {
expect(apiUtils.redirectTo).toHaveBeenCalledWith(
loginUrlMock.redirectTo
);
)
},
{ timeout: 3000 }
);
});
)
})
test("does not render loading element when userData exists and calendars pending is true", () => {
test('does not render loading element when userData exists and calendars pending is true', () => {
const preloadedState = {
user: {
userData: {
sub: "test",
email: "test@test.com",
sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
openpaasId: "667037022b752d0026472254",
sub: 'test',
email: 'test@test.com',
sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
openpaasId: '667037022b752d0026472254'
},
tokens: { access_token: "test" },
loading: false,
tokens: { access_token: 'test' },
loading: false
},
calendars: { list: {}, pending: true },
loading: { isLoading: true },
};
loading: { isLoading: true }
}
renderWithProviders(<HandleLogin />, preloadedState);
renderWithProviders(<HandleLogin />, preloadedState)
// HandleLogin now returns null, loading is shown at App level via appLoading state
expect(screen.queryByTestId("loading")).not.toBeInTheDocument();
});
test("does not render loading element when userData exists and calendars pending is false", () => {
expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
})
test('does not render loading element when userData exists and calendars pending is false', () => {
const preloadedState = {
user: {
userData: {
sub: "cmoussu",
email: "cmoussu@linagora.com",
sid: "aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro",
openpaasId: "667037022b752d0026472254",
sub: 'cmoussu',
email: 'cmoussu@linagora.com',
sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
openpaasId: '667037022b752d0026472254'
},
tokens: { access_token: "test" },
loading: false,
tokens: { access_token: 'test' },
loading: false
},
calendars: { list: {}, pending: false },
loading: { isLoading: false },
};
renderWithProviders(<HandleLogin />, preloadedState);
loading: { isLoading: false }
}
renderWithProviders(<HandleLogin />, preloadedState)
// HandleLogin now returns null, loading is shown at App level via appLoading state
expect(screen.queryByTestId("loading")).not.toBeInTheDocument();
});
test("goes to error page when there is error in user data", async () => {
const mockDispatch = jest.fn();
jest.spyOn(appHooks, "useAppDispatch").mockReturnValue(mockDispatch);
jest.spyOn(oidcAuth, "Auth").mockResolvedValue({
code_verifier: "verifier123",
state: "state123",
redirectTo: new URL("http://login.url"),
});
expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
})
test('goes to error page when there is error in user data', async () => {
const mockDispatch = jest.fn()
jest.spyOn(appHooks, 'useAppDispatch').mockReturnValue(mockDispatch)
jest.spyOn(oidcAuth, 'Auth').mockResolvedValue({
code_verifier: 'verifier123',
state: 'state123',
redirectTo: new URL('http://login.url')
})
renderWithProviders(<HandleLogin />, {
user: {
error: true,
loading: false,
userData: {
sub: "test",
email: "test@test.com",
sid: "testSid",
openpaasId: "testId",
sub: 'test',
email: 'test@test.com',
sid: 'testSid',
openpaasId: 'testId'
},
tokens: { access_token: "test" },
tokens: { access_token: 'test' }
},
calendars: {
list: {},
pending: false,
error: null,
},
});
error: null
}
})
await waitFor(
() => {
expect(mockDispatch).toHaveBeenCalledWith(push("/error"));
expect(mockDispatch).toHaveBeenCalledWith(push('/error'))
},
{ timeout: 3000 }
);
});
});
)
})
})
__test__/features/user/LoginCallback.test.tsx
+99 -100
View File
@@ -1,183 +1,182 @@
import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { getCalendarsListAsync } from "@/features/Calendars/services/getCalendarsListAsync";
import { CallbackResume } from "@/features/User/LoginCallback";
import * as oidcAuth from "@/features/User/oidcAuth";
import { useAppDispatch, useAppSelector } from '@/app/hooks'
import { getCalendarsListAsync } from '@/features/Calendars/services/getCalendarsListAsync'
import { CallbackResume } from '@/features/User/LoginCallback'
import * as oidcAuth from '@/features/User/oidcAuth'
import {
getOpenPaasUserDataAsync,
setTokens,
setUserData,
} from "@/features/User/userSlice";
import { render, waitFor } from "@testing-library/react";
import { replace } from "redux-first-history";
import { renderWithProviders } from "../../utils/Renderwithproviders";
import { setAppLoading } from "@/app/loadingSlice";
setUserData
} from '@/features/User/userSlice'
import { render, waitFor } from '@testing-library/react'
import { replace } from 'redux-first-history'
import { renderWithProviders } from '../../utils/Renderwithproviders'
import { setAppLoading } from '@/app/loadingSlice'
// Mocks
jest.mock("@/app/hooks", () => ({
jest.mock('@/app/hooks', () => ({
useAppDispatch: jest.fn(),
useAppSelector: jest.fn(() => ({
user: {
userData: null,
tokens: null,
loading: false,
error: null,
error: null
},
calendars: {
list: {},
pending: false,
error: null,
},
})),
}));
error: null
}
}))
}))
jest.mock("@/features/User/oidcAuth", () => ({
Callback: jest.fn(),
}));
jest.mock('@/features/User/oidcAuth', () => ({
Callback: jest.fn()
}))
jest.mock("@/features/User/userSlice", () => {
jest.mock('@/features/User/userSlice', () => {
const mockGetUser = Object.assign(
jest.fn(() => ({ type: "GET_USER_ID" })),
jest.fn(() => ({ type: 'GET_USER_ID' })),
{
pending: { type: "GET_USER_ID/pending" },
fulfilled: { type: "GET_USER_ID/fulfilled" },
rejected: { type: "GET_USER_ID/rejected" },
pending: { type: 'GET_USER_ID/pending' },
fulfilled: { type: 'GET_USER_ID/fulfilled' },
rejected: { type: 'GET_USER_ID/rejected' }
}
);
)
return {
setUserData: jest.fn((data) => ({ type: "SET_USER", payload: data })),
setTokens: jest.fn((tokens) => ({ type: "SET_TOKENS", payload: tokens })),
getOpenPaasUserDataAsync: mockGetUser,
};
});
setUserData: jest.fn(data => ({ type: 'SET_USER', payload: data })),
setTokens: jest.fn(tokens => ({ type: 'SET_TOKENS', payload: tokens })),
getOpenPaasUserDataAsync: mockGetUser
}
})
jest.mock("@/features/Calendars/services/getCalendarsListAsync", () => {
jest.mock('@/features/Calendars/services/getCalendarsListAsync', () => {
const mockGetCalendars = Object.assign(
jest.fn(() => ({ type: "GET_CALENDARS" })),
jest.fn(() => ({ type: 'GET_CALENDARS' })),
{
pending: { type: "GET_CALENDARS/pending" },
fulfilled: { type: "GET_CALENDARS/fulfilled" },
rejected: { type: "GET_CALENDARS/rejected" },
pending: { type: 'GET_CALENDARS/pending' },
fulfilled: { type: 'GET_CALENDARS/fulfilled' },
rejected: { type: 'GET_CALENDARS/rejected' }
}
);
)
return {
getCalendarsListAsync: mockGetCalendars,
};
});
getCalendarsListAsync: mockGetCalendars
}
})
describe("CallbackResume", () => {
const dispatch = jest.fn();
let mockUserState: any;
let mockCalendarsState: any;
describe('CallbackResume', () => {
const dispatch = jest.fn()
let mockUserState: any
let mockCalendarsState: any
beforeEach(() => {
jest.clearAllMocks();
(useAppDispatch as unknown as jest.Mock).mockReturnValue(dispatch);
jest.clearAllMocks()
;(useAppDispatch as unknown as jest.Mock).mockReturnValue(dispatch)
// Initialize mock states
mockUserState = {
userData: null,
tokens: null,
loading: false,
error: null,
};
error: null
}
mockCalendarsState = {
list: {},
pending: false,
error: null,
};
(useAppSelector as jest.Mock).mockImplementation((selector) => {
error: null
}
;(useAppSelector as jest.Mock).mockImplementation(selector => {
const state = {
user: mockUserState,
calendars: mockCalendarsState,
};
return selector(state);
});
});
calendars: mockCalendarsState
}
return selector(state)
})
})
it("should call Callback and dispatch necessary actions", async () => {
const mockTokenSet = { access_token: "abc" };
const mockUserInfo = { name: "Test User" };
it('should call Callback and dispatch necessary actions', async () => {
const mockTokenSet = { access_token: 'abc' }
const mockUserInfo = { name: 'Test User' }
const mockData = {
tokenSet: mockTokenSet,
userinfo: mockUserInfo,
};
userinfo: mockUserInfo
}
(oidcAuth.Callback as jest.Mock).mockResolvedValue(mockData);
;(oidcAuth.Callback as jest.Mock).mockResolvedValue(mockData)
sessionStorage.setItem(
"redirectState",
JSON.stringify({ code_verifier: "verifier123", state: "state456" })
);
'redirectState',
JSON.stringify({ code_verifier: 'verifier123', state: 'state456' })
)
const { rerender } = render(<CallbackResume />);
const { rerender } = render(<CallbackResume />)
await waitFor(() => {
expect(oidcAuth.Callback).toHaveBeenCalledWith("verifier123", "state456");
});
expect(oidcAuth.Callback).toHaveBeenCalledWith('verifier123', 'state456')
})
await waitFor(() => {
expect(dispatch).toHaveBeenCalledWith(setAppLoading(true));
});
expect(dispatch).toHaveBeenCalledWith(setAppLoading(true))
})
await waitFor(() => {
expect(dispatch).toHaveBeenCalledWith(setUserData(mockUserInfo));
});
expect(dispatch).toHaveBeenCalledWith(setUserData(mockUserInfo))
})
await waitFor(() => {
expect(dispatch).toHaveBeenCalledWith(setTokens(mockTokenSet));
});
expect(dispatch).toHaveBeenCalledWith(setTokens(mockTokenSet))
})
await waitFor(() => {
expect(dispatch).toHaveBeenCalledWith(getOpenPaasUserDataAsync());
});
expect(dispatch).toHaveBeenCalledWith(getOpenPaasUserDataAsync())
})
await waitFor(() => {
expect(dispatch).toHaveBeenCalledWith(getCalendarsListAsync());
});
expect(dispatch).toHaveBeenCalledWith(getCalendarsListAsync())
})
// Simulate async actions completing by updating mock state
mockUserState = {
userData: mockUserInfo,
tokens: mockTokenSet,
loading: false,
error: null,
};
error: null
}
mockCalendarsState = {
list: { calendar1: {} },
pending: false,
error: null,
};
error: null
}
// Re-render to trigger navigation effect
rerender(<CallbackResume />);
rerender(<CallbackResume />)
await waitFor(
() => {
expect(dispatch).toHaveBeenCalledWith(setAppLoading(false));
expect(dispatch).toHaveBeenCalledWith(setAppLoading(false))
},
{ timeout: 3000 }
);
)
await waitFor(
() => {
expect(dispatch).toHaveBeenCalledWith(replace("/calendar"));
expect(dispatch).toHaveBeenCalledWith(replace('/calendar'))
},
{ timeout: 3000 }
);
)
await waitFor(() => {
expect(sessionStorage.getItem("redirectState")).toBe(null);
});
expect(sessionStorage.getItem('redirectState')).toBe(null)
})
await waitFor(() => {
expect(sessionStorage.getItem("tokenSet")).toEqual(
expect(sessionStorage.getItem('tokenSet')).toEqual(
JSON.stringify(mockTokenSet)
);
});
});
)
})
})
it("should handle missing redirectState gracefully", async () => {
sessionStorage.removeItem("redirectState");
renderWithProviders(<CallbackResume />);
it('should handle missing redirectState gracefully', async () => {
sessionStorage.removeItem('redirectState')
renderWithProviders(<CallbackResume />)
await waitFor(() => {
expect(dispatch).toHaveBeenCalledWith(replace("/"));
});
});
});
expect(dispatch).toHaveBeenCalledWith(replace('/'))
})
})
})
__test__/features/user/oidcAuth.test.tsx
+112 -113
View File
@@ -4,169 +4,168 @@ import {
Callback,
clientConfig,
getClientConfig,
Logout,
} from "@/features/User/oidcAuth";
import * as apiUtils from "@/utils/apiUtils";
import * as client from "openid-client";
Logout
} from '@/features/User/oidcAuth'
import * as apiUtils from '@/utils/apiUtils'
import * as client from 'openid-client'
clientConfig.url = "https://example.com";
const localAdress = "https://local.exemple.com";
clientConfig.url = 'https://example.com'
const localAdress = 'https://local.exemple.com'
describe("OpenID Client Auth Module", () => {
describe('OpenID Client Auth Module', () => {
beforeEach(() => {
jest.clearAllMocks();
jest.spyOn(apiUtils, "getLocation").mockImplementation(() => localAdress);
});
jest.clearAllMocks()
jest.spyOn(apiUtils, 'getLocation').mockImplementation(() => localAdress)
})
describe("getClientConfig", () => {
it("should call discovery with clientConfig.url", async () => {
const discoveryMock = client.discovery as jest.Mock;
discoveryMock.mockResolvedValue("discoveredClient");
describe('getClientConfig', () => {
it('should call discovery with clientConfig.url', async () => {
const discoveryMock = client.discovery as jest.Mock
discoveryMock.mockResolvedValue('discoveredClient')
const result = await getClientConfig();
const result = await getClientConfig()
expect(discoveryMock).toHaveBeenCalledWith(
new URL(clientConfig.url),
clientConfig.client_id
);
expect(result).toBe("discoveredClient");
});
});
)
expect(result).toBe('discoveredClient')
})
})
describe("Auth", () => {
it("should generate PKCE and build authorization URL with PKCE", async () => {
(client.randomPKCECodeVerifier as jest.Mock).mockReturnValue(
"verifier123"
);
(client.calculatePKCECodeChallenge as jest.Mock).mockResolvedValue(
"challenge123"
);
describe('Auth', () => {
it('should generate PKCE and build authorization URL with PKCE', async () => {
;(client.randomPKCECodeVerifier as jest.Mock).mockReturnValue(
'verifier123'
)
;(client.calculatePKCECodeChallenge as jest.Mock).mockResolvedValue(
'challenge123'
)
// Mock discovery returning an object with serverMetadata()
const discoveredClient = {
serverMetadata: jest.fn(() => ({
supportsPKCE: () => true,
})),
};
(client.discovery as jest.Mock).mockResolvedValue(discoveredClient);
supportsPKCE: () => true
}))
}
;(client.discovery as jest.Mock).mockResolvedValue(discoveredClient)
;(client.buildAuthorizationUrl as jest.Mock).mockReturnValue(
'https://auth.url'
)
(client.buildAuthorizationUrl as jest.Mock).mockReturnValue(
"https://auth.url"
);
const result = await Auth()
const result = await Auth();
expect(client.randomPKCECodeVerifier).toHaveBeenCalled();
expect(client.randomPKCECodeVerifier).toHaveBeenCalled()
expect(client.calculatePKCECodeChallenge).toHaveBeenCalledWith(
"verifier123"
);
'verifier123'
)
expect(client.buildAuthorizationUrl).toHaveBeenCalledWith(
discoveredClient,
expect.objectContaining({
code_challenge: "challenge123",
code_challenge: 'challenge123',
code_challenge_method: clientConfig.code_challenge_method,
redirect_uri: clientConfig.redirect_uri,
scope: clientConfig.scope,
scope: clientConfig.scope
})
);
)
expect(result).toEqual({
redirectTo: "https://auth.url",
code_verifier: "verifier123",
state: undefined,
});
});
redirectTo: 'https://auth.url',
code_verifier: 'verifier123',
state: undefined
})
})
it("should generate state when PKCE not supported", async () => {
(client.randomPKCECodeVerifier as jest.Mock).mockReturnValue(
"verifier123"
);
(client.calculatePKCECodeChallenge as jest.Mock).mockResolvedValue(
"challenge123"
);
it('should generate state when PKCE not supported', async () => {
;(client.randomPKCECodeVerifier as jest.Mock).mockReturnValue(
'verifier123'
)
;(client.calculatePKCECodeChallenge as jest.Mock).mockResolvedValue(
'challenge123'
)
const discoveredClient = {
serverMetadata: jest.fn(() => ({
supportsPKCE: () => false,
})),
};
(client.discovery as jest.Mock).mockResolvedValue(discoveredClient);
(client.randomState as jest.Mock).mockReturnValue("state123");
(client.buildAuthorizationUrl as jest.Mock).mockReturnValue(
"https://auth.url"
);
supportsPKCE: () => false
}))
}
;(client.discovery as jest.Mock).mockResolvedValue(discoveredClient)
;(client.randomState as jest.Mock).mockReturnValue('state123')
;(client.buildAuthorizationUrl as jest.Mock).mockReturnValue(
'https://auth.url'
)
const result = await Auth();
const result = await Auth()
expect(client.randomState).toHaveBeenCalled();
expect(result.state).toBe("state123");
expect(result.redirectTo).toBe("https://auth.url");
});
});
expect(client.randomState).toHaveBeenCalled()
expect(result.state).toBe('state123')
expect(result.redirectTo).toBe('https://auth.url')
})
})
describe("Logout", () => {
it("should build end session URL", async () => {
const discoveredClient = {};
(client.discovery as jest.Mock).mockResolvedValue(discoveredClient);
(client.buildEndSessionUrl as jest.Mock).mockReturnValue(
"https://logout.url"
);
describe('Logout', () => {
it('should build end session URL', async () => {
const discoveredClient = {}
;(client.discovery as jest.Mock).mockResolvedValue(discoveredClient)
;(client.buildEndSessionUrl as jest.Mock).mockReturnValue(
'https://logout.url'
)
const result = await Logout();
const result = await Logout()
expect(client.buildEndSessionUrl).toHaveBeenCalledWith(discoveredClient, {
post_logout_redirect_uri: clientConfig.post_logout_redirect_uri,
});
expect(result).toBe("https://logout.url");
});
});
post_logout_redirect_uri: clientConfig.post_logout_redirect_uri
})
expect(result).toBe('https://logout.url')
})
})
describe("Callback", () => {
it("should perform authorization code grant and fetch user info", async () => {
const discoveredClient = {};
(client.discovery as jest.Mock).mockResolvedValue(discoveredClient);
describe('Callback', () => {
it('should perform authorization code grant and fetch user info', async () => {
const discoveredClient = {}
;(client.discovery as jest.Mock).mockResolvedValue(discoveredClient)
const mockTokenSet = {
access_token: "access123",
claims: jest.fn(() => ({ sub: "user123" })),
};
(client.authorizationCodeGrant as jest.Mock).mockResolvedValue(
access_token: 'access123',
claims: jest.fn(() => ({ sub: 'user123' }))
}
;(client.authorizationCodeGrant as jest.Mock).mockResolvedValue(
mockTokenSet
);
(client.fetchUserInfo as jest.Mock).mockResolvedValue({ name: "User" });
const result = await Callback("verifier123", "state123");
)
;(client.fetchUserInfo as jest.Mock).mockResolvedValue({ name: 'User' })
const result = await Callback('verifier123', 'state123')
expect(client.authorizationCodeGrant).toHaveBeenCalledWith(
discoveredClient,
new URL(localAdress),
{ pkceCodeVerifier: "verifier123", expectedState: "state123" }
);
{ pkceCodeVerifier: 'verifier123', expectedState: 'state123' }
)
expect(client.fetchUserInfo).toHaveBeenCalledWith(
discoveredClient,
"access123",
"user123"
);
'access123',
'user123'
)
expect(result).toEqual({
tokenSet: mockTokenSet,
userinfo: { name: "User" },
});
});
userinfo: { name: 'User' }
})
})
it("should catch and log errors", async () => {
const error = new Error("fail");
(client.discovery as jest.Mock).mockResolvedValue({});
(client.authorizationCodeGrant as jest.Mock).mockRejectedValue(error);
it('should catch and log errors', async () => {
const error = new Error('fail')
;(client.discovery as jest.Mock).mockResolvedValue({})
;(client.authorizationCodeGrant as jest.Mock).mockRejectedValue(error)
const consoleErrorSpy = jest
.spyOn(console, "error")
.mockImplementation(() => {});
.spyOn(console, 'error')
.mockImplementation(() => {})
const result = await Callback("verifier", "state");
const result = await Callback('verifier', 'state')
expect(consoleErrorSpy).toHaveBeenCalledWith("Token grant error:", error);
expect(result).toBeUndefined();
expect(consoleErrorSpy).toHaveBeenCalledWith('Token grant error:', error)
expect(result).toBeUndefined()
consoleErrorSpy.mockRestore();
});
});
});
consoleErrorSpy.mockRestore()
})
})
})
__test__/features/user/userAPI.test.tsx
+79 -79
View File
@@ -1,114 +1,114 @@
import { clientConfig } from "@/features/User/oidcAuth";
import { clientConfig } from '@/features/User/oidcAuth'
import {
getOpenPaasUser,
updateUserConfigurations,
getResourceDetails,
getUserDetails,
} from "@/features/User/userAPI";
import { api } from "@/utils/apiUtils";
getUserDetails
} from '@/features/User/userAPI'
import { api } from '@/utils/apiUtils'
jest.mock("@/utils/apiUtils");
jest.mock('@/utils/apiUtils')
clientConfig.url = "https://example.com";
clientConfig.url = 'https://example.com'
describe("getOpenPaasUser", () => {
it("should fetch and return user data", async () => {
const mockUser = { id: "123", name: "OpenPaas User" };
describe('getOpenPaasUser', () => {
it('should fetch and return user data', async () => {
const mockUser = { id: '123', name: 'OpenPaas User' }
(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockUser),
});
;(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockUser)
})
const result = await getOpenPaasUser();
const result = await getOpenPaasUser()
expect(api.get).toHaveBeenCalledWith("api/user");
expect(result).toEqual(mockUser);
});
});
expect(api.get).toHaveBeenCalledWith('api/user')
expect(result).toEqual(mockUser)
})
})
describe("getUserDetails", () => {
it("should fetch and return user details", async () => {
describe('getUserDetails', () => {
it('should fetch and return user details', async () => {
const mockUser = {
firstname: "John",
lastname: "Doe",
emails: ["john@test.com"],
};
const userId = "123";
firstname: 'John',
lastname: 'Doe',
emails: ['john@test.com']
}
const userId = '123'
(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockUser),
});
;(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockUser)
})
const result = await getUserDetails(userId);
const result = await getUserDetails(userId)
expect(api.get).toHaveBeenCalledWith(`api/users/${userId}`);
expect(result).toEqual(mockUser);
});
});
expect(api.get).toHaveBeenCalledWith(`api/users/${userId}`)
expect(result).toEqual(mockUser)
})
})
describe("getResourceDetails", () => {
it("should fetch and return resource details", async () => {
const mockResource = { _id: "res-123", name: "Meeting Room A" };
const resourceId = "res-123";
describe('getResourceDetails', () => {
it('should fetch and return resource details', async () => {
const mockResource = { _id: 'res-123', name: 'Meeting Room A' }
const resourceId = 'res-123'
(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockResource),
});
;(api.get as jest.Mock).mockReturnValue({
json: jest.fn().mockResolvedValue(mockResource)
})
const result = await getResourceDetails(resourceId);
const result = await getResourceDetails(resourceId)
expect(api.get).toHaveBeenCalledWith(`api/resources/${resourceId}`);
expect(result).toEqual(mockResource);
});
});
expect(api.get).toHaveBeenCalledWith(`api/resources/${resourceId}`)
expect(result).toEqual(mockResource)
})
})
describe("updateUserConfigurations", () => {
describe('updateUserConfigurations', () => {
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
it("should PATCH configurations with language update", async () => {
const mockResponse = { status: 204 };
(api.patch as jest.Mock).mockResolvedValue(mockResponse);
it('should PATCH configurations with language update', async () => {
const mockResponse = { status: 204 }
;(api.patch as jest.Mock).mockResolvedValue(mockResponse)
await updateUserConfigurations({ language: "vi" });
await updateUserConfigurations({ language: 'vi' })
expect(api.patch).toHaveBeenCalledWith("api/configurations?scope=user", {
expect(api.patch).toHaveBeenCalledWith('api/configurations?scope=user', {
json: [
{
name: "core",
configurations: [{ name: "language", value: "vi" }],
},
],
});
});
name: 'core',
configurations: [{ name: 'language', value: 'vi' }]
}
]
})
})
it("should PATCH configurations with multiple updates", async () => {
const mockResponse = { status: 204 };
(api.patch as jest.Mock).mockResolvedValue(mockResponse);
it('should PATCH configurations with multiple updates', async () => {
const mockResponse = { status: 204 }
;(api.patch as jest.Mock).mockResolvedValue(mockResponse)
await updateUserConfigurations({
language: "fr",
timezone: "Europe/Paris",
});
language: 'fr',
timezone: 'Europe/Paris'
})
expect(api.patch).toHaveBeenCalledWith("api/configurations?scope=user", {
expect(api.patch).toHaveBeenCalledWith('api/configurations?scope=user', {
json: [
{
name: "core",
name: 'core',
configurations: [
{ name: "language", value: "fr" },
{ name: "datetime", value: { timeZone: "Europe/Paris" } },
],
},
],
});
});
{ name: 'language', value: 'fr' },
{ name: 'datetime', value: { timeZone: 'Europe/Paris' } }
]
}
]
})
})
it("should handle empty updates without calling API", async () => {
const result = await updateUserConfigurations({});
it('should handle empty updates without calling API', async () => {
const result = await updateUserConfigurations({})
expect(api.patch).not.toHaveBeenCalled();
expect(result).toEqual({ status: 204 });
});
});
expect(api.patch).not.toHaveBeenCalled()
expect(result).toEqual({ status: 204 })
})
})
__test__/features/websocket/WebSocketGate.test.tsx
+576 -590
View File
File diff suppressed because it is too large Load Diff
__test__/features/websocket/api/fetchWebSocketTicket.test.tsx
+32 -32
View File
@@ -1,46 +1,46 @@
import { api } from "@/utils/apiUtils";
import { fetchWebSocketTicket } from "@/websocket/api/fetchWebSocketTicket";
import { api } from '@/utils/apiUtils'
import { fetchWebSocketTicket } from '@/websocket/api/fetchWebSocketTicket'
jest.mock("@/utils/apiUtils");
jest.mock('@/utils/apiUtils')
describe("fetchWebSocketTicket", () => {
describe('fetchWebSocketTicket', () => {
const mockTicket = {
clientAddress: "127.0.0.1",
value: "test-ticket-123",
generatedOn: "2025-01-12T10:00:00Z",
validUntil: "2025-01-12T11:00:00Z",
username: "testuser",
};
clientAddress: '127.0.0.1',
value: 'test-ticket-123',
generatedOn: '2025-01-12T10:00:00Z',
validUntil: '2025-01-12T11:00:00Z',
username: 'testuser'
}
beforeEach(() => {
jest.clearAllMocks();
});
jest.clearAllMocks()
})
it("should fetch ticket successfully", async () => {
(api.post as jest.Mock).mockResolvedValue({
it('should fetch ticket successfully', async () => {
;(api.post as jest.Mock).mockResolvedValue({
ok: true,
json: async () => mockTicket,
});
json: async () => mockTicket
})
const ticket = await fetchWebSocketTicket();
const ticket = await fetchWebSocketTicket()
expect(api.post).toHaveBeenCalledWith("ws/ticket");
expect(ticket).toEqual(mockTicket);
});
expect(api.post).toHaveBeenCalledWith('ws/ticket')
expect(ticket).toEqual(mockTicket)
})
it("should throw error when response is not ok", async () => {
(api.post as jest.Mock).mockResolvedValue({
ok: false,
});
it('should throw error when response is not ok', async () => {
;(api.post as jest.Mock).mockResolvedValue({
ok: false
})
await expect(fetchWebSocketTicket()).rejects.toThrow(
"Failed to fetch WebSocket ticket"
);
});
'Failed to fetch WebSocket ticket'
)
})
it("should throw error when network fails", async () => {
(api.post as jest.Mock).mockRejectedValue(new Error("Network error"));
it('should throw error when network fails', async () => {
;(api.post as jest.Mock).mockRejectedValue(new Error('Network error'))
await expect(fetchWebSocketTicket()).rejects.toThrow("Network error");
});
});
await expect(fetchWebSocketTicket()).rejects.toThrow('Network error')
})
})
__test__/features/websocket/createWebSocketConnection.test.tsx
+132 -133
View File
@@ -1,211 +1,210 @@
import { fetchWebSocketTicket } from "@/websocket/api/fetchWebSocketTicket";
import { createWebSocketConnection } from "@/websocket/connection/createConnection";
import { WS_INBOUND_EVENTS } from "@/websocket/protocols";
import { waitFor } from "@testing-library/dom";
import { setupWebsocket } from "./utils/setupWebsocket";
import { fetchWebSocketTicket } from '@/websocket/api/fetchWebSocketTicket'
import { createWebSocketConnection } from '@/websocket/connection/createConnection'
import { WS_INBOUND_EVENTS } from '@/websocket/protocols'
import { waitFor } from '@testing-library/dom'
import { setupWebsocket } from './utils/setupWebsocket'
jest.mock("@/websocket/api/fetchWebSocketTicket");
jest.mock('@/websocket/api/fetchWebSocketTicket')
describe("createWebSocketConnection", () => {
let mockWebSocket: jest.Mock;
let cleanup: () => void;
let webSocketInstances: any[] = [];
describe('createWebSocketConnection', () => {
let mockWebSocket: jest.Mock
let cleanup: () => void
let webSocketInstances: any[] = []
const mockTicket = {
value: "test-ticket-123",
clientAddress: "127.0.0.1",
generatedOn: "2025-01-12T10:00:00Z",
validUntil: "2025-01-12T11:00:00Z",
username: "testuser",
};
value: 'test-ticket-123',
clientAddress: '127.0.0.1',
generatedOn: '2025-01-12T10:00:00Z',
validUntil: '2025-01-12T11:00:00Z',
username: 'testuser'
}
/** ---------- Helpers ---------- */
const getWs = () => webSocketInstances[0];
const getWs = () => webSocketInstances[0]
const triggerEvent = (ws: any, event: string, payload?: any) => {
ws._listeners[event]?.[0]?.(payload);
};
ws._listeners[event]?.[0]?.(payload)
}
const createAndOpenConnection = async () => {
const mockCallbacks = {
onMessage: jest.fn(),
onClose: jest.fn(),
onError: jest.fn(),
};
const promise = createWebSocketConnection(mockCallbacks);
onError: jest.fn()
}
const promise = createWebSocketConnection(mockCallbacks)
await waitFor(() => {
expect(webSocketInstances.length).toBe(1);
});
expect(webSocketInstances.length).toBe(1)
})
triggerEvent(getWs(), WS_INBOUND_EVENTS.CONNECTION_OPENED);
const socket = await promise;
triggerEvent(getWs(), WS_INBOUND_EVENTS.CONNECTION_OPENED)
const socket = await promise
return { socket, ws: getWs(), promise, mockCallbacks };
};
return { socket, ws: getWs(), promise, mockCallbacks }
}
/** ---------- Setup ---------- */
beforeEach(() => {
({ webSocketInstances, mockWebSocket, cleanup } = setupWebsocket());
window.WEBSOCKET_URL = "wss://calendar.example.com";
(fetchWebSocketTicket as jest.Mock).mockResolvedValue(mockTicket);
});
;({ webSocketInstances, mockWebSocket, cleanup } = setupWebsocket())
window.WEBSOCKET_URL = 'wss://calendar.example.com'
;(fetchWebSocketTicket as jest.Mock).mockResolvedValue(mockTicket)
})
afterEach(() => {
jest.clearAllMocks();
delete window.WEBSOCKET_URL;
delete window.CALENDAR_BASE_URL;
cleanup();
});
jest.clearAllMocks()
delete window.WEBSOCKET_URL
delete window.CALENDAR_BASE_URL
cleanup()
})
/** ---------- Tests ---------- */
it("throws when WEBSOCKET_URL is not defined", async () => {
delete window.WEBSOCKET_URL;
it('throws when WEBSOCKET_URL is not defined', async () => {
delete window.WEBSOCKET_URL
const mockCallbacks = {
onMessage: jest.fn(),
};
onMessage: jest.fn()
}
await expect(createWebSocketConnection(mockCallbacks)).rejects.toThrow(
"WEBSOCKET_URL is not defined"
);
});
'WEBSOCKET_URL is not defined'
)
})
it("fetches WebSocket ticket", async () => {
await createAndOpenConnection();
expect(fetchWebSocketTicket).toHaveBeenCalledTimes(1);
});
it('fetches WebSocket ticket', async () => {
await createAndOpenConnection()
expect(fetchWebSocketTicket).toHaveBeenCalledTimes(1)
})
it("creates WebSocket with correct URL and ticket", async () => {
await createAndOpenConnection();
it('creates WebSocket with correct URL and ticket', async () => {
await createAndOpenConnection()
expect(mockWebSocket).toHaveBeenCalledWith(
"wss://calendar.example.com/ws?ticket=test-ticket-123"
);
});
'wss://calendar.example.com/ws?ticket=test-ticket-123'
)
})
it("creates WebSocket with correct URL and ticket without the WEBSOCKET_URL", async () => {
delete window.WEBSOCKET_URL;
window.CALENDAR_BASE_URL = "https://calendar.example.com";
await createAndOpenConnection();
it('creates WebSocket with correct URL and ticket without the WEBSOCKET_URL', async () => {
delete window.WEBSOCKET_URL
window.CALENDAR_BASE_URL = 'https://calendar.example.com'
await createAndOpenConnection()
expect(mockWebSocket).toHaveBeenCalledWith(
"wss://calendar.example.com/ws?ticket=test-ticket-123"
);
});
'wss://calendar.example.com/ws?ticket=test-ticket-123'
)
})
it("resolves with socket when connection opens", async () => {
const { socket, ws } = await createAndOpenConnection();
expect(socket).toBe(ws);
});
it('resolves with socket when connection opens', async () => {
const { socket, ws } = await createAndOpenConnection()
expect(socket).toBe(ws)
})
it("rejects when connection fails", async () => {
it('rejects when connection fails', async () => {
const mockCallbacks = {
onMessage: jest.fn(),
};
const promise = createWebSocketConnection(mockCallbacks);
onMessage: jest.fn()
}
const promise = createWebSocketConnection(mockCallbacks)
await waitFor(() => {
expect(webSocketInstances.length).toBe(1);
});
expect(webSocketInstances.length).toBe(1)
})
triggerEvent(getWs(), WS_INBOUND_EVENTS.ERROR, new Event("error"));
triggerEvent(getWs(), WS_INBOUND_EVENTS.ERROR, new Event('error'))
await expect(promise).rejects.toThrow("WebSocket connection failed");
});
await expect(promise).rejects.toThrow('WebSocket connection failed')
})
it("attaches message event listener", async () => {
const { ws } = await createAndOpenConnection();
it('attaches message event listener', async () => {
const { ws } = await createAndOpenConnection()
expect(ws._listeners[WS_INBOUND_EVENTS.MESSAGE]).toBeDefined();
expect(ws._listeners[WS_INBOUND_EVENTS.MESSAGE].length).toBeGreaterThan(0);
});
expect(ws._listeners[WS_INBOUND_EVENTS.MESSAGE]).toBeDefined()
expect(ws._listeners[WS_INBOUND_EVENTS.MESSAGE].length).toBeGreaterThan(0)
})
it("attaches close event listener", async () => {
const { ws } = await createAndOpenConnection();
expect(ws._listeners[WS_INBOUND_EVENTS.CONNECTION_CLOSED]).toBeDefined();
});
it('attaches close event listener', async () => {
const { ws } = await createAndOpenConnection()
expect(ws._listeners[WS_INBOUND_EVENTS.CONNECTION_CLOSED]).toBeDefined()
})
it("handles invalid JSON messages", async () => {
const errorSpy = jest.spyOn(console, "error").mockImplementation();
it('handles invalid JSON messages', async () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation()
const { ws } = await createAndOpenConnection();
const { ws } = await createAndOpenConnection()
triggerEvent(ws, WS_INBOUND_EVENTS.MESSAGE, { data: "invalid json" });
triggerEvent(ws, WS_INBOUND_EVENTS.MESSAGE, { data: 'invalid json' })
expect(errorSpy).toHaveBeenCalledWith(
"Failed to parse WebSocket message:",
'Failed to parse WebSocket message:',
expect.any(Error)
);
)
errorSpy.mockRestore();
});
errorSpy.mockRestore()
})
it("rejects on timeout", async () => {
jest.useFakeTimers();
it('rejects on timeout', async () => {
jest.useFakeTimers()
const mockCallbacks = {
onMessage: jest.fn(),
};
const promise = createWebSocketConnection(mockCallbacks);
onMessage: jest.fn()
}
const promise = createWebSocketConnection(mockCallbacks)
await waitFor(() => {
expect(webSocketInstances.length).toBe(1);
});
expect(webSocketInstances.length).toBe(1)
})
jest.advanceTimersByTime(10000);
jest.advanceTimersByTime(10000)
await expect(promise).rejects.toThrow("WebSocket connection timed out");
await expect(promise).rejects.toThrow('WebSocket connection timed out')
jest.useRealTimers();
});
jest.useRealTimers()
})
it("calls onMessage callback when message received", async () => {
const { ws, mockCallbacks } = await createAndOpenConnection();
it('calls onMessage callback when message received', async () => {
const { ws, mockCallbacks } = await createAndOpenConnection()
const testMessage = { type: "test", payload: "data" };
const testMessage = { type: 'test', payload: 'data' }
triggerEvent(ws, WS_INBOUND_EVENTS.MESSAGE, {
data: JSON.stringify(testMessage),
});
data: JSON.stringify(testMessage)
})
expect(mockCallbacks.onMessage).toHaveBeenCalledWith(testMessage);
});
expect(mockCallbacks.onMessage).toHaveBeenCalledWith(testMessage)
})
it("does not call onMessage when JSON parsing fails", async () => {
const errorSpy = jest.spyOn(console, "error").mockImplementation();
const { ws, mockCallbacks } = await createAndOpenConnection();
it('does not call onMessage when JSON parsing fails', async () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation()
const { ws, mockCallbacks } = await createAndOpenConnection()
triggerEvent(ws, WS_INBOUND_EVENTS.MESSAGE, { data: "invalid json" });
triggerEvent(ws, WS_INBOUND_EVENTS.MESSAGE, { data: 'invalid json' })
expect(mockCallbacks.onMessage).not.toHaveBeenCalled();
expect(mockCallbacks.onMessage).not.toHaveBeenCalled()
expect(errorSpy).toHaveBeenCalledWith(
"Failed to parse WebSocket message:",
'Failed to parse WebSocket message:',
expect.any(Error)
);
)
errorSpy.mockRestore();
});
errorSpy.mockRestore()
})
it("calls onClose callback when connection closes", async () => {
const { ws, mockCallbacks } = await createAndOpenConnection();
it('calls onClose callback when connection closes', async () => {
const { ws, mockCallbacks } = await createAndOpenConnection()
const closeEvent = new CloseEvent("close", {
const closeEvent = new CloseEvent('close', {
code: 1000,
reason: "Normal closure",
});
triggerEvent(ws, WS_INBOUND_EVENTS.CONNECTION_CLOSED, closeEvent);
reason: 'Normal closure'
})
triggerEvent(ws, WS_INBOUND_EVENTS.CONNECTION_CLOSED, closeEvent)
expect(mockCallbacks.onClose).toHaveBeenCalledWith(closeEvent);
});
expect(mockCallbacks.onClose).toHaveBeenCalledWith(closeEvent)
})
it("calls onError callback when error occurs", async () => {
const { ws, mockCallbacks } = await createAndOpenConnection();
it('calls onError callback when error occurs', async () => {
const { ws, mockCallbacks } = await createAndOpenConnection()
const errorEvent = new Event("error");
triggerEvent(ws, WS_INBOUND_EVENTS.ERROR, errorEvent);
const errorEvent = new Event('error')
triggerEvent(ws, WS_INBOUND_EVENTS.ERROR, errorEvent)
expect(mockCallbacks.onError).toHaveBeenCalledWith(errorEvent);
});
});
expect(mockCallbacks.onError).toHaveBeenCalledWith(errorEvent)
})
})
__test__/features/websocket/useWebSocketReconnect.test.tsx
+130 -130
View File
@@ -1,41 +1,41 @@
import { getRetryDelay } from "@/utils/getRetryDelay";
import { getRetryDelay } from '@/utils/getRetryDelay'
import {
MAX_RECONNECT_ATTEMPTS,
RECONNECT_CONFIG,
useWebSocketReconnect,
} from "@/websocket/connection/lifecycle/useWebSocketReconnect";
import { act, renderHook } from "@testing-library/react";
import { MutableRefObject } from "react";
useWebSocketReconnect
} from '@/websocket/connection/lifecycle/useWebSocketReconnect'
import { act, renderHook } from '@testing-library/react'
import { MutableRefObject } from 'react'
// Mock the retry delay utility
jest.mock("@/utils/getRetryDelay");
jest.mock('@/utils/getRetryDelay')
const mockGetRetryDelay = getRetryDelay as jest.MockedFunction<
typeof getRetryDelay
>;
>
describe("useWebSocketReconnect", () => {
let reconnectTimeoutRef: MutableRefObject<NodeJS.Timeout | null>;
let isAuthenticatedRef: MutableRefObject<boolean>;
let reconnectAttemptsRef: MutableRefObject<number>;
let setShouldConnect: jest.Mock;
describe('useWebSocketReconnect', () => {
let reconnectTimeoutRef: MutableRefObject<NodeJS.Timeout | null>
let isAuthenticatedRef: MutableRefObject<boolean>
let reconnectAttemptsRef: MutableRefObject<number>
let setShouldConnect: jest.Mock
beforeEach(() => {
jest.useFakeTimers();
reconnectTimeoutRef = { current: null };
isAuthenticatedRef = { current: true };
reconnectAttemptsRef = { current: 0 };
setShouldConnect = jest.fn();
mockGetRetryDelay.mockReturnValue(1000); // Default 1 second delay
});
jest.useFakeTimers()
reconnectTimeoutRef = { current: null }
isAuthenticatedRef = { current: true }
reconnectAttemptsRef = { current: 0 }
setShouldConnect = jest.fn()
mockGetRetryDelay.mockReturnValue(1000) // Default 1 second delay
})
afterEach(() => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
jest.clearAllMocks();
});
jest.runOnlyPendingTimers()
jest.useRealTimers()
jest.clearAllMocks()
})
describe("scheduleReconnect", () => {
it("should schedule a reconnection with correct delay", () => {
describe('scheduleReconnect', () => {
it('should schedule a reconnection with correct delay', () => {
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -43,26 +43,26 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
expect(mockGetRetryDelay).toHaveBeenCalledWith(0, RECONNECT_CONFIG);
expect(reconnectTimeoutRef.current).not.toBeNull();
expect(setShouldConnect).not.toHaveBeenCalled();
expect(mockGetRetryDelay).toHaveBeenCalledWith(0, RECONNECT_CONFIG)
expect(reconnectTimeoutRef.current).not.toBeNull()
expect(setShouldConnect).not.toHaveBeenCalled()
act(() => {
jest.advanceTimersByTime(1000);
});
jest.advanceTimersByTime(1000)
})
expect(setShouldConnect).toHaveBeenCalledWith(expect.any(Function));
expect(reconnectAttemptsRef.current).toBe(1);
});
expect(setShouldConnect).toHaveBeenCalledWith(expect.any(Function))
expect(reconnectAttemptsRef.current).toBe(1)
})
it("should not schedule reconnection if not authenticated", () => {
isAuthenticatedRef = { current: false };
it('should not schedule reconnection if not authenticated', () => {
isAuthenticatedRef = { current: false }
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -70,19 +70,19 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
expect(reconnectTimeoutRef.current).toBeNull();
expect(mockGetRetryDelay).not.toHaveBeenCalled();
});
expect(reconnectTimeoutRef.current).toBeNull()
expect(mockGetRetryDelay).not.toHaveBeenCalled()
})
it("should stop after MAX_RECONNECT_ATTEMPTS", () => {
const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
reconnectAttemptsRef.current = MAX_RECONNECT_ATTEMPTS;
it('should stop after MAX_RECONNECT_ATTEMPTS', () => {
const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
reconnectAttemptsRef.current = MAX_RECONNECT_ATTEMPTS
const { result } = renderHook(() =>
useWebSocketReconnect(
@@ -91,23 +91,23 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
expect(consoleErrorSpy).toHaveBeenCalledWith(
expect.stringContaining(
`Max WebSocket reconnection attempts (${MAX_RECONNECT_ATTEMPTS})`
)
);
expect(reconnectTimeoutRef.current).toBeNull();
)
expect(reconnectTimeoutRef.current).toBeNull()
consoleErrorSpy.mockRestore();
});
consoleErrorSpy.mockRestore()
})
it("should increment attempt counter on each reconnection", () => {
it('should increment attempt counter on each reconnection', () => {
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -115,26 +115,26 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
expect(reconnectAttemptsRef.current).toBe(0);
expect(reconnectAttemptsRef.current).toBe(0)
act(() => {
result.current.scheduleReconnect();
jest.advanceTimersByTime(1000);
});
result.current.scheduleReconnect()
jest.advanceTimersByTime(1000)
})
expect(reconnectAttemptsRef.current).toBe(1);
expect(reconnectAttemptsRef.current).toBe(1)
act(() => {
result.current.scheduleReconnect();
jest.advanceTimersByTime(1000);
});
result.current.scheduleReconnect()
jest.advanceTimersByTime(1000)
})
expect(reconnectAttemptsRef.current).toBe(2);
});
expect(reconnectAttemptsRef.current).toBe(2)
})
it("should toggle setShouldConnect correctly", () => {
it('should toggle setShouldConnect correctly', () => {
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -142,24 +142,24 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
act(() => {
result.current.scheduleReconnect();
jest.advanceTimersByTime(1000);
});
result.current.scheduleReconnect()
jest.advanceTimersByTime(1000)
})
expect(setShouldConnect).toHaveBeenCalledTimes(1);
expect(setShouldConnect).toHaveBeenCalledTimes(1)
// Test the toggle function
const toggleFn = setShouldConnect.mock.calls[0][0];
expect(toggleFn(false)).toBe(true);
expect(toggleFn(true)).toBe(false);
});
});
const toggleFn = setShouldConnect.mock.calls[0][0]
expect(toggleFn(false)).toBe(true)
expect(toggleFn(true)).toBe(false)
})
})
describe("clearReconnectTimeout", () => {
it("should clear pending timeout", () => {
describe('clearReconnectTimeout', () => {
it('should clear pending timeout', () => {
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -167,29 +167,29 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
expect(reconnectTimeoutRef.current).not.toBeNull();
expect(reconnectTimeoutRef.current).not.toBeNull()
act(() => {
result.current.clearReconnectTimeout();
});
result.current.clearReconnectTimeout()
})
expect(reconnectTimeoutRef.current).toBeNull();
expect(reconnectTimeoutRef.current).toBeNull()
// Timeout should not fire
act(() => {
jest.advanceTimersByTime(1000);
});
jest.advanceTimersByTime(1000)
})
expect(setShouldConnect).not.toHaveBeenCalled();
});
expect(setShouldConnect).not.toHaveBeenCalled()
})
it("should handle multiple clears gracefully", () => {
it('should handle multiple clears gracefully', () => {
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -197,18 +197,18 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
act(() => {
result.current.clearReconnectTimeout();
result.current.clearReconnectTimeout();
result.current.clearReconnectTimeout();
});
result.current.clearReconnectTimeout()
result.current.clearReconnectTimeout()
result.current.clearReconnectTimeout()
})
expect(reconnectTimeoutRef.current).toBeNull();
});
expect(reconnectTimeoutRef.current).toBeNull()
})
it("should clear timeout before scheduling new one", () => {
it('should clear timeout before scheduling new one', () => {
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -216,35 +216,35 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
// Schedule first reconnection
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
const firstTimeout = reconnectTimeoutRef.current;
expect(firstTimeout).not.toBeNull();
const firstTimeout = reconnectTimeoutRef.current
expect(firstTimeout).not.toBeNull()
// Schedule second reconnection (should clear first)
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
const secondTimeout = reconnectTimeoutRef.current;
expect(secondTimeout).not.toBeNull();
expect(secondTimeout).not.toBe(firstTimeout);
const secondTimeout = reconnectTimeoutRef.current
expect(secondTimeout).not.toBeNull()
expect(secondTimeout).not.toBe(firstTimeout)
// Only second timeout should fire
act(() => {
jest.advanceTimersByTime(1000);
});
jest.advanceTimersByTime(1000)
})
expect(setShouldConnect).toHaveBeenCalledTimes(1);
});
});
it("should stop reconnecting after MAX_RECONNECT_ATTEMPTS (10)", () => {
const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
expect(setShouldConnect).toHaveBeenCalledTimes(1)
})
})
it('should stop reconnecting after MAX_RECONNECT_ATTEMPTS (10)', () => {
const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
const { result } = renderHook(() =>
useWebSocketReconnect(
reconnectTimeoutRef,
@@ -252,32 +252,32 @@ describe("useWebSocketReconnect", () => {
reconnectAttemptsRef,
setShouldConnect
)
);
)
// Simulate 10 reconnection attempts
for (let i = 0; i < MAX_RECONNECT_ATTEMPTS; i++) {
act(() => {
result.current.scheduleReconnect();
result.current.scheduleReconnect()
jest.advanceTimersByTime(
mockGetRetryDelay.mock.results[i]?.value || 1000
);
});
)
})
}
expect(reconnectAttemptsRef.current).toBe(MAX_RECONNECT_ATTEMPTS);
expect(setShouldConnect).toHaveBeenCalledTimes(MAX_RECONNECT_ATTEMPTS);
expect(reconnectAttemptsRef.current).toBe(MAX_RECONNECT_ATTEMPTS)
expect(setShouldConnect).toHaveBeenCalledTimes(MAX_RECONNECT_ATTEMPTS)
// Try to schedule one more reconnection - should fail
act(() => {
result.current.scheduleReconnect();
});
result.current.scheduleReconnect()
})
expect(consoleErrorSpy).toHaveBeenCalledWith(
`Max WebSocket reconnection attempts (${MAX_RECONNECT_ATTEMPTS}) reached. Giving up.`
);
expect(reconnectTimeoutRef.current).toBeNull();
expect(setShouldConnect).toHaveBeenCalledTimes(MAX_RECONNECT_ATTEMPTS); // Should not increment
)
expect(reconnectTimeoutRef.current).toBeNull()
expect(setShouldConnect).toHaveBeenCalledTimes(MAX_RECONNECT_ATTEMPTS) // Should not increment
consoleErrorSpy.mockRestore();
});
});
consoleErrorSpy.mockRestore()
})
})
__test__/features/websocket/utils/notificationStorm.test.tsx
+77 -77
View File
@@ -1,135 +1,135 @@
import type { AppDispatch, RootState } from "@/app/store";
import { store } from "@/app/store";
import { refreshCalendarWithSyncToken } from "@/features/Calendars/services";
import { getDisplayedCalendarRange } from "@/utils";
import { updateCalendars } from "@/websocket/messaging/updateCalendars";
import type { AppDispatch, RootState } from '@/app/store'
import { store } from '@/app/store'
import { refreshCalendarWithSyncToken } from '@/features/Calendars/services'
import { getDisplayedCalendarRange } from '@/utils'
import { updateCalendars } from '@/websocket/messaging/updateCalendars'
jest.mock("@/features/Calendars/services", () => ({
refreshCalendarWithSyncToken: jest.fn(),
}));
jest.mock('@/features/Calendars/services', () => ({
refreshCalendarWithSyncToken: jest.fn()
}))
jest.mock("@/utils", () => ({
jest.mock('@/utils', () => ({
getDisplayedCalendarRange: jest.fn(),
findCalendarById: jest.requireActual("@/utils").findCalendarById,
}));
findCalendarById: jest.requireActual('@/utils').findCalendarById
}))
jest.mock("@/app/store", () => ({
jest.mock('@/app/store', () => ({
store: {
getState: jest.fn(),
},
}));
getState: jest.fn()
}
}))
jest.useFakeTimers();
const mockDispatch = jest.fn();
jest.useFakeTimers()
const mockDispatch = jest.fn()
const mockRange = {
start: new Date("2025-01-15T10:00:00Z"),
end: new Date("2025-01-16T10:00:00Z"),
};
start: new Date('2025-01-15T10:00:00Z'),
end: new Date('2025-01-16T10:00:00Z')
}
const mockState = {
calendars: {
list: {
"cal1/entry1": { id: "cal1/entry1", name: "Calendar 1", syncToken: 1 },
"cal2/entry2": { id: "cal2/entry2", name: "Calendar 2", syncToken: 1 },
"cal/A": { id: "cal/A", name: "Cal A", syncToken: 1 },
"cal/B": { id: "cal/B", name: "Cal B", syncToken: 1 },
"cal/C": { id: "cal/C", name: "Cal C", syncToken: 1 },
'cal1/entry1': { id: 'cal1/entry1', name: 'Calendar 1', syncToken: 1 },
'cal2/entry2': { id: 'cal2/entry2', name: 'Calendar 2', syncToken: 1 },
'cal/A': { id: 'cal/A', name: 'Cal A', syncToken: 1 },
'cal/B': { id: 'cal/B', name: 'Cal B', syncToken: 1 },
'cal/C': { id: 'cal/C', name: 'Cal C', syncToken: 1 }
},
templist: {},
},
} as unknown as RootState;
templist: {}
}
} as unknown as RootState
const mockAccumulators: {
calendarsToRefresh: Map<string, any>;
calendarsToHide: Set<string>;
debouncedUpdateFn?: (dispatch: AppDispatch) => void;
shouldRefreshCalendarListRef: React.MutableRefObject<boolean>;
currentDebouncePeriod?: number;
calendarsToRefresh: Map<string, any>
calendarsToHide: Set<string>
debouncedUpdateFn?: (dispatch: AppDispatch) => void
shouldRefreshCalendarListRef: React.MutableRefObject<boolean>
currentDebouncePeriod?: number
} = {
calendarsToRefresh: new Map<string, any>(),
calendarsToHide: new Set(),
shouldRefreshCalendarListRef: { current: false },
currentDebouncePeriod: 0,
debouncedUpdateFn: undefined,
};
debouncedUpdateFn: undefined
}
describe("websocket messages storm", () => {
describe('websocket messages storm', () => {
beforeEach(() => {
(refreshCalendarWithSyncToken as unknown as jest.Mock).mockClear();
jest.clearAllMocks();
jest.clearAllTimers();
jest.resetModules();
(getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange);
(store.getState as jest.Mock).mockReturnValue(mockState);
window.WS_DEBOUNCE_PERIOD_MS = 500;
mockAccumulators.calendarsToRefresh = new Map<string, any>();
mockAccumulators.calendarsToHide = new Set();
mockAccumulators.shouldRefreshCalendarListRef.current = false;
mockAccumulators.currentDebouncePeriod = 0;
;(refreshCalendarWithSyncToken as unknown as jest.Mock).mockClear()
jest.clearAllMocks()
jest.clearAllTimers()
jest.resetModules()
;(getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange)
;(store.getState as jest.Mock).mockReturnValue(mockState)
window.WS_DEBOUNCE_PERIOD_MS = 500
mockAccumulators.calendarsToRefresh = new Map<string, any>()
mockAccumulators.calendarsToHide = new Set()
mockAccumulators.shouldRefreshCalendarListRef.current = false
mockAccumulators.currentDebouncePeriod = 0
mockAccumulators.debouncedUpdateFn = undefined;
});
it("debounces calendar updates during message storm", () => {
mockAccumulators.debouncedUpdateFn = undefined
})
it('debounces calendar updates during message storm', () => {
const mockMessage = {
"/calendars/cal1/entry1": {
syncToken: "ldsk",
},
};
'/calendars/cal1/entry1': {
syncToken: 'ldsk'
}
}
for (let i = 0; i < 50; i++) {
updateCalendars(mockMessage, mockDispatch, mockAccumulators);
updateCalendars(mockMessage, mockDispatch, mockAccumulators)
}
// Dispatch called once because of leading edge
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1)
// Trailing edge
jest.advanceTimersByTime(500);
jest.advanceTimersByTime(500)
// only one call for the last message + leading edge message
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2);
});
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2)
})
it("debounces calendar updates during message storm with multiple updates", () => {
it('debounces calendar updates during message storm with multiple updates', () => {
// Send a storm with mixed messages
for (let i = 0; i < 50; i++) {
if (i % 3 === 0)
updateCalendars(
{ "/calendars/cal/A": { syncToken: "ldskfjsld" + i } },
{ '/calendars/cal/A': { syncToken: 'ldskfjsld' + i } },
mockDispatch,
mockAccumulators
);
)
else if (i % 3 === 1)
updateCalendars(
{ "/calendars/cal/B": { syncToken: "ldskfjsld" + i } },
{ '/calendars/cal/B': { syncToken: 'ldskfjsld' + i } },
mockDispatch,
mockAccumulators
);
)
else
updateCalendars(
{ "/calendars/cal/C": { syncToken: "ldskfjsld" + i } },
{ '/calendars/cal/C': { syncToken: 'ldskfjsld' + i } },
mockDispatch,
mockAccumulators
);
)
}
// Dispatch called once because of leading edge
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1)
// Trailing edge
jest.advanceTimersByTime(500);
jest.advanceTimersByTime(500)
// Trailing edge updates once per calendar + the original leading edge
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(4);
});
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(4)
})
it("executes immediately when debounce is disabled", () => {
window.WS_DEBOUNCE_PERIOD_MS = 0;
it('executes immediately when debounce is disabled', () => {
window.WS_DEBOUNCE_PERIOD_MS = 0
updateCalendars(
{ "/calendars/cal1/entry1": { syncToken: "abc" } },
{ '/calendars/cal1/entry1': { syncToken: 'abc' } },
mockDispatch,
mockAccumulators
);
)
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1);
});
});
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(1)
})
})
__test__/features/websocket/utils/setupWebsocket.ts
+17 -17
View File
@@ -1,6 +1,6 @@
export function setupWebsocket() {
const originalWebSocket = global.WebSocket;
const webSocketInstances: any[] = [];
const originalWebSocket = global.WebSocket
const webSocketInstances: any[] = []
const mockWebSocket = jest.fn().mockImplementation((url: string) => {
const ws = {
url,
@@ -9,27 +9,27 @@ export function setupWebsocket() {
removeEventListener: jest.fn(),
send: jest.fn(),
close: jest.fn(),
_listeners: {} as Record<string, Function[]>,
};
_listeners: {} as Record<string, Function[]>
}
ws.addEventListener.mockImplementation((event, handler) => {
ws._listeners[event] ??= [];
ws._listeners[event].push(handler);
});
ws._listeners[event] ??= []
ws._listeners[event].push(handler)
})
ws.removeEventListener.mockImplementation((event, handler) => {
ws._listeners[event] =
ws._listeners[event]?.filter((h) => h !== handler) ?? [];
});
ws._listeners[event]?.filter(h => h !== handler) ?? []
})
webSocketInstances.push(ws);
return ws;
});
webSocketInstances.push(ws)
return ws
})
global.WebSocket = mockWebSocket as any;
global.WebSocket = mockWebSocket as any
const cleanup = () => {
global.WebSocket = originalWebSocket;
webSocketInstances.length = 0;
};
return { webSocketInstances, mockWebSocket, cleanup };
global.WebSocket = originalWebSocket
webSocketInstances.length = 0
}
return { webSocketInstances, mockWebSocket, cleanup }
}
__test__/features/websocket/utils/updateCalendars.test.tsx
+94 -96
View File
@@ -1,147 +1,145 @@
import { AppDispatch, RootState, store } from "@/app/store";
import { refreshCalendarWithSyncToken } from "@/features/Calendars/services/refreshCalendar";
import { getDisplayedCalendarRange } from "@/utils/CalendarRangeManager";
import { updateCalendars } from "@/websocket/messaging/updateCalendars";
import { WS_INBOUND_EVENTS } from "@/websocket/protocols";
import { waitFor } from "@testing-library/dom";
import { AppDispatch, RootState, store } from '@/app/store'
import { refreshCalendarWithSyncToken } from '@/features/Calendars/services/refreshCalendar'
import { getDisplayedCalendarRange } from '@/utils/CalendarRangeManager'
import { updateCalendars } from '@/websocket/messaging/updateCalendars'
import { WS_INBOUND_EVENTS } from '@/websocket/protocols'
import { waitFor } from '@testing-library/dom'
jest.mock("@/features/Calendars/services/refreshCalendar");
jest.mock("@/utils/CalendarRangeManager");
jest.mock("@/app/store", () => ({
jest.mock('@/features/Calendars/services/refreshCalendar')
jest.mock('@/utils/CalendarRangeManager')
jest.mock('@/app/store', () => ({
store: {
getState: jest.fn(),
},
}));
getState: jest.fn()
}
}))
describe("updateCalendars", () => {
let mockDispatch: jest.Mock;
describe('updateCalendars', () => {
let mockDispatch: jest.Mock
const mockRange = {
start: new Date("2025-01-15T10:00:00Z"),
end: new Date("2025-01-16T10:00:00Z"),
};
start: new Date('2025-01-15T10:00:00Z'),
end: new Date('2025-01-16T10:00:00Z')
}
const mockState = {
calendars: {
list: {
"cal1/entry1": { id: "cal1/entry1", name: "Calendar 1", syncToken: 1 },
"cal2/entry2": { id: "cal2/entry2", name: "Calendar 2", syncToken: 1 },
'cal1/entry1': { id: 'cal1/entry1', name: 'Calendar 1', syncToken: 1 },
'cal2/entry2': { id: 'cal2/entry2', name: 'Calendar 2', syncToken: 1 }
},
templist: {},
},
} as unknown as RootState;
templist: {}
}
} as unknown as RootState
const mockAccumulators: {
calendarsToRefresh: Map<string, any>;
calendarsToHide: Set<string>;
debouncedUpdateFn?: (dispatch: AppDispatch) => void;
shouldRefreshCalendarListRef: React.MutableRefObject<boolean>;
currentDebouncePeriod?: number;
calendarsToRefresh: Map<string, any>
calendarsToHide: Set<string>
debouncedUpdateFn?: (dispatch: AppDispatch) => void
shouldRefreshCalendarListRef: React.MutableRefObject<boolean>
currentDebouncePeriod?: number
} = {
calendarsToRefresh: new Map<string, any>(),
calendarsToHide: new Set(),
shouldRefreshCalendarListRef: { current: false },
currentDebouncePeriod: 0,
debouncedUpdateFn: jest.fn(),
};
debouncedUpdateFn: jest.fn()
}
beforeEach(() => {
jest.clearAllMocks();
mockDispatch = jest.fn();
(getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange);
(store.getState as jest.Mock).mockReturnValue(mockState);
mockAccumulators.calendarsToRefresh = new Map<string, any>();
mockAccumulators.calendarsToHide = new Set();
mockAccumulators.currentDebouncePeriod = 0;
mockAccumulators.shouldRefreshCalendarListRef.current = false;
mockAccumulators.debouncedUpdateFn = jest.fn();
});
jest.clearAllMocks()
mockDispatch = jest.fn()
;(getDisplayedCalendarRange as jest.Mock).mockReturnValue(mockRange)
;(store.getState as jest.Mock).mockReturnValue(mockState)
mockAccumulators.calendarsToRefresh = new Map<string, any>()
mockAccumulators.calendarsToHide = new Set()
mockAccumulators.currentDebouncePeriod = 0
mockAccumulators.shouldRefreshCalendarListRef.current = false
mockAccumulators.debouncedUpdateFn = jest.fn()
})
it("should not dispatch for non-object messages", () => {
updateCalendars(null, mockDispatch, mockAccumulators);
updateCalendars("string", mockDispatch, mockAccumulators);
updateCalendars(123, mockDispatch, mockAccumulators);
it('should not dispatch for non-object messages', () => {
updateCalendars(null, mockDispatch, mockAccumulators)
updateCalendars('string', mockDispatch, mockAccumulators)
updateCalendars(123, mockDispatch, mockAccumulators)
expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled();
});
expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled()
})
it("should dispatch for registered calendars", async () => {
it('should dispatch for registered calendars', async () => {
const message = {
[WS_INBOUND_EVENTS.CLIENT_REGISTERED]: [
"/calendars/cal1/entry1",
"/calendars/cal2/entry2",
],
};
'/calendars/cal1/entry1',
'/calendars/cal2/entry2'
]
}
updateCalendars(message, mockDispatch, mockAccumulators);
updateCalendars(message, mockDispatch, mockAccumulators)
await waitFor(() =>
expect(refreshCalendarWithSyncToken).toHaveBeenCalledTimes(2)
);
});
)
})
it("should dispatch for calendar path updates", async () => {
it('should dispatch for calendar path updates', async () => {
const message = {
"/calendars/cal1/entry1": { updated: true },
};
'/calendars/cal1/entry1': { updated: true }
}
updateCalendars(message, mockDispatch, mockAccumulators);
await waitFor(() =>
expect(refreshCalendarWithSyncToken).toHaveBeenCalled()
);
updateCalendars(message, mockDispatch, mockAccumulators)
await waitFor(() => expect(refreshCalendarWithSyncToken).toHaveBeenCalled())
expect(refreshCalendarWithSyncToken).toHaveBeenCalledWith({
calendar: mockState.calendars.list["cal1/entry1"],
calendar: mockState.calendars.list['cal1/entry1'],
calType: undefined,
calendarRange: mockRange,
});
});
calendarRange: mockRange
})
})
it("should use displayed calendar range", async () => {
it('should use displayed calendar range', async () => {
const message = {
"/calendars/cal1/entry1": {},
};
'/calendars/cal1/entry1': {}
}
updateCalendars(message, mockDispatch, mockAccumulators);
await waitFor(() => expect(getDisplayedCalendarRange).toHaveBeenCalled());
});
updateCalendars(message, mockDispatch, mockAccumulators)
await waitFor(() => expect(getDisplayedCalendarRange).toHaveBeenCalled())
})
it("should handle temp calendars", async () => {
it('should handle temp calendars', async () => {
const stateWithTemp = {
calendars: {
list: {},
templist: {
"temp1/entry1": {
id: "temp1/entry1",
name: "Temp Calendar",
syncToken: 1,
},
},
},
};
'temp1/entry1': {
id: 'temp1/entry1',
name: 'Temp Calendar',
syncToken: 1
}
}
}
}
(store.getState as jest.Mock).mockReturnValue(stateWithTemp);
;(store.getState as jest.Mock).mockReturnValue(stateWithTemp)
const message = {
"/calendars/temp1/entry1": {},
};
'/calendars/temp1/entry1': {}
}
updateCalendars(message, mockDispatch, mockAccumulators);
updateCalendars(message, mockDispatch, mockAccumulators)
await waitFor(() =>
expect(refreshCalendarWithSyncToken).toHaveBeenCalledWith({
calendar: stateWithTemp.calendars.templist["temp1/entry1"],
calType: "temp",
calendarRange: mockRange,
calendar: stateWithTemp.calendars.templist['temp1/entry1'],
calType: 'temp',
calendarRange: mockRange
})
);
});
)
})
it("should handle invalid calendar paths gracefully", () => {
it('should handle invalid calendar paths gracefully', () => {
const message = {
"/invalid/path": {},
"not-a-path": {},
};
'/invalid/path': {},
'not-a-path': {}
}
updateCalendars(message, mockDispatch, mockAccumulators);
updateCalendars(message, mockDispatch, mockAccumulators)
expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled();
});
});
expect(refreshCalendarWithSyncToken).not.toHaveBeenCalled()
})
})
__test__/features/websocket/websocketAPI/parseMessage.test.ts
+53 -53
View File
@@ -1,76 +1,76 @@
import { parseMessage } from "@/websocket/messaging/parseMessage";
import { WS_INBOUND_EVENTS } from "@/websocket/protocols";
import { parseMessage } from '@/websocket/messaging/parseMessage'
import { WS_INBOUND_EVENTS } from '@/websocket/protocols'
describe("parseMessage", () => {
it("should return empty set for non-object messages", () => {
const result1 = parseMessage(null);
const result2 = parseMessage("string");
const result3 = parseMessage(123);
describe('parseMessage', () => {
it('should return empty set for non-object messages', () => {
const result1 = parseMessage(null)
const result2 = parseMessage('string')
const result3 = parseMessage(123)
expect(result1.calendarsToRefresh).toEqual(new Set<string>());
expect(result2.calendarsToRefresh).toEqual(new Set<string>());
expect(result3.calendarsToRefresh).toEqual(new Set<string>());
});
expect(result1.calendarsToRefresh).toEqual(new Set<string>())
expect(result2.calendarsToRefresh).toEqual(new Set<string>())
expect(result3.calendarsToRefresh).toEqual(new Set<string>())
})
it("should handle registered event", () => {
it('should handle registered event', () => {
const message = {
[WS_INBOUND_EVENTS.CLIENT_REGISTERED]: [
"/calendars/cal1/entry1",
"/calendars/cal2/entry2",
],
};
'/calendars/cal1/entry1',
'/calendars/cal2/entry2'
]
}
const result = parseMessage(message);
const result = parseMessage(message)
expect(result.calendarsToRefresh).toContain("/calendars/cal1/entry1");
expect(result.calendarsToRefresh).toContain("/calendars/cal2/entry2");
expect(result.calendarsToRefresh.size).toBe(2);
});
expect(result.calendarsToRefresh).toContain('/calendars/cal1/entry1')
expect(result.calendarsToRefresh).toContain('/calendars/cal2/entry2')
expect(result.calendarsToRefresh.size).toBe(2)
})
it("should handle unregistered event", () => {
it('should handle unregistered event', () => {
const message = {
[WS_INBOUND_EVENTS.CLIENT_UNREGISTERED]: ["/calendars/cal1/entry1"],
};
[WS_INBOUND_EVENTS.CLIENT_UNREGISTERED]: ['/calendars/cal1/entry1']
}
const result = parseMessage(message);
const result = parseMessage(message)
expect(result.calendarsToHide).toContain("/calendars/cal1/entry1");
});
expect(result.calendarsToHide).toContain('/calendars/cal1/entry1')
})
it("should handle calendar path updates", () => {
it('should handle calendar path updates', () => {
const message = {
"/calendars/cal1/entry1": { updated: true },
};
'/calendars/cal1/entry1': { updated: true }
}
const result = parseMessage(message);
const result = parseMessage(message)
expect(result.calendarsToRefresh).toContain("/calendars/cal1/entry1");
expect(result.calendarsToRefresh.size).toBe(1);
});
expect(result.calendarsToRefresh).toContain('/calendars/cal1/entry1')
expect(result.calendarsToRefresh.size).toBe(1)
})
it("should parse multiple calendar paths", () => {
it('should parse multiple calendar paths', () => {
const message = {
"/calendars/cal1/entry1": {},
"/calendars/cal2/entry2": {},
};
'/calendars/cal1/entry1': {},
'/calendars/cal2/entry2': {}
}
const result = parseMessage(message);
const result = parseMessage(message)
expect(result.calendarsToRefresh.size).toBe(2);
expect(result.calendarsToRefresh).toContain("/calendars/cal1/entry1");
expect(result.calendarsToRefresh).toContain("/calendars/cal2/entry2");
});
expect(result.calendarsToRefresh.size).toBe(2)
expect(result.calendarsToRefresh).toContain('/calendars/cal1/entry1')
expect(result.calendarsToRefresh).toContain('/calendars/cal2/entry2')
})
it("should handle multiple event types in single message", () => {
it('should handle multiple event types in single message', () => {
const message = {
[WS_INBOUND_EVENTS.CLIENT_REGISTERED]: ["/calendars/cal1/entry1"],
[WS_INBOUND_EVENTS.CLIENT_UNREGISTERED]: ["/calendars/cal2/entry2"],
"/calendars/cal1/entry1": {},
};
[WS_INBOUND_EVENTS.CLIENT_REGISTERED]: ['/calendars/cal1/entry1'],
[WS_INBOUND_EVENTS.CLIENT_UNREGISTERED]: ['/calendars/cal2/entry2'],
'/calendars/cal1/entry1': {}
}
const result = parseMessage(message);
const result = parseMessage(message)
expect(result.calendarsToRefresh.size).toBe(1);
expect(result.calendarsToRefresh).toContain("/calendars/cal1/entry1");
});
});
expect(result.calendarsToRefresh.size).toBe(1)
expect(result.calendarsToRefresh).toContain('/calendars/cal1/entry1')
})
})
__test__/features/websocket/websocketAPI/registerToCalendars.test.tsx
+32 -32
View File
@@ -1,57 +1,57 @@
import { registerToCalendars } from "@/websocket/operations/registerToCalendars";
import { registerToCalendars } from '@/websocket/operations/registerToCalendars'
describe("registerToCalendars", () => {
let mockSocket: any;
describe('registerToCalendars', () => {
let mockSocket: any
beforeEach(() => {
mockSocket = {
readyState: WebSocket.OPEN,
send: jest.fn(),
};
});
send: jest.fn()
}
})
it("should send registration message with calendar URIs", () => {
const calendarURIs = ["/calendars/cal1", "/calendars/cal2"];
it('should send registration message with calendar URIs', () => {
const calendarURIs = ['/calendars/cal1', '/calendars/cal2']
registerToCalendars(mockSocket, calendarURIs);
registerToCalendars(mockSocket, calendarURIs)
expect(mockSocket.send).toHaveBeenCalledWith(
JSON.stringify({
register: calendarURIs,
register: calendarURIs
})
);
});
)
})
it("should throw error if socket is not open", () => {
mockSocket.readyState = WebSocket.CONNECTING;
const calendarURIs = ["/calendars/cal1"];
it('should throw error if socket is not open', () => {
mockSocket.readyState = WebSocket.CONNECTING
const calendarURIs = ['/calendars/cal1']
expect(() => registerToCalendars(mockSocket, calendarURIs)).toThrow(
"Cannot register: WebSocket is not open"
);
});
'Cannot register: WebSocket is not open'
)
})
it("should handle empty calendar list", () => {
registerToCalendars(mockSocket, []);
it('should handle empty calendar list', () => {
registerToCalendars(mockSocket, [])
expect(mockSocket.send).toHaveBeenCalledWith(
JSON.stringify({
register: [],
register: []
})
);
});
)
})
it("should log registration", () => {
const consoleInfoSpy = jest.spyOn(console, "info").mockImplementation();
const calendarURIs = ["/calendars/cal1", "/calendars/cal2"];
it('should log registration', () => {
const consoleInfoSpy = jest.spyOn(console, 'info').mockImplementation()
const calendarURIs = ['/calendars/cal1', '/calendars/cal2']
registerToCalendars(mockSocket, calendarURIs);
registerToCalendars(mockSocket, calendarURIs)
expect(consoleInfoSpy).toHaveBeenCalledWith(
"Registered to calendars",
'Registered to calendars',
calendarURIs
);
)
consoleInfoSpy.mockRestore();
});
});
consoleInfoSpy.mockRestore()
})
})
__test__/features/websocket/websocketAPI/unregisterToCalendars.test.tsx
+33 -33
View File
@@ -1,58 +1,58 @@
import { unregisterToCalendars } from "@/websocket/operations/unregisterToCalendars";
import { unregisterToCalendars } from '@/websocket/operations/unregisterToCalendars'
describe("unregisterToCalendars", () => {
let mockSocket: any;
describe('unregisterToCalendars', () => {
let mockSocket: any
beforeEach(() => {
mockSocket = {
readyState: WebSocket.OPEN,
send: jest.fn(),
};
jest.clearAllMocks();
});
send: jest.fn()
}
jest.clearAllMocks()
})
it("should send unregistration message with calendar URIs", () => {
const calendarURIs = ["/calendars/cal1", "/calendars/cal2"];
it('should send unregistration message with calendar URIs', () => {
const calendarURIs = ['/calendars/cal1', '/calendars/cal2']
unregisterToCalendars(mockSocket, calendarURIs);
unregisterToCalendars(mockSocket, calendarURIs)
expect(mockSocket.send).toHaveBeenCalledWith(
JSON.stringify({
unregister: calendarURIs,
unregister: calendarURIs
})
);
});
)
})
it("should throw error if socket is not open", () => {
mockSocket.readyState = WebSocket.CONNECTING;
const calendarURIs = ["/calendars/cal1"];
it('should throw error if socket is not open', () => {
mockSocket.readyState = WebSocket.CONNECTING
const calendarURIs = ['/calendars/cal1']
expect(() => unregisterToCalendars(mockSocket, calendarURIs)).toThrow(
"Cannot unregister: WebSocket is not open"
);
});
'Cannot unregister: WebSocket is not open'
)
})
it("should handle empty calendar list", () => {
unregisterToCalendars(mockSocket, []);
it('should handle empty calendar list', () => {
unregisterToCalendars(mockSocket, [])
expect(mockSocket.send).toHaveBeenCalledWith(
JSON.stringify({
unregister: [],
unregister: []
})
);
});
)
})
it("should log unregistration", () => {
const consoleInfoSpy = jest.spyOn(console, "info").mockImplementation();
const calendarURIs = ["/calendars/cal1", "/calendars/cal2"];
it('should log unregistration', () => {
const consoleInfoSpy = jest.spyOn(console, 'info').mockImplementation()
const calendarURIs = ['/calendars/cal1', '/calendars/cal2']
unregisterToCalendars(mockSocket, calendarURIs);
unregisterToCalendars(mockSocket, calendarURIs)
expect(consoleInfoSpy).toHaveBeenCalledWith(
"Unregistered to calendars",
'Unregistered to calendars',
calendarURIs
);
)
consoleInfoSpy.mockRestore();
});
});
consoleInfoSpy.mockRestore()
})
})