javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): include mode classes on components for use in shadow (#17838)

Browse Source 
- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling

fixes #17608
This commit is contained in:
Brandy Carney
2019-04-16 17:28:21 -04:00
committed by GitHub
parent 38ae3620a2
commit e5c8c10029
93 changed files with 685 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/components/tabs/test/standalone/e2e.ts Normal file
View File

@ -0,0 +1,26 @@
import { newE2EPage } from '@stencil/core/testing';
test('tabs: standalone', async () => {
const page = await newE2EPage({
url: '/src/components/tabs/test/standalone?ionic:_testing=true'
});
const compares = [];
// Initial page load
compares.push(await page.compareScreenshot());
let tabButton = await page.find('#tab-button-tab-one');
await tabButton.click();
compares.push(await page.compareScreenshot(`tab one`));
tabButton = await page.find('#tab-button-tab-two');
await tabButton.click();
compares.push(await page.compareScreenshot(`tab two`));
for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});

48
core/src/components/tabs/test/vanilla/index.html → core/src/components/tabs/test/standalone/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Tab - Vanilla</title>
<title>Tabs - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@ -14,14 +14,24 @@
</script>
</head>
<body>
<body onload="selectTab()">
<ion-tabs>
<ion-tab tab="tab-one">
<div class="div-one" slot="not-initialized">Div One</div>
<div class="content-div div-one">
<h2>Tab One</h2>
</div>
</ion-tab>
<ion-tab tab="tab-two">
<div class="div-two" slot="not-initialized">Div Two</div>
<div class="content-div div-two">
<h2>Tab Two</h2>
</div>
</ion-tab>
<ion-tab tab="tab-three">
<div class="content-div div-three">
<h2>Tab Three</h2>
</div>
</ion-tab>
<ion-tab-bar slot="bottom">
@ -34,23 +44,41 @@
<ion-label>Tab Two</ion-label>
<ion-icon name="globe"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-three">
<ion-label>Tab Three</ion-label>
<ion-icon name="call"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<style>
.div-one {
background-color: blue;
.content-div {
height: 100%;
color: #FFF;
padding: 16px;
color: white;
}
.div-one {
background-color: #775b94;
}
.div-two {
background-color: red;
height: 100%;
color: #FFF;
background-color: #ac4f8b;
}
.div-three {
background-color: #4f6cac;
}
</style>
<script>
async function selectTab() {
const tabs = document.querySelector('ion-tabs');
await tabs.componentOnReady();
await tabs.select('tab-three');
}
</script>
</body>
</html>

34
core/src/components/tabs/test/vanilla/e2e.js
View File

@ -1,34 +0,0 @@
// 'use strict';
// const { register, Page, platforms } = require('../../../../../scripts/e2e');
// const { getElement, waitAndGetElementById, waitForTransition } = require('../../../../../scripts/e2e/utils');
// class E2ETestPage extends Page {
// constructor(driver, platform) {
// super(driver, `http://localhost:3333/src/components/tabs/test/vanilla?ionic:mode=${platform}`);
// }
// }
// platforms.forEach(platform => {
// describe('tabs/vanilla', () => {
// register('should init', driver => {
// const page = new E2ETestPage(driver, platform);
// return page.navigate();
// });
// register('should check each tab', async (driver, testContext) => {
// testContext.timeout(60000);
// const page = new E2ETestPage(driver, platform);
// await waitForTransition(300);
// const tabTwoButton = await waitAndGetElementById(driver, 'tab-t-0-1');
// tabTwoButton.click();
// await waitForTransition(600);
// const tabThreeButton = await waitAndGetElementById(driver, 'tab-t-0-2');
// tabThreeButton.click();
// await waitForTransition(600);
// });
// });
// });