Update actions/upload-artifact from v3 to v4 to use the latest version. Also fix E2E test artifacts generation by configuring jest-html-reporters.

[imanish003]

Fixes #

This PR updates the GitHub Actions workflow to use actions/upload-artifact@v4 instead of v3, as v3 will be deprecated on January 30, 2025.

GitHub has announced that artifact actions v3 will be closing down by January 30, 2025. After this date, using v3 of these actions will result in workflow failures.

The following workflows have been updated to use actions/upload-artifact@v4:

1. JavaScript and CSS Linting workflow
   • Updated "Upload ESLint report step to use actions/upload-artifact@v4
2. End-to-End Tests workflow
   • Updated the debug artifacts upload step to use actions/upload-artifact@v4

Additional changes

While testing changes made in this PR, I made two more changes:

1. I have also updated "End-to-End Tests" workflow to use ubuntu-22.04 because of the issue mentioned in troubleshooting section. This was failing on Ubuntu 23.10+. Probably we can use some workarounds but for now, I have decided to use Ubuntu 22.04 to fix the issue.

2. While testing "End-to-End Tests" workflow, I found that workflow wasn't generating any artifacts, even if tests were failing. I found out that we don't have reporters configured in package.json. I have added following to package.json to fix the issue.

"reporters": [
			"default",
			[
				"jest-html-reporters",
				{
					"publicPath": "./artifacts",
					"filename": "report.html"
				}
			]
		]

I also added jest-html-reporters to devDependencies in package.json.

Screenshots

How to test the changes in this Pull Request:

1. Test "JavaScript and CSS Linting / Lint JavaScript" workflow

   • In this PR, verify that the workflow runs successfully
   • Verify that you can see file eslint_report.json in the "Artifacts" section of the workflow run
     

2. Test "End-to-End Tests" workflow

   • In this PR, verify that the workflow runs successfully and uploads debug artifacts using v4.
   • Testing generated HTML report
     • Create a pull request that triggers E2E tests.
     • Intentionally make a test fail to generate debug artifacts. For example, I tested in commit f9c3138.
     • Verify that failures-artifacts is available in the "Artifacts" section of the workflow run. Download and inspect the file to confirm it contains the expected content.

Changelog

Update actions/upload-artifact from v3 to v4 to use the latest version. Also fix E2E test artifacts generation by configuring jest-html-reporters.

[Aljullu]

Thanks for working on this, @imanish003! 🙌

I tested it in #2181 and everything looks as expected. Code changes look good as well.