Demo: Testing frameworks for JavaScript in frontend and backend

[elibon99]

Assignment Proposal

Title

Testing frameworks for JavaScript in frontend and backend

Names and KTH ID

• Elias Bonnici (bonnici@kth.se)
• Julian Nalenz (nalenz@kth.se)

Deadline

Task 1

Category

Demo

Description

With the NodeJS ecosystem, JavaScript can be used in both frontend and backend. As with any software stack, unit and integration testing are an essential part, yet selecting the right tool for each individual use case can be a challenge, as NodeJS-based environments can be highly diverse.

In this demonstration, we show how JavaScript-/NodeJS-based frontends and backends can be tested in real life and how to set up and run such tests with the respective frameworks. Specifically, we will demonstrate the combined use of Jest and Supertest for the backend and its HTTP routes and React Testing Library for the frontend.

[dd2482-bot]

Readme is not correctly formatted
Need exactly: ['Assignment Proposal', 'Title', 'Names and KTH ID', 'Deadline', 'Category', 'Description']

Got: ['Demo Proposal', 'Title', 'Members', 'Deadline', 'Category', 'Proposal']

[javierron]

Hello @elibon99, thanks for the proposal.

Could you list on the description which JS frontends and backends you will be focusing on? There has been some work done previously on this course about Express and React. It would be great to perform your demo on environments different than these.

[sigalor]

Hey @javierron, please refer to the email I just sent you with my phone number so that we can quickly discuss this issue.

[javierron]

Hello @sigalor, thanks for your reply.

If you prefer real-time interaction, we are happy to discuss during the breaks in the lectures, or during a lab session.
(IMO It is much better if any discussion regarding the task is documented here, as we would be able to refer to it at a later time.)

In any case, the task you have described is very relevant to this course, but it is necessary that the description is updated to be clearer before the task is accepted.

[sigalor]

@javierron So the situation is that we agreed with the professors that we would do this demonstration during the next lecture slot, i.e. on March 29th. Until then, we don't have any other lab sessions, meaning that there is no way to discuss this in person, Let me outline the points I discussed with Elias here then instead.

Firstly, as you already mentioned, NodeJS, React and Express are highly relevant frameworks in today's software development world, so we are convinced that our demonstration with these two frameworks specifically would be highly valuable to the other students. After all, even if students in past semesters did some assignments on these, that doesn't really matter for us now, because the students that take the DevOps course for the first time right now should also have the opportunity to learn this.

Furthermore, the NodeJS ecosystem evolves very rapidly. For instance, Enzyme is a testing framework for React which hasn't been updated for two years by now, meaning that it is essentially deprecated by now. A year ago, this might not have been so relevant yet, but now the situation has changed. In our opinion, shortly discussing these "meta topics" like realizing how your software stack is constantly evolving and has to be updated dynamically is also an essential part of good, long-lasting software engineering. With these examples in very common environments like React, we could illustrate this very clearly.

Regarding our own knowledge, Elias and I are already fairly familiar with React, Express and the foundation of NodeJS. We also see this demo of testing frameworks as an invitation for the audience (i.e. the other students) to ask us questions about these frameworks, which we will probably be able to answer quite confidently given our existing experience. On the other hand, if we would demonstrate testing libraries in some other framework (e.g. Vue or Angular for the frontend or something like Koa for the backend), we would mostly be learners ourselves, so that we would be much less able to help other students if they ask us about something specific and technical. Consequently, we think that staying with React and Express would be much more valuable for the audience for this reason as well.

Apart from that, as I also mentioned in the lecture last Tuesday when I proposed this topic, Elias and I are still very interested in learning about testing frameworks for JS in the frontend and backend ourselves. As the professors emphasized, this course should be a combination of us learning new things when doing the assignments and sharing knowledge with the other students. The former would be especially fulfilled when focusing on React and Express in the demo, because Elias and I as well as Per and Philip (see next paragraph) are both personally and professionally interested in these frameworks specifically.

During the lecture last Tuesday, the professors suggested that we should form a four-person group for the topic of JS testing frameworks, where two people do a presentation (Per and Philip, see #1593) and the other two a demo (Elias and I). Of course we are fully aware of the fact that regarding the grading, presentation and demo are two fully separate things and each one should be standalone. But we still think that from the audience's point of view, it would be a much more useful narrative when Per and Philip first present some "theory" for possible testing frameworks and compare several different ones and then Elias and I show two of them in a real-life scenario, for the frontend and backend respectively. Thus, if for this demo, we would have to pivot to other frameworks instead of React with React Testing Library and Express with Jest and Supertest, this narrative would be broken. This would of course not be terrible, because the demo is still standalone, but for the audience, some interesting and valuable context might be lost.

Finally, from an organizational point of view, we of course have time pressure right now. As suggested by the professors, the presentation from #1593 and our demo will be held on Tuesday, March 29th. During the lab session yesterday, Deepika (@Deee92) verbally approved our proposal descriptions, so we already started working on the demo, thinking that having this pull request merged would only be a small formality.

We'd be very grateful if either you, Martin (@monperrus) or Benoit (@bbaudry) could give us feedback on how to proceed with this. Right now, we see three options:

1. We stay with React and Express for the demo, due to the arguments above and so that it is perfectly aligned with the corresponding presentation. If you agree with this and would just like the proposal description to be a bit more elaborate, kindly hint us towards which changes are necessary specifically.
2. We have to switch to other frameworks instead of React and Express, which would have its drawbacks also outlined above.
3. In case we cannot come to an agreement or in case you think that regarding the grading formalities, there is no way how we could pass this demo assignment (e.g. because similar demos have been done before or just because the topic of JS testing is too common altogether), we would have to discard this entire proposal. That would of course be the most unfortunate option and a lose-lose situation for everyone.

As this demo should take place next Tuesday morning, it isn't really feasible for us to wait until Monday to be sure that we can fully prepare the demo. As mentioned, it would thus be great if we could get your feedback as soon as possible. In case we don't get any feedback until tomorrow (Sunday) at noon, Elias and I will assume to go with option 1 and prepare the demo as planned in order to present it on Tuesday.

[javierron]

Thanks for the detailed response, it's super clear now.

I look forward to seeing your demo.

[nalenz]

The two repositorys showed in this demo today can be found here:

• frontend: https://github.com/elibon99/react-testing-library-demo
• backend: https://github.com/nalenz/dd2482-demo-jstesting-backend

[monperrus]

@elibon99 @sigalor could you update your readme with a link to the demo repo (more durable than a comment)? Thanks!

[nalenz]

@monperrus Of course, please find the respective PR at #1625!