Skip to content
Permalink
Browse files

fix(slides): disable swiper touch preventDefault (#16728)

* fix(slides): disable swiper touch preventDefault

* fix(slides): update Swiper types

* add screenshots to test

* add screenshot descriptions
  • Loading branch information...
CFT-Chris authored and liamdebeasi committed May 15, 2019
1 parent 875d563 commit a8f9dfe0e126656c0ece9d594c2995b6cfa7f535
@@ -39,7 +39,7 @@
"@types/jest": "^23.3.13",
"@types/node": "10.12.18",
"@types/puppeteer": "1.11.2",
"@types/swiper": "4.4.1",
"@types/swiper": "^4.4.2",
"agadoo": "^1.0.0",
"autoprefixer": "9.4.6",
"aws-sdk": "^2.320.0",
@@ -364,6 +364,7 @@ export class Slides implements ComponentInterface {
touchRatio: 1,
touchAngle: 45,
simulateTouch: true,
touchStartPreventDefault: false,
shortSwipes: true,
longSwipes: true,
longSwipesRatio: 0.5,
@@ -0,0 +1,33 @@
import { newE2EPage } from '@stencil/core/testing';

test('slides: prevent-default', async () => {
// For this specific test, _testing=false to import tap-click in app.tsx
const page = await newE2EPage({
url: '/src/components/slides/test/prevent-default?ionic:_testing=false'
});

const screenshotCompares = [];

screenshotCompares.push(await page.compareScreenshot());

const scroller = await page.find('#scrollDownButton');
const button = await page.find('#changeBackgroundButton');
const contentWithBackground = await page.find('#contentWithBackground');

await page.waitFor(500);

await scroller.click();
await page.waitFor(500);

screenshotCompares.push(await page.compareScreenshot('scroll down button'));

await button.click();

screenshotCompares.push(await page.compareScreenshot('change background'));

expect(contentWithBackground).toHaveClasses(['blueBackground']);

for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}
});
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html dir="ltr">

<head>
<meta charset="UTF-8">
<title>Slides - Prevent Default</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
<style>
.blueBackground {
--background: blue;
}
</style>
</head>

<body>
<ion-app>
<ion-content id="contentWithBackground">
<ion-slides style="height: 200px;">

<ion-slide>
<ion-content id="contentWithScrolling">
<div>
<ion-button id="scrollDownButton" onclick="scrollDown(event)">Scroll down</ion-button>
</div>
<div>
<ion-button id="changeBackgroundButton" onclick="changeBackground(event)" style="margin-top: 200px;">Change Background</ion-button>
</div>
</ion-content>
</ion-slide>

</ion-slides>
</ion-content>
</ion-app>
<script>
const contentWithBackground = document.getElementById('contentWithBackground');
const changeBackgroundButton = document.getElementById('changeBackgroundButton');
function scrollDown(event) {
changeBackgroundButton.scrollIntoView();
}
function changeBackground(event) {
contentWithBackground.classList.add('blueBackground');
};
</script>
</body>

</html>

0 comments on commit a8f9dfe

Please sign in to comment.
You can’t perform that action at this time.