TESTS not passing Build a 25 + 5 Clock(27/29)

JavaScript
1

for some reason it doesn’t pass all the tests even though it does what all the requirments

here is my codepen: https://codepen.io/Abstrxction/pen/bGaeqJR

it passes 27/29 test// the 2 tests are:

13. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id=“break-length” element.

15. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id=“session-length” element.

thanks in advance to any who can help :slight_smile:

2

Looking at the first one, the full text is:

When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id=“break-length” element.

Timer has switched to Break time, but it didn’t start with the correct value.: expected 0 to equal 5 AssertionError: Timer has switched to Break time, but it didn’t start with the correct value.: expected 0 to equal 5

When I look in the the test files, I find that this is the test that is failing:

      it(`When a session countdown reaches zero (NOTE: timer MUST
      reach 00:00), a new break countdown should begin, counting down from the
      value currently displayed in the id="break-length" element.`, async function () {
        this.timeout(100000);
        hackGlobalTimerFunctions();
        // we decrement session time to the minimum (1 minute)
        clickButtonsById(Array(60).fill(seshMin));
        // start the 25 + 5 clock
        clickButtonsById([startStop]);

        let sessionLabel = document.getElementById('timer-label').innerHTML;

        await timerHasReachedZero();
        await timerStateHasChanged();

        const currentTimer = document.getElementById('timer-label').innerHTML;
        assert.notStrictEqual(
          currentTimer,
          sessionLabel,
          "Timer has reached zero but didn't switch to Break time"
        );

        const breakLength = +getInputValue(
          document.getElementById('break-length')
        );
        const breakTime = +getMinutes(
          document.getElementById('time-left').innerText
        );
        assert.strictEqual(
          breakTime,
          breakLength,
          "Timer has switched to Break time, but it didn't start with " +
            'the correct value.'
        );
      });

So, based on the error message, this is the assertion that is failing:

        const breakLength = +getInputValue(
          document.getElementById('break-length')
        );
        const breakTime = +getMinutes(
          document.getElementById('time-left').innerText
        );
        assert.strictEqual(
          breakTime,
          breakLength,
          "Timer has switched to Break time, but it didn't start with " +
            'the correct value.'
        );

It is expecting the value in “break-length” to equal the value in “time-left”. One is 0 and one is 5.

I took a look to see if I could see the problem, but things like this:

          <div id='break-length'> 
            {this.state.break < 1 ? this.setState({break: 1}): this.state.break && this.state.break > 60 ? this.setState({break: 60}): this.state.break}
          </div>

are just something I don’t want to try to read. For my taste, that is too much logic in your JSX and it is a little confusing to be setting state in there.

Also, I think putting everything in your mega-component kind of defeats one of the points of React, breaking things into separate components. You can break apart things and logic into smaller pieces so they are easier to debug and maintain. It’s a little hard to see in codepen, but when you do React in the “real world”, you will be putting them into different files, each dealing with their own thing, instead of all mixed together.

3

yeah i’m very new to react and i figured i should sort things a bit to late, will definetly try to improve my code logic and structure

4

Yeah I get it. I was where you are once. Now I do React for a living. The sooner yo start think8ng about things as separate components, the better. In the beginnng it can be mostly visual. You have two things to selecting a time - those should use the same component. You need a display component, something for the buttons… There is certainly more thatn one good way to do it. And breaking it up like that also makes it easier to find problems.

Keep at it, you’ll get there.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.