@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/NotFoundPage/tests/NotFoundPage.visual.cy.ts

@@ -0,0 +1,28 @@
+import NotFoundPage from '../NotFoundPage.vue'
+
+describe('NotFoundPage - Visual regression tests', () => {
+	it('displays the not found page by default', () => {
+		cy.mountWithVuetify(NotFoundPage)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('not-found-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the not found page without button', () => {
+		cy.mountWithVuetify(NotFoundPage, {
+			props: { hideBtn: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('not-found-page-no-btn', cy.get('.v-application'))
+	})
+
+	it('displays the not found page with custom button text', () => {
+		cy.mountWithVuetify(NotFoundPage, {
+			props: { btnText: 'Retour à l\'accueil' },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('not-found-page-custom-btn', cy.get('.v-application'))
+	})
+})

package/src/components/NotFoundPage/tests/__snapshots__/NotFoundPage.spec.ts.snap

@@ -3,296 +3,314 @@
 exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
 <div
   class="
+    align-center
     d-flex
-    justify-center
-    px-14
-    py-10
+    flex-column
     vd-page-container
   "
   id="v-0-container"
 >
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    id="v-0-content"
-    style="width: 800px;"
-  >
-    <div class="
-      elevation-0
-      pa-6
-      pa-sm-16
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    ">
-      <!---->
-      <div class="v-card__loader">
-        <div
-          aria-hidden="true"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          class="
-            v-locale--is-ltr
-            v-progress-linear
-            v-theme--light
-          "
-          role="progressbar"
-          style="
-            top: 0px;
-            height: 0px;
-            --v-progress-linear-height: 2px;
-          "
-        >
-          <!---->
-          <div
-            class="v-progress-linear__background"
-            style="opacity: NaN;"
-          ></div>
+  <!-- Slot prepend avec wrapper de largeur fixe -->
+  <!-- v-if -->
+  <div class="
+    px-14
+    py-10
+    vd-page-container__content
+  ">
+    <div
+      class="
+        bg-transparent
+        v-sheet
+        v-theme--light
+      "
+      id="v-0-content"
+      style="width: 800px;"
+    >
+      <div class="
+        elevation-0
+        pa-6
+        pa-sm-16
+        v-card
+        v-card--density-default
+        v-card--variant-elevated
+        v-theme--light
+      ">
+        <!---->
+        <div class="v-card__loader">
           <div
-            class="v-progress-linear__buffer"
+            aria-hidden="true"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            class="
+              v-locale--is-ltr
+              v-progress-linear
+              v-theme--light
+            "
+            role="progressbar"
             style="
-              opacity: NaN;
-              width: 0%;
+              top: 0px;
+              height: 0px;
+              --v-progress-linear-height: 2px;
             "
-          ></div>
-          <transition-stub
-            appear="false"
-            css="true"
-            name="fade-transition"
-            persisted="false"
           >
-            <div class="v-progress-linear__indeterminate">
-              <div class="
-                long
-                v-progress-linear__indeterminate
-              "></div>
-              <div class="
-                short
-                v-progress-linear__indeterminate
-              "></div>
-            </div>
-          </transition-stub>
-          <!---->
+            <!---->
+            <div
+              class="v-progress-linear__background"
+              style="opacity: NaN;"
+            ></div>
+            <div
+              class="v-progress-linear__buffer"
+              style="
+                opacity: NaN;
+                width: 0%;
+              "
+            ></div>
+            <transition-stub
+              appear="false"
+              css="true"
+              name="fade-transition"
+              persisted="false"
+            >
+              <div class="v-progress-linear__indeterminate">
+                <div class="
+                  long
+                  v-progress-linear__indeterminate
+                "></div>
+                <div class="
+                  short
+                  v-progress-linear__indeterminate
+                "></div>
+              </div>
+            </transition-stub>
+            <!---->
+          </div>
         </div>
-      </div>
-      <!---->
-      <!---->
-      <div class="
-        max-width-none
-        v-row
-      ">
+        <!---->
+        <!---->
         <div class="
-          align-sm-start
-          d-flex
-          flex-column
-          justify-center
-          order-last
-          order-sm-first
-          text-center
-          text-sm-left
-          v-col-12
-          v-col-sm-6
+          max-width-none
+          v-row
         ">
           <div class="
-            mb-4
-            sy-code
-            text-primary
+            align-sm-start
+            d-flex
+            flex-column
+            justify-center
+            order-last
+            order-sm-first
+            text-center
+            text-sm-left
+            v-col-12
+            v-col-sm-6
           ">
-            <span class="d-sr-only">
-              Code d'erreur&nbsp;:
-            </span>
-            404
+            <div class="
+              mb-4
+              sy-code
+              text-primary
+            ">
+              <span class="d-sr-only">
+                Code d'erreur&nbsp;:
+              </span>
+              404
+            </div>
+            <h1 class="
+              font-weight-bold
+              mb-2
+              mb-4
+              sy-heading
+              text-h5
+            ">
+              Page non trouvée
+            </h1>
+            <p>
+              <span>
+                Cette page n'existe pas ou a été déplacée.
+              </span>
+            </p>
+            <p class="mt-4">
+              Votre identifiant de support est
+              <b>
+                1234 5678 9012 3456 789
+              </b>
+              .
+            </p>
+            <!-- v-if -->
           </div>
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            sy-heading
-            text-h5
+          <div class="
+            align-center
+            d-flex
+            justify-center
+            v-col-12
+            v-col-sm-6
           ">
-            Page non trouvée
-          </h1>
-          <p>
-            <span>
-              Cette page n'existe pas ou a été déplacée.
-            </span>
-          </p>
-          <p class="mt-4">
-            Votre identifiant de support est
-            <b>
-              1234 5678 9012 3456 789
-            </b>
-            .
-          </p>
-          <!-- v-if -->
-        </div>
-        <div class="
-          align-center
-          d-flex
-          justify-center
-          v-col-12
-          v-col-sm-6
-        ">
-          <img
-            alt=""
-            aria-hidden="true"
-            src="/src/components/NotFoundPage/assets/not-found.svg"
-          />
+            <img
+              alt=""
+              aria-hidden="true"
+              src="/src/components/NotFoundPage/assets/not-found.svg"
+            />
+          </div>
         </div>
+        <!---->
+        <!---->
+        <span class="v-card__underlay"></span>
       </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
     </div>
   </div>
+  <!-- Slot append avec wrapper de largeur fixe -->
+  <!-- v-if -->
 </div>
 `;
 
 exports[`NotFoundPage > renders correctly 1`] = `
 <div
   class="
+    align-center
     d-flex
-    justify-center
-    px-14
-    py-10
+    flex-column
     vd-page-container
   "
   id="v-0-container"
 >
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    id="v-0-content"
-    style="width: 800px;"
-  >
-    <div class="
-      elevation-0
-      pa-6
-      pa-sm-16
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    ">
-      <!---->
-      <div class="v-card__loader">
-        <div
-          aria-hidden="true"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          class="
-            v-locale--is-ltr
-            v-progress-linear
-            v-theme--light
-          "
-          role="progressbar"
-          style="
-            top: 0px;
-            height: 0px;
-            --v-progress-linear-height: 2px;
-          "
-        >
-          <!---->
-          <div
-            class="v-progress-linear__background"
-            style="opacity: NaN;"
-          ></div>
+  <!-- Slot prepend avec wrapper de largeur fixe -->
+  <!-- v-if -->
+  <div class="
+    px-14
+    py-10
+    vd-page-container__content
+  ">
+    <div
+      class="
+        bg-transparent
+        v-sheet
+        v-theme--light
+      "
+      id="v-0-content"
+      style="width: 800px;"
+    >
+      <div class="
+        elevation-0
+        pa-6
+        pa-sm-16
+        v-card
+        v-card--density-default
+        v-card--variant-elevated
+        v-theme--light
+      ">
+        <!---->
+        <div class="v-card__loader">
           <div
-            class="v-progress-linear__buffer"
+            aria-hidden="true"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            class="
+              v-locale--is-ltr
+              v-progress-linear
+              v-theme--light
+            "
+            role="progressbar"
             style="
-              opacity: NaN;
-              width: 0%;
+              top: 0px;
+              height: 0px;
+              --v-progress-linear-height: 2px;
             "
-          ></div>
-          <transition-stub
-            appear="false"
-            css="true"
-            name="fade-transition"
-            persisted="false"
           >
-            <div class="v-progress-linear__indeterminate">
-              <div class="
-                long
-                v-progress-linear__indeterminate
-              "></div>
-              <div class="
-                short
-                v-progress-linear__indeterminate
-              "></div>
-            </div>
-          </transition-stub>
-          <!---->
+            <!---->
+            <div
+              class="v-progress-linear__background"
+              style="opacity: NaN;"
+            ></div>
+            <div
+              class="v-progress-linear__buffer"
+              style="
+                opacity: NaN;
+                width: 0%;
+              "
+            ></div>
+            <transition-stub
+              appear="false"
+              css="true"
+              name="fade-transition"
+              persisted="false"
+            >
+              <div class="v-progress-linear__indeterminate">
+                <div class="
+                  long
+                  v-progress-linear__indeterminate
+                "></div>
+                <div class="
+                  short
+                  v-progress-linear__indeterminate
+                "></div>
+              </div>
+            </transition-stub>
+            <!---->
+          </div>
         </div>
-      </div>
-      <!---->
-      <!---->
-      <div class="
-        max-width-none
-        v-row
-      ">
+        <!---->
+        <!---->
         <div class="
-          align-sm-start
-          d-flex
-          flex-column
-          justify-center
-          order-last
-          order-sm-first
-          text-center
-          text-sm-left
-          v-col-12
-          v-col-sm-6
+          max-width-none
+          v-row
         ">
           <div class="
-            mb-4
-            sy-code
-            text-primary
+            align-sm-start
+            d-flex
+            flex-column
+            justify-center
+            order-last
+            order-sm-first
+            text-center
+            text-sm-left
+            v-col-12
+            v-col-sm-6
           ">
-            <span class="d-sr-only">
-              Code d'erreur&nbsp;:
-            </span>
-            404
+            <div class="
+              mb-4
+              sy-code
+              text-primary
+            ">
+              <span class="d-sr-only">
+                Code d'erreur&nbsp;:
+              </span>
+              404
+            </div>
+            <h1 class="
+              font-weight-bold
+              mb-2
+              mb-4
+              sy-heading
+              text-h5
+            ">
+              Page non trouvée
+            </h1>
+            <p>
+              <span>
+                Cette page n'existe pas ou a été déplacée.
+              </span>
+            </p>
+            <!-- v-if -->
           </div>
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            sy-heading
-            text-h5
+          <div class="
+            align-center
+            d-flex
+            justify-center
+            v-col-12
+            v-col-sm-6
           ">
-            Page non trouvée
-          </h1>
-          <p>
-            <span>
-              Cette page n'existe pas ou a été déplacée.
-            </span>
-          </p>
-          <!-- v-if -->
-        </div>
-        <div class="
-          align-center
-          d-flex
-          justify-center
-          v-col-12
-          v-col-sm-6
-        ">
-          <img
-            alt=""
-            aria-hidden="true"
-            src="/src/components/NotFoundPage/assets/not-found.svg"
-          />
+            <img
+              alt=""
+              aria-hidden="true"
+              src="/src/components/NotFoundPage/assets/not-found.svg"
+            />
+          </div>
         </div>
+        <!---->
+        <!---->
+        <span class="v-card__underlay"></span>
       </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
     </div>
   </div>
+  <!-- Slot append avec wrapper de largeur fixe -->
+  <!-- v-if -->
 </div>
 `;

package/src/components/NotificationBar/NotificationBar.mdx

@@ -38,7 +38,6 @@ import * as NotificationBarStories from './NotificationBar.stories';
 	import type { Notification } from '@cnamts/synapse'
 
 	const { addNotification } = useNotificationService()
-    import '../../stories/styles/shared.css';
 
 	const envoyerNotification = (message: string, type: Notification['type']) => {
 		const notification: Notification = {

package/src/components/NotificationBar/tests/NotificationBar.visual.cy.ts

@@ -0,0 +1,54 @@
+import NotificationBar from '../NotificationBar.vue'
+import { useNotificationService } from '@/services/NotificationService'
+
+describe('NotificationBar - Visual regression tests', () => {
+	beforeEach(() => {
+		const { clearQueue } = useNotificationService()
+		clearQueue()
+	})
+
+	it('displays the notification bar at top (info)', () => {
+		const { addNotification } = useNotificationService()
+		addNotification({ id: '1', message: 'Ceci est une notification informative', type: 'info' })
+
+		cy.mountWithVuetify(NotificationBar, {
+			props: { showAll: true },
+		})
+
+		// Wait for notification to be visible
+		cy.get('.notification-bar-transition').should('be.visible')
+		cy.get('.notification').should('contain', 'Ceci est une notification informative')
+		cy.matchImageSnapshot('notification-bar-info', cy.get('.v-application'))
+	})
+
+	it('displays the notification bar at bottom', () => {
+		const { addNotification } = useNotificationService()
+		addNotification({ id: '1', message: 'Notification en bas de page', type: 'warning' })
+
+		cy.mountWithVuetify(NotificationBar, {
+			props: { showAll: true, bottom: true },
+		})
+
+		// Wait for notification to be visible
+		cy.get('.notification-bar-transition').should('be.visible')
+		cy.get('.notification').should('contain', 'Notification en bas de page')
+		cy.matchImageSnapshot('notification-bar-bottom', cy.get('.v-application'))
+	})
+
+	it('displays the notification bar with multiple types', () => {
+		const { addNotification } = useNotificationService()
+		addNotification({ id: '1', message: 'Succès de l\'opération', type: 'success' })
+		addNotification({ id: '2', message: 'Une erreur est survenue', type: 'error' })
+
+		cy.mountWithVuetify(NotificationBar, {
+			props: { showAll: true },
+		})
+
+		// Wait for all notifications to be visible
+		cy.get('.notification-bar-transition').should('be.visible')
+		cy.get('.notification').should('have.length', 2)
+		cy.get('.notification').should('contain', 'Succès de l\'opération')
+		cy.get('.notification').should('contain', 'Une erreur est survenue')
+		cy.matchImageSnapshot('notification-bar-multiple', cy.get('.v-application'))
+	})
+})

package/src/components/PageContainer/PageContainer.mdx

@@ -21,7 +21,6 @@ import * as PageContainerStories from './PageContainer.stories';
 <script setup lang="ts">
 import { PageContainer } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
     <PageContainer color="primary">