custom-elements/computed-e2e.html at main · jshimkoski/custom-elements · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Computed E2E Fixture</title>
  </head>
  <body>
    <div id="value"></div>

    <script type="module">
      import { ref, computed } from '/src/lib';
      import { updateScheduler } from '/src/lib/runtime/scheduler';

      // Force the runtime scheduler into a production-like deferred mode
      // for this fixture so the E2E test reliably reproduces the case
      // where invalidation is deferred to the scheduler.
      try {
        updateScheduler.testEnv = {
          isTest: false,
          isVitest: false,
          isCypress: false,
        };
      } catch (e) {
        // best-effort; continue if the environment doesn't allow mutation
      }

      // Expose simple test APIs on window so Cypress can drive them
      window.__testRef = ref(1);
      window.__testComputed = computed(() => window.__testRef.value * 2);

      // Seed DOM
      document.getElementById('value').textContent = String(
        window.__testComputed.value,
      );

      // Synchronous update+read API
      window.updateAndRead = (v) => {
        window.__testRef.value = v;
        return window.__testComputed.value;
      };

      // Update the DOM to the latest computed value (helper)
      window.updateAndUpdateDom = (v) => {
        window.__testRef.value = v;
        document.getElementById('value').textContent = String(
          window.__testComputed.value,
        );
      };
    </script>
  </body>
</html>