E2E finish refactoring

cypress/e2e/01-settings/appearance.cy.js

@@ -1,47 +1,50 @@
 describe('Settings: Appearance', () => {
   beforeEach(() => {
-    let url = Cypress.config().baseUrl;
-    cy.visit(url);
-    cy.get('.pf-c-toolbar__content-section').click();
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__appearance"]').click();
+    cy.intercept('/v1/integrations/dsls').as('getDSLs');
+    cy.intercept('/v1/view-definitions').as('getViewDefinitions');
+    cy.intercept('/v1/integrations*').as('getIntegration');
+
+    cy.openHomePage();
+    cy.openAppearanceModal();
   });
 
   it('Close and reopen appearance modal', () => {
-    // close
-    cy.get('#pf-modal-part-3 > .pf-c-button').click();
+    cy.closeAppearanceModal();
+    cy.openAppearanceModal();
 
-    // reopen
-    cy.get('.pf-c-toolbar__content-section').click();
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__appearance"]').click();
+    // Check that the modal is open
     cy.get('[data-testid="appearance-modal"').should('be.visible');
   });
 
   it('enables dark mode in Kaoto', () => {
-    cy.get('[data-testid="appearance--theme-switch"]').click({ force: true });
+    cy.switchAppearanceTheme()
+
+    // Check that theme is dark
     cy.get('.pf-theme-dark').should('exist');
     cy.get('html').should('have.class', 'pf-theme-dark').and('have.css', 'color-scheme', 'dark');
 
-    cy.get('[data-testid="appearance--theme-switch"]').click({ force: true });
+    cy.switchAppearanceTheme()
+
+    // Check that theme is not dark
     cy.get('.pf-theme-dark').should('not.exist');
     cy.get('html')
       .should('not.have.class', 'pf-theme-dark')
       .and('not.have.css', 'color-scheme', 'dark');
   });
 
   it('enables light mode in code editor', () => {
-    cy.get('[data-testid="appearance--theme-editor-switch"]').click({ force: true });
-    cy.get('#pf-modal-part-3 > .pf-c-button').click();
+    cy.switchAppearanceTheme('editor')
+    cy.closeAppearanceModal();
+    cy.openCodeEditor();
 
-    cy.get('[data-testid="toolbar-show-code-btn"]').click();
+    // Check that theme is not dark
     cy.get('.monaco-scrollable-element').should('not.have.class', 'vs-dark');
 
-    cy.get('.pf-c-toolbar__content-section').click();
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__appearance"]').click();
-    cy.get('[data-testid="appearance--theme-editor-switch"]').click({ force: true });
-    cy.get('#pf-modal-part-3 > .pf-c-button').click();
+    cy.openAppearanceModal();
+    cy.switchAppearanceTheme('editor')
+    cy.closeAppearanceModal();
+
+    // Check that theme is dark
     cy.get('.monaco-scrollable-element').should('have.class', 'vs-dark');
   });
 });

cypress/e2e/01-settings/settings.cy.js

