Skip to content

Commit a4b5e39

Browse files
author
Ahtesham Quraish
committed
rebase with main
2 parents 34b1879 + 2feb214 commit a4b5e39

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+889
-818
lines changed

‎frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@
22

33
import React from "react"
44
import { useArticleDetailRetrieve } from "api/hooks/articles"
5-
import { LoadingSpinner, ArticleEditor } from "ol-components"
5+
import { LoadingSpinner, ArticleEditor, styled } from "ol-components"
66
import { notFound } from "next/navigation"
77
import { useFeatureFlagEnabled } from "posthog-js/react"
88
import { FeatureFlags } from "@/common/feature_flags"
99

10+
const PageContainer = styled.div({
11+
display: "flex",
12+
height: "100%",
13+
})
14+
1015
export const ArticleDetailPage = ({ articleId }: { articleId: string }) => {
1116
const {
1217
data: article,
@@ -24,5 +29,9 @@ export const ArticleDetailPage = ({ articleId }: { articleId: string }) => {
2429
if (!article || !showArticleDetail) {
2530
return notFound()
2631
}
27-
return <ArticleEditor article={article} readOnly />
32+
return (
33+
<PageContainer>
34+
<ArticleEditor article={article} readOnly />
35+
</PageContainer>
36+
)
2837
}

‎frontends/main/src/app-pages/Articles/ArticleEditPage.test.tsx‎

Lines changed: 84 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React from "react"
2-
import { screen, renderWithProviders, setMockResponse } from "@/test-utils"
3-
import { factories, urls } from "api/test-utils"
2+
import {
3+
screen,
4+
renderWithProviders,
5+
setMockResponse,
6+
fireEvent,
7+
user as userEvent,
8+
} from "@/test-utils"
9+
import { factories, urls, makeRequest } from "api/test-utils"
410
import { ArticleEditPage } from "./ArticleEditPage"
11+
import { waitFor } from "@testing-library/react"
512

613
const mockPush = jest.fn()
714

@@ -11,7 +18,12 @@ jest.mock("next-nprogress-bar", () => ({
1118
}),
1219
}))
1320

