Javascript 开玩笑地回答问题，不包括方法

我有一个页面，其中有一个组件，在发生单击事件时从

GET

端点搜索请求数据：

AppView.jsx

/**
 * Request and set a list of test values
 * @param {Object} params The response of the search component
*/
fetchData = (params) => {
  const { search } = params;

  this.props.api.test(search)
    .then((response) => {
      objectOrder(response, 'dueDate');
      this.setState({ test: response });
    }).catch(() => {
      this.setState({ test: [] });
    });
}

render() {
  return (
    <SearchComponent fetchData={this.fetchData} />
  );
}

class SearchForm extends Component {
  static propTypes = {
    fetchData: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props);
    this.state = {
      search: '',
    };
  }

  /**
   * Sets the state of the search name
   * @param {Object} event
   */
  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  /**
   * Propagate the submit event
   * @param {Object} event
   */
  handleSubmit = (event) => {
    event.preventDefault();
    this.props.fetchData(this.state);
  }

  render() {
    return (
      <FormContainer onSubmit={this.handleSubmit}>
        <Input value={this.state.search} name='search' placeholder='Search for...' onChange={this.handleChange} />
        <Button variant='contained' color='primary'>Buscar</Button>
      </FormContainer>
    );
  }
}

所有这些方法有什么帮助吗

感谢您的建议

您可以使用它来模拟

提交

表单事件

SearchForm.tsx

：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormContainer } from './FormContainer';
import { Input } from './Input';
import { Button } from './Button';

interface ISearchFormDispatchProps {
  fetchData(params: ISearchFormState): any;
}

type Props = ISearchFormDispatchProps;

interface ISearchFormState {
  search: string;
  [key: string]: string;
}

export class SearchForm extends Component<Props, ISearchFormState> {
  public static propTypes = {
    fetchData: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      search: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  /**
   * Sets the state of the search name
   * @param {Object} event
   */
  public handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  /**
   * Propagate the submit event
   * @param {Object} event
   */
  public handleSubmit = event => {
    event.preventDefault();
    this.props.fetchData(this.state);
  }

  public render() {
    return (
      <FormContainer onSubmit={this.handleSubmit}>
        <Input value={this.state.search} name="search" placeholder="Search for..." onChange={this.handleChange} />
        <Button variant="contained" color="primary">
          Buscar
        </Button>
      </FormContainer>
    );
  }
}

import React, { Component } from 'react';

interface IFormContainerOwnProps {
  children: React.ReactElement[];
  onSubmit(e: React.FormEvent<HTMLFormElement>): any;
}

export class FormContainer extends Component<IFormContainerOwnProps> {
  constructor(props: IFormContainerOwnProps) {
    super(props);
  }
  public render() {
    return (
      <div>
        <form onSubmit={this.props.onSubmit}>{this.props.children}</form>
      </div>
    );
  }
}

import React from 'react';

export const Button = props => {
  return <button {...props}>{props.children}</button>;
};

import React from 'react';

export const Input = ({ onChange, placeholder, name, value }) => {
  return <input placeholder={placeholder} name={name} value={value} onChange={onChange}></input>;
};

按钮.tsx

：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormContainer } from './FormContainer';
import { Input } from './Input';
import { Button } from './Button';

interface ISearchFormDispatchProps {
  fetchData(params: ISearchFormState): any;
}

type Props = ISearchFormDispatchProps;

interface ISearchFormState {
  search: string;
  [key: string]: string;
}

export class SearchForm extends Component<Props, ISearchFormState> {
  public static propTypes = {
    fetchData: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      search: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  /**
   * Sets the state of the search name
   * @param {Object} event
   */
  public handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  /**
   * Propagate the submit event
   * @param {Object} event
   */
  public handleSubmit = event => {
    event.preventDefault();
    this.props.fetchData(this.state);
  }

  public render() {
    return (
      <FormContainer onSubmit={this.handleSubmit}>
        <Input value={this.state.search} name="search" placeholder="Search for..." onChange={this.handleChange} />
        <Button variant="contained" color="primary">
          Buscar
        </Button>
      </FormContainer>
    );
  }
}

import React, { Component } from 'react';

interface IFormContainerOwnProps {
  children: React.ReactElement[];
  onSubmit(e: React.FormEvent<HTMLFormElement>): any;
}

export class FormContainer extends Component<IFormContainerOwnProps> {
  constructor(props: IFormContainerOwnProps) {
    super(props);
  }
  public render() {
    return (
      <div>
        <form onSubmit={this.props.onSubmit}>{this.props.children}</form>
      </div>
    );
  }
}

import React from 'react';

export const Button = props => {
  return <button {...props}>{props.children}</button>;
};

import React from 'react';

export const Input = ({ onChange, placeholder, name, value }) => {
  return <input placeholder={placeholder} name={name} value={value} onChange={onChange}></input>;
};

SearchForm.spec.ts

单元测试：

import React from 'react';
import { SearchForm } from './SearchForm';
import { mount } from 'enzyme';
import { Input } from './Input';

describe('SearchForm', () => {
  const text = 'This is a text for a test';
  const state = { search: text };
  let props;
  let wrapper;

  beforeEach(() => {
    props = {
      fetchData: jest.fn(() => state)
    };

    wrapper = mount(<SearchForm {...props} />);
  });

  test('It should call handlesubmit method when submitting the form', done => {
    const mockedFormEvent = {
      preventDefault: jest.fn()
    };
    wrapper.find('form').simulate('submit', mockedFormEvent);
    expect(wrapper.props().fetchData).toBeCalledWith(wrapper.state());
    expect(mockedFormEvent.preventDefault).toBeCalledTimes(1);
    done();
  });

  test('It should call handleChange method', done => {
    const input = wrapper.find(Input);

    input.props().value = text;
    input.simulate('change', { target: { value: text } });
    expect(input.get(0).props.value).toEqual(text);
    done();
  });
});

SearchForm.tsx

的覆盖率报告：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormContainer } from './FormContainer';
import { Input } from './Input';
import { Button } from './Button';

interface ISearchFormDispatchProps {
  fetchData(params: ISearchFormState): any;
}

type Props = ISearchFormDispatchProps;

interface ISearchFormState {
  search: string;
  [key: string]: string;
}

export class SearchForm extends Component<Props, ISearchFormState> {
  public static propTypes = {
    fetchData: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      search: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  /**
   * Sets the state of the search name
   * @param {Object} event
   */
  public handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  /**
   * Propagate the submit event
   * @param {Object} event
   */
  public handleSubmit = event => {
    event.preventDefault();
    this.props.fetchData(this.state);
  }

  public render() {
    return (
      <FormContainer onSubmit={this.handleSubmit}>
        <Input value={this.state.search} name="search" placeholder="Search for..." onChange={this.handleChange} />
        <Button variant="contained" color="primary">
          Buscar
        </Button>
      </FormContainer>
    );
  }
}

import React, { Component } from 'react';

interface IFormContainerOwnProps {
  children: React.ReactElement[];
  onSubmit(e: React.FormEvent<HTMLFormElement>): any;
}

export class FormContainer extends Component<IFormContainerOwnProps> {
  constructor(props: IFormContainerOwnProps) {
    super(props);
  }
  public render() {
    return (
      <div>
        <form onSubmit={this.props.onSubmit}>{this.props.children}</form>
      </div>
    );
  }
}

import React from 'react';

export const Button = props => {
  return <button {...props}>{props.children}</button>;
};

import React from 'react';

export const Input = ({ onChange, placeholder, name, value }) => {
  return <input placeholder={placeholder} name={name} value={value} onChange={onChange}></input>;
};

以下是完整的演示：