HMS-9590: refactor create template feature

.github/workflows/playwright-actions.yml

@@ -196,7 +196,7 @@ jobs:
       - name: Run testing proxy
         run: docker run -d --network=host -e HTTPS_PROXY=$RH_PROXY_URL -e ROUTES_JSON_PATH=/config/routes-ci.json -v "$(pwd)/config:/config:ro,Z"  --name frontend-development-proxy quay.io/redhat-user-workloads/hcc-platex-services-tenant/frontend-development-proxy:latest
 
-      - name: Setup the minimal needed repositories (Small RHEL, EPEL 10)
+      - name: Setup the initial needed repositories (Hardcoded RHEL, EPEL 10, SMALL)
         working-directory: content-sources-backend
         run: make repos-minimal
 

README.md

@@ -83,6 +83,12 @@ One can also: `yarn test` to run the unit tests directly.
 
 ## Testing with Playwright
 
+There are 2 kinds of Playwright tests - UI tests and Itegration tests.
+
+### First time running Playwright
+
+Before running any of the Playwright tests for the first time:
+
 1. Ensure the correct node version is installed and in use: `nvm use`
 
 2. Copy the [example env file](playwright_example.env) and create a file named:`.env`
@@ -97,24 +103,47 @@ One can also: `yarn test` to run the unit tests directly.
 
    `yarn playwright install  --with-deps`
 
