Review automated tests

[crayola-eater]

1. Think '.body' selector will need to instead be 'body'. Otherwise, document.querySelector('.body') returns null here, which is a problem in this context, as null gets passed to toHaveStyle matcher, which throws a type/validation error during the test as the matcher doesn't accept null.

https://github.com/SchoolOfCode/workshop_css-variables-b12/blob/35032a34ee5a691156054b2ec923a8c5fca49966/main.test.js#L57
https://github.com/SchoolOfCode/workshop_css-variables-b12/blob/35032a34ee5a691156054b2ec923a8c5fca49966/main.test.js#L88

All the bootcampers failed this particular test I believe for the reason above.

2. There might be issues with using toHaveStyle in conjunction with CSS variables, where the assertion passes even when it shouldn't.

   • for context, see: .toHaveStyle() does not get font-size w/ css variable testing-library/jest-dom#322
   • for minimal example/investigation, try using https://github.com/SchoolOfCode/w3d2_css-variables-lozzy-and-rajesh/tree/1d5b982a9e68e192b0eb8cf9e2ea14641115fc86 and seeing whether the test for level 2 passes (and if not, is the test doing its job correctly?)
   • haven't had time to investigate this properly but the issue might be resolved by the time the next cohort runs -- or maybe we can rework these tests to parse styles.css ourselves (probably a CSS parser on NPM) and make assertions that way.

3. Once the above has been investigated, it might be useful to break the first test up into one test per assertion, just to provide a more granular view when autograding (and so that bootcampers don't have to pass all the assertions to get 1 point). Maybe something like:

describe(LEVELS.one, () => {
  it.each(
     // Could combine all of the expected css rules for a given selector into a single string/object.
     // But doing it separately should mean we'll have a more granular view when autograding.
    [
      [".plant-header", "font-size: var(--header-size)"],
      [".plant-listing", "background-color: var(--primary-colour)"],
      [".plant-listing", "border-radius: var(--border-radius)"],
      [".plant-pic", "border-radius: var(--border-radius)"],
      ["body", "color: var(--text-colour)"],
      ["body", "background-color: var(--secondary-colour)"],
      ["button", "font-size: var(--text-size)"],
      ["button", "border-radius: var(--border-radius)"],
      ["main", "font-size: var(--text-size)"],
    ]
  )(
    "should have an element (%s) styled using CSS variables (%s)",
    (selector, cssRule) => {
      const element = document.querySelector(selector);
      expect(element).not.toBeNull();
      expect(element).toHaveStyle(cssRule);
    }
  );
});