rescript-lang.org/__tests__/SidebarNav_.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 mockCategory: SidebarNav.Category.t = {
  name: "Overview",
  items: [
    {name: "Introduction", href: "/docs/manual/introduction"},
    {name: "Installation", href: "/docs/manual/installation"},
    {name: "Getting Started", href: "/docs/manual/getting-started"},
  ],
}

test("sidebar category renders title and nav items", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="category-wrapper">
        <SidebarNav.Category category=mockCategory onClick={_ => ()} />
      </div>
    </BrowserRouter>,
  )

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

  let installation = await screen->getByText("Installation")
  await element(installation)->toBeVisible

  let gettingStarted = await screen->getByText("Getting Started")
  await element(gettingStarted)->toBeVisible

  let wrapper = await screen->getByTestId("category-wrapper")
  await element(wrapper)->toMatchScreenshot("sidebar-category")
})

test("sidebar category highlights active item", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="category-wrapper">
        <SidebarNav.Category
          category=mockCategory
          isItemActive={item => item.href == "/docs/manual/introduction"}
          onClick={_ => ()}
        />
      </div>
    </BrowserRouter>,
  )

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

  let wrapper = await screen->getByTestId("category-wrapper")
  await element(wrapper)->toMatchScreenshot("sidebar-category-active-item")
})

let mockTocEntries: TableOfContents.t = {
  title: "Introduction",
  entries: [
    {header: "What is ReScript", href: "#what-is-rescript"},
    {header: "Basic Usage", href: "#basic-usage"},
    {header: "Advanced", href: "#advanced"},
  ],
}

test("sidebar category with active TOC renders entries", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
      <div dataTestId="toc-wrapper">
        <SidebarNav.Category
          category=mockCategory
          isItemActive={item => item.href == "/docs/manual/introduction"}
          getActiveToc={item =>
            if item.href == "/docs/manual/introduction" {
              Some(mockTocEntries)
            } else {
              None
            }}
          onClick={() => ()}
        />
      </div>
    </MemoryRouter>,
  )

  let overview = await screen->getByText("What is ReScript")
  await element(overview)->toBeVisible

  let basicUsage = await screen->getByText("Basic Usage")
  await element(basicUsage)->toBeVisible

  let advanced = await screen->getByText("Advanced")
  await element(advanced)->toBeVisible

  let wrapper = await screen->getByTestId("toc-wrapper")
  await element(wrapper)->toMatchScreenshot("sidebar-category-with-toc")
})

test("sidebar category with many items", async () => {
  await viewport(1440, 900)

  let largeCategory: SidebarNav.Category.t = {
    name: "All Types",
    items: [
      {name: "String", href: "/docs/manual/string"},
      {name: "Int", href: "/docs/manual/int"},
      {name: "Float", href: "/docs/manual/float"},
      {name: "Bool", href: "/docs/manual/bool"},
      {name: "Array", href: "/docs/manual/array"},
      {name: "List", href: "/docs/manual/list"},
      {name: "Option", href: "/docs/manual/option"},
      {name: "Result", href: "/docs/manual/result"},
    ],
  }

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="category-wrapper">
        <SidebarNav.Category category=largeCategory onClick={_ => ()} />
      </div>
    </BrowserRouter>,
  )

  let stringItem = await screen->getByText("String")
  await element(stringItem)->toBeVisible

  let resultItem = await screen->getByText("Result")
  await element(resultItem)->toBeVisible

  let wrapper = await screen->getByTestId("category-wrapper")
  await element(wrapper)->toMatchScreenshot("sidebar-category-many-items")
})