test(quantic): SFINT-5832 Sort E2E tests migrate from Cypress to Playwright

[lvu285]

https://coveord.atlassian.net/browse/SFINT-5832

IN THIS PR:

• Added Playwright E2E tests for the quantic-sort component

UNIT TESTS:

• No need, as UTs already there

E2E PLAYWRIGHT TESTS:

• Playwright for Sort component

[github-actions]

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	244	244	0
commerce	355.3	355.3	0
search	415.2	415.2	0
insight	406.4	406.4	0
recommendation	256.2	256.2	0
ssr	409	409	0
ssr-commerce	373	373	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[mmitiche]

@erocheleau I will integrate the content from this PR: #4782 in this PR as well, to have more unit tests to test the component rather going E2E only.

[SimonMilord]

Re-read the comments that were addressed, ltgm! thank you

[erocheleau]

Not done yet :)

Will review the playwright tests later

[erocheleau]

What does the "focusSortDropDownEnter" mean here?
The function clicks on the preview button and then presses Tab?

[erocheleau]

The name of this function doesn't describe what is being done with the steps within this function, what are you trying to accomplish with that?

[erocheleau]

You shouldn't need to do that, since your higher beforeEach will already mockSuccessfulHeadlessInitialization()

[mmitiche]

That's true indeed 👍

[erocheleau]

You should be able to remove that afterAll entirely @lvu285

[erocheleau]

Some suggestions

[erocheleau]

This one is weird for me, why you rely on 'Oldest' specifically, and also why do you have to wait for 500ms?

[erocheleau]

After seeing the test, it shouldn't be in the pageObject just in your test, put this:

await this.page.keyboard.press('ArrowDown');
await this.page.keyboard.press('Enter');

[lvu285]

the wait for 500ms is to make the test for Insight use case more stable, otherwise the next keyboard action sometimes will fail.

[erocheleau]

Ah yes I remember that, it's true, I think you should put indeed a small delay in between all keyboard press if I remember correctly.

[erocheleau]

Why do you need the as typeof ?

Suggested change

	let test;
	if (useCase.value === useCaseEnum.search) {
	test = fixtures[useCase.value] as typeof testSearch;
	} else {
	test = fixtures[useCase.value] as typeof testInsight;
	}
	const test = fixtures[useCase.value];

[lvu285]

I won't fix it now, as it's bit complicated. Mehdi will review and fix them later

[erocheleau]

@mmitiche any insight here?

[erocheleau]

Again here, I would go fetch what the loaded sorts are available on the page instead of relying on the default sorts.

[lvu285]

same as above, we want to be sure the sort displays in correct order

[erocheleau]

Order of sorts is not in the contract of our component. It's a parameter we receive and then display. We have unit tests to check that the sort are displayed in the order we've received them.

The e2e test shouldn't rely on the order of sort options to pass or fail. Please make this small change :)

[erocheleau]

Still the need to not have our e2e break if we change the sort options names or labels ;)

Otherwise a few things to resolve still.

[erocheleau]

You should be able to remove that afterAll entirely @lvu285

[erocheleau]

@mmitiche any insight here?