Add E2E test case

.github/workflows/ui-e2e.yaml

@@ -33,6 +33,7 @@ jobs:
         uses: cypress-io/github-action@v5
         env:
           ODO_EXPERIMENTAL_MODE: "true"
+          ODO_TRACKING_CONSENT: "no"
         with:
           working-directory: ui
           # Run odo against the UI itself

ui/cypress/e2e/spec.cy.ts

@@ -2,6 +2,15 @@ import {TAB_COMMANDS, TAB_CONTAINERS, TAB_IMAGES, TAB_METADATA, TAB_RESOURCES} f
 
 describe('devfile editor spec', () => {
 
+  let originalDevfile: any
+  before(() => {
+    cy.readFile('devfile.yaml').then(yaml => originalDevfile = yaml)
+  })
+
+  afterEach(() => {
+    cy.writeFile('devfile.yaml', originalDevfile)
+  })
+
   it('displays matadata.name set in YAML', () => {
     cy.visit('http://localhost:4200');
     cy.clearDevfile();
@@ -204,4 +213,21 @@ describe('devfile editor spec', () => {
       .should('contain.text', 'URI')
       .should('contain.text', '/my/manifest.yaml');
   });
+
+  it('reloads the Devfile upon changes in the filesystem', () => {
+    cy.visit('http://localhost:4200');
+    cy.fixture('input/devfile-new-version.yaml').then(yaml => {
+      cy.writeDevfileFile(yaml);
+    });
+
+    cy.selectTab(TAB_METADATA);
+    cy.getByDataCy("metadata-name").should('have.value', 'my-component');
+
+    cy.selectTab(TAB_CONTAINERS);
+    cy.getByDataCy('container-info').first()
+        .should('contain.text', 'my-cont1')
+        .should('contain.text', 'some-image:latest')
+        .should('contain.text', 'some command')
+        .should('contain.text', 'some arg');
+  });
 });

ui/cypress/fixtures/input/devfile-new-version.yaml

@@ -0,0 +1,13 @@
+schemaVersion: 2.2.0
+metadata:
+    name: my-component
+components:
+- container:
+    args:
+    - some
+    - arg
+    command:
+    - some
+    - command
+    image: some-image:latest
+  name: my-cont1

ui/cypress/support/commands.ts

@@ -60,12 +60,24 @@ Cypress.Commands.add('clearDevfile', () => {
     cy.wait(['@clearDevState', '@applyDevState', '@getDevStateChart']);
 });
 
+// writeDevfileFile writes the specified content into the local devfile.yaml file on the filesystem.
+// Since #6902, doing so sends notification from the server to the client, and makes it reload the Devfile.
+Cypress.Commands.add('writeDevfileFile', (content: string) => {
+    cy.intercept('GET', '/api/v1/devfile').as('fetchDevfile');
+    cy.intercept('PUT', '/api/v1/devstate/devfile').as('applyDevState');
+    cy.intercept('GET', '/api/v1/devstate/chart').as('getDevStateChart');
+    cy.writeFile('devfile.yaml',  content)
+    cy.wait(['@fetchDevfile', '@applyDevState', '@getDevStateChart']);
+});
+
 declare namespace Cypress {
     interface Chainable {
         getByDataCy(value: string): Chainable<void>
         selectTab(n: number):  Chainable<void>
 
         setDevfile(devfile: string): Chainable<void>
         clearDevfile(): Chainable<void>
+
+        writeDevfileFile(content: string): Chainable<void>
     }
 }