[QA] Component library tests

.github/workflows/test-e2e-component-library-vizro-core.yml

@@ -0,0 +1,67 @@
+name: e2e component library tests
+
+defaults:
+  run:
+    working-directory: vizro-core
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches:
+      - main
+
+env:
+  PYTHONUNBUFFERED: 1
+  FORCE_COLOR: 1
+  PYTHON_VERSION: "3.12"
+
+jobs:
+  test-e2e-component-library-vizro-core:
+    name: test-e2e-component-library-vizro-core
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python ${{ env.PYTHON_VERSION }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}
+
+      - name: Install Hatch
+        run: pip install hatch
+
+      - name: Show dependency tree
+        run: hatch run all.py${{ env.PYTHON_VERSION }}:pip tree
+
+      - name: Run e2e component library tests
+        run: hatch run all.py${{ env.PYTHON_VERSION }}:test-e2e-component-library
+
+      - name: Copy failed screenshots
+        if: failure()
+        run: |
+          mkdir /home/runner/work/vizro/vizro/vizro-core/failed_screenshots/
+          cp *.png failed_screenshots
+
+      - name: Archive production artifacts
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: Failed screenshots
+          path: |
+            /home/runner/work/vizro/vizro/vizro-core/failed_screenshots/*.png
+
+      - name: Send custom JSON data to Slack
+        id: slack
+        uses: slackapi/[email protected]
+        if: failure()
+        with:
+          payload: |
+            {
+              "text": "Vizro component tests build result: ${{ job.status }}\nBranch: ${{ github.head_ref }}\n${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/workflows/vizro-qa-tests-trigger.yml

@@ -21,7 +21,6 @@ jobs:
         include:
           - label: integration tests
           - label: vizro-ai ui tests
-          - label: component library tests
     steps:
       - name: Passed fork step
         run: echo "Success!"
@@ -36,7 +35,6 @@ jobs:
         include:
           - label: integration tests
           - label: vizro-ai ui tests
-          - label: component library tests
     steps:
       - uses: actions/checkout@v4
       - name: Tests trigger
@@ -48,8 +46,6 @@ jobs:
             export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_INTEGRATION_TESTS_WORKFLOW }}
           elif [ "${{ matrix.label }}" == "vizro-ai ui tests" ]; then
             export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_VIZRO_AI_UI_TESTS_WORKFLOW }}
-          elif [ "${{ matrix.label }}" == "component library tests" ]; then
-            export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_VIZRO_COMPONENT_LIBRARY_TESTS_WORKFLOW }}
           fi
           export INPUT_GITHUB_TOKEN=${{ secrets.VIZRO_SVC_PAT }}
           export INPUT_REF=main # because we should send existent branch to dispatch workflow

vizro-core/changelog.d/20241114_134849_alexey_snigir_component_library_tests.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/hatch.toml

@@ -30,7 +30,10 @@ dependencies = [
   "openpyxl",
   "jupyter",
   "pre-commit",
-  "PyGithub"
+  "PyGithub",
+  "imutils",
+  "opencv-python",
+  "pyhamcrest"
 ]
 installer = "uv"
 
@@ -55,6 +58,7 @@ schema-check = ["python schemas/generate.py --check"]
 # fix this, but we don't actually use `hatch run test` anywhere right now.
 # See comments added in https://github.com/mckinsey/vizro/pull/444.
 test = "pytest tests --headless {args}"
+test-e2e-component-library = "pytest tests/e2e/test_component_library.py --headless {args}"
 test-integration = "pytest tests/integration --headless {args}"
 test-js = "./tools/run_jest.sh {args}"
 test-unit = "pytest tests/unit {args}"

vizro-core/pyproject.toml

@@ -79,7 +79,13 @@ filterwarnings = [
   # Ignore warning when using the fig.layout.title inside examples:
   "ignore:Using the `title` argument in your Plotly chart function may cause misalignment:UserWarning",
   # Ignore warning for Pydantic v1 API and Python 3.13:
-  "ignore:Failing to pass a value to the 'type_params' parameter of 'typing.ForwardRef._evaluate' is deprecated:DeprecationWarning"
+  "ignore:Failing to pass a value to the 'type_params' parameter of 'typing.ForwardRef._evaluate' is deprecated:DeprecationWarning",
+  # Ignore deprecation warning until this is solved: https://github.com/plotly/dash/issues/2590
+  # The `features` examples do add_type, which ideally we would clean up afterwards to restore vizro.models to
+  # its previous state. Since we don't currently do this, `hatch run test` fails.
+  # This is difficult to fix fully by un-importing vizro.models though, since we use `import vizro.models as vm` - see
+  # https://stackoverflow.com/questions/437589/how-do-i-unload-reload-a-python-module.
+  "ignore:HTTPResponse.getheader():DeprecationWarning"
 ]
 norecursedirs = ["tests/tests_utils", "tests/js"]
 pythonpath = ["tests/tests_utils"]

vizro-core/tests/e2e/conftest.py

@@ -0,0 +1,6 @@
+import pytest
+
+
+@pytest.fixture
+def get_test_name(request):
+    return request.node.name

vizro-core/tests/e2e/test_component_library.py

@@ -0,0 +1,88 @@
+import dash_bootstrap_components as dbc
+import pandas as pd
+from dash import Dash, html
+from e2e_asserts import assert_image_equal
+
+from vizro.figures.library import kpi_card, kpi_card_reference
+
+df_kpi = pd.DataFrame(
+    {
+        "Actual": [100, 200, 700],
+        "Reference": [100, 300, 500],
+        "Category": ["A", "B", "C"],
+    }
+)
+
+example_cards = [
+    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
+    kpi_card(
+        data_frame=df_kpi,
+        value_column="Actual",
+        title="KPI with aggregation",
+        agg_func="median",
+    ),
+    kpi_card(
+        data_frame=df_kpi,
+        value_column="Actual",
+        title="KPI formatted",
+        value_format="${value:.2f}",
+    ),
+    kpi_card(
+        data_frame=df_kpi,
+        value_column="Actual",
+        title="KPI with icon",
+        icon="shopping_cart",
+    ),
+]
+
+example_reference_cards = [
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        title="KPI ref. (pos)",
+    ),
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        agg_func="median",
+        title="KPI ref. (neg)",
+    ),
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        title="KPI ref. formatted",
+        value_format="{value}€",
+        reference_format="{delta}€ vs. last year ({reference}€)",
+    ),
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        title="KPI ref. with icon",
+        icon="shopping_cart",
+    ),
+]
+
+
+def test_kpi_card_component_library(dash_duo, get_test_name):
+    app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+    app.layout = dbc.Container(
+        [
+            html.H1(children="KPI Cards"),
+            dbc.Stack(
+                children=[
+                    dbc.Row([dbc.Col(kpi_card) for kpi_card in example_cards]),
+                    dbc.Row([dbc.Col(kpi_card) for kpi_card in example_reference_cards]),
+                ],
+                gap=4,
+            ),
+        ]
+    )
+    dash_duo.start_server(app)
+    dash_duo.wait_for_page(timeout=20)
+    dash_duo.wait_for_element("div[class='card-kpi card']")
+    assert_image_equal(dash_duo.driver, get_test_name)
+    assert dash_duo.get_logs() == [], "browser console should contain no error"

vizro-core/tests/integration/test_examples.py

@@ -1,4 +1,3 @@
-# ruff: noqa: F403, F405
 import os
 import runpy
 from pathlib import Path
@@ -40,12 +39,6 @@ def dashboard(request, monkeypatch):
 examples_path = Path(__file__).parents[2] / "examples"
 
 
-# Ignore deprecation warning until this is solved: https://github.com/plotly/dash/issues/2590
-# The `features` examples do add_type, which ideally we would clean up afterwards to restore vizro.models to
-# its previous state. Since we don't currently do this, `hatch run test` fails.
-# This is difficult to fix fully by un-importing vizro.models though, since we use `import vizro.models as vm` - see
-# https://stackoverflow.com/questions/437589/how-do-i-unload-reload-a-python-module.
-@pytest.mark.filterwarnings("ignore:HTTPResponse.getheader():DeprecationWarning")
 # Ignore as it doesn't affect the test run
 @pytest.mark.filterwarnings("ignore::pytest.PytestUnhandledThreadExceptionWarning")
 @pytest.mark.filterwarnings("ignore:unclosed file:ResourceWarning")

vizro-core/tests/tests_utils/e2e_asserts.py

@@ -0,0 +1,50 @@
+import shutil
+from pathlib import Path
+
+import cv2
+import imutils
+from hamcrest import assert_that, equal_to
+
+
+def _compare_images(original_image, new_image):
+    """Comparison process."""
+    difference = cv2.subtract(original_image, new_image)
+    blue, green, red = cv2.split(difference)
+    assert_that(cv2.countNonZero(blue), equal_to(0), reason="Blue channel is different")
+    assert_that(cv2.countNonZero(green), equal_to(0), reason="Green channel is different")
+    assert_that(cv2.countNonZero(red), equal_to(0), reason="Red channel is different")
+
+
+def _create_image_difference(original, new):
+    """Creates new image with diff of images comparison."""
+    diff = original.copy()
+    cv2.absdiff(original, new, diff)
+    gray = cv2.cvtColor(diff, cv2.COLOR_BGR2GRAY)
+    for i in range(0, 3):
+        dilated = cv2.dilate(gray.copy(), None, iterations=i + 1)
+    (t_var, thresh) = cv2.threshold(dilated, 3, 255, cv2.THRESH_BINARY)
+    cnts = cv2.findContours(thresh, cv2.RETR_LIST, cv2.CHAIN_APPROX_SIMPLE)
+    cnts = imutils.grab_contours(cnts)
+    for contour in cnts:
+        (x, y, width, height) = cv2.boundingRect(contour)
+        cv2.rectangle(new, (x, y), (x + width, y + height), (0, 255, 0), 2)
+    return new
+
+
+def assert_image_equal(browserdriver, test_image_name):
+    """Comparison logic and diff files creation."""
+    base_image_name = f"{test_image_name.replace('test', 'base')}.png"
+    browserdriver.save_screenshot(f"{test_image_name}_branch.png")
+    original = cv2.imread(f"tests/e2e/screenshots/{base_image_name}")
+    new = cv2.imread(f"{test_image_name}_branch.png")
+    try:
+        _compare_images(original, new)
+        Path(f"{test_image_name}_branch.png").unlink()
+    except AssertionError as exp:
+        shutil.copy(f"{test_image_name}_branch.png", base_image_name)
+        diff = _create_image_difference(original=new, new=original)
+        cv2.imwrite(f"{test_image_name}_diff_main.png", diff)
+        raise AssertionError("pictures are not the same") from exp
+    except cv2.error as exp:
+        shutil.copy(f"{test_image_name}_branch.png", base_image_name)
+        raise cv2.error("pictures has different sizes") from exp