Back to Repositories

Testing Button Component Event Handling in Gradio Framework

This test suite validates the functionality of button components in the Gradio framework, focusing on ClearButton and OAuth login button implementations. The tests ensure proper event handling, state management, and integration with the Gradio Blocks API.

Test Coverage Overview

The test suite covers two main button components: ClearButton and LoginButton implementations.

Key functionality tested includes:

Event trigger setup for ClearButton
State management with ClearButton
OAuth login button configuration
Warning behavior for LoginButton in non-Spaces environments

Integration points focus on Gradio Blocks API interaction and OAuth route configuration.

Implementation Analysis

The testing approach utilizes pytest fixtures and mocking to isolate component behavior. The tests employ the Gradio Blocks context manager pattern to create test environments, validating event triggers, function bindings, and JavaScript interactions.

Framework-specific features tested include:

Gradio’s event system configuration
Component state management
OAuth integration patterns

Technical Details

Testing tools and configuration:

pytest as the primary testing framework
unittest.mock for dependency isolation
Gradio Blocks API for component setup
Custom event trigger validation
OAuth route mocking utilities

Best Practices Demonstrated

The test suite demonstrates strong testing practices through isolated component testing, comprehensive state validation, and proper mocking of external dependencies.

Notable practices include:

Separate test classes for distinct components
Explicit validation of event configurations
Proper warning assertion for edge cases
Clean separation of Python and JavaScript functionality testing

gradio-app/gradio

test/test_buttons.py

            
from unittest.mock import patch

import pytest

import gradio as gr


class TestClearButton:
    def test_clear_event_setup_correctly(self):
        with gr.Blocks() as demo:
            chatbot = gr.Chatbot([["Hello", "How are you?"]])
            with gr.Row():
                textbox = gr.Textbox(scale=3, interactive=True)
                gr.ClearButton([textbox, chatbot], scale=1)

        clear_event_trigger = demo.fns.pop(demo.default_config.fn_id - 1)
        assert not clear_event_trigger.fn
        assert clear_event_trigger.js
        assert clear_event_trigger.outputs == [textbox, chatbot]

    def test_clear_event_setup_correctly_with_state(self):
        with gr.Blocks() as demo:
            chatbot = gr.Chatbot([["Hello", "How are you?"]])
            state = gr.State("")
            gr.ClearButton([state, chatbot], scale=1)

        clear_event_trigger_state = demo.fns.pop(demo.default_config.fn_id - 1)
        assert clear_event_trigger_state.fn


class TestOAuthButtons:
    @pytest.mark.flaky
    def test_login_button_warns_when_not_on_spaces(self):
        with pytest.warns(UserWarning):
            with gr.Blocks():
                gr.LoginButton()

    @patch("gradio.oauth.get_space", lambda: "fake_space")
    @patch("gradio.oauth._add_oauth_routes")
    def test_login_button_setup_correctly(self, mock_add_oauth_routes):
        with gr.Blocks() as demo:
            button = gr.LoginButton()

        login_event = demo.fns[0]
        assert login_event.targets[0][1] == "click"
        assert not login_event.fn  # No Python code
        assert login_event.js  # But JS code instead
        assert login_event.inputs == [button]
        assert login_event.outputs == []