test(@dpc-sdp/ripple-ui-core): remove unused imports, add extra media…

… gallery tests
dpc-sdp · Jul 25, 2023 · 9f2c60e · 9f2c60e
1 parent 1c175ae
commit 9f2c60e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 15 deletions.
diff --git a/packages/ripple-ui-core/src/components/data-table/fixtures/sample.ts b/packages/ripple-ui-core/src/components/data-table/fixtures/sample.ts
@@ -1,5 +1,3 @@
-import { ref, defineAsyncComponent } from 'vue'
-
 export const RplDataTableColumns = [
   'Column 1',
   'Column 2',

diff --git a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.cy.ts b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.cy.ts
@@ -1,17 +1,25 @@
 import RplMediaGallery from './RplMediaGallery.vue'
 
-const props = {
-  items: [
-    {
-      title: 'Media title',
-      alt: 'Alt text',
-      thumbnail:
-        'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-      image:
-        'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-    }
-  ]
-}
+const items = [
+  {
+    title: 'One',
+    alt: 'Alt text',
+    thumbnail:
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA1',
+    image:
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA1'
+  },
+  {
+    title: 'Two',
+    alt: 'Alt text',
+    thumbnail:
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+    image:
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+  }
+]
+
+const props = { items }
 
 describe('RplMediaGallery', () => {
   it('mounts', () => {
@@ -21,7 +29,40 @@ describe('RplMediaGallery', () => {
   it('display a gallery fullscreen', () => {
     cy.mount(RplMediaGallery, { props })
 
-    cy.get('.rpl-media-gallery__button').click()
+    cy.get('.rpl-media-gallery__primary-content .rpl-slider__slide')
+      .first()
+      .find(' .rpl-media-gallery__button')
+      .click()
     cy.document().get('.rpl-media-gallery__modal').should('be.visible')
   })
+
+  it('navigates to next item via pagination', () => {
+    cy.mount(RplMediaGallery, { props })
+
+    cy.get('[aria-label="Go to next item"]').click()
+    cy.get('.rpl-media-gallery__primary-content .swiper-slide-active').should(
+      'contain',
+      items[1].title
+    )
+    cy.get('.rpl-media-gallery__primary-images .swiper-slide-active .rpl-image')
+      .should('have.attr', 'src')
+      .and('equal', items[1].thumbnail)
+  })
+
+  it('displays the item navigated too fullscreen', () => {
+    cy.mount(RplMediaGallery, { props })
+
+    cy.get('[aria-label="Go to next item"]').click()
+
+    cy.get('.rpl-media-gallery__primary-content .swiper-slide-active')
+      .find(' .rpl-media-gallery__button')
+      .click()
+
+    cy.document()
+      .get('.rpl-media-gallery__modal-content .swiper-slide-active')
+      .should('contain', items[1].title)
+    cy.get('.rpl-media-gallery__modal-images .swiper-slide-active .rpl-image')
+      .should('have.attr', 'src')
+      .and('equal', items[1].thumbnail)
+  })
 })
diff --git a/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue b/packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue
@@ -123,6 +123,7 @@ onUnmounted(() => {
           effect="fade"
           :show-tally="true"
           :current-slide="activeContentSlide"
+          class="rpl-media-gallery__modal-content"
           @change="contentSlideUpdate"
         >
           <RplMediaGalleryContent