Skip to content

Commit 7a795cf

Browse files
jderochervlkjderochervlk
authored
tests: add more unit tests to cover markdown related components (#1211)
* tests: add more unit tests to cover markdown related components * more unit tests * fix failing tests * chore: update vitest screenshots [skip ci]
1 parent b7f5d41 commit 7a795cf

171 files changed

Lines changed: 2185 additions & 0 deletions

File tree

Some content is hidden

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

‎__tests__/ApiLayout_.test.res‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
open ReactRouter
2+
open Vitest
3+
4+
let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
5+
{
6+
name: "Stdlib",
7+
items: [
8+
{name: "Array", href: "/docs/manual/api/stdlib/array"},
9+
{name: "String", href: "/docs/manual/api/stdlib/string"},
10+
{name: "Option", href: "/docs/manual/api/stdlib/option"},
11+
],
12+
},
13+
{
14+
name: "Belt",
15+
items: [
16+
{name: "Belt.Array", href: "/docs/manual/api/belt/array"},
17+
{name: "Belt.Map", href: "/docs/manual/api/belt/map"},
18+
],
19+
},
20+
]
21+
22+
test("desktop API layout shows sidebar categories and version select", async () => {
23+
await viewport(1440, 900)
24+
25+
let screen = await render(
26+
<MemoryRouter initialEntries=["/docs/manual/api/stdlib/array"]>
27+
<div dataTestId="api-layout-wrapper">
28+
<ApiLayout categories=mockCategories>
29+
<div> {React.string("API documentation for Array module.")} </div>
30+
</ApiLayout>
31+
</div>
32+
</MemoryRouter>,
33+
)
34+
35+
let stdlib = await screen->getByText("Stdlib")
36+
await element(stdlib)->toBeVisible
37+
38+
let belt = await screen->getByTextExact("Belt")
39+
await element(belt)->toBeVisible
40+
41+
let array = await screen->getByTextExact("Array")
42+
await element(array)->toBeVisible
43+
44+
let wrapper = await screen->getByTestId("api-layout-wrapper")
45+
await element(wrapper)->toMatchScreenshot("desktop-api-layout")
46+
})
47+
48+
test("mobile API layout hides sidebar", async () => {
49+
await viewport(600, 1200)
50+
51+
let screen = await render(
52+
<MemoryRouter initialEntries=["/docs/manual/api/stdlib/array"]>
53+
<div dataTestId="api-layout-wrapper">
54+
<ApiLayout categories=mockCategories>
55+
<div> {React.string("API documentation for Array module.")} </div>
56+
</ApiLayout>
57+
</div>
58+
</MemoryRouter>,
59+
)
60+
61+
let stdlib = await screen->getByText("Stdlib")
62+
await element(stdlib)->notToBeVisible
63+
64+
let content = await screen->getByTestId("side-layout-children")
65+
await element(content)->toBeVisible
66+
67+
let wrapper = await screen->getByTestId("api-layout-wrapper")
68+
await element(wrapper)->toMatchScreenshot("mobile-api-layout")
69+
})
70+
71+
test("old docs warning shows version info", async () => {
72+
await viewport(1440, 500)
73+
74+
let screen = await render(
75+
<BrowserRouter>
76+
<div dataTestId="old-docs-warning-wrapper">
77+
<ApiLayout.OldDocsWarning version="v11.0.0" route=%raw(`"/docs/manual/v11.0.0/api"`) />
78+
</div>
79+
</BrowserRouter>,
80+
)
81+
82+
let warningText = await screen->getByText("here")
83+
await element(warningText)->toBeVisible
84+
85+
let wrapper = await screen->getByTestId("old-docs-warning-wrapper")
86+
await element(wrapper)->toMatchScreenshot("api-old-docs-warning")
87+
})

