Template literal challenge passes with incorrect code

[joshalling]

Describe the bug

The challenge passes if you hardcode three array values into your function.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. use the following code

   const resultDisplayArray = [
   `<li class="text-warning">${arr[0]}</li>`,
   `<li class="text-warning">${arr[1]}</li>`,
   `<li class="text-warning">${arr[2]}</li>`
   ];

3. The tests pass when they shouldn't

Expected behavior

This is problematic because the given function will not work with arrays that have more or less than 3 values.

[johnkennedy9147]

Not sure why you think that is incorrect code. The challenge is to solve a specific problem using template literals, whether to map, loop or use another method on the result array or hardcode references to the array is up to the camper. There is no requirement to consider anything other than the provided 3 element array - result.failure

[joshalling]

I just think that allowing a solution like this teaches a bad practice as it only works correctly if the array passed has exactly three values. What if your failures array has four values? The 4th value would not be displayed.

I get that the point of this challenge is to teach template literals and this answer does show an understanding of that principle. But if I look at this and ask myself if it's good code, I would argue that it isn't. Maybe the solution to this issue is to just rework the challenge itself so that it is more focused on template literals.

Another thing to think about is that when b8d004e goes to production you will be able to paste the existing comment from the challenge into your function and get it to pass as shown below.

function makeList(arr) {
  "use strict";

  // change code below this line
  const resultDisplayArray = null;
  // change code above this line

  return [ `<li class="text-warning">no-var</li>`,
   `<li class="text-warning">var-on-top</li>`, 
   `<li class="text-warning">linebreak</li>` ];
}