Slider functional tests (#322)

* `Slider` functional tests.
dojo · Nov 8, 2017 · 9566d25 · 9566d25
1 parent 4229848
commit 9566d25
Show file tree

Hide file tree

Showing 3 changed files with 361 additions and 44 deletions.
diff --git a/src/common/tests/functional/all.ts b/src/common/tests/functional/all.ts
@@ -8,6 +8,7 @@ import '../../../label/tests/functional/Label';
 import '../../../listbox/tests/functional/Listbox';
 import '../../../radio/tests/functional/Radio';
 import '../../../slidepane/tests/functional/SlidePane';
+import '../../../slider/tests/functional/Slider';
 import '../../../tabcontroller/tests/functional/TabController';
 import '../../../textarea/tests/functional/Textarea';
 import '../../../textinput/tests/functional/TextInput';

diff --git a/src/slider/example/index.ts b/src/slider/example/index.ts
@@ -46,52 +46,58 @@ export class App extends WidgetBase<WidgetProperties> {
 				})
 			]),
 			v('h1', {}, ['Slider with custom output']),
-			w(Slider, {
-				key: 's1',
-				label: 'How much do you like tribbles?',
-				min: 0,
-				max: 100,
-				output: (value: number) => {
-					if (value < 20) { return 'I am a Klingon'; }
-					if (value < 40) { return 'Tribbles only cause trouble'; }
-					if (value < 60) { return 'They\`re kind of cute'; }
-					if (value < 80) { return 'Most of my salary goes to tribble food'; }
-					else { return 'I permanently altered the ecology of a planet for my tribbles'; }
-				},
-				step: 1,
-				value: tribbleValue,
-				onChange: this.onTribbleInput,
-				onInput: this.onTribbleInput,
-				theme: this._theme
-			}),
+			v('div', { id: 'example-s1'}, [
+				w(Slider, {
+					key: 's1',
+					label: 'How much do you like tribbles?',
+					min: 0,
+					max: 100,
+					output: (value: number) => {
+						if (value < 20) { return 'I am a Klingon'; }
+						if (value < 40) { return 'Tribbles only cause trouble'; }
+						if (value < 60) { return 'They\`re kind of cute'; }
+						if (value < 80) { return 'Most of my salary goes to tribble food'; }
+						else { return 'I permanently altered the ecology of a planet for my tribbles'; }
+					},
+					step: 1,
+					value: tribbleValue,
+					onChange: this.onTribbleInput,
+					onInput: this.onTribbleInput,
+					theme: this._theme
+				})
+			]),
 			v('h1', {}, ['Disabled slider']),
-			w(Slider, {
-				key: 's2',
-				label: 'Stuck at 30',
-				min: 0,
-				max: 100,
-				step: 1,
-				value: 30,
-				disabled: true,
-				theme: this._theme
-			}),
+			v('div', { id: 'example-s2'}, [
+				w(Slider, {
+					key: 's2',
+					label: 'Stuck at 30',
+					min: 0,
+					max: 100,
+					step: 1,
+					value: 30,
+					disabled: true,
+					theme: this._theme
+				})
+			]),
 			v('h1', {}, ['Vertical slider']),
-			w(Slider, {
-				key: 's3',
-				label: 'Vertical Slider with default properties. Anything over 50 is invalid:',
-				value: verticalValue,
-				vertical: true,
-				invalid: verticalInvalid,
-				output: (value: number) => {
-					return v('span', {
-						innerHTML: verticalInvalid ? value + ' !' : value + ''
-					});
-				},
-				outputIsTooltip: true,
-				onChange: this.onTribbleInput,
-				onInput: this.onVerticalInput,
-				theme: this._theme
-			})
+			v('div', { id: 'example-s3'}, [
+				w(Slider, {
+					key: 's3',
+					label: 'Vertical Slider with default properties. Anything over 50 is invalid:',
+					value: verticalValue,
+					vertical: true,
+					invalid: verticalInvalid,
+					output: (value: number) => {
+						return v('span', {
+							innerHTML: verticalInvalid ? value + ' !' : value + ''
+						});
+					},
+					outputIsTooltip: true,
+					onChange: this.onVerticalInput,
+					onInput: this.onVerticalInput,
+					theme: this._theme
+				})
+			])
 		]);
 	}
 }