gradio

1
import { test, expect } from "@playwright/experimental-ct-svelte";
2
import type { Page, Locator } from "@playwright/test";
3
import Slider from "./Index.svelte";
4
import { spy } from "tinyspy";
5

6
import type { LoadingStatus } from "@gradio/statustracker";
7

8
const loading_status: LoadingStatus = {
9
	eta: 0,
10
	queue_position: 1,
11
	queue_size: 1,
12
	status: "complete",
13
	scroll_to_output: false,
14
	visible: true,
15
	fn_index: 0,
16
	show_progress: "full"
17
};
18

19
//taken from: https://github.com/microsoft/playwright/issues/20032
20
async function changeSlider(
21
	page: Page,
22
	thumb: Locator,
23
	slider: Locator,
24
	targetPercentage: number
25
) {
26
	const thumbBoundingBox = await thumb.boundingBox();
27
	const sliderBoundingBox = await slider.boundingBox();
28

29
	if (thumbBoundingBox === null || sliderBoundingBox === null) {
30
		return; // NOTE it's probably better to throw an error here
31
	}
32

33
	// Start from the middle of the slider's thumb
34
	const startPoint = {
35
		x: thumbBoundingBox.x + thumbBoundingBox.width / 2,
36
		y: thumbBoundingBox.y + thumbBoundingBox.height / 2
37
	};
38

39
	// Slide it to some endpoint determined by the target percentage
40
	const endPoint = {
41
		x: sliderBoundingBox.x + sliderBoundingBox.width * targetPercentage,
42
		y: thumbBoundingBox.y + thumbBoundingBox.height / 2
43
	};
44

45
	await page.mouse.move(startPoint.x, startPoint.y);
46
	await page.mouse.down();
47
	await page.mouse.move(endPoint.x, endPoint.y);
48
	await page.mouse.up();
49
}
50

51
test("Slider Default Value And Label rendered", async ({ mount }) => {
52
	const component = await mount(Slider, {
53
		props: {
54
			value: 3,
55
			minimum: 0,
56
			maximum: 10,
57
			label: "My Slider",
58
			show_label: true,
59
			step: 1,
60
			interactive: true,
61
			loading_status: loading_status,
62
			gradio: {
63
				dispatch() {}
64
			}
65
		}
66
	});
67
	await expect(component).toContainText("My Slider");
68

69
	expect(
70
		component.getByRole("spinbutton", {
71
			name: "My Slider"
72
		})
73
	).toHaveValue("3");
74
});
75

76
test("Slider respects show_label", async ({ mount, page }) => {
77
	const component = await mount(Slider, {
78
		props: {
79
			value: 3,
80
			minimum: 0,
81
			maximum: 10,
82
			label: "My Slider",
83
			show_label: false,
84
			step: 1,
85
			interactive: true,
86
			loading_status: loading_status,
87
			gradio: {
88
				dispatch() {}
89
			}
90
		}
91
	});
92
	await expect(component.getByTestId("block-title")).toBeHidden();
93
});
94

95
test("Slider Maximum/Minimum values", async ({ mount, page }) => {
96
	const component = await mount(Slider, {
97
		props: {
98
			value: 3,
99
			minimum: 0,
100
			maximum: 10,
101
			label: "My Slider",
102
			show_label: true,
103
			step: 1,
104
			interactive: true,
105
			loading_status: loading_status,
106
			gradio: {
107
				dispatch() {}
108
			}
109
		}
110
	});
111

112
	const sliderNumberInput = component.getByRole("spinbutton", {
113
		name: "My Slider"
114
	});
115

116
	await expect(sliderNumberInput).toHaveValue("3");
117

118
	await sliderNumberInput.press("ArrowUp");
119

120
	await expect(sliderNumberInput).toHaveValue("4");
121

122
	const sliderRangeInput = component.getByRole("slider");
123

124
	await sliderRangeInput.focus();
125

126
	sliderRangeInput.press("ArrowRight");
127

128
	await expect(sliderNumberInput).toHaveValue("5");
129

130
	changeSlider(page, sliderRangeInput, sliderRangeInput, 2);
131

132
	await expect(sliderNumberInput).toHaveValue("10");
133
});
134

135
test("Slider Change event", async ({ mount, page }) => {
136
	const events = {
137
		change: 0,
138
		release: 0
139
	};
140

141
	function event(name: "change" | "release") {
142
		events[name] += 1;
143
	}
144

145
	const component = await mount(Slider, {
146
		props: {
147
			value: 3,
148
			minimum: 0,
149
			maximum: 10,
150
			label: "My Slider",
151
			show_label: true,
152
			step: 1,
153
			interactive: true,
154
			loading_status: loading_status,
155
			gradio: {
156
				dispatch: event
157
			}
158
		}
159
	});
160

161
	const sliderNumberInput = component.getByRole("spinbutton", {
162
		name: "My Slider"
163
	});
164

165
	const sliderRangeInput = component.getByRole("slider");
166

167
	await expect(sliderNumberInput).toHaveValue("3");
168

169
	await changeSlider(page, sliderRangeInput, sliderRangeInput, 0.7);
170

171
	await expect(sliderNumberInput).toHaveValue("7");
172

173
	// More than one change event and one release event.
174
	await expect(events.change).toBeGreaterThanOrEqual(1);
175
	await expect(events.release).toBeGreaterThanOrEqual(1);
176
});
177