test(banner): add darkmode screenshot test and refactor folder structure

[max-umain]

Describe pull-request

Adds screenshot tests for banner in light and dark modes, as well as with different background colors and banner variants.

Issue Linking:

• Jira: CDEP-3645

How to test

Provide detailed steps for testing, including any necessary setup.

1. Run npm run test
2. Visually inspect the files generated by the tests

Checklist before submission

• I have added unit tests for my changes (if applicable)
• All existing tests pass
• I have updated the documentation (if applicable)
• Not breaking production behavior
• Behavior available in storybook with documented descriptions (if applicable)
• npm run build-all without errors

Suggested test steps

• Browser testing (Chrome, Safari, Firefox)
• Keyboard operability
• Interactive elements have labels.
• Storybook controls
• Design/controls/props is aligned with other components
• Dark/light mode and variants
• Input fields – values should be displayed properly
• Events

Screenshots

Not applicable

Additional context

None

[github-actions]

Playwright test results

 395 passed
 1 skipped

Details

 396 tests across 135 suites
 53.6 seconds
 d286348

Skipped tests

src/components/table/table/test/expandable-row-autocollapse/expandable-row-autocollapse.e2e.ts › tds-table-expandable-row-autoCollapse › NEEDS FIXING: expanding one row collapses the others when autoCollapse is true

[aws-amplify-eu-north-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-880.d3fazya28914g3.amplifyapp.com

[nathalielindqvist]

Neat implementation! From what I can see you have created a new folder for these test results. Sticking to the current folder structure, with 'basic', 'default', 'information' and 'error' and having the corresponding tests in their respective folders might make it easier to maintain. Looking at the already existing screenshots it looks like they have an icon in the Banner as well, which is a visual element that would need to be tested in dark and light mode as well. Maybe there is a way to build on top of what is already there? :)

[max-umain]

@nathalielindqvist
Thank you for the feedback :)

I now created a commit aee1078 where I created a file screenshotTests.ts, that I now call from the existing test files for banner. This uses the index.html files for the existing tests, so the icons in those will be present in these screenshots too.

Perhaps we could reuse the screenshotTests function (although it would need to be modified slightly to take more parameters for background color and such) in other components' tests (similar tickets in Jira). What do you think about this?

[max-umain]

Update: I removed the reusable test and created lightmode and darkmode folders in banner tests

[nathalielindqvist]

Great work! 🌟

[max-umain]

One final change: @Lunkan89 and I agreed that it's unnecessary to change html files (and the images) of the existing tests if they are e.g. lightmode with white background, so I restored the html files to how they were before

[nathalielindqvist]

Good thinking, looks nice! 🙂

[max-umain]

@nathalielindqvist @Lunkan89
Sorry, I forgot to refactor the page.goto lines to beforeEach, pushed that commit now

[Lunkan89]

Looks good

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud