Fix Flaky Integration Tests (#517)

* Add checks for base page elements to home and create app pages.

* Update selector.

* Update to handle multiple elements.

* Add id to logo for testing. Update selectors.

* Update h1 check.

* Update to only select specific h1.

jhub_apps/tests/tests_e2e/test_integration.py

@@ -1,9 +1,9 @@
 import re
 import uuid
 
-import pytest # type: ignore
-import structlog # type: ignore
-from playwright.sync_api import Playwright, expect # type: ignore
+import pytest  # type: ignore
+import structlog  # type: ignore
+from playwright.sync_api import Playwright, expect  # type: ignore
 
 from jhub_apps.hub_client.utils import is_jupyterhub_5
 from jhub_apps.spawner.types import Framework
@@ -32,10 +32,11 @@ def test_jupyterhub_loading(playwright: Playwright):
 
 
 @pytest.mark.parametrize(
-    ("with_server_options", ), [
+    ("with_server_options",),
+    [
         pytest.param(True, marks=pytest.mark.with_server_options),
         pytest.param(False),
-    ]
+    ],
 )
 def test_panel_app_creation(playwright: Playwright, with_server_options) -> None:
     browser, context, page = get_page(playwright)
@@ -49,6 +50,14 @@ def test_panel_app_creation(playwright: Playwright, with_server_options) -> None
         create_users(page, users=[share_with_user])
         page.goto(BASE_URL)
         sign_in_and_authorize(page, username=f"admin-{app_suffix}", password="password")
+        # Verify that the page is loaded
+        logo = page.locator("id=app-logo")
+        expect(logo).to_be_visible()
+        profile_menu = page.locator("id=profile-menu-btn")
+        expect(profile_menu).to_be_visible()
+        page_title = page.locator("h1").filter(has_text="Home")
+        expect(page_title).to_be_visible()
+        # Create the App
         create_app(
             app_name, page, with_server_options, share_with_users=[share_with_user]
         )
@@ -80,16 +89,25 @@ def assert_working_panel_app(page):
 
 
 def create_app(
-        app_name,
-        page,
-        with_server_options=True,
-        share_with_users=None,
-        share_with_groups=None,
+    app_name,
+    page,
+    with_server_options=True,
+    share_with_users=None,
+    share_with_groups=None,
 ):
     logger.info("Creating App")
+    # Verify that the page is loaded
+    logo = page.locator("id=app-logo")
+    expect(logo).to_be_visible()
+    profile_menu = page.locator("id=profile-menu-btn")
+    expect(profile_menu).to_be_visible()
+
+    # Deploy App
     deploy_button = page.get_by_role("button", name="Deploy App")
     expect(deploy_button).to_be_visible()
     deploy_button.click()
+    page_title = page.locator("h1").filter(has_text="Deploy a new app")
+    expect(page_title).to_be_visible()
     logger.info("Fill App display Name")
     display_name_field = page.get_by_label("*Name")
     expect(display_name_field).to_be_visible()
@@ -105,7 +123,7 @@ def create_app(
         logger.info("Select Next Page for Server options")
         expect(next_page_locator).to_be_visible()
         next_page_locator.click()
-        assert page.url.endswith('server-types')
+        assert page.url.endswith("server-types")
         small_instance_radio_button = page.get_by_label("Small Instance")
         logger.info("Expect Small Instance to be visible")
         expect(small_instance_radio_button).to_be_visible()

jupyterhub_config.py

@@ -19,7 +19,9 @@
 c.JAppsConfig.service_workers = 1
 c.JupyterHub.default_url = "/hub/home"
 
-c = install_jhub_apps(c, spawner_to_subclass=SimpleLocalProcessSpawner, oauth_no_confirm=True)
+c = install_jhub_apps(
+    c, spawner_to_subclass=SimpleLocalProcessSpawner, oauth_no_confirm=True
+)
 
 c.JupyterHub.template_paths = theme_template_paths
 
@@ -51,12 +53,12 @@ def service_for_jhub_apps(name, url):
     "hub_subtitle": "your open source data science platform",
     "welcome": "Running in dev mode",
     "display_version": True,
-    **themes.DEFAULT_THEME
+    **themes.DEFAULT_THEME,
 }
 
 c.JupyterHub.load_groups = {
-    'class-A': {"users": ['john', 'alice']},
-    'class-B': {"users": ['john', 'alice']}
+    "class-A": {"users": ["john", "alice"]},
+    "class-B": {"users": ["john", "alice"]},
 }
 
 # Add permission to share servers/apps
@@ -65,21 +67,35 @@ def service_for_jhub_apps(name, url):
 # they can define permissions as per their preferences
 for role in c.JupyterHub.load_roles:
     if role["name"] == "user":
-        role["scopes"].extend([
-            # Need scope 'read:users:name' to share with users by name
-            "read:users:name",
-            # Need scope 'read:groups:name' to share with groups by name
-            "read:groups:name",
-        ] + ["shares!user"] if is_jupyterhub_5() else [])
+        role["scopes"].extend(
+            [
+                # Need scope 'read:users:name' to share with users by name
+                "read:users:name",
+                # Need scope 'read:groups:name' to share with groups by name
+                "read:groups:name",
+            ]
+            + ["shares!user"]
+            if is_jupyterhub_5()
+            else []
+        )
         break
 
 c.JupyterHub.load_roles = c.JupyterHub.load_roles + [
     {
-        'name': 'allow-access-to-start-shared-server',
-        'description': 'Allows users to start shared server',
-        'scopes': [
+        "name": "allow-access-to-start-shared-server",
+        "description": "Allows users to start shared server",
+        "scopes": [
             "servers",
         ],
-        'users': ["user-with-permission-to-start-shared"],
+        "users": ["user-with-permission-to-start-shared"],
     }
 ]
+
+# Uncomment to add a profile to the spawner
+# c.KubeSpawner.profile_list = [
+#     {
+#         "description": "Stable environment with 0.5-1 cpu / 0.5-1 GB ram",
+#         "display_name": "Small Instance",
+#         "slug": "small-instance",
+#     },
+# ]

ui/src/components/navigation/navigation.tsx

@@ -371,7 +371,7 @@ export const TopNavigation = ({ ...props }): React.ReactElement => {
             sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
           >
             <Link href={APP_BASE_URL}>
-              <img src={getAppLogoUrl()} alt="logo" height="28" />
+              <img id="app-logo" src={getAppLogoUrl()} alt="logo" height="28" />
             </Link>
           </Box>
           <Box sx={{ display: { xs: 'none', sm: 'block' } }}>