such-mock-browser/examples/browser/index.html at main · suchjs/such-mock-browser · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mock example</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/gh/suchjs/such@master/dist/such.min.js"></script>
  <script src="./such-mock-browser.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $(function(){
      const globalSuch = Such.default;
      const { method, target } = globalSuch.mock;
      // intercept
      const interceptor = globalSuch.mock.intercept(target.XHR | target.FETCH, {
        timeout: [1000,5000]
      });
      globalSuch.mock('/a', 'GET', {
        a: ':string'
      });
      globalSuch.mock('/b', method.GET | method.POST, {
        b: ':number'
      });
      globalSuch.mock('/c', '*', {
        c: ':increment:{3}'
      });
      globalSuch.mock('/d', function(req){
        return req.method === 'POST';
      }, {
        d: ':::haha'
      });
      globalSuch.mock(/\/\w+/, method.ANY, function(req){
        return {
          '*': '*'
        };
      });
      globalSuch.mock('/e/:id', 'GET,POST', function(req, params){
        return {
          id: params.id,
          words: globalSuch.as(':string')
        };
      });
      globalSuch.mock('/f', 'GET', function(req, params){
        return globalSuch.as({ plain: ':::haha,`:string`'});
      }, {
        timeout: 2000,
        transformer: {
          headers: {
            'Content-Type': 'text/html'
          }
        }
      });
      interceptor.on('response', (req, res) => {
        console.log(res);
      });
      globalSuch.mock('/g', 'GET', function(req){
        console.log('触发req');
        return globalSuch.as({
          'fetch{1,3}': ':string'
        });
      });
      // xhr
      $.get('/a', function(res){
        console.log(res);
      });
      $.post('/a', function(res){
        console.log(res);
      });
      $.get('/b', function(res){
        console.log(res);
      });
      $.post('/b', function(res){
        console.log(res);
      });
      $.post('/c', function(res){
        console.log(res);
      });
      $.post('/d', function(res){
        console.log(res);
      });
      $.post('/e/123', function(res){
        console.log(res);
      });
      $.get('/f',  function(res){
        console.log(res);
      });
      window.fetch('/g', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
      }).then((res) => res.json()).then((data) => {
        console.log(data);
      });
    });
  </script>
</body>
</html>