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

let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) => {
  await viewport(width, height)

  let screen = await render(
    <MemoryRouter initialEntries=["/"]>
      <LandingPage />
    </MemoryRouter>,
  )

  let sourceSection = switch document->WebAPI.Document.querySelector(
    `[data-testid="${sectionTestId}"]`,
  ) {
  | Value(section) => section
  | Null => failwith(`expected to find section ${sectionTestId}`)
  }

  if sectionTestId == "landing-other-selling-points" {
    let sourceSelector = `[data-testid="${sectionTestId}"]`
    await TestUtils.waitForImages(sourceSelector)
    // Headless UI's appear transition mutates classes after first render. Since
    // these tests snapshot a cloned outerHTML string, wait for the live section
    // to settle so the clone does not preserve a transient opacity-0 state.
    await TestUtils.sleep(1100)
  }

  let sandboxTestId = `${sectionTestId}-snapshot`
  let snapshotHtml = sourceSection.outerHTML
  await screen->unmount

  let snapshotScreen = await render(
    <div
      dataTestId=sandboxTestId
      style={{width: `${width->Int.toString}px`, margin: "0"}}
      dangerouslySetInnerHTML={"__html": snapshotHtml}
    />,
  )

  let snapshotTarget = await snapshotScreen->getByTestId(sandboxTestId)
  await element(snapshotTarget)->toBeVisible
  await TestUtils.waitForImages(`[data-testid="${sandboxTestId}"]`)
  await element(snapshotTarget)->toMatchScreenshot(screenshotName)
  await snapshotScreen->unmount
}

let snapshotResponsive = async (~sectionTestId, ~screenshotBase) => {
  await snapshotSection(
    ~width=1440,
    ~height=1800,
    ~sectionTestId,
    ~screenshotName={`${screenshotBase}-desktop`},
  )

  await snapshotSection(
    ~width=900,
    ~height=1800,
    ~sectionTestId,
    ~screenshotName={`${screenshotBase}-tablet`},
  )

  await snapshotSection(
    ~width=600,
    ~height=1800,
    ~sectionTestId,
    ~screenshotName={`${screenshotBase}-mobile`},
  )
}

testWithTimeout(
  "landing intro snapshots",
  async () => {
    await snapshotResponsive(~sectionTestId="landing-intro", ~screenshotBase="landing-page-intro")
  },
  30000,
)

testWithTimeout(
  "landing playground hero snapshots",
  async () => {
    await snapshotResponsive(
      ~sectionTestId="landing-playground-hero",
      ~screenshotBase="landing-page-playground-hero",
    )
  },
  30000,
)

testWithTimeout(
  "landing quick install snapshots",
  async () => {
    await snapshotResponsive(
      ~sectionTestId="landing-quick-install",
      ~screenshotBase="landing-page-quick-install",
    )
  },
  30000,
)

testWithTimeout(
  "landing other selling points snapshots",
  async () => {
    await snapshotResponsive(
      ~sectionTestId="landing-other-selling-points",
      ~screenshotBase="landing-page-other-selling-points",
    )
  },
  30000,
)

testWithTimeout(
  "landing trusted by snapshots",
  async () => {
    await snapshotResponsive(
      ~sectionTestId="landing-trusted-by",
      ~screenshotBase="landing-page-trusted-by",
    )
  },
  30000,
)

testWithTimeout(
  "landing curated resources snapshots",
  async () => {
    await snapshotResponsive(
      ~sectionTestId="landing-curated-resources",
      ~screenshotBase="landing-page-curated-resources",
    )
  },
  30000,
)