Freecodecamp: [beta] Add solutions to the Applied Visual Design challenges

[Greenheart]

Issue Description

To allow npm test to properly test challenges, I think we should add solutions for each challenge.

This can be done by adding a solution as a one-line string to each challenge's solutions array.
A solution should be based on the challengeSeed.

[Greenheart]

I'm working on a PR for this.

[Greenheart]

As I couldn't get my solutions to pass npm test, I did some research. Whatever I did, the test runner returned ✖ SyntaxError: Unexpected token <.

After investigating other seed-files, I found that no HTML-based challenges even uses the solutions array. Next, I looked for the npm test script in package.json and found the file responsible for running tests, seed/test-challenges.js.

After reading that code, I understand why my tests weren't working. It's because these lines expect challenge solutions to consist of pure JS-code.

Should we extend seed/test-challenges.js to also allow testing of HTML and CSS challenges?

To do that, we could probably use something like https://github.com/krasimir/atomus to simulate the browser environment. It seems quite simple to just inject the solution HTML and CSS into this library and then run tests as usual.

Note that this library uses a fixed version of jQuery (1.X), so if some of our tests depend on newer versions of jQuery, we'd possibly need to submit a PR to Atomus to conditionally use other another jQuery-version.

Conclusion

By adding support for testing all types of challenges, we would be able to detect more errors before they make it into production. And hopefully, we can leverage existing tools to make this update not require more than ~40 lines of additional code.

@freeCodeCamp/moderators and especially @BerkeleyTrue, what do you think about this?

I would be happy to try extending the existing npm run test-challenges implementation if you think it's worth the effort :blush:

[QuincyLarson]

@Greenheart yes - imho we should extend test-challenges.js to include HTML/CSS solutions.

@BerkeleyTrue do we plan to continue using test-challenges.js for the foreseeable future? Is it worth the effort of extending?

[BerkeleyTrue]

@QuincyLarson @Greenheart We currently cannot test all the challenges because the testing framework is not set up for that.

I have https://github.com/freeCodeCamp/freeCodeCamp/issues/4201 which will allow us to test all the challenges.

At the moment this is a low priority.