Create a concurrency test to stress-test state is isolated across sessions (#657)

Author: wwwillchen

.github/workflows/ci.yml

@@ -48,6 +48,14 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+      - name: Run playwright test (concurrency)
+        run: yarn playwright test mesop/tests/e2e/concurrency/state_test.ts --repeat-each=48 --workers=16
+      - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
       - name: Run playwright test with memory state session
         run: MESOP_STATE_SESSION_BACKEND=memory yarn playwright test
       - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3

mesop/examples/__init__.py

@@ -6,6 +6,7 @@
 from mesop.examples import buttons as buttons
 from mesop.examples import checkbox_and_radio as checkbox_and_radio
 from mesop.examples import composite as composite
+from mesop.examples import concurrency_state as concurrency_state
 from mesop.examples import custom_font as custom_font
 from mesop.examples import dict_state as dict_state
 from mesop.examples import docs as docs

mesop/examples/concurrency_state.py

@@ -0,0 +1,17 @@
+import mesop as me
+
+
+@me.page(path="/concurrency_state")
+def page():
+  me.text("concurrency_state")
+  me.input(label="State input", on_input=on_input)
+  me.text("Input: " + me.state(State).input)
+
+
+@me.stateclass
+class State:
+  input: str
+
+
+def on_input(e: me.InputEvent):
+  me.state(State).input = e.value

mesop/tests/e2e/concurrency/state_test.ts

@@ -0,0 +1,27 @@
+/**
+ * The purpose of this test is to ensure that sessions have proper
+ * state isolation, particularly under high concurrency.
+ *
+ * Run test as:
+ * yarn playwright test mesop/tests/e2e/concurrency/state_test.ts --repeat-each=48 --workers=16
+ */
+import {test, expect} from '@playwright/test';
+
+test('state updates correctly', async ({page}) => {
+  await page.goto('/concurrency_state');
+  const randomString = generateRandomString(16);
+  await page.getByLabel('State input').fill(randomString);
+  await expect(page.getByText('Input: ' + randomString)).toBeVisible({
+    timeout: 15000,
+  });
+});
+
+function generateRandomString(length: number) {
+  const characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}