fix: hydratation problems in org card

Author: ThibaudDauce

datagouv-components/src/components/OrganizationCard.vue

@@ -11,7 +11,7 @@
           loading="lazy"
         >
       </div>
-      <p class="mb-0.5 font-bold">
+      <div class="mb-0.5 font-bold">
         <AppLink
           :to="organization.page"
           class="overflow-hidden"
@@ -21,7 +21,7 @@
             :organization
           />
         </AppLink>
-      </p>
+      </div>
       <div class="mb-2 flex flex-wrap gap-1 items-center">
         <template v-if="type !== 'other'">
           <OwnerType
@@ -58,13 +58,13 @@
           </div>
         </div>
       </div>
-      <p class="mt-1 mb-0">
+      <div class="mt-1 mb-0">
         <TextClamp
           v-if="'description' in organization"
           :text="removeMarkdownSync(organization.description)"
           :max-lines="3"
         />
-      </p>
+      </div>
     </div>
   </div>
 </template>

pages/reuses/[rid]/discussions.vue

@@ -13,7 +13,6 @@ const props = defineProps<{
   reuse: Reuse
 }>()
 const closed = computed(() => props.reuse.metrics.discussions - props.reuse.metrics.discussions_open)
-console.log(closed)
 
 useSeoMeta({ robots: 'noindex' })
 </script>

tests/helpers.ts

@@ -1,4 +1,5 @@
 import type { Page } from '@playwright/test'
+import { test } from '@playwright/test'
 
 // When clicking "Suivant" we execute the validation of the frequency input
 // because we blur outside the select. This validation create a warning (because
@@ -8,3 +9,47 @@ import type { Page } from '@playwright/test'
 export const clickOutside = async (page: Page) => {
   await page.mouse.click(1, 1)
 }
+
+const IGNORED_MESSAGES = [
+  // Cookie secure flag doesn't work in dev (HTTP)
+  'non-HTTPS cookie',
+]
+
+export function setupConsoleTracking(page: Page) {
+  const warnings: string[] = []
+  const errors: string[] = []
+
+  page.on('console', (msg) => {
+    const text = msg.text()
+    if (IGNORED_MESSAGES.some(ignored => text.includes(ignored))) return
+
+    const type = msg.type()
+    if (type === 'warning') {
+      warnings.push(text)
+    }
+    if (type === 'error') {
+      errors.push(text)
+    }
+  })
+
+  page.on('pageerror', (error) => {
+    if (IGNORED_MESSAGES.some(ignored => error.message.includes(ignored))) return
+    errors.push(error.message)
+  })
+
+  return {
+    annotateAndCheck() {
+      for (const w of warnings) {
+        test.info().annotations.push({ type: 'warning', description: w })
+      }
+      for (const e of errors) {
+        test.info().annotations.push({ type: 'error', description: e })
+      }
+
+      const all = [...errors, ...warnings]
+      if (all.length > 0) {
+        throw new Error(`Console errors/warnings:\n${all.join('\n')}`)
+      }
+    },
+  }
+}

tests/organizations/organizations.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+import { setupConsoleTracking } from '../helpers'
+
+test('organizations page renders without errors', async ({ page }) => {
+  const { annotateAndCheck } = setupConsoleTracking(page)
+
+  const response = await page.goto('/organizations')
+  expect(response?.status()).toBeLessThan(400)
+
+  await expect(page).toHaveTitle(/Organisations/)
+  await expect(page.getByRole('heading', { name: 'Organisations', level: 1 })).toBeVisible()
+
+  await page.waitForLoadState('networkidle')
+  annotateAndCheck()
+})