javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(fab): update fab tests and migrate to new e2e

Browse Source 
references #15803
This commit is contained in:
Brandy Carney
2018-10-05 17:48:22 -04:00
parent a1af131a86
commit 92cd9cc238
7 changed files with 101 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/fab-button/test/standalone/e2e.ts Normal file
View File

@ -0,0 +1,9 @@
import { newE2EPage } from '@stencil/core/testing';
it('fab-button: standalone', async () => {
const page = await newE2EPage({
url: '/src/components/fab-button/test/standalone?ionic:animated=false'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();

71
core/src/components/fab-button/test/standalone/index.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Floating Action Button - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<h3>Default</h3>
<p>
<ion-fab-button>Default</ion-fab-button>
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
</p>
<h3>Colors</h3>
<p>
<ion-fab-button color="primary"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="secondary"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="tertiary"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="success"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="warning"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="danger"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="light"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="medium"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
</p>
<p>
<ion-fab-button color="primary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="secondary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="tertiary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="success" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="warning" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="danger" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="light" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="medium" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="dark" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
</p>
<h3>Custom</h3>
<!-- Custom Font -->
<ion-fab-button class="large">large</ion-fab-button>
<!-- Custom Colors -->
<ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
<style>
ion-fab-button {
display: inline-block;
margin-bottom: 5px;
}
.large {
font-size: 24px;
}
.custom {
--background: lightpink;
--background-activated: green;
--color: blue;
--color-activated: white;
}
</style>
</body>
</html>

19
core/src/components/fab/test/basic/e2e.js
View File

@ -1,19 +0,0 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/fab/test/basic?ionic:mode=${platform}`);
}
}
platforms.forEach(platform => {
describe('fab/basic', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#content');
});
});
});

10
core/src/components/fab/test/basic/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
it('fab: basic', async () => {
const page = await newE2EPage({
url: '/src/components/fab/test/basic?ionic:animated=false'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

19
core/src/components/fab/test/standalone/e2e.js
View File

@ -1,19 +0,0 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/fab/test/standalone?ionic:mode=${platform}`);
}
}
platforms.forEach(platform => {
describe('fab/standalone', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#fab5');
});
});
});

10
core/src/components/fab/test/standalone/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
it('fab: standalone', async () => {
const page = await newE2EPage({
url: '/src/components/fab/test/standalone?ionic:animated=false'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

15
core/src/components/fab/test/standalone/index.html
View File

@ -10,19 +10,6 @@
</head>
<body>
<f></f>
<f></f>
<ion-fab-button>FAB</ion-fab-button>
<ion-fab vertical="top" horizontal="end" id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
<ion-fab-list>
<ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('googleplus', 'fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="bottom" horizontal="end" id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
@ -35,7 +22,7 @@
</ion-fab>
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="activated e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>