rescript-lang.org/__tests__/ApiOverviewLayout_.test.res at db78dffa27f22d0b3f885530e5bcde5dc3f05ca9 · rescript-lang/rescript-lang.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
open ReactRouter
open Vitest

let categories: array<SidebarNav.Category.t> = [
  {
    name: "Overview",
    items: [
      {name: "Introduction", href: "/docs/manual/api"},
      {name: "Stdlib", href: "/docs/manual/api/stdlib"},
    ],
  },
  {
    name: "Additional Libraries",
    items: [
      {name: "Belt", href: "/docs/manual/api/belt"},
      {name: "Dom", href: "/docs/manual/api/dom"},
    ],
  },
]

test("desktop API overview shows sidebar categories and content", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <MemoryRouter initialEntries=["/docs/manual/api"]>
      <div dataTestId="api-overview-wrapper">
        <DocsLayout categories theme=#Js>
          <div> {React.string("API documentation content.")} </div>
        </DocsLayout>
      </div>
    </MemoryRouter>,
  )

  let sidebar = await screen->getByTestId("sidebar-content")

  let overview = await sidebar->getByText("Overview")
  await element(overview)->toBeVisible

  let introduction = await sidebar->getByText("Introduction")
  await element(introduction)->toBeVisible

  let stdlib = await sidebar->getByText("Stdlib")
  await element(stdlib)->toBeVisible

  let additionalLibraries = await sidebar->getByText("Additional Libraries")
  await element(additionalLibraries)->toBeVisible

  let belt = await sidebar->getByText("Belt")
  await element(belt)->toBeVisible

  let dom = await sidebar->getByText("Dom")
  await element(dom)->toBeVisible

  let mainContent = await screen->getByTestId("side-layout-children")
  await element(mainContent)->toBeVisible

  let wrapper = await screen->getByTestId("api-overview-wrapper")
  await element(wrapper)->toMatchScreenshot("desktop-api-overview")
})

test("mobile API overview hides sidebar", async () => {
  await viewport(600, 1200)

  let screen = await render(
    <MemoryRouter initialEntries=["/docs/manual/api"]>
      <div dataTestId="api-overview-wrapper">
        <DocsLayout categories theme=#Js>
          <div> {React.string("API documentation content.")} </div>
        </DocsLayout>
      </div>
    </MemoryRouter>,
  )

  let sidebar = await screen->getByTestId("sidebar-content")

  let introduction = await sidebar->getByText("Introduction")
  await element(introduction)->notToBeVisible

  let stdlib = await sidebar->getByText("Stdlib")
  await element(stdlib)->notToBeVisible

  let belt = await sidebar->getByText("Belt")
  await element(belt)->notToBeVisible

  let wrapper = await screen->getByTestId("api-overview-wrapper")
  await element(wrapper)->toMatchScreenshot("mobile-api-overview")
})

test("desktop API overview shows all category items", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <MemoryRouter initialEntries=["/docs/manual/api"]>
      <div dataTestId="api-overview-wrapper">
        <DocsLayout categories theme=#Js>
          <div>
            <Markdown.H1> {React.string("API Reference")} </Markdown.H1>
            <Markdown.P> {React.string("Welcome to the ReScript API documentation.")} </Markdown.P>
          </div>
        </DocsLayout>
      </div>
    </MemoryRouter>,
  )

  let apiTitle = await screen->getByText("API Reference")
  await element(apiTitle)->toBeVisible

  let apiDescription = await screen->getByText("Welcome to the ReScript API documentation.")
  await element(apiDescription)->toBeVisible

  let wrapper = await screen->getByTestId("api-overview-wrapper")
  await element(wrapper)->toMatchScreenshot("desktop-api-overview-with-content")
})

test("tablet API overview", async () => {
  await viewport(900, 900)

  let screen = await render(
    <MemoryRouter initialEntries=["/docs/manual/api"]>
      <div dataTestId="api-overview-wrapper">
        <DocsLayout categories theme=#Js>
          <div> {React.string("API documentation content.")} </div>
        </DocsLayout>
      </div>
    </MemoryRouter>,
  )

  let sidebar = await screen->getByTestId("sidebar-content")

  let overview = await sidebar->getByText("Overview")
  await element(overview)->toBeVisible

  let wrapper = await screen->getByTestId("api-overview-wrapper")
  await element(wrapper)->toMatchScreenshot("tablet-api-overview")
})