Merge pull request #902 from gradio-app/blocks-tests

Blocks Tests

.circleci/config.yml

@@ -38,11 +38,6 @@ jobs:
       - run:
           command: |
             mkdir screenshots
-      - run:
-          command: |
-            . venv/bin/activate
-            coverage run -m pytest
-            coverage xml
       - run:
           command: |
             . venv/bin/activate
@@ -55,6 +50,11 @@ jobs:
           command: |
             . venv/bin/activate
             python -m  flake8 --ignore=E731,E501,E722,W503,E126,F401,E203 gradio test
+      - run:
+          command: |
+            . venv/bin/activate
+            coverage run -m pytest
+            coverage xml
       - codecov/upload:
           file: 'coverage.xml'
       - store_artifacts:

test/test_blocks.py

@@ -0,0 +1,62 @@
+import random
+import unittest
+
+try:
+    from .test_data.blocks_configs import XRAY_CONFIG  # for pytest
+except ImportError:
+    from test_data.blocks_configs import XRAY_CONFIG  # for regular python
+
+import gradio as gr
+
+
+class TestBlocks(unittest.TestCase):
+    def test_xray(self):
+        xray_model = lambda diseases, img: {
+            disease: random.random() for disease in diseases
+        }
+        ct_model = lambda diseases, img: {disease: 0.1 for disease in diseases}
+
+        xray_blocks = gr.Blocks()
+
+        with xray_blocks:
+            gr.components.Markdown(
+                """
+            # Detect Disease From Scan
+            With this model you can lorem ipsum
+            - ipsum 1
+            - ipsum 2
+            """
+            )
+            disease = gr.components.CheckboxGroup(
+                choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
+            )
+
+            with gr.Tabs():
+                with gr.TabItem("X-ray"):
+                    with gr.Row():
+                        xray_scan = gr.components.Image()
+                        xray_results = gr.components.JSON()
+                    xray_run = gr.Button(
+                        "Run",
+                        css={"background-color": "red", "--hover-color": "orange"},
+                    )
+                    xray_run.click(
+                        xray_model, inputs=[disease, xray_scan], outputs=xray_results
+                    )
+
+                with gr.TabItem("CT Scan"):
+                    with gr.Row():
+                        ct_scan = gr.components.Image()
+                        ct_results = gr.components.JSON()
+                    ct_run = gr.Button("Run")
+                    ct_run.click(
+                        ct_model, inputs=[disease, ct_scan], outputs=ct_results
+                    )
+
+            _ = gr.components.Textbox()
+
+        self.assertEqual(XRAY_CONFIG, xray_blocks.get_config_file())
+
+
+if __name__ == "__main__":
+    unittest.main()

test/test_data/blocks_configs.py

@@ -0,0 +1,149 @@
+XRAY_CONFIG = {
+    "mode": "blocks",
+    "components": [
+        {
+            "id": 1,
+            "type": "markdown",
+            "props": {
+                "default_value": "<pre><code>        # Detect Disease From Scan\n        With this model you can lorem ipsum\n        - ipsum 1\n        - ipsum 2\n</code></pre>\n",
+                "name": "markdown",
+                "label": None,
+                "css": {},
+            },
+        },
+        {
+            "id": 2,
+            "type": "checkboxgroup",
+            "props": {
+                "choices": ["Covid", "Malaria", "Lung Cancer"],
+                "default_value": [],
+                "name": "checkboxgroup",
+                "label": "Disease to Scan For",
+                "css": {},
+            },
+        },
+        {"id": 3, "type": "tabs", "props": {"css": {}}},
+        {"id": 4, "type": "tabitem", "props": {"label": "X-ray", "css": {}}},
+        {"id": 5, "type": "tabitem", "props": {"label": "X-ray", "css": {}}},
+        {"id": 6, "type": "row", "props": {"type": "row", "css": {}}},
+        {
+            "id": 7,
+            "type": "image",
+            "props": {
+                "image_mode": "RGB",
+                "shape": None,
+                "source": "upload",
+                "tool": "editor",
+                "default_value": None,
+                "name": "image",
+                "label": None,
+                "css": {},
+            },
+        },
+        {
+            "id": 8,
+            "type": "json",
+            "props": {"default_value": '""', "name": "json", "label": None, "css": {}},
+        },
+        {
+            "id": 9,
+            "type": "button",
+            "props": {
+                "default_value": "Run",
+                "name": "button",
+                "label": None,
+                "css": {"background-color": "red", "--hover-color": "orange"},
+            },
+        },
+        {"id": 10, "type": "tabitem", "props": {"label": "CT Scan", "css": {}}},
+        {"id": 11, "type": "tabitem", "props": {"label": "CT Scan", "css": {}}},
+        {"id": 12, "type": "row", "props": {"type": "row", "css": {}}},
+        {
+            "id": 13,
+            "type": "image",
+            "props": {
+                "image_mode": "RGB",
+                "shape": None,
+                "source": "upload",
+                "tool": "editor",
+                "default_value": None,
+                "name": "image",
+                "label": None,
+                "css": {},
+            },
+        },
+        {
+            "id": 14,
+            "type": "json",
+            "props": {"default_value": '""', "name": "json", "label": None, "css": {}},
+        },
+        {
+            "id": 15,
+            "type": "button",
+            "props": {
+                "default_value": "Run",
+                "name": "button",
+                "label": None,
+                "css": {},
+            },
+        },
+        {
+            "id": 16,
+            "type": "textbox",
+            "props": {
+                "lines": 1,
+                "placeholder": None,
+                "default_value": "",
+                "name": "textbox",
+                "label": None,
+                "css": {},
+            },
+        },
+    ],
+    "theme": "default",
+    "layout": {
+        "id": 0,
+        "children": [
+            {"id": 1},
+            {"id": 2},
+            {
+                "id": 3,
+                "children": [
+                    {
+                        "id": 5,
+                        "children": [
+                            {"id": 6, "children": [{"id": 7}, {"id": 8}]},
+                            {"id": 9},
+                        ],
+                    },
+                    {
+                        "id": 5,
+                        "children": [
+                            {"id": 6, "children": [{"id": 7}, {"id": 8}]},
+                            {"id": 9},
+                        ],
+                    },
+                    {
+                        "id": 11,
+                        "children": [
+                            {"id": 12, "children": [{"id": 13}, {"id": 14}]},
+                            {"id": 15},
+                        ],
+                    },
+                    {
+                        "id": 11,
+                        "children": [
+                            {"id": 12, "children": [{"id": 13}, {"id": 14}]},
+                            {"id": 15},
+                        ],
+                    },
+                ],
+            },
+            {"id": 16},
+        ],
+    },
+    "dependencies": [
+        {"targets": [9], "trigger": "click", "inputs": [2, 7], "outputs": [8]},
+        {"targets": [15], "trigger": "click", "inputs": [2, 13], "outputs": [14]},
+    ],
+}