Specifi c тесты с указанием «TypeError: Невозможно прочитать свойство 'nodeName' of null '» в моем приложении React - PullRequest
Новая
       29

Specifi c тесты с указанием «TypeError: Невозможно прочитать свойство 'nodeName' of null '» в моем приложении React

0 голосов
/ 19 июня 2020

Моя программа должна пройти серию тестов, но 8/20 выдают точно такую ​​же ошибку:

«Невозможно прочитать свойство 'nodeName' с нулевым значением TypeError: Невозможно прочитать свойство 'nodeName' of null "

Вот несколько автоматических тестов, которые не проходят:

  1. Когда я щелкаю элемент с идентификатором« session-decment », значение в id = "session-length" уменьшается на значение 1, и я вижу обновленное значение. 
    ae(Array(4).fill(t)),o.assert.strictEqual(oe(document.getElementById("session-length")),"21"),s(),ae([t]),o.assert.strictEqual(oe(document.getElementById("session-length")),"24")
У меня не должно быть возможности установить длину сеанса или перерыва на <= 0. </li> 
ae(Array(10).fill(e)),o.assert.strictEqual(oe(document.getElementById("break-length")),"1",'Value in element with id of "break-length" is less than 1.'),s(),ae(Array(30).fill(t)),o.assert.strictEqual(oe(document.getElementById("session-length")),"1",'Value in element with id of "session-length" is less than 1.')
Когда обратный отсчет перерыва достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достичь 00:00), должен начаться обратный отсчет нового сеанса, отсчитываемый от значения, отображаемого в данный момент в элементе id = "session-length". 
    var t=this,a=arguments;return new Promise((function(n,o){var s=e.apply(t,a);function i(e){r(s,n,o,i,l,"next",e)}function l(e){r(s,n,o,i,l,"throw",e)}i(void 0)}))

Код приложения включен ниже, а ссылка на него - в codepen для облегчения доступа. Он отлично работает в коде и коде vs. Я просмотрел похожие сообщения на stackoverflow и связанных форумах, но не видел подобного случая. Программа представляет собой часы pomadoro для 5-го проекта интерфейсных библиотек freecodecamp. Все работает отлично и должно пройти все тесты, но я продолжаю получать эту ошибку «Не удается прочитать свойство 'nodeName' of nul». 

