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
const INCREMENTS_PER_DISCONNECT = 5;
18
const NUM_DISCONNECTS = 20;
19

20
describe("websocket reconnects", () => {
21
  beforeEach(() => {
22
    Cypress.Cookies.defaults({
23
      preserve: ["_streamlit_xsrf"],
24
    });
25
    cy.server();
26
    cy.route("PUT", "**/upload_file/**").as("uploadFile");
27

28
    cy.loadApp("http://localhost:3000/");
29
  });
30

31
  it("retains session state when the websocket connection is dropped and reconnects", () => {
32
    let expectedCount = 0;
33

34
    for (let i = 0; i < NUM_DISCONNECTS; i++) {
35
      expectedCount += INCREMENTS_PER_DISCONNECT;
36

37
      for (let j = 0; j < INCREMENTS_PER_DISCONNECT; j++) {
38
        cy.get(".stButton button").contains("click me!").click();
39
      }
40

41
      cy.window().then((win) => {
42
        setTimeout(() => {
43
          win.streamlitDebug.disconnectWebsocket();
44
        }, 100);
45
      });
46

47
      // Wait until we've disconnected.
48
      cy.get("[data-testid='stStatusWidget']").should(
49
        "have.text",
50
        "Connecting"
51
      );
52
      // Wait until we've reconnected and rerun the script.
53
      cy.get("[data-testid='stStatusWidget']").should("not.exist");
54

55
      cy.get(".stMarkdown").contains(`count: ${expectedCount}`);
56
    }
57
  });
58

59
  it("retains uploaded files when the websocket connection is dropped and reconnects", () => {
60
    const fileName1 = "file1.txt";
61
    const uploaderIndex = 0;
62

63
    cy.fixture(fileName1).then((file1) => {
64
      cy.getIndexed(
65
        "[data-testid='stFileUploaderDropzone']",
66
        uploaderIndex
67
      ).attachFile(
68
        {
69
          fileContent: file1,
70
          fileName: fileName1,
71
          mimeType: "text/plain",
72
        },
73
        {
74
          force: true,
75
          subjectType: "drag-n-drop",
76
          events: ["dragenter", "drop"],
77
        }
78
      );
79

80
      cy.wait("@uploadFile");
81

82
      // The script should have printed the contents of the first files
83
      // into an st.text. (This tests that the upload actually went
84
      // through.)
85
      cy.get(".stFileUploaderFileName").should("have.text", fileName1);
86
      cy.getIndexed("[data-testid='stText']", uploaderIndex).should(
87
        "contain.text",
88
        file1
89
      );
90

91
      cy.window().then((win) => {
92
        setTimeout(() => {
93
          win.streamlitDebug.disconnectWebsocket();
94
        }, 100);
95
      });
96

97
      // Wait until we've disconnected.
98
      cy.get("[data-testid='stStatusWidget']").should(
99
        "have.text",
100
        "Connecting"
101
      );
102
      // Wait until we've reconnected and rerun the script.
103
      cy.get("[data-testid='stStatusWidget']").should("not.exist");
104

105
      // Confirm that our uploaded file is still there.
106
      cy.getIndexed("[data-testid='stText']", uploaderIndex).should(
107
        "contain.text",
108
        file1
109
      );
110
    });
111
  });
112

113
  it(
114
    "retains captured pictures when the websocket connection is dropped and reconnects",
115
    { retries: { runMode: 1 } },
116
    () => {
117
      // Be generous with some of the timeouts in this test as uploading and
118
      // rendering images can be quite slow.
119
      const timeout = 30000;
120

121
      cy.get("[data-testid='stCameraInputButton']", { timeout })
122
        .should("have.length", 1)
123
        .first()
124
        .wait(1000)
125
        .should("not.be.disabled")
126
        .contains("Take Photo")
127
        .click();
128

129
      cy.wait("@uploadFile", { timeout });
130

131
      cy.get("img").should("have.length.at.least", 2);
132

133
      cy.get("[data-testid='stImage']", { timeout }).should(
134
        "have.length.at.least",
135
        1
136
      );
137

138
      cy.window().then((win) => {
139
        setTimeout(() => {
140
          win.streamlitDebug.disconnectWebsocket();
141
        }, 100);
142
      });
143

144
      // Wait until we've disconnected.
145
      cy.get("[data-testid='stStatusWidget']").should(
146
        "have.text",
147
        "Connecting"
148
      );
149
      // Wait until we've reconnected and rerun the script.
150
      cy.get("[data-testid='stStatusWidget']").should("not.exist");
151

152
      // Confirm that our picture is still there.
153
      cy.get("[data-testid='stImage']").should("have.length.at.least", 1);
154
    }
155
  );
156
});
157