From 594f0edb7cbcb10eece7b5e59690e80f7286baef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Thu, 5 Oct 2023 13:35:56 +0100
Subject: [PATCH] Add test to ensure a correct interaction with caching.

This snapshot test will only be enforced after #3464 is fixed, at which point the snapshot test should be similar to test_component_classes_opacity, but where each sentence is slightly visible in a faded shade or red.
---
 .../component_classes_opacity.py              | 60 +++++++++++--------
 .../component_classes_opacity.tcss            | 25 ++++++++
 tests/snapshot_tests/test_snapshots.py        | 24 ++++++++
 3 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 tests/snapshot_tests/snapshot_apps/component_classes_opacity.tcss

diff --git a/tests/snapshot_tests/snapshot_apps/component_classes_opacity.py b/tests/snapshot_tests/snapshot_apps/component_classes_opacity.py
index c748affb97..32719cbc26 100644
--- a/tests/snapshot_tests/snapshot_apps/component_classes_opacity.py
+++ b/tests/snapshot_tests/snapshot_apps/component_classes_opacity.py
@@ -1,3 +1,5 @@
+from pathlib import Path
+
 from textual.app import App, ComposeResult
 from textual.widgets import (
     Checkbox,
@@ -16,35 +18,41 @@
 from textual.widgets.option_list import Option
 
 
+CSS_PATH = (Path(__file__) / "../component_classes_opacity.tcss").resolve()
+CSS_PATH.write_text(
+    """
+* {
+    max-height: 3;
+}
+Checkbox > .toggle--label,
+DataTable > .datatable--header,
+DirectoryTree > .directory-tree--file,
+DirectoryTree > .directory-tree--folder,
+Footer > .footer--description,
+Footer > .footer--key,
+Input > .input--placeholder,
+Markdown > .code_inline,
+Markdown > .em,
+Markdown > .s,
+Markdown > .strong,
+OptionList > .option-list--option-highlighted,
+ProgressBar Bar > .bar--bar,
+RadioButton > .toggle--label,
+SelectionList > .selection-list--button-highlighted,
+Switch > .switch--slider,
+Toast > .toast--title,
+Tree > .tree--label {
+    text-opacity: 0%;
+    color: white;
+}
+"""
+)
+
+
 class ComponentClassesOpacity(App[None]):
     BINDINGS = [("n", "notification", "random Notification")]
 
-    CSS = """
-    * {
-        max-height: 3;
-    }
-    Checkbox > .toggle--label,
-    DataTable > .datatable--header,
-    DirectoryTree > .directory-tree--file,
-    DirectoryTree > .directory-tree--folder,
-    Footer > .footer--description,
-    Footer > .footer--key,
-    Input > .input--placeholder,
-    Markdown > .code_inline,
-    Markdown > .em,
-    Markdown > .s,
-    Markdown > .strong,
-    OptionList > .option-list--option-highlighted,
-    ProgressBar Bar > .bar--bar,
-    RadioButton > .toggle--label,
-    SelectionList > .selection-list--button-highlighted,
-    Switch > .switch--slider,
-    Toast > .toast--title,
-    Tree > .tree--label {
-        text-opacity: 0%;
-        color: white;
-    }
-    """
+    CSS_PATH = CSS_PATH
 
     def compose(self) -> ComposeResult:
         yield Checkbox("this should be invisible")
diff --git a/tests/snapshot_tests/snapshot_apps/component_classes_opacity.tcss b/tests/snapshot_tests/snapshot_apps/component_classes_opacity.tcss
new file mode 100644
index 0000000000..0ce9f2b4aa
--- /dev/null
+++ b/tests/snapshot_tests/snapshot_apps/component_classes_opacity.tcss
@@ -0,0 +1,25 @@
+
+* {
+    max-height: 3;
+}
+Checkbox > .toggle--label,
+DataTable > .datatable--header,
+DirectoryTree > .directory-tree--file,
+DirectoryTree > .directory-tree--folder,
+Footer > .footer--description,
+Footer > .footer--key,
+Input > .input--placeholder,
+Markdown > .code_inline,
+Markdown > .em,
+Markdown > .s,
+Markdown > .strong,
+OptionList > .option-list--option-highlighted,
+ProgressBar Bar > .bar--bar,
+RadioButton > .toggle--label,
+SelectionList > .selection-list--button-highlighted,
+Switch > .switch--slider,
+Toast > .toast--title,
+Tree > .tree--label {
+    text-opacity: 50%;
+    color:red;
+}
diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py
index 08a60f36c6..66c6ea38c8 100644
--- a/tests/snapshot_tests/test_snapshots.py
+++ b/tests/snapshot_tests/test_snapshots.py
@@ -841,6 +841,30 @@ def test_component_classes_opacity(snap_compare) -> None:
     )
 
 
+# Right now, the snapshot test will show a bunch of faded red text when you inspect the snapshot
+# but the markdown widget should show 4 sentences “this should be invisible” while it doesn't.
+@pytest.mark.xfail(
+    reason="The Markdown component classes won't reload while #3464 is open, https://github.com/Textualize/textual/issues/3464"
+)
+def test_component_classes_opacity_reloading(snap_compare) -> None:
+    """Make sure that reloading CSS doesn't break"""
+
+    async def run_before(pilot):
+        css_path = pilot.app.CSS_PATH
+        css_path.write_text(
+            css_path.read_text()
+            .replace("color: white;", "color:red;")
+            .replace("text-opacity: 0%;", "text-opacity: 50%;")
+        )
+        await pilot.app._on_css_change()
+
+    assert snap_compare(
+        SNAPSHOT_APPS_DIR / "component_classes_opacity.py",
+        terminal_size=(80, 30),
+        run_before=run_before,
+    )
+
+
 def test_component_classes_opacity_2(snap_compare) -> None:
     """Regression test for