From 67091ef2df320e8ee0412a602482f2bc75a1f4ab Mon Sep 17 00:00:00 2001
From: Will McGugan <willmcgugan@gmail.com>
Date: Fri, 29 Jul 2022 11:01:58 +0100
Subject: [PATCH] fix e2etest

---
 e2e_tests/sandbox_basic_test.py |   5 +-
 e2e_tests/test_apps/basic.css   | 164 ++++++++++++++++++--------------
 e2e_tests/test_apps/basic.py    | 154 +++++++++++++++++++-----------
 src/textual/_partition.py       |   4 -
 4 files changed, 195 insertions(+), 132 deletions(-)

diff --git a/e2e_tests/sandbox_basic_test.py b/e2e_tests/sandbox_basic_test.py
index 3cf1ced9d..ca3b9f4ce 100644
--- a/e2e_tests/sandbox_basic_test.py
+++ b/e2e_tests/sandbox_basic_test.py
@@ -14,7 +14,8 @@ if len(sys.argv) > 1:
 if len(sys.argv) > 2:
     script_time_to_live = float(sys.argv[2])
 
-e2e_root = Path(__file__).parent
+e2e_root = Path(__file__).parent / "test_apps"
+print(e2e_root)
 
 completed_process = None
 
@@ -22,7 +23,7 @@ completed_process = None
 def launch_sandbox_script(python_file_name: str) -> None:
     global completed_process
 
-    command = f"{sys.executable} ./test_apps/{shlex.quote(python_file_name)}.py"
+    command = f"{sys.executable} {shlex.quote(python_file_name)}.py"
     print(f"Launching command '{command}'...")
     try:
         completed_process = subprocess.run(
diff --git a/e2e_tests/test_apps/basic.css b/e2e_tests/test_apps/basic.css
index 44560d3a2..3c9043b6b 100644
--- a/e2e_tests/test_apps/basic.css
+++ b/e2e_tests/test_apps/basic.css
@@ -2,27 +2,46 @@
 
 
 
-* {
+ * {
     transition: color 300ms linear, background 300ms linear;
-}
+} 
 
 
+*:hover {
+  /* tint: 30% red;  
+  /* outline: heavy red; */
+}
+
 App > Screen {
-  layout: dock;
-  docks: side=left/1;
+    
   background: $surface;
-  color: $text-surface;
+  color: $text-surface; 
+  layers: sidebar;
+
+  color: $text-background;
+  background: $background;
+  layout: vertical;
+  
 }
 
+DataTable {
+  /*border:heavy red;*/
+  /* tint: 10% green; */
+  /* opacity: 50%; */
+  padding: 1;
+  margin: 1 2;  
+  height: 12;  
+}
 
 #sidebar {
-  color: $text-primary;
-  background: $primary;
-  dock: side;
+  color: $text-panel;
+  background: $panel;
+  dock: left;
   width: 30;
   offset-x: -100%;
-  layout: dock;
+  
   transition: offset 500ms in_out_cubic;
+  layer: sidebar;
 }
 
 #sidebar.-active {
@@ -30,72 +49,67 @@ App > Screen {
 }
 
 #sidebar .title {
-  height: 3;
-  background: $primary-darken-2;
-  color: $text-primary-darken-2 ;
-  border-right: outer $primary-darken-3;
+  height: 1;
+  background: $primary-background-darken-1;
+  color: $text-primary-background-darken-1;
+  border-right: wide $background;
   content-align: center middle;
 }
 
 #sidebar .user {
   height: 8;
-  background: $primary-darken-1;
-  color: $text-primary-darken-1;
-  border-right: outer $primary-darken-3;
+  background: $panel-darken-1;
+  color: $text-panel-darken-1;
+  border-right: wide $background;
   content-align: center middle;
 }
 
 #sidebar .content {
-  background: $primary;
-  color: $text-primary;
-  border-right: outer $primary-darken-3;
+  background: $panel-darken-2;
+  color: $text-surface;
+  border-right: wide $background;
   content-align: center middle;
 }
 
 #header {
-  color: $text-primary-darken-1;
-  background: $primary-darken-1;
-  height: 3;
+  color: $text-secondary-background;
+  background: $secondary-background;
+  height: 1;
   content-align: center middle;
-}
-
-#content {
-  color: $text-background;
-  background: $background;
-  layout: vertical;
-  overflow-y: scroll;  
+  
+  dock: top;
 }
 
 
 Tweet {
-  height: 12;
-  width: 80;
+  height:12;
+  width: 100%;
  
-  margin: 1 3;
+  
   background: $panel;
   color: $text-panel;
   layout: vertical;
   /* border: outer $primary; */
   padding: 1;
-  border: wide $panel-darken-2;
-  overflow-y: scroll; 
+  border: wide $panel;
+  overflow: auto;
+  /* scrollbar-gutter: stable; */
   align-horizontal: center;
-  
+  box-sizing: border-box;
 }
 