-4. Run the backend locally, steps to do this can be found in the [backend repository](https://github.com/content-services/content-sources-backend).
+### Running UI Playwright tests:
+
+1. Run the backend locally, steps to do this can be found in the [backend repository](https://github.com/content-services/content-sources-backend).
 
    Ensure that the backend is running prior to the following steps.
 
-5. `yarn local` will start up the front-end repository. If you do `yarn start` and choose stage, your tests will attempt to run against the stage ENV, please do not test in stage.
+2. make sure values in your `.env` file are:
+   1. `PROXY = ""`
+   2. `INTEGRATION=""`
 
-6. `yarn playwright test` will run the playwright test suite. `yarn playwright test --headed` will run the suite in a vnc-like browser so you can watch it's interactions.
+3. run `make repo-minimal` in the backend repository to import and snapshot the initial required RedHat repositories. Wait until all the repositories become `Valid`.
 
-For tips and recommendations on how to write Playwright tests. Check out the Playwright [style guide](/_playwright-tests/style_guide.md) in this repo.
+4. `yarn local` will start up the front-end repository. If you do `yarn start` and choose stage, your tests will attempt to run against the stage ENV, please do not test in stage.
 
-It is recommended to test using vs-code and the [Playwright Test module for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). But other editors do have similar plugins to for ease of use, if so desired.
+5. `yarn playwright test` will run the playwright test suite. `yarn playwright test --headed` will run the suite in a vnc-like browser so you can watch it's interactions.
+
+### Running Integration Playwright tests with your frontend changes:
 
-For running the integration tests you will need to point playwright to stage directly (i.e.: set proxy and change URL, check `playwright_example.env`), set the `INTEGRATION` flag to true and run the tests.
+1. Point Playwright to stage directly in your `.env` file (check `playwright_example.env`):
+   1. set proxy: `http://squid.corp.redhat.com:3128`
+   2. change URL to: `https://stage.foo.redhat.com` to run against stage backend
+2. set the `INTEGRATION` flag to `true` in your `.env`
+
+3. For Podman, uncomment the DOCKER_SOCKET option in the `.env` file, so testing containers can reach out: `DOCKER_SOCKET="/tmp/podman.sock"`
+
+4. For Podman to serve the API for client testing, enter the following into a terminal and let it run: `podman system service -t 0 unix:///tmp/podman.sock`
+
+5. `yarn start:stage` to run your local frontend against stage
+
+6. Run the tests
 
 For running RBAC tests locally you just need to set the RBAC environment variable to `true`. See the `playwright_example.env` file for the `RBAC` flag.
 
+For any other `.env` variables you might need consult our `aws account`.
+
 To add new users, edit the `ALL_USERS` array in `_playwright-tests/auth.setup.ts`. To authenticate only specific users, set `AUTH_USERS=admin,readonly` (comma-separated keys).
 
+For tips and recommendations on how to write Playwright tests. Check out the Playwright [style guide](/_playwright-tests/style_guide.md) in this repo.
+
+It is recommended to test using vs-code and the [Playwright Test module for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). But other editors do have similar plugins to for ease of use, if so desired.
+
 ### Shared Playwright test utilities
 
 This repo contains a `_playwright-tests/test-utils` git submodule which has a set of shared helpers and fixtures (and API client) across our Playwright testing suites.
@@ -137,23 +166,7 @@ _I am using the regular submodule setup. When working on new tests I thought of
 
 </details>
 
-## Running integration tests
-
-## Podman
-
-For podman to serve the API for client testing, enter:
-
-```
-podman system service -t 0 unix:///tmp/podman.sock
-```
-
-Uncomment the DOCKER_SOCKET option in the `.env file:
-
-```
-DOCKER_SOCKET="/tmp/podman.sock"
-```
-
-## PR checks and linking front-end/back-end PRs for testing
+### PR checks and linking front-end/back-end PRs for testing
 
 The CICD pipeline for playwright (both front-end and back-end) will check in the description of the front-end PRs for the following formatted text:
 `#testwith https://github.com/content-services/content-sources-backend/pull/<PR NUMBER>`

_playwright-tests/Integration/AssignTemplateToSystemUI.spec.ts

@@ -74,8 +74,8 @@ test.describe('Assign Template to System via UI', () => {
       await nextButton.click();
 
       await expect(page.getByText('Enter template details')).toBeVisible();
-      await page.getByPlaceholder('Enter name').fill(templateName);
-      await page.getByPlaceholder('Description').fill('Test template for system assignment');
+      await page.getByPlaceholder('Enter title').fill(templateName);
+      await page.getByPlaceholder('Enter detail').fill('Test template for system assignment');
       await nextButton.click();
 
       await page.getByRole('button', { name: 'Create template and add to systems' }).click();

_playwright-tests/Integration/AssociatedTemplateCRUD.spec.ts

@@ -62,8 +62,8 @@ test.describe('Associated Template CRUD', () => {
         page.getByText('Enter template details'),
         'should be on the Enter template details tab',
       ).toBeVisible();
-      await page.getByPlaceholder('Enter name').fill(`${templateName}`);
-      await page.getByPlaceholder('Description').fill('Template test for associated system CRUD');
+      await page.getByPlaceholder('Enter title').fill(`${templateName}`);
+      await page.getByPlaceholder('Enter detail').fill('Template test for associated system CRUD');
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
       await page.getByRole('button', { name: 'Create other options' }).click();

_playwright-tests/Integration/CanUpdateSystemWithTemplate.spec.ts

@@ -66,8 +66,8 @@ test.describe('Test System With Template', () => {
       await page.getByPlaceholder('YYYY-MM-DD', { exact: true }).fill('2021-05-17'); // Older than any snapshot date
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       await expect(page.getByText('Enter template details')).toBeVisible();
-      await page.getByPlaceholder('Enter name').fill(`${templateName}`);
-      await page.getByPlaceholder('Description').fill('Template test');
+      await page.getByPlaceholder('Enter title').fill(`${templateName}`);
+      await page.getByPlaceholder('Enter detail').fill('Template test');
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       await page.getByRole('button', { name: 'Create other options' }).click();
       await page.getByText('Create template only', { exact: true }).click();

_playwright-tests/Integration/InstallUploadRepoContent.spec.ts

@@ -105,8 +105,8 @@ test.describe('Install Upload Repo Content', () => {
       await page.getByText('Use the latest content', { exact: true }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       await expect(page.getByText('Enter template details')).toBeVisible();
-      await page.getByPlaceholder('Enter name').fill(`${templateName}`);
-      await page.getByPlaceholder('Description').fill('Template test for upload repository');
+      await page.getByPlaceholder('Enter title').fill(`${templateName}`);
+      await page.getByPlaceholder('Enter detail').fill('Template test for upload repository');
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       await page.getByRole('button', { name: 'Create other options' }).click();
       await page.getByText('Create template only', { exact: true }).click();

_playwright-tests/Integration/RegisterAndAssignSystemViaAPI.spec.ts

@@ -46,8 +46,8 @@ test.describe('Register and assign template to systems via API', () => {
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
       await expect(page.getByText('Enter template details')).toBeVisible();
-      await page.getByPlaceholder('Enter name').fill(templateName);
-      await page.getByPlaceholder('Description').fill('Template for use template dialog test');
+      await page.getByPlaceholder('Enter title').fill(templateName);
+      await page.getByPlaceholder('Enter detail').fill('Template for use template dialog test');
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
       await page.getByRole('button', { name: 'Create other options' }).click();

_playwright-tests/UI/RedHatRepo.spec.ts

@@ -3,7 +3,7 @@ import { navigateToRepositories, navigateToSnapshotsOfRepository } from './helpe
 import { closeGenericPopupsIfExist, waitForValidStatus } from './helpers/helpers';
 
 test.describe('Red Hat Repositories', () => {
-  const smallRHRepo = 'Red Hat CodeReady Linux Builder for RHEL 9 ARM 64 (RPMs)';
+  const appstreamRHRepoName = 'Red Hat Enterprise Linux 10 for ARM 64 - AppStream (RPMs)';
 
   test.beforeEach(async ({ page }) => {
     await test.step('Navigate to repositories page', async () => {
@@ -18,14 +18,14 @@ test.describe('Red Hat Repositories', () => {
 
   test('Verify snapshotting of Red Hat repositories', async ({ page }) => {
     await test.step('Wait for status to be "Valid"', async () => {
-      await waitForValidStatus(page, smallRHRepo, 210_000);
+      await waitForValidStatus(page, appstreamRHRepoName, 210_000);
     });
 
     await test.step('Check repository snapshots', async () => {
-      const row = page.getByRole('row').filter({ hasText: smallRHRepo });
+      const row = page.getByRole('row').filter({ hasText: appstreamRHRepoName });
       await navigateToSnapshotsOfRepository(page, row);
       await expect(
-        page.getByTestId('snapshot_list_modal').filter({ hasText: smallRHRepo }),
+        page.getByTestId('snapshot_list_modal').filter({ hasText: appstreamRHRepoName }),
       ).toBeVisible();
     });
 

_playwright-tests/UI/SnapshotRepo.spec.ts

@@ -107,7 +107,6 @@ test.describe('Snapshot Repositories', () => {
   });
 
   test('Snapshot deletion', async ({ page, client, cleanup }) => {
-    const smallRHRepo = 'Red Hat CodeReady Linux Builder for RHEL 9 ARM 64 (RPMs)';
     const repoNamePrefix = 'snapshot-deletion';
     const repoName = `${repoNamePrefix}-${randomName()}`;
     const templateName = `Test-template-for-snapshot-deletion-${randomName()}`;
@@ -161,33 +160,39 @@ test.describe('Snapshot Repositories', () => {
 
     await test.step('Create a template', async () => {
       await navigateToTemplates(page);
+
+      // step 1 - select repo version combination
       await page.getByRole('button', { name: 'Create template' }).click();
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'aarch64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'el10' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
+
+      // step 2 - select additional repos - the hardcoded ones are already selected
+      // all other repositories are optional to select
       const modalPage = page.getByTestId('add_template_modal');
-      const rowRHELRepo = await getRowByNameOrUrl(modalPage, smallRHRepo);
-      await rowRHELRepo.getByLabel('Select row').click();
-      // wait till next button is enabled
       await page.getByRole('button', { name: 'Next', exact: true }).isEnabled();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
+      // step 3 - select other repos
       await expect(page.getByTestId('custom_repositories_step')).toBeVisible();
       const customRepo = await getRowByNameOrUrl(modalPage, repoName);
       await customRepo.getByLabel('Select row').click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
+      // step 4 - select snapshots
       await expect(page.getByTestId('set_up_date')).toBeVisible();
       await page.getByTestId('use-latest-snapshot-radio').click();
       await page.getByRole('radio', { name: 'Use the latest content' }).check();
       await page.getByRole('button', { name: 'Next' }).click();
 
-      await page.getByPlaceholder('Enter name').fill(`${templateName}`);
-      await page.getByPlaceholder('Description').fill('Template test');
+      // step 5 - fill in template description
+      await page.getByPlaceholder('Enter title').fill(`${templateName}`);
+      await page.getByPlaceholder('Enter detail').fill('Template test');
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
+      // step 6 - create template
       await page.getByRole('button', { name: 'Create other options' }).click();
       await page.getByText('Create template only', { exact: true }).click();