test: add stream route E2E tests with detail page flows

e2e/pom/stream_routes.ts

@@ -15,12 +15,49 @@
  * limitations under the License.
  */
 import { uiGoto } from '@e2e/utils/ui';
-import type { Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
+
+const locator = {
+  getAddBtn: (page: Page) =>
+    page.getByRole('link', { name: 'Add Stream Route' }),
+};
+
+const assert = {
+  isIndexPage: async (page: Page) => {
+    await expect(page).toHaveURL(
+      (url) => url.pathname.endsWith('/stream_routes'),
+      { timeout: 15000 }
+    );
+    const title = page.getByRole('heading', { name: 'Stream Routes' });
+    await expect(title).toBeVisible({ timeout: 15000 });
+  },
+  isAddPage: async (page: Page) => {
+    await expect(
+      page,
+      { timeout: 15000 }
+    ).toHaveURL((url) => url.pathname.endsWith('/stream_routes/add'));
+    const title = page.getByRole('heading', { name: 'Add Stream Route' });
+    await expect(title).toBeVisible({ timeout: 15000 });
+  },
+  isDetailPage: async (page: Page) => {
+    await expect(
+      page,
+      { timeout: 20000 }
+    ).toHaveURL((url) => url.pathname.includes('/stream_routes/detail'));
+    const title = page.getByRole('heading', {
+      name: 'Stream Route Detail',
+    });
+    await expect(title).toBeVisible({ timeout: 20000 });
+  },
+};
 
 const goto = {
   toIndex: (page: Page) => uiGoto(page, '/stream_routes'),
+  toAdd: (page: Page) => uiGoto(page, '/stream_routes/add'),
 };
 
 export const streamRoutesPom = {
+  ...locator,
+  ...assert,
   ...goto,
 };

e2e/tests/stream_routes.crud-all-fields.spec.ts

@@ -0,0 +1,122 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { streamRoutesPom } from '@e2e/pom/stream_routes';
+import { e2eReq } from '@e2e/utils/req';
+import { test } from '@e2e/utils/test';
+import {
+  uiCheckStreamRouteRequiredFields,
+  uiFillStreamRouteRequiredFields,
+} from '@e2e/utils/ui/stream_routes';
+import { expect } from '@playwright/test';
+
+import { deleteAllStreamRoutes } from '@/apis/stream_routes';
+
+test.beforeAll('clean up', async () => {
+  await deleteAllStreamRoutes(e2eReq);
+});
+
+test('CRUD stream route with all fields', async ({ page }) => {
+  // Navigate to stream routes page
+  await streamRoutesPom.toIndex(page);
+  await expect(page.getByRole('heading', { name: 'Stream Routes' })).toBeVisible();
+
+  // Navigate to add page
+  await streamRoutesPom.toAdd(page);
+  await expect(page.getByRole('heading', { name: 'Add Stream Route' })).toBeVisible();
+
+  const streamRouteData = {
+    server_addr: '127.0.0.10',
+    server_port: 9100,
+    remote_addr: '192.168.10.0/24',
+    sni: 'edge.example.com',
+    desc: 'Stream route with optional fields',
+    labels: {
+      env: 'production',
+      version: '2.0',
+      region: 'us-west',
+    },
+  } as const;
+
+  await uiFillStreamRouteRequiredFields(page, streamRouteData);
+
+  // Submit and land on detail page
+  await page.getByRole('button', { name: 'Add', exact: true }).click();
+  await streamRoutesPom.isDetailPage(page);
+
+  // Verify initial values in detail view
+  await uiCheckStreamRouteRequiredFields(page, streamRouteData);
+
+  // Enter edit mode from detail page
+  await page.getByRole('button', { name: 'Edit' }).click();
+  await expect(page.getByRole('heading', { name: 'Edit Stream Route' })).toBeVisible();
+  await uiCheckStreamRouteRequiredFields(page, streamRouteData);
+
+  // Edit fields - update description, add a label, and modify server settings
+  const updatedData = {
+    server_addr: '127.0.0.20',
+    server_port: 9200,
+    remote_addr: '10.10.0.0/16',
+    sni: 'edge-updated.example.com',
+    desc: 'Updated stream route with optional fields',
+    labels: {
+      ...streamRouteData.labels,
+      updated: 'true',
+    },
+  } as const;
+
+  await page
+    .getByLabel('Server Address', { exact: true })
+    .fill(updatedData.server_addr);
+  await page
+    .getByLabel('Server Port', { exact: true })
+    .fill(updatedData.server_port.toString());
+  await page.getByLabel('Remote Address').fill(updatedData.remote_addr);
+  await page.getByLabel('SNI').fill(updatedData.sni);
+  await page.getByLabel('Description').first().fill(updatedData.desc);
+
+  const labelsField = page.getByPlaceholder('Input text like `key:value`,').first();
+  await labelsField.fill('updated:true');
+  await labelsField.press('Enter');
+
+  // Submit edit and return to detail page
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
+  await streamRoutesPom.isDetailPage(page);
+
+  // Verify updated values from detail view
+  await uiCheckStreamRouteRequiredFields(page, updatedData);
+
+  // Navigate back to index and locate the updated row
+  await streamRoutesPom.toIndex(page);
+  const updatedRow = page
+    .getByRole('row')
+    .filter({ hasText: updatedData.server_addr });
+  await expect(updatedRow).toBeVisible();
+
+  // View detail page from the list to double-check values
+  await updatedRow.getByRole('button', { name: 'View' }).click();
+  await streamRoutesPom.isDetailPage(page);
+  await uiCheckStreamRouteRequiredFields(page, updatedData);
+
+  // Delete from detail page
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+
+  await streamRoutesPom.isIndexPage(page);
+  await expect(
+    page.getByRole('row').filter({ hasText: updatedData.server_addr })
+  ).toHaveCount(0);
+});

e2e/tests/stream_routes.crud-required-fields.spec.ts

@@ -0,0 +1,103 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { streamRoutesPom } from '@e2e/pom/stream_routes';
+import { e2eReq } from '@e2e/utils/req';
+import { test } from '@e2e/utils/test';
+import {
+  uiCheckStreamRouteRequiredFields,
+  uiFillStreamRouteRequiredFields,
+} from '@e2e/utils/ui/stream_routes';
+import { expect } from '@playwright/test';
+
+import { deleteAllStreamRoutes } from '@/apis/stream_routes';
+
+test.beforeAll('clean up', async () => {
+  await deleteAllStreamRoutes(e2eReq);
+});
+
+test('CRUD stream route with required fields', async ({ page }) => {
+  // Navigate to stream routes page
+  await streamRoutesPom.toIndex(page);
+  await expect(page.getByRole('heading', { name: 'Stream Routes' })).toBeVisible();
+
+  // Navigate to add page
+  await streamRoutesPom.toAdd(page);
+  await expect(page.getByRole('heading', { name: 'Add Stream Route' })).toBeVisible();
+
+  const streamRouteData = {
+    server_addr: '127.0.0.1',
+    server_port: 9000,
+  };
+
+  // Fill required fields
+  await uiFillStreamRouteRequiredFields(page, streamRouteData);
+
+  // Submit and land on detail page
+  await page.getByRole('button', { name: 'Add', exact: true }).click();
+  await streamRoutesPom.isDetailPage(page);
+
+  // Verify created values in detail view
+  await uiCheckStreamRouteRequiredFields(page, streamRouteData);
+
+  // Enter edit mode from detail page
+  await page.getByRole('button', { name: 'Edit' }).click();
+  await expect(page.getByRole('heading', { name: 'Edit Stream Route' })).toBeVisible();
+
+  // Verify pre-filled values
+  await uiCheckStreamRouteRequiredFields(page, streamRouteData);
+
+  // Edit fields - add description and labels
+  const updatedData = {
+    ...streamRouteData,
+    desc: 'Updated stream route description',
+    labels: {
+      env: 'test',
+      version: '1.0',
+    },
+  };
+
+  await uiFillStreamRouteRequiredFields(page, {
+    desc: updatedData.desc,
+    labels: updatedData.labels,
+  });
+
+  // Submit edit and return to detail page
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
+  await streamRoutesPom.isDetailPage(page);
+
+  // Verify updated values on detail page
+  await uiCheckStreamRouteRequiredFields(page, updatedData);
+
+  // Navigate back to index and ensure the row exists
+  await streamRoutesPom.toIndex(page);
+  const row = page.getByRole('row').filter({ hasText: streamRouteData.server_addr });
+  await expect(row).toBeVisible();
+
+  // View detail page from the list
+  await row.getByRole('button', { name: 'View' }).click();
+  await streamRoutesPom.isDetailPage(page);
+  await uiCheckStreamRouteRequiredFields(page, updatedData);
+
+  // Delete from the detail page
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+
+  await streamRoutesPom.isIndexPage(page);
+  await expect(
+    page.getByRole('row').filter({ hasText: streamRouteData.server_addr })
+  ).toHaveCount(0);
+});

e2e/tests/stream_routes.list.spec.ts

@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { streamRoutesPom } from '@e2e/pom/stream_routes';
+import { setupPaginationTests } from '@e2e/utils/pagination-test-helper';
+import { e2eReq } from '@e2e/utils/req';
+import { test } from '@e2e/utils/test';
+import { expect, type Page } from '@playwright/test';
+
+import { deleteAllStreamRoutes } from '@/apis/stream_routes';
+import { API_STREAM_ROUTES } from '@/config/constant';
+import type { APISIXType } from '@/types/schema/apisix';
+
+test('should navigate to stream routes page', async ({ page }) => {
+  await test.step('navigate to stream routes page', async () => {
+    await streamRoutesPom.toIndex(page);
+    await streamRoutesPom.isIndexPage(page);
+  });
+
+  await test.step('verify stream routes page components', async () => {
+    // list table exists
+    const table = page.getByRole('table');
+    await expect(table).toBeVisible();
+    await expect(table.getByText('ID', { exact: true })).toBeVisible();
+    await expect(
+      table.getByText('Server Address', { exact: true })
+    ).toBeVisible();
+    await expect(
+      table.getByText('Server Port', { exact: true })
+    ).toBeVisible();
+    await expect(table.getByText('Actions', { exact: true })).toBeVisible();
+  });
+});
+
+const streamRoutes: APISIXType['StreamRoute'][] = Array.from(
+  { length: 11 },
+  (_, i) => ({
+    id: `stream_route_id_${i + 1}`,
+    server_addr: `127.0.0.${i + 1}`,
+    server_port: 9000 + i,
+    create_time: Date.now(),
+    update_time: Date.now(),
+  })
+);
+
+test.describe('page and page_size should work correctly', () => {
+  test.describe.configure({ mode: 'serial' });
+  test.beforeAll(async () => {
+    await deleteAllStreamRoutes(e2eReq);
+    await Promise.all(
+      streamRoutes.map((d) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { id, create_time: _createTime, update_time: _updateTime, ...rest } = d;
+        return e2eReq.put(`${API_STREAM_ROUTES}/${id}`, rest);
+      })
+    );
+  });
+
+  test.afterAll(async () => {
+    await Promise.all(
+      streamRoutes.map((d) => e2eReq.delete(`${API_STREAM_ROUTES}/${d.id}`))
+    );
+  });
+
+  // Setup pagination tests with stream route-specific configurations
+  const filterItemsNotInPage = async (page: Page) => {
+    // filter the item which not in the current page
+    // it should be random, so we need get all items in the table
+    const itemsInPage = await page
+      .getByRole('cell', { name: /stream_route_id_/ })
+      .all();
+    const ids = await Promise.all(itemsInPage.map((v) => v.textContent()));
+    return streamRoutes.filter((d) => !ids.includes(d.id));
+  };
+
+  setupPaginationTests(test, {
+    pom: streamRoutesPom,
+    items: streamRoutes,
+    filterItemsNotInPage,
+    getCell: (page, item) =>
+      page.getByRole('cell', { name: item.id }).first(),
+  });
+});
+