feat: introduce non-ambiguous file name patterns for various kinds of testing approaches (playwright component test/jest test)

[Hotell]

Goal: We need to establish unique file name patterns for various testing approaches.

ATM if a project would use jest and playwright component test, the only distinction ATM is .test vs .spec but jest actually invokes also .spec which would explode.

With cypress we use *.cy.* suffix, we can do something similar for playwright,

Few ideas:

• *.pw.tsx / *.playwright.tsx (playwright)
• *.ct.tsx / *.component-test.tsx (component test)
  • 

Context on "component test"

• https://docs.cypress.io/guides/component-testing/overview
• https://playwright.dev/docs/test-components

Originally posted by @Hotell in https://github.com/microsoft/fluentui-contrib/issues/100#issuecomment-1939257755

[ling1726]

What about component.browser.test.ts ? it's a bit more verbose but probably more descriptive since that's what we use playwright for

[Hotell]

other opinions on this ? @marcosmoura @tudorpopams @TristanWatanabe ?

[TristanWatanabe]

No strong opinion from me other than I generally prefer more descriptive naming patterns similar to what @ling1726 suggested. Generally don't like acronyms unless they're commonly used across the ecosystem 😆

[Hotell]

sounds good, let's go with *.component-browser-test.* suffix pattern