Cypres wait for breakpoint

Author: teimurjan

cypress/integration/landing.spec.ts

@@ -2,7 +2,10 @@ describe('Landing Page', () => {
   it('opens all sections', () => {
     cy.visit('/')
 
+    // all the images are loaded
     cy.get('img[data-placeholder-image]').should('not.be.visible')
+    // swiper is initialized
+    cy.get('.swiper-initialized[data-breakpoint]').should('be.visible')
 
     cy.percySnapshot('Landing Page', { widths: [700, 1200] })
   })

workspaces/landing/src/components/organisms/experience-history/ExperienceHistory.tsx

@@ -33,6 +33,9 @@ const query = graphql`
 
 SwiperCore.use([Pagination])
 
+const handleSwiperBreakpointChange = (swiper: SwiperCore) =>
+  swiper.el.setAttribute('data-breakpoint', swiper.currentBreakpoint)
+
 const ExperienceHistory = () => {
   const {
     gcms: { experiences },
@@ -75,6 +78,7 @@ const ExperienceHistory = () => {
             slidesPerView: 3,
           },
         }}
+        onBreakpoint={handleSwiperBreakpointChange}
       >
         {experiences.map((experience, index) => {
           return (