@@ -1,91 +1,62 @@
 describe('Settings', () => {
   beforeEach(() => {
-    let url = Cypress.config().baseUrl;
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
-    cy.intercept('/v1/integrations?dsl=*').as('getIntegration');
-    cy.intercept('/v1/deployments*').as('getDeployments');
+    cy.intercept('/v1/integrations*').as('getIntegration');
 
-    cy.visit(url);
+    cy.openHomePage();
 
-    cy.get('.pf-c-toolbar__content-section').click();
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
+    cy.openSettingsModal();
   });
 
-  // MODAL ACTIONS (e.g. opening, closing)
-  it('loads the settings modal', () => {
-    cy.get('[data-testid="settings-modal"]').should('be.visible');
-    cy.get('[data-ouia-component-id="OUIA-Generated-Modal-small-2-ModalBoxCloseButton"]').click();
+  it('Open/Close/Cancel settings menu', () => {
+    cy.closeMenuModal();
 
-    // to test something isn't visible, we need to be able to select it
-    // so, we must use 'not.exist' instead of 'not.be.visible'
-    // see: https://github.com/cypress-io/cypress/issues/9348
+    // CHECK settings modal is closed with close button
     cy.get('[data-testid="settings-modal"]').should('not.exist');
 
-    // reopen to test other close button
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
-    cy.get('[data-testid="settings-modal--cancel"]').click();
-    cy.get('[data-testid="settings-modal"]').should('not.exist');
-  });
+    cy.openSettingsModal();
 
-  // FIELDS
-  it('updates the fields', () => {
-    // close modal
-    cy.get('[data-testid="settings-modal--cancel"]').click();
-    cy.get('[data-testid="settings-modal"]').should('not.exist');
+    // CHECK settings modal is open
+    cy.get('[data-testid="settings-modal"]').should('be.visible');
 
-    // add a step
-    cy.get('.stepNode').contains('ADD A STEP').click({ force: true });
-    cy.get('#stepSearch').type('timer');
-    cy.get('[data-testid="miniCatalog__stepItem--timer"]').click();
+    cy.cancelMenuModal();
 
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
+    // CHECK settings modal is closed with cancel button
+    cy.get('[data-testid="settings-modal"]').should('not.exist');
+  });
 
-    // reopen modal
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
+  it('Updates the fields', () => {
+    cy.cancelMenuModal();
+    cy.replaceEmptyStepMiniCatalog('timer');
+    cy.openSettingsModal();
 
     // test validation
     cy.get('[data-testid="settings--integration-name"]').click().clear();
     cy.get('#integration-name-helper').should('be.visible');
     cy.get('[data-testid="settings--namespace"]').click().clear();
     cy.get('#namespace-helper').should('be.visible');
-
     cy.get('[data-testid="settings-modal--save"]').should('be.disabled');
 
     // make changes
-    cy.get('[data-testid="settings--integration-name"]')
-      .click()
-      .clear({ timeout: 6000 })
-      .type('cherry', { delay: 500 });
-    cy.get('[data-testid="settings--namespace"]')
-      .click()
-      .clear({ timeout: 6000 })
-      .type('example', { delay: 500 });
+    cy.get('[data-testid="settings--integration-name"]').click().clear().type('cherry');
+    cy.get('[data-testid="settings--namespace"]').click().clear().type('example');
 
     // save changes
-    cy.get('[data-testid="settings-modal--save"]').click();
+    cy.saveMenuModal();
 
-    // verify that steps are still there
+    // CHECK that steps are still there and toolbar contains new name
     cy.get('[data-testid="viz-step-timer"]').should('be.visible');
-
-    // verify that toolbar contains new name
     cy.get('[data-testid="kaoto-toolbar--name"]').should('have.text', 'cherry');
 
     // verify that source code editor contains new values
-    cy.get('[data-testid="toolbar-show-code-btn"]').click();
+    cy.openCodeEditor();
     cy.get('.code-editor').contains('timer');
 
-    // reopen modal, verify that value is changed accordingly
-    cy.wait('@getIntegration');
-    cy.get('.pf-c-alert__action > .pf-c-button').click();
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
+    // reopen modal
+    cy.openSettingsModal();
 
-    // field assertion
+    // CHECK that value is changed accordingly
     cy.get('[data-testid="settings--integration-name"]').should('have.value', 'cherry');
     cy.get('[data-testid="settings--namespace"]').should('have.value', 'example');
   });
@@ -95,86 +66,58 @@ describe('Settings', () => {
     cy.get('[data-testid="settings--integration-type-helper-btn"]').click();
     cy.get('[data-testid="settings--integration-type-helper"]').should('be.visible');
     cy.get('[data-testid="settings--integration-type-helper-btn"]').click();
-    // close modal
     cy.get('[data-testid="settings-modal--cancel"]').click();
     cy.get('[data-testid="settings-modal"]').should('not.exist');
   });
 
   it('Insert description', () => {
     const description = 'Sample description';
     cy.get('[data-testid="settings--description"]').type(description);
-    cy.get('[data-testid="settings-modal--save"]').click();
+    cy.saveMenuModal();
+    cy.openSettingsModal();
 
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
+    // CHECK that value is changed accordingly
     cy.get('[data-testid="settings--description"]').should('have.text', description);
   });
 
-  // DSL ("INTEGRATION TYPE")
-  // for example, if using anything other than 'kamelet' as a step, KameletBinding
-  // should not be available in the DSL dropdown
-  it('only shows relevant DSLs', () => {
+  it('Only shows relevant DSLs', () => {
     cy.get('[data-testid="settings--integration-type"]')
       .select('Integration')
       .should('have.value', 'Integration');
-    cy.get('[data-testid="settings-modal--save"]').click();
-    cy.get('[data-testid="settings-modal"]').should('not.exist');
-
-    // add a non-Kamelet step
-    cy.get('.stepNode').contains('ADD A STEP').click({ force: true });
-    cy.get('#stepSearch').type('timer');
-    cy.get('[data-testid="miniCatalog__stepItem--timer"]').click();
-
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
+    cy.saveMenuModal(true);
+    cy.replaceEmptyStepMiniCatalog('timer');
+    cy.openSettingsModal();
 
-    // reopen modal, make changes, save and close again
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
-
-    // KameletBinding DSL should not be available to select
+    // CHECK that KameletBinding DSL should not be available to select
     cy.get('[data-testid="settings--integration-type__KameletBinding"]').should('not.exist');
   });
 
-  // UPDATE THE DSL ("INTEGRATION TYPE")
   it('updates the DSL', () => {
     // close modal
     cy.get('[data-testid="settings--integration-type"]')
       .select('Integration')
       .should('have.value', 'Integration');
-    cy.get('[data-testid="settings-modal--save"]').click();
-    cy.get('[data-testid="settings-modal"]').should('not.exist');
+    cy.saveMenuModal(true);
 
-    // add a Kamelet step
-    cy.get('.stepNode').contains('ADD A STEP').click({ force: true });
-    cy.get('#stepSearch').type('kamelet');
-    cy.get('[data-testid="miniCatalog__stepItem--kamelet"]').click();
-
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
-
-    cy.get('[data-testid="viz-step-kamelet"]').should('be.visible');
+    cy.replaceEmptyStepMiniCatalog('kamelet');
 
     // reopen modal, make changes, save and close again
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
+    cy.openSettingsModal();
 
     // select Kamelet
     cy.get('[data-testid="settings--integration-type"]')
       .select('Kamelet')
       .should('have.value', 'Kamelet');
 
-    cy.get('[data-testid="settings-modal--save"]').click();
-    cy.get('.pf-c-alert__action > .pf-c-button').click();
+    cy.saveMenuModal(true);
 
-    // verify that steps are still there
+    // CHECK that steps are still there
     cy.get('[data-testid="viz-step-kamelet"]').should('be.visible');
 
-    // reopen modal, verify that value is still changed accordingly
-    cy.get('[data-testid="toolbar-kebab-dropdown-btn"]').click();
-    cy.get('[data-testid="kaotoToolbar-kebab__settings"]').click();
+    // reopen modal, 
+    cy.openSettingsModal();
 
-    // assert that DSL is still Kamelet
+    // CHECK that value is still Kamelet
     cy.get('[data-testid="settings--integration-type"]').should('have.value', 'Kamelet');
   });
 });

cypress/e2e/02-editing_properties/editing.cy.js

@@ -1,64 +1,41 @@
 describe('editing properties', () => {
-  before(() => {
-    let url = Cypress.config().baseUrl;
-
+  beforeEach(() => {
     cy.intercept('/v1/integrations/dsls').as('getDSLs');
     cy.intercept('/v1/view-definitions').as('getViewDefinitions');
     cy.intercept('/v1/integrations*').as('getIntegration');
-    cy.intercept('/v1/deployments*').as('getDeployments');
 
-    cy.visit(url);
+    cy.openHomePage();
   });
 
   it('loads the YAML editor', () => {
-    // LOAD FIXTURE
-    // attaches the file as an input, NOT drag-and-drop, as that will
-    // create a dropzone overlay that then prevents you from typing
-    cy.get('[data-testid="toolbar-show-code-btn"]').click();
-    cy.get('.pf-c-code-editor__main').should('be.visible');
-    cy.get('.pf-c-code-editor__main > input').attachFile('TimerKafka.yaml');
-
-    // trigger the visualization to update
-    cy.get('[data-testid="sourceCode--applyButton"]').click();
-
-    // wait until the API returns the updated visualization
-    cy.wait('@getIntegration');
-    cy.wait('@getDSLs');
-    cy.wait('@getViewDefinitions');
-
-    // verify the visualization & code editor both contain the
-    // new step (timer-source)
-    cy.get('[data-testid="viz-step-timer-source"]').click();
-    cy.get('[data-testid="configurationTab"]').click();
-    cy.get('input[name="period"]').type('3000');
-
-    cy.get('.code-editor').should('contain.text', 'period');
-    cy.get('.pf-c-drawer__close > .pf-c-button').click();
-
-    // verify the visualization contains kafka-sink
-    cy.get('[data-testid="viz-step-kafka-sink"]').click();
-    cy.get('[data-testid="configurationTab"]').click();
-    cy.get('[data-testid="json-schema-configurator"]').click();
-
-    // update properties
-    cy.get('input[name="topic"]').clear().type('topicname');
-    cy.get('input[name="bootstrapServers"]').clear().type('bootstrap');
-    cy.get('input[name="securityProtocol"]').clear().type('security');
-    cy.get('input[name="saslMechanism"]').clear().type('sasl');
-    cy.get('input[name="user"]').clear().type('user');
-    cy.get('input[name="password"]').clear().type('password');
-
-    // verify they are reflected in the code editor
-    cy.get('.code-editor')
-      .should('contain.text', 'topicname')
-      .and('contain.text', 'bootstrap')
-      .and('contain.text', 'security')
-      .and('contain.text', 'sasl')
-      .and('contain.text', 'user')
-      .and('contain.text', 'password');
-
-    cy.get('.pf-c-drawer__close > .pf-c-button > svg').click();
-
-    cy.get('.code-editor').contains('period');
+    cy.uploadFixture('TimerKafka.yaml');
+
+    // Configure timer - source step
+    cy.openStepConfigurationTab('timer-source');
+    cy.interactWithConfigInputObject('period', '3000');
+    cy.checkCodeSpanLine('period:', '3000');
+    cy.closeStepConfigurationTab();
+
+    // Configure kafka-sink step
+    cy.openStepConfigurationTab('kafka-sink');
+    cy.interactWithConfigInputObject('topic', 'topicname');
+    cy.interactWithConfigInputObject('bootstrapServers', 'bootstrap');
+    cy.interactWithConfigInputObject('securityProtocol', 'security');
+    cy.interactWithConfigInputObject('saslMechanism', 'sasl');
+    cy.interactWithConfigInputObject('user', 'user');
+    cy.interactWithConfigInputObject('password', 'password');
+
+    // CHECK they are reflected in the code editor
+    cy.checkCodeSpanLine('topic', 'topicname');
+    cy.checkCodeSpanLine('bootstrapServers', 'bootstrap');
+    cy.checkCodeSpanLine('securityProtocol', 'security');
+    cy.checkCodeSpanLine('saslMechanism', 'sasl');
+    cy.checkCodeSpanLine('user', 'user');
+    cy.checkCodeSpanLine('password', 'password');
+
+    cy.closeStepConfigurationTab();
+
+    // CHECK that previous change is still there
+    cy.checkCodeSpanLine('period:', '3000');
   });
 });