+
 .scrollable {
-  width: 80;
+ 
   overflow-y: scroll;
-  max-width:80;
+  margin: 1 2;
   height: 20;
   align-horizontal: center;
   layout: vertical;
 }
 
-.code {
-
-  height: 34;
-  width: 100%;
+.code {  
+  height: auto;
   
 }
 
@@ -110,9 +124,12 @@ TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height:20;
-  padding: 0 1 0 0;
- 
+  height: auto; 
+  padding: 0 1 0 0; 
+}
+
+Tweet.scroll-horizontal TweetBody {
+  width: 350;
 }
 
 .button {
@@ -123,11 +140,11 @@ TweetBody {
   /* border-top: hidden  $accent-darken-3;  */
   border: tall $accent-darken-2;
   /* border-left: tall $accent-darken-1; */
- 
+
 
   /* padding: 1 0 0 0 ; */
 
-  transition: background 200ms in_out_cubic, color 300ms in_out_cubic;
+  transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
  
 }
 
@@ -138,18 +155,19 @@ TweetBody {
   height: 3;
   border: tall $accent-darken-1;
   /* border-left: tall $accent-darken-3; */
- 
 
 
- 
+
+
 }
 
 #footer {
   color: $text-accent;
   background: $accent;
   height: 1;
-  border-top: hkey $accent-darken-2;
+  
   content-align: center middle;
+  dock:bottom;
 }
 
 
