#311 add tests

nicegui/templates/index.html

@@ -149,7 +149,7 @@
 
       const dark = {{ dark }};
       Quasar.Dark.set(dark === None ? "auto" : dark);
-      tailwind.config.darkMode = dark === None ? undefined : "class";
+      if (dark !== None) tailwind.config.darkMode = "class";
       if (dark === True) document.body.classList.add("dark");
 
       app.mount("#app");

tests/screen.py

@@ -125,15 +125,18 @@ class Screen:
         except NoSuchElementException as e:
             raise AssertionError(f'Could not find "{text}"') from e
 
+    def find_by_tag(self, name: str) -> WebElement:
+        return self.selenium.find_element(By.TAG_NAME, name)
+
+    def find_all_by_tag(self, name: str) -> List[WebElement]:
+        return self.selenium.find_elements(By.TAG_NAME, name)
+
     def render_js_logs(self) -> str:
         console = '\n'.join(l['message'] for l in self.selenium.get_log('browser'))
         return f'-- console logs ---\n{console}\n---------------------'
 
-    def get_tags(self, name: str) -> List[WebElement]:
-        return self.selenium.find_elements(By.TAG_NAME, name)
-
     def get_attributes(self, tag: str, attribute: str) -> List[str]:
-        return [t.get_attribute(attribute) for t in self.get_tags(tag)]
+        return [t.get_attribute(attribute) for t in self.find_all_by_tag(tag)]
 
     def wait(self, t: float) -> None:
         time.sleep(t)

tests/test_page.py

@@ -200,3 +200,34 @@ def test_async_connect_handler(screen: Screen):
 
     screen.open('/')
     screen.should_contain('42')
+
+
+def test_dark_mode(screen: Screen):
+    @ui.page('/auto', dark=None)
+    def page():
+        ui.label('A').classes('text-blue-400 dark:text-red-400')
+
+    @ui.page('/light', dark=False)
+    def page():
+        ui.label('B').classes('text-blue-400 dark:text-red-400')
+
+    @ui.page('/dark', dark=True)
+    def page():
+        ui.label('C').classes('text-blue-400 dark:text-red-400')
+
+    blue = 'rgba(96, 165, 250, 1)'
+    red = 'rgba(248, 113, 113, 1)'
+    white = 'rgba(0, 0, 0, 0)'
+    black = 'rgba(18, 18, 18, 1)'
+
+    screen.open('/auto')
+    assert screen.find('A').value_of_css_property('color') == blue
+    assert screen.find_by_tag('body').value_of_css_property('background-color') == white
+
+    screen.open('/light')
+    assert screen.find('B').value_of_css_property('color') == blue
+    assert screen.find_by_tag('body').value_of_css_property('background-color') == white
+
+    screen.open('/dark')
+    assert screen.find('C').value_of_css_property('color') == red
+    assert screen.find_by_tag('body').value_of_css_property('background-color') == black