Add mobile option for playwright tests (#2412)

* Add mobile vs. desktop playwright projects

* Add mobile and desktop specific tests for data encoder

* Fix tests that use nav items

* Fix e2e tests for mobile

playwright.config.ts

@@ -31,8 +31,22 @@ export default defineConfig({
   },
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: 'chromium desktop',
+      testIgnore: /.*mobile.spec.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1920, height: 1080 },
+        isMobile: false,
+      },
+    },
+    {
+      name: 'chromium mobile',
+      testIgnore: /.*desktop.spec.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 320, height: 480 },
+        isMobile: true,
+      },
     },
   ],
   webServer: {

src/lib/components/bottom-nav-namespaces.svelte

@@ -16,28 +16,30 @@
 </script>
 
 {#if open}
-  <div
-    class="relative flex h-full flex-col items-center gap-4 overflow-auto px-4 py-8"
-  >
+  <div data-testid="namespace-search-list">
     <Input
       id="namespace-search"
       type="search"
       label="Namespace search"
       labelHidden
       autoFocus
       placeholder="Search"
-      class="sticky top-0 w-full"
+      class="sticky top-0 w-full bg-primary p-2"
       bind:value={search}
     />
-    {#each namespaces as { namespace, onClick }}
-      <button
-        class="namespace"
-        class:selected={namespace === $lastUsedNamespace}
-        on:click|preventDefault|stopPropagation={() => onClick(namespace)}
-      >
-        {namespace}
-      </button>
-    {/each}
+    <ul class="flex w-full flex-col gap-4 overflow-auto p-4 pt-2">
+      {#each namespaces as { namespace, onClick }}
+        <li>
+          <button
+            class="namespace"
+            class:selected={namespace === $lastUsedNamespace}
+            on:click|preventDefault|stopPropagation={() => onClick(namespace)}
+          >
+            {namespace}
+          </button>
+        </li>
+      {/each}
+    </ul>
   </div>
 {/if}
 

src/lib/components/bottom-nav-settings.svelte

@@ -24,12 +24,17 @@
 </script>
 
 {#if open}
-  <div class="flex h-full flex-col justify-end gap-6 overflow-auto px-4 py-8">
+  <div class="flex h-full flex-col justify-start gap-6 overflow-auto px-4 py-8">
     <TimezoneSelect position="left" />
     <NavigationButton
       onClick={onCodecServerClick}
       tooltip={translate('data-encoder.codec-server')}
       label={translate('data-encoder.codec-server')}
+      data-testid="data-encoder-status{hasCodecServer
+        ? $dataEncoder.hasError
+          ? '-error'
+          : '-configured'
+        : ''}"
       icon={hasCodecServer
         ? $dataEncoder.hasError
           ? 'transcoder-error'

src/lib/components/bottom-nav.svelte

@@ -91,6 +91,7 @@
 >
   <button
     class="nav-button relative"
+    data-testid="nav-menu-button"
     class:active-shadow={viewLinks}
     type="button"
     on:click={onLinksClick}
@@ -104,6 +105,7 @@
   <div class="namespace-wrapper">
     <Button
       variant="ghost"
+      data-testid="namespace-switcher"
       leadingIcon="namespace-switcher"
       size="xs"
       class="grow text-white"
@@ -120,6 +122,7 @@
   </div>
   <button
     class="nav-button"
+    data-testid="nav-profile-button"
     class:active-shadow={viewSettings}
     type="button"
     on:click={onSettingsClick}

src/lib/components/data-encoder-settings.svelte

@@ -2,6 +2,8 @@
   import { writable } from 'svelte/store';
   import { fly } from 'svelte/transition';
 
+  import { twMerge as merge } from 'tailwind-merge';
+
   import { page } from '$app/stores';
 
   import Accordion from '$lib/holocene/accordion/accordion.svelte';
@@ -27,6 +29,9 @@
   import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
   import { trimTrailingSlash } from '$lib/utilities/trim-trailing-slash';
 
+  let className = '';
+  export { className as class };
+
   let endpoint = $codecEndpoint ?? '';
   let passToken = $passAccessToken ?? false;
   let includeCreds = $includeCredentials ?? false;
@@ -76,7 +81,10 @@
 {#if $viewDataEncoderSettings}
   <aside
     in:fly={{ y: -50, delay: 0, duration: 500 }}
-    class="surface-primary relative flex h-[540px] w-full flex-col gap-6 overflow-auto border-b border-subtle p-4 md:p-12"
+    class={merge(
+      'surface-primary relative flex h-[540px] w-full flex-col gap-6 overflow-auto border-b border-subtle p-4 md:p-12',
+      className,
+    )}
   >
     <div class="flex w-full flex-col gap-4 xl:w-1/2">
       <div class="flex items-center justify-between space-x-2">

src/routes/(app)/+layout.svelte

@@ -187,7 +187,7 @@
     <SideNavigation {linkList} {isCloud} />
   </div>
   <MainContentContainer>
-    <DataEncoderSettings />
+    <DataEncoderSettings class="hidden md:flex" />
     <TopNavigation {namespaceList}>
       <UserMenu {logout} />
     </TopNavigation>

tests/e2e/schedules.spec.ts

@@ -7,9 +7,19 @@ test.beforeEach(async ({ page, baseURL }) => {
 test.describe('Schedules Page', () => {
   test('should render empty list of schedules and navigate to Create Schedule page with form', async ({
     page,
+  }, {
+    project: {
+      use: { isMobile },
+    },
   }) => {
     test.slow();
-    const scheduleButton = page.getByTestId('schedules-button');
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (isMobile) {
+      await page.getByTestId('nav-menu-button').click();
+    }
+    const scheduleButton = page
+      .getByTestId('schedules-button')
+      .locator('visible=true');
     await scheduleButton.click();
     await expect(page).toHaveURL(/schedules/);
     const createScheduleButton = page.getByTestId('create-schedule');

tests/e2e/workflows-summary-table-configuration.spec.ts

@@ -144,7 +144,14 @@ test.describe('Workflows Table Configuration', () => {
 
   test('allows reordering columns in the table via drag and drop', async ({
     page,
+  }, {
+    project: {
+      use: { isMobile },
+    },
   }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(isMobile, 'This test is for Desktop only');
+
     const initialThs = await page
       .locator('.workflows-summary-table-header-cell')
       .all();

tests/e2e/workflows.spec.ts

@@ -7,19 +7,15 @@ test.beforeEach(async ({ page, baseURL }) => {
 test.describe('Workflow Execution Page', () => {
   test('should render decoded Payloads', async ({ page }) => {
     test.slow();
-    await page
-      .getByRole('link', { name: 'e2e-workflow-1' })
-      .click({ force: true });
+    await page.getByRole('link', { name: 'e2e-workflow-1' }).click();
 
     const inputAndResult = page.getByTestId('input-and-result');
     await expect(inputAndResult).toContainText('Plain text input 1');
     await expect(inputAndResult).toContainText('Received Plain text input 1');
   });
 
   test('should render decoded call stack', async ({ page }) => {
-    await page
-      .getByRole('link', { name: 'e2e-workflow-2' })
-      .click({ force: true });
+    await page.getByRole('link', { name: 'e2e-workflow-2' }).click();
 
     await page.getByText('Call Stack').click();
 
@@ -31,9 +27,7 @@ test.describe('Workflow Execution Page', () => {
   });
 
   test('should render decoded query results', async ({ page }) => {
-    await page
-      .getByRole('link', { name: 'e2e-workflow-2' })
-      .click({ force: true });
+    await page.getByRole('link', { name: 'e2e-workflow-2' }).click();
 
     const tab = page.getByTestId('queries-tab');
     await tab.click();