class App extends React.Component {
  constructor(props) {
  super(props);
    this.loop = undefined;
    this.state = {
      sessionTime: 25,
      breakTime: 5,
      clockCount: 1500,
      timerType: 'Session Timer',
      timerActive: false
    }
    this.handleReset = this.handleReset.bind(this);
    this.incrementSession = this.incrementSession.bind(this);
    this.decrementSession = this.decrementSession.bind(this);
    this.incrementBreak = this.incrementBreak.bind(this);
    this.decrementBreak = this.decrementBreak.bind(this);
    this.handleStartStop = this.handleStartStop.bind(this);
};


handleStartStop(){
  if(this.state.timerActive){
    clearInterval(this.loop);
    this.setState({
      timerActive: false
    })
  } else {
    this.setState({
      timerActive: true
    });
    this.loop = setInterval (() => {
      if(this.state.clockCount === 0){
        this.audioBeep.play();
        this.setState(state => ({
          timerType: (state.timerType === 'Session Timer') ? 'Break Timer' : 'Session Timer',
          clockCount: (state.timerType === 'Session Timer') ? state.breakTime * 60 : state.sessionTime * 60
        }))
      }

        this.setState(state => ({
          clockCount: state.clockCount - 1
        }));
      }, 1000)
    }
}

clockify(count){
  let minutes = Math.floor(count/60);
  let seconds = count % 60;
  minutes = minutes < 10 ? ('0'+minutes) : minutes;
  seconds = seconds < 10 ? ('0'+seconds) : seconds;
  return `${minutes}:${seconds}`;
}

incrementSession(){
  if(this.state.sessionTime < 60){
    this.setState(state => ({
      sessionTime: state.sessionTime + 1,
    }))
    if (this.state.timerType === 'Session Timer' && !this.state.timerActive) {
      this.setState(state => ({
        clockCount: (state.sessionTime * 60)
      }))
    }
  }
}

decrementSession(){
  if(this.state.sessionTime > 1){
    this.setState(state => ({
    sessionTime: state.sessionTime - 1
  }))
    if (this.state.timerType === 'Session Timer' && !this.state.timerActive) {
    this.setState(state => ({
      clockCount: (state.sessionTime * 60)
    }))
  }
  }
};

incrementBreak(){
  if(this.state.breakTime < 60){
    this.setState(state => ({
      breakTime: state.breakTime + 1
    }))
    if (this.state.timerType === 'Break Timer' && !this.state.timerActive) {
      this.setState(state => ({
        clockCount: (state.breakTime * 60)
      }))
    }
  }
}

decrementBreak(){
  if(this.state.breakTime > 1){
    this.setState(state => ({
    breakTime: state.breakTime - 1
  }))
    if (this.state.timerType === 'Break Timer' && !this.state.timerActive) {
    this.setState(state => ({
      clockCount: (state.breakTime * 60)
    }))
  }
  }
};


componentWillUnmount() {
 clearInterval(this.loop);
}

handleReset() {
  clearInterval(this.loop);
  this.audioBeep.load();
  this.setState({
      sessionTime: 25,
      breakTime: 5,
      clockCount: 25 * 60,
      timerType: 'Session Timer',
      timerActive: false
  });
};

render(){
  return (
  <div id="clock-container" className="container">
    <div className='container'>
      <h1>Pomadoro Clock</h1>
    </div>
     <div id='interval-row' className='row'>
      <div id="break-container" className="container col-6">
       <h3 id="break-label">Break Length</h3>
       <div id='break-controls' className='row align-items-baseline justify-content-center'>
         <i id="break-increment" className="btn increment-arrow fas fa-arrow-up fa-xs" onClick={this.incrementBreak}></i>
         <p id="break-length">{this.state.breakTime}</p>
         <i id="break-decrement" className="btn decrement-arrow fas fa-arrow-down fa-xs" onClick={this.decrementBreak}></i>
       </div>
       </div>
     </div>
    <div id="session-container" className="container col-6">
      <h3 id="session-label">Session Length</h3>
      <div id='session-controls' className='row align-items-baseline justify-content-center'>
        <i id="session-increment" className="btn increment-arrow fas fa-arrow-up fa-xs" onClick={this.incrementSession}></i>
        <p id="sesson-length">{this.state.sessionTime}</p>
        <i id="session-decrement" className="btn decrement-arrow fas fa-arrow-down fa-xs" onClick={this.decrementSession}></i>
      </div>
    </div>
  <div id='timer-container' className="container flex-column">
    <Timer 
      sessionTime={this.state.sessionTime} 
      breakTime={this.state.breakTime}
      timerActive={this.state.timerActive}
      handleReset={this.handleReset}
      handleStartStop={this.handleStartStop}
      timerType={this.state.timerType}
      clockify={this.clockify}
      clockCount={this.state.clockCount} />
  </div>
<footer>
  <h6 className="author">Created by Donovan James</h6>
</footer>  
      <audio id="beep" preload="auto" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav" ref={(audio) => {
          this.audioBeep = audio;
        }}
      />
</div>
  );
}
};

class Timer extends React.Component {
   constructor(props) {
   super(props);

     }

 render(){
   const timeLeft = this.props.clockify(this.props.clockCount);
   return(
    <div>
     <h2 id="timer-label">{this.props.timerType}</h2>
      <div id="time-left">{timeLeft}</div>
      <div id='timer-controls' className='row justify-content-center'>
      <i id='start_stop' className={this.props.timerActive ? 'btn fas fa-pause fa-xs': 'btn fas fa-play fa-xs'} onClick={this.props.handleStartStop}></i>
      <i id='reset' className='btn fas fa-redo fa-xs' onClick={this.props.handleReset}></i>
    </div>
     </div>
   );
 }
};

ReactDOM.render(<App />, document.getElementById('app'))
...