@@ -159,58 +177,60 @@ TweetBody {
 
 OptionItem {
   height: 3;
-  background: $primary;
-  transition: background 100ms linear;
-  border-right: outer $primary-darken-2;
-  border-left: hidden;
+  background: $panel;
+  border-right: wide $background;
+  border-left: blank;
   content-align: center middle;
 }
 
 OptionItem:hover {
   height: 3;
-  color: $accent;
+  color: $text-primary;
   background: $primary-darken-1;
   /* border-top: hkey $accent2-darken-3;
   border-bottom: hkey $accent2-darken-3; */
   text-style: bold;
-  border-left: outer $accent-darken-2;
+  border-left: outer $secondary-darken-2;
 }
 
 Error {
-  width: 80;
+  width: 100%;
   height:3;
   background: $error;
   color: $text-error;
-  border-top: hkey $error-darken-2;
-  border-bottom: hkey $error-darken-2; 
-  margin: 1 3;
+  border-top: tall $error-darken-2;
+  border-bottom: tall $error-darken-2;
   
+  padding: 0;
   text-style: bold;
-  align-horizontal: center;   
+  align-horizontal: center;
 }
 
 Warning {
-  width: 80;
+  width: 100%;
   height:3;
   background: $warning;
   color: $text-warning-fade-1;
-  border-top: hkey $warning-darken-2;
-  border-bottom: hkey $warning-darken-2; 
-  margin: 1 2;
+  border-top: tall $warning-darken-2;
+  border-bottom: tall $warning-darken-2;
+  
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
-  width: 80;
-  height:3;  
+  width: 100%;
+  
+  height:auto;  
   box-sizing: border-box;
-  background: $success-lighten-3;
-  color: $text-success-lighten-3-fade-1;
-  border-top: hkey $success;
-  border-bottom: hkey $success; 
-  margin: 1 2;
-  text-style: bold;
+  background: $success;
+  color: $text-success-fade-1;  
+  
+  border-top: hkey $success-darken-2;
+  border-bottom: hkey $success-darken-2; 
+
+  text-style: bold ;
+
   align-horizontal: center;
 }
 
diff --git a/e2e_tests/test_apps/basic.py b/e2e_tests/test_apps/basic.py
index e29bbe17d..dee825f0e 100644
--- a/e2e_tests/test_apps/basic.py
+++ b/e2e_tests/test_apps/basic.py
@@ -1,13 +1,12 @@
-from pathlib import Path
-
 from rich.console import RenderableType
-from rich.style import Style
+
 from rich.syntax import Syntax
 from rich.text import Text
 
-from textual.app import App
+from textual.app import App, ComposeResult
+from textual.reactive import Reactive
 from textual.widget import Widget
-from textual.widgets import Static
+from textual.widgets import Static, DataTable
 
 CODE = '''
 class Offset(NamedTuple):
@@ -46,11 +45,15 @@ class Offset(NamedTuple):
 '''
 
 
-lorem = Text.from_markup(
-    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
-    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
+lorem_short = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit liber a a a, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum."""
+lorem = (
+    lorem_short
+    + """ In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
 )
 
+lorem_short_text = Text.from_markup(lorem_short)
+lorem_long_text = Text.from_markup(lorem * 2)
+
 
 class TweetHeader(Widget):
     def render(self) -> RenderableType:
@@ -58,8 +61,10 @@ class TweetHeader(Widget):
 
 
 class TweetBody(Widget):
+    short_lorem = Reactive(False)
+
     def render(self) -> Text:
-        return lorem
+        return lorem_short_text if self.short_lorem else lorem_long_text
 
 
 class Tweet(Widget):
@@ -83,53 +88,64 @@ class Warning(Widget):
 
 class Success(Widget):
     def render(self) -> Text:
-        return Text("This is a success message", justify="center")
+        return Text("This is a success  message", justify="center")
 
 
-class BasicApp(App):
+class BasicApp(App, css_path="basic.css"):
     """A basic app demonstrating CSS"""
 
     def on_load(self):
         """Bind keys here."""
-        self.bind("tab", "toggle_class('#sidebar', '-active')")
+        self.bind("s", "toggle_class('#sidebar', '-active')")
 
-    def on_mount(self):
-        """Build layout here."""
-        self.mount(
-            header=Static(
-                Text.from_markup(
-                    "[b]This is a [u]Textual[/u] app, running in the terminal"
-                ),
-            ),
-            content=Widget(
-                Tweet(
-                    TweetBody(),
-                    # Widget(
-                    #     Widget(classes={"button"}),
-                    #     Widget(classes={"button"}),
-                    #     classes={"horizontal"},
-                    # ),
-                ),
-                Widget(
-                    Static(Syntax(CODE, "python"), classes="code"),
-                    classes="scrollable",
-                ),
-                Error(),
-                Tweet(TweetBody()),
-                Warning(),
-                Tweet(TweetBody()),
-                Success(),
-            ),
-            footer=Widget(),
-            sidebar=Widget(
-                Widget(classes="title"),
-                Widget(classes="user"),
-                OptionItem(),
-                OptionItem(),
-                OptionItem(),
-                Widget(classes="content"),
+    def compose(self) -> ComposeResult:
+        table = DataTable()
+        self.scroll_to_target = Tweet(TweetBody())
+
+        yield Static(
+            Text.from_markup(
+                "[b]This is a [u]Textual[/u] app, running in the terminal"
             ),
+            id="header",
         )
+        yield from (
+            Tweet(TweetBody()),
+            Widget(
+                Static(Syntax(CODE, "python"), classes="code"),
+                classes="scrollable",
+            ),
+            table,
+            Error(),
+            Tweet(TweetBody(), classes="scrollbar-size-custom"),
+            Warning(),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Success(),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+            Tweet(TweetBody(), classes="scroll-horizontal"),
+        )
+        yield Widget(id="footer")
+        yield Widget(
+            Widget(classes="title"),
+            Widget(classes="user"),
+            OptionItem(),
+            OptionItem(),
+            OptionItem(),
+            Widget(classes="content"),
+            id="sidebar",
+        )
+
+        table.add_column("Foo", width=20)
+        table.add_column("Bar", width=20)
+        table.add_column("Baz", width=20)
+        table.add_column("Foo", width=20)
+        table.add_column("Bar", width=20)
+        table.add_column("Baz", width=20)
+        table.zebra_stripes = True
+        for n in range(100):
+            table.add_row(*[f"Cell ([b]{n}[/b], {col})" for col in range(6)])
 
     async def on_key(self, event) -> None:
         await self.dispatch_key(event)
@@ -137,17 +153,47 @@ class BasicApp(App):
     def key_d(self):
         self.dark = not self.dark
 
+    async def key_q(self):
+        await self.shutdown()
+
     def key_x(self):
         self.panic(self.tree)
 
+    def key_escape(self):
+        self.app.bell()
 
-sandbox_folder = Path(__file__).parent
-app = BasicApp(
-    css_path=sandbox_folder / "basic.css",
-    watch_css=True,
-    log_path=sandbox_folder / "basic.log",
-    log_verbosity=0,
-)
+    def key_t(self):
+        # Pressing "t" toggles the content of the TweetBody widget, from a long "Lorem ipsum..." to a shorter one.
+        tweet_body = self.query("TweetBody").first()
+        tweet_body.short_lorem = not tweet_body.short_lorem
+
+    def key_v(self):
+        self.get_child(id="content").scroll_to_widget(self.scroll_to_target)
+
+    def key_space(self):
+        self.bell()
+
+
+app = BasicApp()
 
 if __name__ == "__main__":
     app.run()
+
+    # from textual.geometry import Region
+    # from textual.color import Color
+
+    # print(Region.intersection.cache_info())
+    # print(Region.overlaps.cache_info())
+    # print(Region.union.cache_info())
+    # print(Region.split_vertical.cache_info())
+    # print(Region.__contains__.cache_info())
+    # from textual.css.scalar import Scalar
+
+    # print(Scalar.resolve_dimension.cache_info())
+
+    # from rich.style import Style
+    # from rich.cells import cached_cell_len
+
+    # print(Style._add.cache_info())
+
+    # print(cached_cell_len.cache_info())
diff --git a/src/textual/_partition.py b/src/textual/_partition.py
index 3a2d5ba86..734cdad61 100644
--- a/src/textual/_partition.py
+++ b/src/textual/_partition.py
@@ -27,7 +27,3 @@ def partition(
     for value in iterable:
         appends[1 if pred(value) else 0](value)
     return result
-
-
-if __name__ == "__main__":
-    print(partition((lambda n: bool(n % 2)), list(range(20))))