14-
describe("ArticleEditPage", () => {
21+
// eslint-disable-next-line jest/no-disabled-tests
22+
describe.skip("ArticleEditPage", () => {
23+
// Skipping tests: Tiptap Editor uses contentediable elements
24+
// and accesses DOM APIs not available in React Testing Library / JSDOM
25+
// Errors e.g. TypeError: target.getClientRects is not a function
26+
1527
test("renders editor when user has ArticleEditor permission", async () => {
1628
const consoleWarnSpy = jest
1729
.spyOn(console, "warn")
@@ -24,13 +36,11 @@ describe("ArticleEditPage", () => {
2436
return
2537
}
2638
})
27-
2839
const user = factories.user.user({
2940
is_authenticated: true,
3041
is_article_editor: true,
3142
})
3243
setMockResponse.get(urls.userMe.get(), user)
33-
3444
const article = factories.articles.article({
3545
id: 42,
3646
title: "Existing Title",
@@ -51,103 +61,77 @@ describe("ArticleEditPage", () => {
5161
)
5262

5363
renderWithProviders(<ArticleEditPage articleId={"42"} />)
54-
5564
await screen.findByTestId("editor")
56-
5765
expect(screen.getByText("Existing Title")).toBeInTheDocument()
58-
5966
consoleWarnSpy.mockRestore()
6067
})
61-
62-
// Commented out tests: Tiptap Editor uses contentediable elements
63-
// and accesses DOM APIs not available in React Testing Library / JSDOM
64-
// Errors e.g. TypeError: target.getClientRects is not a function
65-
//
66-
// test("submits article successfully", async () => {
67-
// const user = factories.user.user({
68-
// is_authenticated: true,
69-
// is_article_editor: true,
70-
// })
71-
// setMockResponse.get(urls.userMe.get(), user)
72-
73-
// const article = factories.articles.article({
74-
// id: 123,
75-
// title: "Existing Title",
76-
// content: {
77-
// type: "doc",
78-
// content: [
79-
// {
80-
// type: "paragraph",
81-
// content: [{ type: "text", text: "Existing Title" }],
82-
// },
83-
// ],
84-
// },
85-
// })
86-
// setMockResponse.get(urls.articles.details(article.id), article)
87-
88-
// const updated = { ...article, title: "Updated Title" }
89-
// setMockResponse.patch(urls.articles.details(article.id), updated)
90-
91-
// renderWithProviders(<ArticleEditPage articleId={"123"} />)
92-
93-
// await screen.findByTestId("editor")
94-
95-
// const titleInput = await screen.findByPlaceholderText("Article title")
96-
97-
// fireEvent.change(titleInput, { target: { value: "Updated Title" } })
98-
99-
// await waitFor(() => expect(titleInput).toHaveValue("Updated Title"))
100-
101-
// await userEvent.click(screen.getByRole("button", { name: "Save" }))
102-
103-
// await waitFor(() =>
104-
// expect(makeRequest).toHaveBeenCalledWith(
105-
// "patch",
106-
// urls.articles.details(article.id),
107-
// expect.objectContaining({ title: "Updated Title" }),
108-
// ),
109-
// )
110-
111-
// await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/articles/123"))
112-
// })
113-
114-
// test("shows error alert on failure", async () => {
115-
// const user = factories.user.user({
116-
// is_authenticated: true,
117-
// is_article_editor: true,
118-
// })
119-
// setMockResponse.get(urls.userMe.get(), user)
120-
121-
// const article = factories.articles.article({
122-
// id: 7,
123-
// title: "Old Title",
124-
// content: {
125-
// type: "doc",
126-
// content: [
127-
// {
128-
// type: "paragraph",
129-
// content: [{ type: "text", text: "Article Title" }],
130-
// },
131-
// ],
132-
// },
133-
// })
134-
// setMockResponse.get(urls.articles.details(article.id), article)
135-
136-
// setMockResponse.patch(
137-
// urls.articles.details(article.id),
138-
// { detail: "Server Error" },
139-
// { code: 500 },
140-
// )
141-
142-
// renderWithProviders(<ArticleEditPage articleId={"7"} />)
143-
144-
// await screen.findByTestId("editor")
145-
146-
// const titleInput = await screen.findByPlaceholderText("Article title")
147-
// fireEvent.change(titleInput, { target: { value: "Bad Article" } })
148-
149-
// await userEvent.click(screen.getByRole("button", { name: "Save" }))
150-
151-
// expect(await screen.findByText(/Mock Error/i)).toBeInTheDocument()
152-
// })
68+
test("submits article successfully", async () => {
69+
const user = factories.user.user({
70+
is_authenticated: true,
71+
is_article_editor: true,
72+
})
73+
setMockResponse.get(urls.userMe.get(), user)
74+
const article = factories.articles.article({
75+
id: 123,
76+
title: "Existing Title",
77+
content: {
78+
type: "doc",
79+
content: [
80+
{
81+
type: "paragraph",
82+
content: [{ type: "text", text: "Existing Title" }],
83+
},
84+
],
85+
},
86+
})
87+
setMockResponse.get(urls.articles.details(article.id), article)
88+
const updated = { ...article, title: "Updated Title" }
89+
setMockResponse.patch(urls.articles.details(article.id), updated)
90+
renderWithProviders(<ArticleEditPage articleId={"123"} />)
91+
await screen.findByTestId("editor")
92+
const titleInput = await screen.findByPlaceholderText("Article title")
93+
fireEvent.change(titleInput, { target: { value: "Updated Title" } })
94+
await waitFor(() => expect(titleInput).toHaveValue("Updated Title"))
95+
await userEvent.click(screen.getByRole("button", { name: "Save" }))
96+
await waitFor(() =>
97+
expect(makeRequest).toHaveBeenCalledWith(
98+
"patch",
99+
urls.articles.details(article.id),
100+
expect.objectContaining({ title: "Updated Title" }),
101+
),
102+
)
103+
await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/articles/123"))
104+
})
105+
test("shows error alert on failure", async () => {
106+
const user = factories.user.user({
107+
is_authenticated: true,
108+
is_article_editor: true,
109+
})
110+
setMockResponse.get(urls.userMe.get(), user)
111+
const article = factories.articles.article({
112+
id: 7,
113+
title: "Old Title",
114+
content: {
115+
type: "doc",
116+
content: [
117+
{
118+
type: "paragraph",
119+
content: [{ type: "text", text: "Article Title" }],
120+
},
121+
],
122+
},
123+
})
124+
setMockResponse.get(urls.articles.details(article.id), article)
125+
setMockResponse.patch(
126+
urls.articles.details(article.id),
127+
{ detail: "Server Error" },
128+
{ code: 500 },
129+
)
130+
renderWithProviders(<ArticleEditPage articleId={"7"} />)
131+
await screen.findByTestId("editor")
132+
const titleInput = await screen.findByPlaceholderText("Article title")
133+
fireEvent.change(titleInput, { target: { value: "Bad Article" } })
134+
await userEvent.click(screen.getByRole("button", { name: "Save" }))
135+
expect(await screen.findByText(/Mock Error/i)).toBeInTheDocument()
136+
})
153137
})

‎frontends/main/src/app-pages/Articles/ArticleEditPage.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,13 @@ import { notFound } from "next/navigation"
66
import { Permission } from "api/hooks/user"
77
import { useArticleDetailRetrieve } from "api/hooks/articles"
88
import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
9-
import {
10-
styled,
11-
LoadingSpinner,
12-
ArticleEditor,
13-
HEADER_HEIGHT,
14-
} from "ol-components"
9+
import { styled, LoadingSpinner, ArticleEditor } from "ol-components"
1510
import { articlesView } from "@/common/urls"
1611

1712
const PageContainer = styled.div(({ theme }) => ({
1813
color: theme.custom.colors.darkGray2,
1914
display: "flex",
20-
height: `calc(100vh - ${HEADER_HEIGHT}px - 132px)`,
15+
height: "100%",
2116
}))
2217

2318
const ArticleEditPage = ({ articleId }: { articleId: string }) => {

‎frontends/main/src/app-pages/Articles/ArticleNewPage.test.tsx‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
renderWithProviders,
55
setMockResponse,
66
TestingErrorBoundary,
7+
fireEvent,
8+
user as userEvent,
79
} from "@/test-utils"
810
import { waitFor } from "@testing-library/react"
911
import { factories, urls } from "api/test-utils"
@@ -40,7 +42,11 @@ describe("ArticleNewPage", () => {
4042
consoleSpy.mockRestore()
4143
})
4244

43-
test("renders editor when user has ArticleEditor permission", async () => {
45+
// Skipping tests: Tiptap Editor uses contentediable elements
46+
// and accesses DOM APIs not available in React Testing Library / JSDOM
47+
// Errors e.g. TypeError: target.getClientRects is not a function
48+
// eslint-disable-next-line jest/no-disabled-tests
49+
test.skip("renders editor when user has ArticleEditor permission", async () => {
4450
const consoleWarnSpy = jest
4551
.spyOn(console, "warn")
4652
.mockImplementation((message) => {
@@ -65,60 +71,58 @@ describe("ArticleNewPage", () => {
6571
consoleWarnSpy.mockRestore()
6672
})
6773

68-
// Commented out tests: Tiptap Editor uses contentediable elements
69-
// and accesses DOM APIs not available in React Testing Library / JSDOM
70-
// Errors e.g. TypeError: target.getClientRects is not a function
71-
//
72-
// test("submits article successfully", async () => {
73-
// const user = factories.user.user({
74-
// is_authenticated: true,
75-
// is_article_editor: true,
76-
// })
77-
// setMockResponse.get(urls.userMe.get(), user)
74+
// eslint-disable-next-line jest/no-disabled-tests
75+
test.skip("submits article successfully", async () => {
76+
const user = factories.user.user({
77+
is_authenticated: true,
78+
is_article_editor: true,
79+
})
80+
setMockResponse.get(urls.userMe.get(), user)
7881

79-
// const createdArticle = factories.articles.article({ id: 101 })
80-
// setMockResponse.post(urls.articles.list(), createdArticle)
82+
const createdArticle = factories.articles.article({ id: 101 })
83+
setMockResponse.post(urls.articles.list(), createdArticle)
8184

82-
// renderWithProviders(<ArticleNewPage />)
85+
renderWithProviders(<ArticleNewPage />)
8386

84-
// await screen.findByTestId("editor")
87+
await screen.findByTestId("editor")
8588

86-
// const titleInput = await screen.findByPlaceholderText("Article title")
87-
// fireEvent.change(titleInput, { target: { value: "My Article" } })
88-
// await waitFor(() => expect(titleInput).toHaveValue("My Article"))
89+
const titleInput = await screen.findByPlaceholderText("Article title")
90+
fireEvent.change(titleInput, { target: { value: "My Article" } })
91+
await waitFor(() => expect(titleInput).toHaveValue("My Article"))
8992

90-
// await userEvent.click(screen.getByRole("button", { name: "Save" }))
93+
await userEvent.click(screen.getByRole("button", { name: "Save" }))
9194

92-
// await waitFor(() =>
93-
// expect(mockPush).toHaveBeenCalledWith("/articles/101", undefined),
94-
// )
95-
// })
95+
await waitFor(() =>
96+
expect(mockPush).toHaveBeenCalledWith("/articles/101", undefined),
97+
)
98+
})
9699

97-
// test("shows error on failure", async () => {
98-
// const user = factories.user.user({
99-
// is_authenticated: true,
100-
// is_article_editor: true,
101-
// })
102-
// setMockResponse.get(urls.userMe.get(), user)
100+
// eslint-disable-next-line jest/no-disabled-tests
101+
test.skip("shows error on failure", async () => {
102+
const user = factories.user.user({
103+
is_authenticated: true,
104+
is_article_editor: true,
105+
})
106+
setMockResponse.get(urls.userMe.get(), user)
103107

104-
// setMockResponse.post(
105-
// urls.articles.list(),
106-
// { detail: "Server error" },
107-
// { code: 500 },
108-
// )
108+
setMockResponse.post(
109+
urls.articles.list(),
110+
{ detail: "Server error" },
111+
{ code: 500 },
112+
)
109113

110-
// renderWithProviders(<ArticleNewPage />)
114+
renderWithProviders(<ArticleNewPage />)
111115

112-
// await screen.findByTestId("editor")
116+
await screen.findByTestId("editor")
113117

114-
// await screen.findByPlaceholderText("Article title")
118+
await screen.findByPlaceholderText("Article title")
115119

116-
// fireEvent.change(screen.getByPlaceholderText("Article title"), {
117-
// target: { value: "My Article" },
118-
// })
119-
// await userEvent.click(screen.getByTestId("editor"))
120-
// await userEvent.click(screen.getByRole("button", { name: "Save" }))
120+
fireEvent.change(screen.getByPlaceholderText("Article title"), {
121+
target: { value: "My Article" },
122+
})
123+
await userEvent.click(screen.getByTestId("editor"))
124+
await userEvent.click(screen.getByRole("button", { name: "Save" }))
121125

122-
// expect(await screen.findByText(/Mock Error/)).toBeInTheDocument()
123-
// })
126+
expect(await screen.findByText(/Mock Error/)).toBeInTheDocument()
127+
})
124128
})

0 commit comments

Comments
 (0)