javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* fix(slides): disable swiper touch preventDefault

* fix(slides): update Swiper types

* add screenshots to test

* add screenshot descriptions
This commit is contained in:
Chris
2019-05-15 15:12:30 -04:00
committed by Liam DeBeasi
parent 875d56363c
commit a8f9dfe0e1
4 changed files with 86 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/slides/slides.tsx
View File

@ -364,6 +364,7 @@ export class Slides implements ComponentInterface {
touchRatio: 1,
touchAngle: 45,
simulateTouch: true,
touchStartPreventDefault: false,
shortSwipes: true,
longSwipes: true,
longSwipesRatio: 0.5,

33
core/src/components/slides/test/prevent-default/e2e.ts Normal file
View File

@ -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();
}
});

51
core/src/components/slides/test/prevent-default/index.html Normal file
View File

@ -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>