‎__tests__/ApiOverviewLayout_.test.res‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
open ReactRouter
2+
open Vitest
3+
4+
test("desktop API overview shows sidebar categories and content", async () => {
5+
await viewport(1440, 900)
6+
7+
let screen = await render(
8+
<BrowserRouter>
9+
<div dataTestId="api-overview-wrapper">
10+
<ApiOverviewLayout.Docs>
11+
<div> {React.string("API documentation content.")} </div>
12+
</ApiOverviewLayout.Docs>
13+
</div>
14+
</BrowserRouter>,
15+
)
16+
17+
let overview = await screen->getByText("Overview")
18+
await element(overview)->toBeVisible
19+
20+
let introduction = await screen->getByText("Introduction")
21+
await element(introduction)->toBeVisible
22+
23+
let stdlib = await screen->getByText("Stdlib")
24+
await element(stdlib)->toBeVisible
25+
26+
let additionalLibraries = await screen->getByText("Additional Libraries")
27+
await element(additionalLibraries)->toBeVisible
28+
29+
let belt = await screen->getByText("Belt")
30+
await element(belt)->toBeVisible
31+
32+
let dom = await screen->getByText("Dom")
33+
await element(dom)->toBeVisible
34+
35+
let mainContent = await screen->getByTestId("side-layout-children")
36+
await element(mainContent)->toBeVisible
37+
38+
let wrapper = await screen->getByTestId("api-overview-wrapper")
39+
await element(wrapper)->toMatchScreenshot("desktop-api-overview")
40+
})
41+
42+
test("mobile API overview hides sidebar", async () => {
43+
await viewport(600, 1200)
44+
45+
let screen = await render(
46+
<BrowserRouter>
47+
<div dataTestId="api-overview-wrapper">
48+
<ApiOverviewLayout.Docs>
49+
<div> {React.string("API documentation content.")} </div>
50+
</ApiOverviewLayout.Docs>
51+
</div>
52+
</BrowserRouter>,
53+
)
54+
55+
let introduction = await screen->getByText("Introduction")
56+
await element(introduction)->notToBeVisible
57+
58+
let stdlib = await screen->getByText("Stdlib")
59+
await element(stdlib)->notToBeVisible
60+
61+
let belt = await screen->getByText("Belt")
62+
await element(belt)->notToBeVisible
63+
64+
let wrapper = await screen->getByTestId("api-overview-wrapper")
65+
await element(wrapper)->toMatchScreenshot("mobile-api-overview")
66+
})
67+
68+
test("desktop API overview shows all category items", async () => {
69+
await viewport(1440, 900)
70+
71+
let screen = await render(
72+
<BrowserRouter>
73+
<div dataTestId="api-overview-wrapper">
74+
<ApiOverviewLayout.Docs>
75+
<div>
76+
<Markdown.H1> {React.string("API Reference")} </Markdown.H1>
77+
<Markdown.P> {React.string("Welcome to the ReScript API documentation.")} </Markdown.P>
78+
</div>
79+
</ApiOverviewLayout.Docs>
80+
</div>
81+
</BrowserRouter>,
82+
)
83+
84+
let apiTitle = await screen->getByText("API Reference")
85+
await element(apiTitle)->toBeVisible
86+
87+
let apiDescription = await screen->getByText("Welcome to the ReScript API documentation.")
88+
await element(apiDescription)->toBeVisible
89+
90+
let wrapper = await screen->getByTestId("api-overview-wrapper")
91+
await element(wrapper)->toMatchScreenshot("desktop-api-overview-with-content")
92+
})
93+
94+
test("tablet API overview", async () => {
95+
await viewport(900, 900)
96+
97+
let screen = await render(
98+
<BrowserRouter>
99+
<div dataTestId="api-overview-wrapper">
100+
<ApiOverviewLayout.Docs>
101+
<div> {React.string("API documentation content.")} </div>
102+
</ApiOverviewLayout.Docs>
103+
</div>
104+
</BrowserRouter>,
105+
)
106+
107+
let overview = await screen->getByText("Overview")
108+
await element(overview)->toBeVisible
109+
110+
let wrapper = await screen->getByTestId("api-overview-wrapper")
111+
await element(wrapper)->toMatchScreenshot("tablet-api-overview")
112+
})

‎__tests__/Banner_.test.res‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
open Vitest
2+
3+
test("renders banner with content", async () => {
4+
await viewport(1440, 500)
5+
6+
let screen = await render(
7+
<div dataTestId="banner-wrapper">
8+
<Banner> {React.string("ReScript v12 is now available!")} </Banner>
9+
</div>,
10+
)
11+
12+
let text = await screen->getByText("ReScript v12 is now available!")
13+
await element(text)->toBeVisible
14+
15+
let wrapper = await screen->getByTestId("banner-wrapper")
16+
await element(wrapper)->toMatchScreenshot("banner-with-content")
17+
})
18+
19+
test("mobile banner", async () => {
20+
await viewport(600, 500)
21+
22+
let screen = await render(
23+
<div dataTestId="banner-wrapper">
24+
<Banner> {React.string("ReScript v12 is now available!")} </Banner>
25+
</div>,
26+
)
27+
28+
let text = await screen->getByText("ReScript v12 is now available!")
29+
await element(text)->toBeVisible
30+
31+
let wrapper = await screen->getByTestId("banner-wrapper")
32+
await element(wrapper)->toMatchScreenshot("mobile-banner")
33+
})

0 commit comments

Comments
 (0)