rescript-lang.org/apps/docs/__tests__/CommunityLayout_.test.res at 0a30954ecfc68acb4922ed907da746d76712a9fd · 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
open ReactRouter
open Vitest

let mockCategories: array<SidebarNav.Category.t> = [
  {
    name: "Resources",
    items: [
      {name: "Overview", href: "/community/overview"},
      {name: "Code of Conduct", href: "/community/code-of-conduct"},
      {name: "Roadmap", href: "/community/roadmap"},
    ],
  },
]

let mockEntries: array<TableOfContents.entry> = [
  {header: "Official Channels", href: "#official-channels"},
  {header: "Community Projects", href: "#community-projects"},
]

test("desktop community layout shows sidebar and content", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="community-layout-wrapper">
        <CommunityLayout categories=mockCategories entries=mockEntries>
          <div> {React.string("Community content goes here.")} </div>
        </CommunityLayout>
      </div>
    </BrowserRouter>,
  )

  let resources = await screen->getByText("Resources")
  await element(resources)->toBeVisible

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

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

  let wrapper = await screen->getByTestId("community-layout-wrapper")
  await element(wrapper)->toMatchScreenshot("desktop-community-layout")
})

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

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="community-layout-wrapper">
        <CommunityLayout categories=mockCategories entries=mockEntries>
          <div> {React.string("Community content goes here.")} </div>
        </CommunityLayout>
      </div>
    </BrowserRouter>,
  )

  let resources = await screen->getByText("Resources")
  await element(resources)->notToBeVisible

  let overview = await screen->getByText("Overview")
  await element(overview)->notToBeVisible

  let wrapper = await screen->getByTestId("community-layout-wrapper")
  await element(wrapper)->toMatchScreenshot("mobile-community-layout")
})

let mockMultipleCategories: array<SidebarNav.Category.t> = [
  {
    name: "Resources",
    items: [
      {name: "Overview", href: "/community/overview"},
      {name: "Code of Conduct", href: "/community/code-of-conduct"},
    ],
  },
  {
    name: "Get Involved",
    items: [
      {name: "Contributing", href: "/community/contributing"},
      {name: "Events", href: "/community/events"},
    ],
  },
]

test("desktop community layout with multiple categories", async () => {
  await viewport(1440, 900)

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="community-layout-wrapper">
        <CommunityLayout categories=mockMultipleCategories entries=mockEntries>
          <div> {React.string("Community content with multiple categories.")} </div>
        </CommunityLayout>
      </div>
    </BrowserRouter>,
  )

  let resources = await screen->getByText("Resources")
  await element(resources)->toBeVisible

  let getInvolved = await screen->getByText("Get Involved")
  await element(getInvolved)->toBeVisible

  let contributing = await screen->getByText("Contributing")
  await element(contributing)->toBeVisible

  let wrapper = await screen->getByTestId("community-layout-wrapper")
  await element(wrapper)->toMatchScreenshot("desktop-community-layout-multi-categories")
})

test("tablet community layout", async () => {
  await viewport(900, 900)

  let screen = await render(
    <BrowserRouter>
      <div dataTestId="community-layout-wrapper">
        <CommunityLayout categories=mockCategories entries=mockEntries>
          <div> {React.string("Community content goes here.")} </div>
        </CommunityLayout>
      </div>
    </BrowserRouter>,
  )

  let resources = await screen->getByText("Resources")
  await element(resources)->toBeVisible

  let wrapper = await screen->getByTestId("community-layout-wrapper")
  await element(wrapper)->toMatchScreenshot("tablet-community-layout")
})