Spaces:

mindmime
/

gradio

Runtime error

App Files Files Community

gradio / js /slider /Slider.component.spec.ts

mindmime

Upload folder using huggingface_hub

a03b3ba verified 5 months ago

raw history blame contribute delete

No virus

4.06 kB

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

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

	const loading_status: LoadingStatus = {
	eta: 0,
	queue_position: 1,
	queue_size: 1,
	status: "complete",
	scroll_to_output: false,
	visible: true,
	fn_index: 0,
	show_progress: "full"
	};

	//taken from: https://github.com/microsoft/playwright/issues/20032
	async function changeSlider(
	page: Page,
	thumb: Locator,
	slider: Locator,
	targetPercentage: number
	) {
	const thumbBoundingBox = await thumb.boundingBox();
	const sliderBoundingBox = await slider.boundingBox();

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

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

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

	await page.mouse.move(startPoint.x, startPoint.y);
	await page.mouse.down();
	await page.mouse.move(endPoint.x, endPoint.y);
	await page.mouse.up();
	}

	test("Slider Default Value And Label rendered", async ({ mount }) => {
	const component = await mount(Slider, {
	props: {
	value: 3,
	minimum: 0,
	maximum: 10,
	label: "My Slider",
	show_label: true,
	step: 1,
	interactive: true,
	loading_status: loading_status,
	gradio: {
	dispatch() {}
	}
	}
	});
	await expect(component).toContainText("My Slider");

	expect(
	component.getByRole("spinbutton", {
	name: "My Slider"
	})
	).toHaveValue("3");
	});

	test("Slider respects show_label", async ({ mount, page }) => {
	const component = await mount(Slider, {
	props: {
	value: 3,
	minimum: 0,
	maximum: 10,
	label: "My Slider",
	show_label: false,
	step: 1,
	interactive: true,
	loading_status: loading_status,
	gradio: {
	dispatch() {}
	}
	}
	});
	await expect(component.getByTestId("block-title")).toBeHidden();
	});

	test("Slider Maximum/Minimum values", async ({ mount, page }) => {
	const component = await mount(Slider, {
	props: {
	value: 3,
	minimum: 0,
	maximum: 10,
	label: "My Slider",
	show_label: true,
	step: 1,
	interactive: true,
	loading_status: loading_status,
	gradio: {
	dispatch() {}
	}
	}
	});

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

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

	await sliderNumberInput.press("ArrowUp");

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

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

	await sliderRangeInput.focus();

	sliderRangeInput.press("ArrowRight");

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

	changeSlider(page, sliderRangeInput, sliderRangeInput, 2);

	await expect(sliderNumberInput).toHaveValue("10");
	});

	test("Slider Change event", async ({ mount, page }) => {
	const events = {
	change: 0,
	release: 0
	};

	function event(name: "change" \| "release") {
	events[name] += 1;
	}

	const component = await mount(Slider, {
	props: {
	value: 3,
	minimum: 0,
	maximum: 10,
	label: "My Slider",
	show_label: true,
	step: 1,
	interactive: true,
	loading_status: loading_status,
	gradio: {
	dispatch: event
	}
	}
	});

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

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

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

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

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

	// More than one change event and one release event.
	await expect(events.change).toBeGreaterThanOrEqual(1);
	await expect(events.release).toBeGreaterThanOrEqual(1);
	});