Code Monkey home page Code Monkey logo

lesson-3's Introduction

Homework 3

Компонент App
    Рендер
      Должен присутствовать элемент с классом
        ✓ container
        ✓ container tab-panel
        ✓ form-content
        ✓ button-panel
        ✓ button-panel button.button-next
      Должен возвращать 3 компонента Step
        Если state.step === 1
          ✓ Первый компонент Step должен содержать props key="Personal information", onClick=App.handleTabClick, isSelected=true, number=1, isClickable=false
          ✓ Второй компонент Step должен содержать props key="Card information", onClick=App.handleTabClick, isSelected=false, number=2, isClickable=false
          ✓ Третий компонент Step должен содержать props key="Finish", onClick=App.handleTabClick, isSelected=false, number=3, isClickable=false
        Если state.step === 2
          ✓ Первый компонент Step должен содержать props key="Personal information", onClick=App.handleTabClick, isSelected=false, number=1, isClickable=true
          ✓ Второй компонент Step должен содержать props key="Card information", onClick=App.handleTabClick, isSelected=false, number=2, isClickable=false
          ✓ Третий компонент Step должен содержать props key="Finish", onClick=App.handleTabClick, isSelected=false, number=3, isClickable=false
          Если state.step === 3
            ✓ Первый компонент Step должен содержать props key="Personal information", onClick=App.handleTabClick, isSelected=false, number=1, isClickable=true
            ✓ Второй компонент Step должен содержать props key="Card information", onClick=App.handleTabClick, isSelected=false, number=2, isClickable=false
            ✓ Третий компонент Step должен содержать props key="Finish", onClick=App.handleTabClick, isSelected=false, number=3, isClickable=false
      Кнопка button.button-next
        ✓  должна быть disabled если !this.isFormCommitable() || !isTimeOver
        ✓ При клике должен быть вызыван метод handleClickNextForm
    state должен содержать поля со значениями:
      ✓ step: 1
      ✓ firstName: ''
      ✓ lastName: ''
      ✓ email: ''
      ✓ cardNumber: ''
      ✓ isTimeOver: false
    Методы класса
      handleTabClick
        ✓ Присутствует
        ✓ При вызове с аргументом меняется state.step на значение аргумента
      handleChangeForm
        ✓ Присутствует
        ✓ При вызове с 2 аргументами меняется state[первый аргумент] = второй аргумент
      handleClickNextForm
        ✓ Присутствует
        ✓ После вызова state.step увеличивается на 1
      handleChangeTimeOver
        ✓ Присутствует
        ✓ При вызове с аргументом, аргумент меняет значение state.isTimeOver
      isFormCommitable
        ✓ Присутствует
        Если state.step === 1
          ✓ Должен возвращать true если state.firstName !== '' && state.lastName !== '' && state.email !== '' && state.email.includes('@')
          ✓ Должен возвращать false если state.firstName === '' && state.lastName !== '' && state.email !== '' && state.email.includes('@')
          ✓ Должен возвращать false если state.firstName !== '' && state.lastName === '' && state.email !== '' && state.email.includes('@') (10ms)
          ✓ Должен возвращать false если state.firstName !== '' && state.lastName !== '' && state.email === '' && state.email.includes('@')
        Если state.step === 2
          ✓ Должен возврать  true если cardNumber.length === 16
        Если state.step !== 1 | 2
          ✓ Должен возврать false
      renderForm
        ✓ Присутствует
        ✓ Если state.step === 1 возвращает компонент <PersonalForm firstName={state.firstName} lastName={state.lastName} email={state.email onChangeForm={App.handleChangeForm} />
        ✓ Если state.step === 2 возвращает компонент <CardForm cardNumber={state.cardNumber} onChangeForm={this.handleChangeForm} onChangeTimeOver={this.handleChangeTimeOver} />
        ✓ Если state.step === 3 возвращает строку 'Поздравляем!'


Компонент Step
    Рендер
      ✓ Если props isSelected=true должен присутствовать элемент с классом step-selected
      ✓ Если props isClickable=true, должен присутствовать класс step-clickable вместе с классом step
      ✓ Тег с классом step__number должен содержать номер переданный через props number
      ✓ Тег с классом step__title должен содержать текст переданный через children
      Должен присутствовать элемент с классом
        ✓ step
        ✓ step__number
        ✓ step__title
    Методы класса
      handleClick
        ✓ Должен присутствовать метод handleClick
        При вызове
          ✓ Если isClickable=true, должен вызываться метод onClick переданный через props
          ✓ Если isClickable=false, метод onClick переданный через props не должен вызываться
          ✓ Если isClickable=true, должен вызываться метод onClick переданный через props c аргументом равным number переданным через props

Компонент CardForm
    Рендер
      Должен присутствовать элемент с классом
        ✓ .card-form
        ✓ .left-time
        ✓ .card-form input[name="cardNumber"]
        ✓ onChange input[name="cardNumber"] должен вызывать handleChangeForm
        ✓ onChange input[name="cardNumber"] должен вызывать handleChangeForm
      Методы класса
        handleChangeForm
          ✓ Присутствует
          ✓ При вызове вызывает функцию onChangeForm переданную через props, аргументами name и value становятся значения из event.target
        componentWillUnmount
          ✓ Присутствует
        componentDidMount
          ✓ Присутствует
          ✓ При монтировании запускает интервал
          ✓ Интервал меняет состояние компоненты state.leftTime
        constructor
          ✓ Присутствует

Компонент PersonalForm
    Рендер
      Должен присутствовать элемент с классом
        ✓ .personal-form
        ✓ .personal-form input[name="firstName"]
        ✓ .personal-form input[name="lastName"]
        ✓ .personal-form input[name="email"]
        ✓ onChange input[name="firstName"] должен вызывать handleChangeForm
        ✓ onChange input[name="lastName"] должен вызывать handleChangeForm
        ✓ onChange input[name="email"] должен вызывать handleChangeForm
      Методы класса
        handleChangeForm
          ✓ Присутствует
          ✓ При вызове вызывает функцию onChangeForm переданную через props, аргументами name и value становятся значения из event.target

Tests:       73 passed, 73 total

lesson-3's People

Contributors

dex157 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.