Update todo-list to demonstrate testing with ESM

[cjyuan]

Changelist

Summary

This PR updates the ToDo List exercise with the following improvements:

• Introduces the use of ESM with Node.js and Jest.
• Emphasizes separating code into UI and non-UI modules, enabling non-UI parts to be tested independently with Jest.

Changes in Exercise

Before:

• Trainees implemented a ToDo List app.
• Mass delete of completed ToDos was positioned as an advanced challenge.

Now:

• Trainees are given a ToDo List app already implemented in ESM, with code separated into UI and non-UI modules.
• Trainees need to:
  • Modify the code to implement mass delete of completed ToDos.
  • Add a Jest test to validate the mass delete function.

Related Issues in Curriculum

CodeYourFuture/curriculum#414
CodeYourFuture/curriculum#1289
CodeYourFuture/curriculum#1296
CodeYourFuture/curriculum#1448

Checklist

• I have read the contributing guidelines
• I have checked my spelling and grammar with an automated tool
• I have previewed my changes to check the markdown renders as I intend
• I have run my code to check it works
• My changes follow our Style Guide

Who needs to know about this?

@illicitonion

[github-actions]

Your PR's title isn't in the expected format.

Please check the expected title format, and update yours to match.

Reason: Wrong number of parts separated by |s

[github-actions]

Your PR's title isn't in the expected format.

Please check the expected title format, and update yours to match.

Reason: Wrong number of parts separated by |s

[illicitonion]

This looks great, thanks! I made a few suggestions here, and also a few in https://github.com/cjyuan/Module-Data-Groups/pull/1/files from when I was doing the exercise itself.

[illicitonion]

Have we introduced JSDOM anywhere before in the course? If not, we probably want a whole "intro to JSDOM" before we write this, maybe in its own md file?

But I don't think we're even using it in this project, so we probably want to just remove this and introduce it if/when we introduce JSDOM?

[cjyuan]

All the Web app exercises in Sprint-3 folder (including the old Todo List app) include a Jest test script that uses JSDOM. I think that's when most trainees first encountered JSDOM. A few of them tried to understand how it works or tried to implement their apps to pass the tests, but most simply ignore the test script. (When I reviewed their code, I didn't use the test script to check their implementation).

Should we update one of the web app exercises to introduce testing with JSDOM? Last I checked it does not yet work with ESM unless we use some tool chain.

[illicitonion]

Oh wow, yeah, it looks like we wrote tests in a very "run these but don't edit or understand them" style, and we don't event mention them in the README. Let's maybe attach an order to the exercises (maybe starting with the quote generator?) and add an intro to the JSDOM tests in there?

Let's keep what you have here, and separately add a bit of JSDOM introduction! Thanks!

[illicitonion]

Also FYI I made CodeYourFuture/trainee-tracker#21 to stop validating NotCoursework PRs :)

[cjyuan]

This looks great, thanks! I made a few suggestions here, and also a few in https://github.com/cjyuan/Module-Data-Groups/pull/1/files from when I was doing the exercise itself.

• I incorporated all your suggested changes, including those mentioned in the other PR.
• What would you like to do with the note about JSDOM?

[illicitonion]

LGTM! Just that one suggestion about <span> tags and I think we're good to merge!

I just edited #8 to mark it mandatory, I'll also rename the issues that sprint to make them be ordered usefully.