feat: rename swiper-container class to swiper

Author: nolimits4web

cypress/integration/modules/a11y.js

@@ -40,7 +40,7 @@ context('Core', () => {
       cy.getSlide(9).should('have.attr', 'aria-label', '10 of 10');
     });
 
-    it('should add aria-roledescription="slide" to swiper-container', () => {
+    it('should add aria-roledescription="slide" to swiper container', () => {
       cy.initSwiper({
         a11y: { containerRoleDescriptionMessage: 'test' },
       });

cypress/integration/modules/core.js

@@ -20,12 +20,12 @@ context('Core', () => {
       autoHeight: true,
     });
     cy.injectStyles(`
-    .swiper-container .swiper-slide {
+    .swiper .swiper-slide {
       height: 300px;
       line-height: 300px;
     }
 
-    .swiper-container .swiper-slide:nth-child(2n) {
+    .swiper .swiper-slide:nth-child(2n) {
       height: 500px;
       line-height: 500px;
     }`);
@@ -103,7 +103,7 @@ context('Core', () => {
 
   it('slidesPerView auto', () => {
     cy.injectStyles(`
-    .swiper-container {
+    .swiper {
       width: 100%;
       height: 100%;
     }
@@ -194,7 +194,7 @@ context('Core', () => {
       containerModifierClass: 'unique-test-',
     });
     cy.get('.unique-test-horizontal').should('exist');
-    cy.get('.swiper-container-horizontal').should('not.exist');
+    cy.get('.swiper-horizontal').should('not.exist');
   });
 
   it('slideActiveClass', () => {
@@ -314,13 +314,13 @@ context('Core', () => {
 
   it('direction horizontal', () => {
     cy.initSwiper(); // check default
-    cy.get('.swiper-container-horizontal').should('exist');
-    cy.get('.swiper-container-vertical').should('not.exist');
+    cy.get('.swiper-horizontal').should('exist');
+    cy.get('.swiper-vertical').should('not.exist');
     cy.reinitSwiper({
       direction: 'horizontal',
     });
-    cy.get('.swiper-container-horizontal').should('exist');
-    cy.get('.swiper-container-vertical').should('not.exist');
+    cy.get('.swiper-horizontal').should('exist');
+    cy.get('.swiper-vertical').should('not.exist');
     cy.getSlide(2).should(($el) => {
       expect($el[0].getBoundingClientRect().x).to.be.greaterThan(100);
     });
@@ -333,8 +333,8 @@ context('Core', () => {
     cy.initSwiper({
       direction: 'vertical',
     });
-    cy.get('.swiper-container-vertical').should('exist');
-    cy.get('.swiper-container-horizontal').should('not.exist');
+    cy.get('.swiper-vertical').should('exist');
+    cy.get('.swiper-horizontal').should('not.exist');
     cy.getSlide(2).should(($el) => {
       expect($el[0].getBoundingClientRect().y).to.be.greaterThan(100);
     });
@@ -408,7 +408,7 @@ context('Core', () => {
   it('should not work as createElements false', () => {
     cy.window().then((_window) => {
       _window.document.body.innerHTML = `
-      <div class="swiper-container">
+      <div class="swiper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
@@ -421,7 +421,7 @@ context('Core', () => {
         <div class="swiper-slide">Slide 10</div>
       </div>
       `;
-      _window.swiperRef = new _window.Swiper('.swiper-container', {
+      _window.swiperRef = new _window.Swiper('.swiper', {
         slidesPerView: 2,
         scrollbar: true,
         createElements: false,
@@ -440,7 +440,7 @@ context('Core', () => {
   it('should not work as createElements false', () => {
     cy.window().then((_window) => {
       _window.document.body.innerHTML = `
-      <div class="swiper-container">
+      <div class="swiper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
@@ -453,7 +453,7 @@ context('Core', () => {
         <div class="swiper-slide">Slide 10</div>
       </div>
       `;
-      _window.swiperRef = new _window.Swiper('.swiper-container', {
+      _window.swiperRef = new _window.Swiper('.swiper', {
         slidesPerView: 2,
         scrollbar: true,
         createElements: true,

cypress/support/commands.js

@@ -24,15 +24,15 @@ Cypress.Commands.add('getSliderWrapper', { prevSubject: 'optional' }, () => {
 });
 
 Cypress.Commands.add('getSliderContainer', { prevSubject: 'optional' }, () => {
-  return cy.get('.swiper-container');
+  return cy.get('.swiper');
 });
 
 Cypress.Commands.add('getSlide', { prevSubject: 'optional' }, (subject, slideIndex) => {
   return cy.get(`.swiper-slide:nth-child(${slideIndex + 1})`);
 });
 
 Cypress.Commands.add('getSlideContains', { prevSubject: 'optional' }, (subject, content) => {
-  cy.get('.swiper-container').contains(content);
+  cy.get('.swiper').contains(content);
 });
 Cypress.Commands.add('getSlides', { prevSubject: 'optional' }, () => {
   return cy.get(`.swiper-slide`);
@@ -48,10 +48,10 @@ Cypress.Commands.add('getPaginationBullet', { prevSubject: 'optional' }, (subjec
 Cypress.Commands.add(
   'initSwiper',
   { prevSubject: 'optional' },
-  (subject, config = {}, el = '.swiper-container') => {
+  (subject, config = {}, el = '.swiper') => {
     return cy.window().then((_window) => {
       _window.document.body.innerHTML = `
-      <div class="swiper-container">
+      <div class="swiper">
         <div class="swiper-wrapper">
           <div class="swiper-slide">Slide 1</div>
           <div class="swiper-slide">Slide 2</div>

cypress/test.html

@@ -29,7 +29,7 @@
       padding: 0;
     }
 
-    .swiper-container {
+    .swiper {
       width: 100%;
       height: 100%;
     }
@@ -58,4 +58,4 @@
 
 <body></body>
 
-</html>
+</html>