fix e2e test

femioladeji · Oct 15, 2023 · 5664503 · 5664503
1 parent 64ba630
commit 5664503
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 39 deletions.
diff --git a/cypress/e2e/slide/introduction.cy.js b/cypress/e2e/slide/introduction.cy.js
@@ -1,59 +1,67 @@
-import { translateXRegex } from '../../support/utils';
+import { getSlideshowWidth, translateXRegex } from '../../support/utils';
 
 describe('introduction slide functionality', () => {
     beforeEach(() => {
         cy.visit('http://localhost:6006');
         cy.frameLoaded("#storybook-preview-iframe");
-        cy.get('[title="Go full screen [F]"]').click();
+        cy.wait(2000);
         cy.iframe('#storybook-preview-iframe')
             .find('.react-slideshow-container')
             .as("slide")
     })
 
-    it('loads the introduction slide and the slide with slide 1', () => {
+    it('loads the introduction slide and the slide with slide 1', async () => {
         cy.get('@slide').should('exist');
         cy.get('@slide').find('.images-wrap').should('have.class', 'horizontal');
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         cy.get('@slide').find('.images-wrap > div').should('have.length', 5);
-        cy.get('@slide').find('.images-wrap').should('have.css', 'width').and('match', /4590px/)
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-918'))
+        cy.get('@slide').find('.images-wrap').should('have.css', 'width').and('match', new RegExp(`${width * 5}px`))
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(`-${width}`))
         cy.get('@slide').find('.images-wrap > div:nth-of-type(2)').should('have.class', 'active')
-        cy.get('@slide').find('.images-wrap > div:nth-of-type(2)').should('have.css', 'width').and('match', /918px/)
+        cy.get('@slide').find('.images-wrap > div:nth-of-type(2)').should('have.css', 'width').and('match', new RegExp(`${width}px`))
     });
 
-    it('loads the next slides when the next button is clicked', () => {
+    it('loads the next slides when the next button is clicked', async () => {
         cy.get('@slide').should('exist');
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         cy.get('@slide').find('.nav:last-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-1836'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-2 * width));
         cy.get('@slide').find('.nav:last-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-2754'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-3 * width));
         cy.get('@slide').find('.nav:last-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-918'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width));
     });
 
-    it('loads the previous slides when the previous button is clicked', () => {
+    it('loads the previous slides when the previous button is clicked', async () => {
         cy.get('@slide').should('exist');
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         cy.get('@slide').find('.nav:first-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-2754'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-3 * width));
         cy.get('@slide').find('.nav:first-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-1836'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-2 * width));
         cy.get('@slide').find('.nav:first-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-918'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width));
     });
 
-    it('allows dragging the slide to go next and back', () => {
+    it('allows dragging the slide to go next and back', async () => {
         cy.get('@slide').should('exist');
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         // before the move
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-918'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width));
         cy.get('@slide')
             .trigger('mousedown', { which: 1, clientX: 450 })
             .trigger('mousemove', { clientX: 200 })
             .trigger('mouseup', { force: true });
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-1836'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-2 * width));
 
         cy.get('@slide')
             .trigger('mousedown', { which: 1, clientX: 200 })
-            .trigger('mousemove', { clientX: 450 })
+            .trigger('mousemove', { clientX08: 450 })
             .trigger('mouseup', { force: true });
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-918'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width));
     });
 });
diff --git a/cypress/e2e/slide/slide.cy.js b/cypress/e2e/slide/slide.cy.js
@@ -1,4 +1,4 @@
-import { translateXRegex, getAttributeRow } from '../../support/utils';
+import { translateXRegex, getAttributeRow, getSlideshowWidth } from '../../support/utils';
 
 describe('slide functionality', () => {
     beforeEach(() => {
@@ -9,19 +9,21 @@ describe('slide functionality', () => {
             .as("slide")
     });
 
-    it('loads the slide accurately', () => {
+    it('loads the slide accurately', async () => {
         cy.get('@slide').should('exist');
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         cy.get('@slide').find('.images-wrap').should('have.class', 'horizontal');
         cy.get('@slide').find('.images-wrap > div').should('have.length', 5);
-        cy.get('[title="Go full screen [F]"]').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'width').and('match', /4840/)
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-968'))
+        cy.get('@slide').find('.images-wrap').should('have.css', 'width').and('match', new RegExp(`${width * 5}`))
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width))
         cy.get('@slide').find('.images-wrap > div:nth-of-type(2)').should('have.class', 'active')
-        cy.get('@slide').find('.images-wrap > div:nth-of-type(2)').should('have.css', 'width').and('match', /968px/)
+        cy.get('@slide').find('.images-wrap > div:nth-of-type(2)').should('have.css', 'width').and('match', new RegExp(width))
     });
 
-    it('shows the arrow by default and hides it when the property is set to false', () => {
+    it('shows the arrow by default and hides it when the property is set to false', async () => {
         cy.get('@slide').should('exist');
+        cy.get('@slide').invoke('width').should('gt', 0);
         cy.get('@slide').find('.nav').should('have.length', 2);
         cy.get('@slide').find('.nav:first-of-type').should('have.attr', 'data-type', 'prev');
         cy.get('@slide').find('.nav:last-of-type').should('have.attr', 'data-type', 'next');
@@ -35,8 +37,10 @@ describe('slide functionality', () => {
         cy.get('@slide').find('.nav').should('have.length', 2);
     });
 
-    it('shows the indicator if the indicators prop is set to a truthy value', () => {
+    it('shows the indicator if the indicators prop is set to a truthy value', async () => {
         cy.get('@slide').should('exist');
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         cy.get('@slide').next().should('not.exist');
         // change the indicators prop to truthy value
         getAttributeRow("indicators").find('button').click();
@@ -46,38 +50,36 @@ describe('slide functionality', () => {
         cy.get('@slide').next().find('button').should('have.length', 3);
         // clicking on the second indicator should make the second slide active
         cy.get('@slide').next().find('li:nth-of-type(2) button').click();
-        cy.get('[title="Go full screen [F]"]').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-1936'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-2 * width));
         // clicking on the third indicator should make the third slide active
         cy.get('@slide').next().find('li:nth-of-type(3) button').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-2904'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-3 * width));
         // clicking on the third indicator should make the third slide active
         cy.get('@slide').next().find('li:nth-of-type(1) button').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-968'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width));
     });
 
-    it('setting infinite to false should prevent previous from working on first slide and next from working on last slide', () => {
+    it('setting infinite to false should prevent previous from working on first slide and next from working on last slide', async () => {
         cy.get('@slide').should('exist');
-        cy.get('[title="Go full screen [F]"]').click();
+        const width = await getSlideshowWidth();
+        cy.get('@slide').invoke('width').should('gt', 0);
         // clicking on previous should work for now
         cy.get('@slide').find('.nav:first-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-2904'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-3 * width));
         // return back to first slide
         cy.get('@slide').find('.nav:last-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-968'));
-        cy.get('[title="Exit full screen [F]"]').click();
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-1 * width));
         // click on the infinite prop and set it to false
         getAttributeRow("infinite").find('button').click();
         // now no need to render extra two slides
-        cy.get('[title="Go full screen [F]"]').click();
         cy.get('@slide').find('.images-wrap > div').should('have.length', 3);
         cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('0'));
         cy.get('@slide').find('.nav:first-of-type').should('have.attr', 'disabled');
         // click next to go to last slide
         cy.get('@slide').find('.nav:last-of-type').click();
         cy.wait(3000);
         cy.get('@slide').find('.nav:last-of-type').click();
-        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex('-1936'));
+        cy.get('@slide').find('.images-wrap').should('have.css', 'transform').and('match', translateXRegex(-2 * width));
         cy.get('@slide').find('.nav:last-of-type').should('have.attr', 'disabled');
     });
 });
diff --git a/cypress/e2e/slide/vertical.cy.js b/cypress/e2e/slide/vertical.cy.js
@@ -4,7 +4,6 @@ describe('vertical slide test', () => {
     beforeEach(() => {
         cy.visit('http://localhost:6006/?path=/story/examples-vertical--page');
         cy.frameLoaded("#storybook-preview-iframe");
-        cy.get('[title="Go full screen [F]"]').click();
         cy.iframe('#storybook-preview-iframe')
             .find('.react-slideshow-container')
             .as("slide")

diff --git a/cypress/support/utils.ts b/cypress/support/utils.ts
@@ -11,3 +11,12 @@ export const translateYRegex = (value: string | number) => {
 export const getAttributeRow = (attribute: string) => {
     return cy.get('.docblock-argstable').find('td').contains(attribute).parents('tr')
 }
+
+export const getSlideshowWidth = () => {
+    return new Promise((resolve) => {
+        cy.get('@slide').then(element => {
+            // @ts-ignore
+            resolve(element.width());
+        });
+    })
+}