freeCodeCamp / freeCodeCamp/curriculum-helpers
`CSSHelp.getStyle()` may be too strict
- Dominant language
- TypeScript
- Stars
- 28
- Forks
- 34
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
The method `CSSHelp.getStyle()` tests for an exact class name match. If the tested css selector contains the expected class plus the element tag, the test that uses `CSSHelp.getStyle()` fails. An example of this uses Test 13 at https://www.freecodecamp.org/learn/full-stack-developer/lab-blog-post-card/lab-blog-post-card
```css
.read-more:hover{background: yellow;} /* passes test */
```
```css
a.read-more:hover{background: yellow;} /* fails */
```
### To Reproduce
1. Go to https://www.freecodecamp.org/learn/full-stack-developer/lab-blog-post-card/lab-blog-post-card
2. Use sample html / css:
```html
```
```css
a.read-more:hover {
background: yellow;
}
```
3. See test 13 fail (it passes with the sample code if the `a` is removed from the selector.
### Expected behavior
I would have liked to see my test pass even with the `a` present in the selector, as this aligns with the spirit of what was being tested.
### Screenshots
### Additional context
I was advised in discord to raise the issue to discuss it here. I'm not sure if changing the strict equality test for `.includes()` is advisable, as I cannot guarantee this won't introduce more issues with respect to other lab tests.
### Alternative approach
Instead of altering `CSSHelp.getStyle()`, we could add to the Get Help button a sort of FAQ that include advice such as:
> If tests are not passing, you should ensure your CSS selectors match verbatim the way the selectors are defined in the tests.
I'm not sure if this already exists.
Contributor guide
Assessment
This issue has not been assessed yet.