Random Quote Generator Layout Test not passing

1

Hi there,

I finished the project using React, a JSON source file on GitHub and flexbox styling for the layout. The tests only run in Firefox (Chrome is throwing a Mocha div error which I also found in the forum to be common).

My project is here

Problem is:
11 tests pass but the layout test does not. It says:

  1. The #quote-box wrapper element should be horizontally centered. Please run tests with browser’s zoom level at 100% and page maximized.

I tried a lot to find out why this last test does not pass, the element seems centered to me. I’d be happy if you could have a look. Thanks a lot!

If you test in Firefox: You might have to run the tests a second time in case they get stuck after 8 tests in the first run :slight_smile: When tests runs first there seems to be an issue with the response times although the app does not seem to have a problem.

3

Yes, the tests will work in Chrome (as they do for me), but there is something preventing them for working on your browser.

For your layout problem…
Removing width: 100%; from body fixes it.

4

Yep, thanks for the quick answer. I did, but the problem I have with my project itself is the layout test. Sorry I didn’t be clear enough in my question :slightly_smiling_face:

5

Thank you so very much! That did the trick indeed.

8

Because it has display: flex already and stretches (?) … I added a comment to the CSS code