feat: create callback project prototype

[a2937]

Checklist:

• [X] I have read freeCodeCamp's contribution guidelines.
• [X] My pull request has a descriptive title (not a vague title like Update index.md)

Closes #XXXXX

This is a prototype of what I think I am trying to build for the PR in https://github.com/freeCodeCamp/freeCodeCamp/pull/55283. A prototype might help make sure I am on the right track.

[jdwilkin4]

It looks like you have linked to the wrong PR. It looks like you wanted to link this one https://github.com/freeCodeCamp/freeCodeCamp/pull/55283

But also, I think we should stick with creating a small project like mentioned here https://github.com/freeCodeCamp/freeCodeCamp/issues/55052#issuecomment-2174005553

With the prototype you currently created, that can easily ballon to 60+ steps since there will be a lot of new things you will be throwing their way. So we don't want them to get bogged down with more details since that is one of the core issues the new JS curriculum is dealing with.

I like the idea of creating your own testing library but we need to be careful about not trying to cover too many things at once.

[a2937]

Yeah I can see it growing into way too many steps. What do you suggest I trim from it?

[jdwilkin4]

I think we should either have examples with expect and sum like this:

function test(title, callback) {
  try {
    callback();
    console.log(`✓ ${title}`);
  } catch (error) {
    console.error(`✕ ${title}`);
    console.error(error);
  }
}

function expect(actual) {
  return {
    toBe(expected) {
      if (actual !== expected) {
        throw new Error(`${actual} is not equal to ${expected}`);
      }
    },
  };
}

function sum(num1, num2) {
  return num1 + num2;
}

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

// create a step where campers write this test on their own

test("adds 3 + 5 to equal 8", () => {
  expect(sum(3, 5)).toBe(8);
});

// maybe you could have a step that fails the test
test("adds 13 + 22 to equal 2", () => {
  expect(sum(13, 22)).toBe(2);
});

or have examples for using map or filter If you choose the higher order function option, I would suggest jumping straight into using assert and deepEqual and explaining why it is needed.

Then you can guide them through one test and have then write a couple on their own.

So you can choose either the numToString example, or the isEven filter example or create another example like this

function test(title, callback) {
  try {
    callback();
    console.log(`✓ ${title}`);
  } catch (error) {
    console.error(`✕ ${title}`);
    console.error(error);
  }
}

function assert(actual) {
  return {
    deepEqual(expected) {
      for (let i = 0; i < actual.length; i++) {
        if (actual[i] !== expected[i]) {
          throw new Error(
            `Element at index ${i} is different: ${actual[i]} is not equal to ${expected[i]}`
          );
        }
      }
    },
  };
}

function multipleBy2(num) {
  return num * 2;
}

test("[1, 2, 3].map(multipleBy2) returns new array of [2,4,6]", () => {
  const input = [1, 2, 3];
  const expectedOutput = [2, 4, 6];
  assert(input.map(multipleBy2)).deepEqual(expectedOutput);
});

// have campers write tests on their own

test("[12, 6, 8, 24].map(multipleBy2) returns new array of [ 24, 12, 16, 48 ]", () => {
  const input = [12, 6, 8, 24];
  const expectedOutput = [24, 12, 16, 48];
  assert(input.map(multipleBy2)).deepEqual(expectedOutput);
});

test("[12, 6].map(multipleBy2) should not equal [1, 2, 3, 4]", () => {
  const input = [12, 6];
  const expectedOutput = [1, 2, 3, 4];
  assert(input.map(multipleBy2)).deepEqual(expectedOutput);
});

I think trimming it down that way will still give them plenty to work with and learn and get the point across with callbacks.

[a2937]

I like option number 2 to be honest.

[a2937]

Thank you Jessica.