diff --git a/frontend/src/__tests__/cypress/cypress/pages/components/K8sNameDescriptionField.ts b/frontend/src/__tests__/cypress/cypress/pages/components/K8sNameDescriptionField.ts new file mode 100644 index 0000000000..e9a63a51e7 --- /dev/null +++ b/frontend/src/__tests__/cypress/cypress/pages/components/K8sNameDescriptionField.ts @@ -0,0 +1,23 @@ +export class K8sNameDescriptionField { + constructor(private compTestId: string) {} + + private findByScopedTestId(suffix: string): Cypress.Chainable> { + return cy.findByTestId(`${this.compTestId}-${suffix}`); + } + + findDisplayNameInput(): Cypress.Chainable> { + return this.findByScopedTestId('name'); + } + + findDescriptionInput(): Cypress.Chainable> { + return this.findByScopedTestId('description'); + } + + findResourceEditLink(): Cypress.Chainable> { + return this.findByScopedTestId('editResourceLink'); + } + + findResourceNameInput(): Cypress.Chainable> { + return this.findByScopedTestId('resourceName'); + } +} diff --git a/frontend/src/__tests__/cypress/cypress/pages/projects.ts b/frontend/src/__tests__/cypress/cypress/pages/projects.ts index 4e3ecfe04d..1b29f3fdbe 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/projects.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/projects.ts @@ -1,6 +1,7 @@ import { Modal } from '~/__tests__/cypress/cypress/pages/components/Modal'; import { appChrome } from '~/__tests__/cypress/cypress/pages/appChrome'; import { DeleteModal } from '~/__tests__/cypress/cypress/pages/components/DeleteModal'; +import { K8sNameDescriptionField } from '~/__tests__/cypress/cypress/pages/components/K8sNameDescriptionField'; import { TableRow } from './components/table'; import { TableToolbar } from './components/TableToolbar'; @@ -112,16 +113,8 @@ class CreateEditProjectModal extends Modal { super(`${edit ? 'Edit' : 'Create'} data science project`); } - findNameInput() { - return this.find().findByTestId('manage-project-modal-name'); - } - - findResourceNameInput() { - return this.find().findByTestId('resource-manage-project-modal-name'); - } - - findDescriptionInput() { - return this.find().findByTestId('manage-project-modal-description'); + getK8sNameDescriptionFields() { + return new K8sNameDescriptionField('manage-project-modal'); } findSubmitButton() { diff --git a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts index d1d3f13170..653cd87071 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts @@ -1,3 +1,4 @@ +import { K8sNameDescriptionField } from '~/__tests__/cypress/cypress/pages/components/K8sNameDescriptionField'; import { Contextual } from './components/Contextual'; import { Modal } from './components/Modal'; import { TableRow } from './components/table'; @@ -219,12 +220,8 @@ class CreateSpawnerPage { return cy.findByTestId('submit-button'); } - findNameInput() { - return cy.findByTestId('workbench-name'); - } - - findDescriptionInput() { - return cy.findByTestId('workbench-description'); + getK8sNameDescriptionFields() { + return new K8sNameDescriptionField('workbench'); } getEnvironmentVariableTypeField(index: number) { diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/project-list.scy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/project-list.scy.ts index 2a040dfa00..c5eb273712 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/project-list.scy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/project-list.scy.ts @@ -39,13 +39,15 @@ describe('Data Science Projects', { testIsolation: false }, () => { }); it('should create project', () => { - createProjectModal.findNameInput().type('My Test Project'); - createProjectModal.findDescriptionInput().type('Test project description.'); + const fields = createProjectModal.getK8sNameDescriptionFields(); + fields.findDisplayNameInput().type('My Test Project'); + fields.findDescriptionInput().type('Test project description.'); createProjectModal.findSubmitButton().should('be.enabled'); - createProjectModal.findResourceNameInput().should('have.value', 'my-test-project').clear(); - createProjectModal.findResourceNameInput().should('have.attr', 'aria-invalid', 'true'); + fields.findResourceEditLink().click(); + fields.findResourceNameInput().should('have.value', 'my-test-project').clear(); + fields.findResourceNameInput().should('have.attr', 'aria-invalid', 'true'); createProjectModal.findSubmitButton().should('be.disabled'); - createProjectModal.findResourceNameInput().type('test-project'); + fields.findResourceNameInput().type('test-project'); cy.interceptSnapshot('/api/k8s/apis/project.openshift.io/v1/projects', 'projects-1'); cy.interceptSnapshot('/api/namespaces/test-project/0', 'update-project'); diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts index 7cee1dd9cf..a06ebc5e8f 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts @@ -46,13 +46,15 @@ describe('Data science projects details', () => { createProjectModal.shouldBeOpen(); createProjectModal.findSubmitButton().should('be.disabled'); - createProjectModal.findNameInput().type('My Test Project'); - createProjectModal.findDescriptionInput().type('Test project description.'); + const fields = createProjectModal.getK8sNameDescriptionFields(); + fields.findDisplayNameInput().type('My Test Project'); + fields.findDescriptionInput().type('Test project description.'); createProjectModal.findSubmitButton().should('be.enabled'); - createProjectModal.findResourceNameInput().should('have.value', 'my-test-project').clear(); - createProjectModal.findResourceNameInput().should('have.attr', 'aria-invalid', 'true'); + fields.findResourceEditLink().click(); + fields.findResourceNameInput().should('have.value', 'my-test-project').clear(); + fields.findResourceNameInput().should('have.attr', 'aria-invalid', 'true'); createProjectModal.findSubmitButton().should('be.disabled'); - createProjectModal.findResourceNameInput().type('test-project'); + fields.findResourceNameInput().type('test-project'); createProjectModal.findSubmitButton().click(); diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts index 6c65571f19..9e43c200f5 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts @@ -210,8 +210,9 @@ describe('Workbench page', () => { workbenchPage.findCreateButton().click(); createSpawnerPage.findSubmitButton().should('be.disabled'); verifyRelativeURL('/projects/test-project/spawner'); - createSpawnerPage.findNameInput().fill('test-project'); - createSpawnerPage.findDescriptionInput().fill('test-description'); + const nameDesc = createSpawnerPage.getK8sNameDescriptionFields(); + nameDesc.findDisplayNameInput().fill('test-project'); + nameDesc.findDescriptionInput().fill('test-description'); //to check scrollable dropdown selection createSpawnerPage.findNotebookImage('test-9').click(); createSpawnerPage.selectContainerSize( @@ -353,8 +354,9 @@ describe('Workbench page', () => { workbenchPage.findCreateButton().click(); createSpawnerPage.findSubmitButton().should('be.disabled'); verifyRelativeURL('/projects/test-project/spawner'); - createSpawnerPage.findNameInput().fill('1234'); - createSpawnerPage.findDescriptionInput().fill('test-description'); + const nameDesc = createSpawnerPage.getK8sNameDescriptionFields(); + nameDesc.findDisplayNameInput().fill('1234'); + nameDesc.findDescriptionInput().fill('test-description'); //to check scrollable dropdown selection createSpawnerPage.findNotebookImage('test-9').click(); createSpawnerPage.selectContainerSize( @@ -547,12 +549,13 @@ describe('Workbench page', () => { mockK8sResourceList([mockPVCK8sResource({ name: 'test-notebook' })]), ); editSpawnerPage.visit('test-notebook'); - editSpawnerPage.findNameInput().should('have.value', 'Test Notebook'); + const nameDesc = editSpawnerPage.getK8sNameDescriptionFields(); + nameDesc.findDisplayNameInput().should('have.value', 'Test Notebook'); editSpawnerPage.shouldHaveNotebookImageSelectInput('Test Image'); editSpawnerPage.shouldHaveContainerSizeInput('Small'); editSpawnerPage.shouldHavePersistentStorage('Test Storage'); editSpawnerPage.findSubmitButton().should('be.enabled'); - editSpawnerPage.findNameInput().fill('Updated Notebook'); + nameDesc.findDisplayNameInput().fill('Updated Notebook'); cy.interceptK8s('PUT', NotebookModel, mockNotebookK8sResource({})).as('editWorkbench'); editSpawnerPage.findSubmitButton().click(); diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx b/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx index a8bf7d5773..c01e2e3fab 100644 --- a/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx +++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx @@ -17,7 +17,7 @@ type ResourceNameFieldProps = { onDataChange: K8sNameDescriptionFieldUpdateFunction; }; -/** Sub-resource; not for public cunsumption */ +/** Sub-resource; not for public consumption */ const ResourceNameField: React.FC = ({ allowEdit, dataTestId, @@ -44,10 +44,11 @@ const ResourceNameField: React.FC = ({ return ( - + onDataChange('k8sName', value)} />