streamlit

1
/**
2
 * Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
3
 *
4
 * Licensed under the Apache License, Version 2.0 (the "License");
5
 * you may not use this file except in compliance with the License.
6
 * You may obtain a copy of the License at
7
 *
8
 *     http://www.apache.org/licenses/LICENSE-2.0
9
 *
10
 * Unless required by applicable law or agreed to in writing, software
11
 * distributed under the License is distributed on an "AS IS" BASIS,
12
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
 * See the License for the specific language governing permissions and
14
 * limitations under the License.
15
 */
16

17
describe("hello", () => {
18
  beforeEach(() => {
19
    // Increasing timeout since we're waiting for the animation and map to load.
20
    Cypress.config("defaultCommandTimeout", 30000);
21
    cy.loadApp("http://localhost:3000/");
22
    cy.prepForElementSnapshots();
23
  });
24

25
  it("displays the welcome message on initial page load", () => {
26
    cy.get(".element-container .stMarkdown h1").should(
27
      "contain",
28
      "Welcome to Streamlit!"
29
    );
30

31
    cy.get(".appview-container").matchThemedSnapshots("welcome-streamlit");
32
  });
33

34
  it("renders the SidebarNav correctly", () => {
35
    cy.prepForElementSnapshots();
36

37
    cy.get("[data-testid='stSidebarNav']").matchThemedSnapshots(
38
      "hello-mpa-sidebar-nav"
39
    );
40
  });
41

42
  it("displays animation demo", () => {
43
    cy.getIndexed('[data-testid="stSidebarNav"] a', 1)
44
      .click()
45
      .then(() => {
46
        cy.get(".element-container .stMarkdown h1").should(
47
          "contain",
48
          "Animation Demo"
49
        );
50

51
        // Wait for the animation to end.
52
        cy.get(".stButton button").contains("Re-run");
53

54
        cy.get(".appview-container").matchThemedSnapshots("animation-demo");
55
      });
56
  });
57

58
  it("displays plotting demo", () => {
59
    cy.getIndexed('[data-testid="stSidebarNav"] a', 2)
60
      .click()
61
      .then(() => {
62
        cy.get(".element-container .stMarkdown h1").should(
63
          "contain",
64
          "Plotting Demo"
65
        );
66

67
        // Wait for the animation to end.
68
        cy.get("[data-testid='stText']").contains("100% Complete");
69

70
        cy.get(".element-container [data-testid='stArrowVegaLiteChart']")
71
          .find("canvas")
72
          .should("have.css", "height", "350px");
73
      });
74
  });
75

76
  it("displays mapping demo", () => {
77
    cy.getIndexed('[data-testid="stSidebarNav"] a', 3)
78
      .click({ force: true })
79
      .then(() => {
80
        cy.get(".element-container .stMarkdown h1").should(
81
          "contain",
82
          "Mapping Demo"
83
        );
84

85
        cy.get(".element-container .stDeckGlJsonChart")
86
          .find("canvas")
87
          .should("have.css", "height", "500px");
88

89
        // Wait for Mapbox to build the canvas.
90
        cy.wait(5000);
91

92
        cy.get(".appview-container").matchThemedSnapshots("mapping-demo");
93
      });
94
  });
95

96
  it("displays dataframe demo", () => {
97
    cy.getIndexed('[data-testid="stSidebarNav"] a', 4)
98
      .click()
99
      .then(() => {
100
        cy.get(".element-container .stMarkdown h1").should(
101
          "contain",
102
          "DataFrame Demo"
103
        );
104

105
        cy.get(".stMultiSelect").should("exist");
106

107
        cy.get(".stDataFrame").should("exist");
108

109
        cy.get(".element-container [data-testid='stArrowVegaLiteChart']")
110
          .find("canvas")
111
          .should("have.css", "height", "350px");
112

113
        cy.get(".appview-container").matchThemedSnapshots("dataframe-demo");
114
      });
115
  });
116
});
117