Skip to content

Commit

Permalink
Rebase and update to Intern 4
Browse files Browse the repository at this point in the history
  • Loading branch information
pottedmeat committed Oct 20, 2017
1 parent 7b44e81 commit 9b6a78e
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 64 deletions.
1 change: 1 addition & 0 deletions src/common/tests/functional/all.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import '../../../checkbox/tests/functional/Checkbox';
import '../../../combobox/tests/functional/ComboBox';
import '../../../radio/tests/functional/Radio';
import '../../../slidepane/tests/functional/SlidePane';
import '../../../slider/tests/functional/Slider';
import '../../../tabcontroller/tests/functional/TabController';
import '../../../textinput/tests/functional/TextInput';
import '../../../titlepane/tests/functional/TitlePane';
3 changes: 3 additions & 0 deletions src/slider/example/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export class App extends WidgetBase<WidgetProperties> {
]),
v('h1', {}, ['Slider with custom output']),
w(Slider, {
extraClasses: { root: 's1' },
key: 's1',
label: 'How much do you like tribbles?',
min: 0,
Expand All @@ -65,6 +66,7 @@ export class App extends WidgetBase<WidgetProperties> {
}),
v('h1', {}, ['Disabled slider']),
w(Slider, {
extraClasses: { root: 's2' },
key: 's2',
label: 'Stuck at 30',
min: 0,
Expand All @@ -76,6 +78,7 @@ export class App extends WidgetBase<WidgetProperties> {
}),
v('h1', {}, ['Vertical slider']),
w(Slider, {
extraClasses: { root: 's3' },
key: 's3',
label: 'Vertical Slider with default properties. Anything over 50 is invalid:',
value: verticalValue,
Expand Down
123 changes: 59 additions & 64 deletions src/slider/tests/functional/Slider.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as registerSuite from 'intern!object';
import * as assert from 'intern/chai!assert';
const { registerSuite } = intern.getInterface('object');
const { assert } = intern.getPlugin('chai');

import keys from '@theintern/leadfoot/keys';
import * as css from '../../styles/slider.m.css';
import * as keys from 'leadfoot/keys';

function getPage(test: any) {
const { browserName } = test.remote.environmentType;
Expand All @@ -19,91 +20,86 @@ function checkValue(command: any, values?: number[]) {
return command
.findByCssSelector(`.${css.inputWrapper}`)
.findByCssSelector(`.${css.input}`)
.getProperty('value')
.then((value: string) => {
currentValue = parseInt(value, 10);
})
.getProperty('value')
.then((value: string) => {
currentValue = parseInt(value, 10);
})
.end()
.findByCssSelector(`.${css.fill}`)
.getAttribute('style')
.then((style: string) => {
const absWidthRegex = /width:\s*(\d+)\.?\d*%/;
let result = style.match(absWidthRegex);
let width = result && result.length > 0 ? parseInt(result[1], 10) : -1;
assert.lengthOf(result, 2);
notIE && assert.closeTo(width, currentValue, 1);
})
.getAttribute('style')
.then((style: string) => {
const absWidthRegex = /width:\s*(\d+)\.?\d*%/;
let result = style.match(absWidthRegex);
let width = result && result.length > 0 ? parseInt(result[1], 10) : -1;
assert.lengthOf(result, 2);
notIE && assert.closeTo(width, currentValue, 1);
})
.end()
.findByCssSelector(`.${css.thumb}`)
.getAttribute('style')
.then((style: string) => {
const absWidthRegex = /left:\s*(\d+)\.?\d*%/;
let result = style.match(absWidthRegex);
let width = result && result.length > 0 ? parseInt(result[1], 10) : -1;
assert.lengthOf(result, 2);
notIE && assert.closeTo(width, currentValue, 1);
values && values.push(width);
})
.getAttribute('style')
.then((style: string) => {
const absWidthRegex = /left:\s*(\d+)\.?\d*%/;
let result = style.match(absWidthRegex);
let width = result && result.length > 0 ? parseInt(result[1], 10) : -1;
assert.lengthOf(result, 2);
notIE && assert.closeTo(width, currentValue, 1);
values && values.push(width);
})
.end()
.end();
}

function slide(command: any, x: number, y: number) {
return command.session.capabilities.brokenMouseEvents ?
command.findByCssSelector(`.${css.thumb}`)
.moveMouseTo(x, y)
.pressMouseButton()
.end()
command
.findByCssSelector(`.${css.thumb}`)
.moveMouseTo(x, y)
.pressMouseButton()
.end()
:
command
.findByCssSelector(`.${css.thumb}`)
.moveMouseTo()
.pressMouseButton()
.moveMouseTo(x, y)
.releaseMouseButton()
.end();
.findByCssSelector(`.${css.thumb}`)
.moveMouseTo()
.pressMouseButton()
.moveMouseTo(x, y)
.releaseMouseButton()
.end();
}
registerSuite({
name: 'Slider',

registerSuite('Slider', {
'horizontal slider': {
'each component of a slider should be visible'(this: any) {

return getPage(this)
.findByCssSelector(`#example-1 .${css.root}`)
.isDisplayed()
.findByCssSelector(`.${css.input}`)
.isDisplayed()
.findByCssSelector(`.s1.${css.root}`)
.isDisplayed()
.findByCssSelector(`.${css.input}`)
.isDisplayed()
.end()
.findByCssSelector(`.${css.track}`)
.isDisplayed()
.isDisplayed()
.end()
.findByCssSelector(`.${css.output}`)
.isDisplayed()
.isDisplayed()
.end()

.getSize()
.then(({ height, width }: { height: number; width: number; }) => {
assert.isAbove(height, 0, 'The height of the slider should be greater than zero.');
assert.isAbove(width, 0, 'The width of the slider should be greater than zero.');
})

.end();
},
'label should be as defined'(this: any) {
return getPage(this)
.findByCssSelector(`#example-1 .${css.root}`)
.getVisibleText()
.then((text: string) => {
assert.include(text, 'How much do you like tribbles?');
})
.findByCssSelector(`.s1.${css.root}`)
.getVisibleText()
.then((text: string) => {
assert.include(text, 'How much do you like tribbles?');
})
.end();
},
'slider value should be consistent in different part of the UI'(this: any) {
let command = getPage(this)
.findByCssSelector(`#example-1 .${css.root}`);
return checkValue(command)
.end();
const command = getPage(this).findByCssSelector(`.s1.${css.root}`);
return checkValue(command).end();
},
'slider should be slidable with mouse'(this: any) {
const { browserName, mouseEnabled } = this.remote.environmentType;
Expand All @@ -115,8 +111,7 @@ registerSuite({
}

let sliderValues: number[] = [];
let command = getPage(this)
.findByCssSelector(`#example-1 .${css.root}`);
let command = getPage(this).findByCssSelector(`.s1.${css.root}`);
command = checkValue(command, sliderValues);

command = slide(command, -30, 0);
Expand All @@ -143,7 +138,7 @@ registerSuite({

let sliderValues: number[] = [];
let command = getPage(this)
.findByCssSelector(`#example-1 .${css.root}`);
.findByCssSelector(`.s1.${css.root}`);
command = checkValue(command, sliderValues)
.click()
.pressKeys(keys.ARROW_LEFT);
Expand All @@ -163,7 +158,7 @@ registerSuite({
'vertical slider': {
'each component of a slider should be visible'(this: any) {
return getPage(this)
.findByCssSelector(`#example-2 .${css.root}`)
.findByCssSelector(`.s2.${css.root}`)
.isDisplayed()
.findByCssSelector(`.${css.input}`)
.isDisplayed()
Expand All @@ -185,7 +180,7 @@ registerSuite({
},
'label should be as defined'(this: any) {
return getPage(this)
.findByCssSelector(`#example-2 .${css.root}`)
.findByCssSelector(`.s3.${css.root}`)
.getVisibleText()
.then((text: string) => {
assert.include(text, 'Vertical Slider with default properties.');
Expand All @@ -194,11 +189,11 @@ registerSuite({
},
'slider value should be consistent in different part of the UI'(this: any) {
let command = getPage(this)
.findByCssSelector(`#example-2 .${css.root}`);
.findByCssSelector(`.s2.${css.root}`);
return checkValue(command)
.end();
},
'slider should be slidable with mouse'(this: any) {
'slider should be functional with mouse'(this: any) {
const { browserName, mouseEnabled } = this.remote.environmentType;
if (!mouseEnabled) {
this.skip('Test requires mouse interactions.');
Expand All @@ -209,7 +204,7 @@ registerSuite({

let sliderValues: number[] = [];
let command = getPage(this)
.findByCssSelector(`#example-2 .${css.root}`);
.findByCssSelector(`.s3.${css.root}`);
command = checkValue(command, sliderValues);

command = slide(command, 1, -30);
Expand All @@ -225,7 +220,7 @@ registerSuite({
})
.end();
},
'slider should be slidable with up and down arrow keys'(this: any) {
'slider should be functional with up and down arrow keys'(this: any) {
const { browserName, supportsKeysCommand } = this.remote.environmentType;
if (!supportsKeysCommand) {
this.skip('Arrow keys required for tests.');
Expand All @@ -236,7 +231,7 @@ registerSuite({

let sliderValues: number[] = [];
let command = getPage(this)
.findByCssSelector(`#example-2 .${css.root}`);
.findByCssSelector(`.s3.${css.root}`);
command = checkValue(command, sliderValues)
.click()
.pressKeys([keys.ARROW_UP, keys.ARROW_UP]);
Expand Down

0 comments on commit 9b6a78e

Please sign in to comment.