Make Playwright tests less flaky by using storybook to test VMediaReu…

…se (#1946)

Use storybook to test VMediaReuse

src/components/VMediaInfo/VMediaLicense.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="media-attribution">
-    <h3 class="description md:heading-6 mb-4">
+    <h3 class="description-bold md:heading-6 mb-4">
       {{ headerText }}
     </h3>
 

src/components/VMediaInfo/meta/v-media-reuse.stories.mdx

@@ -0,0 +1,59 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+
+import VMediaReuse from '~/components/VMediaInfo/VMediaReuse.vue'
+
+export const image = {
+  id: 'f9384235-b72e-4f1e-9b05-e1b116262a29',
+  frontendMediaType: 'image',
+  title: 'Cat',
+  originalTitle: 'Cat',
+  foreign_landing_url: 'https://www.flickr.com/photos/7788419@N05/15218475961',
+  url: 'https://live.staticflickr.com/3903/15218475961_963a4c116e_b.jpg',
+  creator: 'strogoscope',
+  creator_url: 'https://www.flickr.com/photos/7788419@N05',
+  license: 'by',
+  license_version: '2.0',
+  license_url: 'https://creativecommons.org/licenses/by/2.0/',
+  provider: 'flickr',
+  source: 'flickr',
+  detail_url:
+    'http://localhost:49153/v1/images/f9384235-b72e-4f1e-9b05-e1b116262a29/',
+}
+
+<Meta title="Components/VMediaInfo/VMediaReuse" components={VMediaReuse} />
+
+export const Template = (args) => ({
+  template: `
+<div class="flex flex-col gap-y-2">
+<VLanguageSelect />
+    <VMediaReuse v-bind="args" />
+</div>
+  `,
+  components: { VMediaReuse },
+  setup() {
+    return { args }
+  },
+})
+
+# VMediaReuse
+
+<Description of={VMediaReuse} />
+
+<ArgsTable of={VMediaReuse} />
+
+<Canvas>
+  <Story
+    name="VMediaReuse"
+    args={{
+      media: image,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

test/playwright/visual-regression/components/media-reuse.spec.ts → test/storybook/visual-regression/v-media-reuse.spec.ts

@@ -1,14 +1,7 @@
 import { test } from '@playwright/test'
 
 import breakpoints from '~~/test/playwright/utils/breakpoints'
-import {
-  dismissTranslationBanner,
-  languageDirections,
-  pathWithDir,
-  scrollDownAndUp,
-  t,
-} from '~~/test/playwright/utils/navigation'
-import { mockProviderApis } from '~~/test/playwright/utils/route'
+import { languageDirections, t } from '~~/test/playwright/utils/navigation'
 
 test.describe.configure({ mode: 'parallel' })
 
@@ -17,25 +10,22 @@ const tabs = [
   { id: 'html', name: 'HTML' },
   { id: 'plain', name: 'Plain text' },
 ]
+const defaultUrl =
+  '/iframe.html?id=components-vmediainfo-vmediareuse--v-media-reuse'
+const pageUrl = (dir: typeof languageDirections[number]) =>
+  dir === 'ltr' ? defaultUrl : `${defaultUrl}&globals=languageDirection:rtl`
 
 test.describe('media-reuse', () => {
   for (const tab of tabs) {
     for (const dir of languageDirections) {
       breakpoints.describeEvery(({ expectSnapshot }) => {
         test(`Should render a ${dir} media reuse section with "${tab.name}" tab open`, async ({
-          context,
           page,
         }) => {
-          await mockProviderApis(context)
-
-          await page.goto(
-            pathWithDir('/image/f9384235-b72e-4f1e-9b05-e1b116262a29', dir)
-          )
-          await dismissTranslationBanner(page)
-          // The image is loading from provider, so we need to wait for it to
-          // finish loaded to prevent the shift of the component during snapshots.
-          await scrollDownAndUp(page)
-          await page.waitForLoadState('networkidle')
+          await page.goto(pageUrl(dir))
+          if (dir === 'rtl') {
+            await page.locator('#language').selectOption({ value: 'ar' })
+          }
 
           await page.locator(`#tab-${tab.id}`).click()
           // Make sure the tab is not focused and doesn't have a pink ring