Idea at resolving an issue

[drblaui]

As part of a Course at my university, I have to take part in an open-source project. Also in this course I am obligated to discuss my solution approach to an issue with the community and especially the developers.
I picked this issue and wanted to share the two ways I thought about solving it.

Firstly, this issue obviously appears everywhere, where a student profile picture is shown in detail, so as far as I understand the project structure, I have to change quite a lot under /src/web/app.

What I imagined was using JS/TS to basically calculate the ratio and size down the image according to that. For a picture that's for example taller than wider, I'd have a max height, scale the image to that height and calculate the corresponding width of the image, so that the proportions stay the same.
Another approach would be using the max-height and max-width css attributes, having the CSS take this issue of my hands

However the last approach is a bit harder to test, since it would require GUI Tests with Selenium, while I could just test my javascript function with jest and hope my DOM manipulation works.

What are your thoughts about my approach? Do you think they're valuable?

[wkurniawan07]

I have to change quite a lot under /src/web/app.

I'm not so sure you need to change "quite a lot" of files. While it's true that there are a few places whereby profile picture is shown, they're likely coming from/defined in the same component.

using JS/TS to basically calculate the ratio and size down the image according to that

It should work theoretically but sounds like too much work/additional code for a marginal gain.

the last approach [CSS attributes] is a bit harder to test, since it would require GUI Tests with Selenium

This is a non-issue. CSS definitions are never meant for automated testing.

[drblaui]

This is a non-issue. CSS definitions are never meant for automated testing.

It still needs to be tested, if the images scale the right way. Is manual testing sufficient for this?

[wkurniawan07]

Is manual testing sufficient for this?

Yes. No (free) system is sophisticated enough to be able to test UI details that are only comprehensible to human eye/brain.

[drblaui]

I have looked into it a little bit and found out that you can test GUI Elements with Selenium. Since scaling the image to the right size isn't really only comprehensible to the human eye, but instead actually readable from the CSS Data the actual image has, wouldn't you think testing with Selenium would work?