amis2/packages/amis/__tests__/event-action/ajax.test.tsx

import {fireEvent, render, waitFor} from '@testing-library/react';
import '../../src';
import {render as amisRender} from '../../src';
import {makeEnv, wait} from '../helper';

test('EventAction:ajax args', async () => {
  const fetcher = jest.fn().mockImplementation(() =>
    Promise.resolve({
      data: {
        status: 0,
        msg: 'ok',
        data: {
          age: 18
        }
      }
    })
  );
  const {getByText, container}: any = render(
    amisRender(
      {
        type: 'page',
        id: 'page_001',
        data: {
          name: 'lll'
        },
        body: [
          {
            type: 'button',
            label: '发送请求',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'ajax',
                    args: {
                      api: {
                        url: '/api/xxx',
                        method: 'get'
                      },
                      messages: {
                        success: '成功了！欧耶',
                        failed: '失败了呢。。'
                      }
                    },
                    outputVar: 'result'
                  },
                  {
                    actionType: 'setValue',
                    componentId: 'page_001',
                    args: {
                      value: '${event.data.result.responseData}'
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'tpl',
            tpl: '${age}岁的天空'
          },
          {
            type: 'button',
            label: '发送请求2',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'ajax',
                    args: {
                      api: {
                        url: '/api/xxx',
                        method: 'get'
                      },
                      messages: {
                        success: '成功了！欧耶',
                        failed: '失败了呢。。'
                      }
                    }
                  },
                  {
                    actionType: 'setValue',
                    componentId: 'page_001',
                    args: {
                      value: '${event.data}'
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'tpl',
            tpl: '${responseResult.responseData.age}岁的天空，status:${responseResult.responseStatus}，msg:${responseResult.responseMsg}'
          }
        ]
      },
      {},
      makeEnv({
        fetcher
      })
    )
  );

  fireEvent.click(getByText('发送请求'));
  await waitFor(() => {
    expect(getByText('18岁的天空')).toBeInTheDocument();
  });

  fireEvent.click(getByText('发送请求2'));
  await waitFor(() => {
    expect(getByText('18岁的天空，status:0，msg:ok')).toBeInTheDocument();
  });
  expect(container).toMatchSnapshot();
});

test('EventAction:ajax', async () => {
  const fetcher = jest.fn().mockImplementation(() =>
    Promise.resolve({
      data: {
        status: 0,
        msg: 'ok',
        data: {
          age: 18
        }
      }
    })
  );
  const {getByText, container}: any = render(
    amisRender(
      {
        type: 'page',
        id: 'page_001',
        data: {
          name: 'lll'
        },
        body: [
          {
            type: 'button',
            label: '发送请求',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'ajax',
                    api: {
                      url: '/api/xxx',
                      method: 'get'
                    },
                    messages: {
                      success: '成功了！欧耶',
                      failed: '失败了呢。。'
                    },
                    outputVar: 'result'
                  },
                  {
                    actionType: 'setValue',
                    componentId: 'page_001',
                    args: {
                      value: '${event.data.result.responseData}'
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'tpl',
            tpl: '${age}岁的天空'
          },
          {
            type: 'button',
            label: '发送请求2',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'ajax',
                    api: {
                      url: '/api/xxx',
                      method: 'get'
                    },
                    messages: {
                      success: '成功了！欧耶',
                      failed: '失败了呢。。'
                    }
                  },
                  {
                    actionType: 'setValue',
                    componentId: 'page_001',
                    args: {
                      value: '${event.data}'
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'tpl',
            tpl: '${responseResult.responseData.age}岁的天空，status:${responseResult.responseStatus}，msg:${responseResult.responseMsg}'
          }
        ]
      },
      {},
      makeEnv({
        fetcher
      })
    )
  );

  fireEvent.click(getByText('发送请求'));
  await waitFor(() => {
    expect(getByText('18岁的天空')).toBeInTheDocument();
  });

  fireEvent.click(getByText('发送请求2'));
  await waitFor(() => {
    expect(getByText('18岁的天空，status:0，msg:ok')).toBeInTheDocument();
  });
  expect(container).toMatchSnapshot();
});

test('EventAction:ajax data1', async () => {
  const fetcher = jest.fn().mockImplementation(() =>
    Promise.resolve({
      data: {
        status: 0,
        msg: 'ok',
        data: {
          name: 'amis',
          age: 18
        }
      }
    })
  );
  const {getByText, container}: any = render(
    amisRender(
      {
        type: 'page',
        data: {
          name: 'lll'
        },
        body: [
          {
            type: 'button',
            label: '发送请求',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'ajax',
                    args: {
                      api: {
                        url: '/api/xxx?name=${event.data.name}',
                        method: 'post',
                        data: {
                          myname1: '${name}',
                          myname2: '\\${name}',
                          myname3: '${text}',
                          myname4: '\\${text}'
                        }
                      }
                    },
                    outputVar: 'result'
                  },
                  {
                    actionType: 'ajax',
                    args: {
                      api: {
                        url: '/api/xxx?q1=${result.responseData.age}',
                        method: 'post',
                        data: {
                          param1: '${event.data.result.responseData.name}',
                          param2: '${responseData.name}',
                          param3: '${result.name}',
                          param4: '${event.data.responseData.name}'
                        }
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      },
      {
        data: {
          text: '${lll}'
        }
      },
      makeEnv({
        fetcher
      })
    )
  );

  await waitFor(() => {
    expect(getByText('发送请求')).toBeInTheDocument();
  });

  fireEvent.click(getByText(/发送请求/));

  await waitFor(() => {
    expect(fetcher).toHaveBeenCalledTimes(2);
    expect(fetcher.mock.calls[0][0].url).toEqual('/api/xxx?name=lll');
    expect(fetcher.mock.calls[0][0].data).toMatchObject({
      myname1: 'lll',
      myname2: '${name}',
      myname3: '${lll}',
      myname4: '${text}'
    });
    expect(fetcher.mock.calls[1][0].url).toEqual('/api/xxx?q1=18');
    expect(fetcher.mock.calls[1][0].data).toMatchObject({
      param1: 'amis',
      param2: 'amis',
      param3: 'amis',
      param4: 'amis'
    });
  });
});

test('EventAction:ajax data2', async () => {
  const fetcher = jest.fn().mockImplementation(() =>
    Promise.resolve({
      data: {
        status: 0,
        msg: 'ok',
        data: {
          name: 'amis',
          age: 18
        }
      }
    })
  );
  const {getByText, container}: any = render(
    amisRender(
      {
        type: 'page',
        data: {
          name: 'lll'
        },
        body: [
          {
            type: 'button',
            label: '发送请求',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'ajax',
                    api: {
                      url: '/api/xxx?name=${event.data.name}',
                      method: 'post',
                      data: {
                        myname1: '${name}',
                        myname2: '\\${name}',
                        myname3: '${text}',
                        myname4: '\\${text}'
                      }
                    },
                    outputVar: 'result'
                  },
                  {
                    actionType: 'ajax',
                    api: {
                      url: '/api/xxx?q1=${result.responseData.age}',
                      method: 'post',
                      data: {
                        param1: '${event.data.result.responseData.name}',
                        param2: '${responseData.name}',
                        param3: '${result.name}',
                        param4: '${event.data.responseData.name}'
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      },
      {
        data: {
          text: '${lll}'
        }
      },
      makeEnv({
        fetcher
      })
    )
  );

  await waitFor(() => {
    expect(getByText('发送请求')).toBeInTheDocument();
  });

  fireEvent.click(getByText(/发送请求/));

  await waitFor(() => {
    expect(fetcher).toHaveBeenCalledTimes(2);
    expect(fetcher.mock.calls[0][0].url).toEqual('/api/xxx?name=lll');
    expect(fetcher.mock.calls[0][0].data).toMatchObject({
      myname1: 'lll',
      myname2: '${name}',
      myname3: '${lll}',
      myname4: '${text}'
    });
    expect(fetcher.mock.calls[1][0].url).toEqual('/api/xxx?q1=18');
    expect(fetcher.mock.calls[1][0].data).toMatchObject({
      param1: 'amis',
      param2: 'amis',
      param3: 'amis',
      param4: 'amis'
    });
  });
});

test('EventAction:ajax data3', async () => {
  const fetcher = jest.fn().mockImplementation(() =>
    Promise.resolve({
      data: {
        status: 0,
        msg: 'ok',
        data: {
          name: 'amis',
          age: 18
        }
      }
    })
  );
  const {getByText, container}: any = render(
    amisRender(
      {
        type: 'page',
        body: [
          {
            type: 'button',
            label: '表单外的校验按钮',
            className: 'mb-2',
            level: 'primary',
            onEvent: {
              click: {
                actions: [
                  {
                    componentId: 'form_validate',
                    outputVar: 'validateResult',
                    actionType: 'validate'
                  },
                  {
                    outputVar: 'responseResult',
                    actionType: 'ajax',
                    api: {
                      method: 'post',
                      url: '/api/xxx1',
                      data: {
                        name: '${name}',
                        email: '${email}'
                      }
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'form',
            id: 'form_validate',
            data: {
              name: 'amis',
              email: 'amis@baidu.com'
            },
            body: [
              {
                type: 'input-text',
                name: 'name',
                label: '姓名：',
                required: true
              },
              {
                name: 'email',
                type: 'input-text',
                label: '邮箱：',
                required: true,
                validations: {
                  isEmail: true
                }
              }
            ],
            actions: [
              {
                type: 'button',
                label: '表单内的校验按钮',
                level: 'primary',
                onEvent: {
                  click: {
                    actions: [
                      {
                        componentId: 'form_validate',
                        outputVar: 'validateResult',
                        actionType: 'validate'
                      },
                      {
                        outputVar: 'responseResult',
                        actionType: 'ajax',
                        api: {
                          method: 'post',
                          url: '/api/xxx2',
                          data: {
                            name: '${name}',
                            email: '${email}'
                          }
                        }
                      }
                    ]
                  }
                }
              },
              {
                type: 'button',
                label: '无data',
                level: 'primary',
                onEvent: {
                  click: {
                    actions: [
                      {
                        componentId: 'form_validate',
                        outputVar: 'validateResult',
                        actionType: 'validate'
                      },
                      {
                        outputVar: 'responseResult',
                        actionType: 'ajax',
                        api: {
                          method: 'post',
                          url: '/api/xxx3'
                        }
                      }
                    ]
                  }
                }
              },
              {
                type: 'button',
                label: '字符串api无参数',
                level: 'primary',
                onEvent: {
                  click: {
                    actions: [
                      {
                        componentId: 'form_validate',
                        outputVar: 'validateResult',
                        actionType: 'validate'
                      },
                      {
                        outputVar: 'responseResult',
                        actionType: 'ajax',
                        api: 'post:/api/xxx4'
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {},
      makeEnv({
        fetcher
      })
    )
  );

  await waitFor(() => {
    expect(getByText('表单外的校验按钮')).toBeInTheDocument();
    expect(getByText('表单内的校验按钮')).toBeInTheDocument();
    expect(getByText('无data')).toBeInTheDocument();
    expect(getByText('字符串api无参数')).toBeInTheDocument();
  });

  fireEvent.click(getByText(/表单外的校验按钮/));
  fireEvent.click(getByText(/表单内的校验按钮/));
  fireEvent.click(getByText(/无data/));
  fireEvent.click(getByText(/字符串api无参数/));

  await waitFor(() => {
    expect(fetcher).toHaveBeenCalledTimes(4);
    expect(fetcher.mock.calls[0][0].url).toEqual('/api/xxx1');
    expect(fetcher.mock.calls[0][0].data).toMatchObject({
      name: '',
      email: ''
    });
    expect(fetcher.mock.calls[1][0].url).toEqual('/api/xxx2');
    expect(fetcher.mock.calls[1][0].data).toMatchObject({
      name: 'amis',
      email: 'amis@baidu.com'
    });
    expect(fetcher.mock.calls[2][0].url).toEqual('/api/xxx3');
    expect(fetcher.mock.calls[2][0].data).toMatchObject({});
    expect(fetcher.mock.calls[3][0].url).toEqual('/api/xxx4');
    expect(fetcher.mock.calls[3][0].data).toMatchObject({});
  });
});