Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing...
[arvados-workbench2.git] / cypress / integration / collection.spec.js
index 03ec1b58e25934ab5e754f8d046795e15eea0711..51933887452479e483f42bda461755efb78a4eb5 100644 (file)
@@ -75,7 +75,7 @@ describe('Collection panel tests', function () {
         });
     });
 
-    it('uses the property editor with vocabulary terms', function () {
+    it('uses the property editor (from edit dialog) with vocabulary terms', function () {
         cy.createCollection(adminUser.token, {
             name: `Test collection ${Math.floor(Math.random() * 999999)}`,
             owner_uuid: activeUser.user.uuid,
@@ -87,14 +87,11 @@ describe('Collection panel tests', function () {
 
                 cy.get('[data-cy=collection-info-panel')
                     .should('contain', this.testCollection.name)
-                    .and('not.contain', 'Color: Magenta')
-                    .and('not.contain', 'Size: S');
-                cy.get('[data-cy=additional-info-icon]').click();
+                    .and('not.contain', 'Color: Magenta');
 
-                cy.get('[data-cy=details-panel]').within(() => {
-                    cy.get('[data-cy=property-editor-btn]').click();
-                });
-                cy.get('[data-cy=resource-properties-dialog').contains('Edit properties');
+                cy.get('[data-cy=collection-panel-options-btn]').click();
+                cy.get('[data-cy=context-menu]').contains('Edit collection').click();
+                cy.get('[data-cy=form-dialog]').should('contain', 'Properties');
 
                 // Key: Color (IDTAGCOLORS) - Value: Magenta (IDVALCOLORS3)
                 cy.get('[data-cy=resource-properties-form]').within(() => {
@@ -107,14 +104,56 @@ describe('Collection panel tests', function () {
                     cy.root().submit();
                 });
                 // Confirm proper vocabulary labels are displayed on the UI.
-                cy.get('[data-cy=resource-properties-dialog]')
-                    .should('contain', 'Color: Magenta');
+                cy.get('[data-cy=form-dialog]').should('contain', 'Color: Magenta');
+                cy.get('[data-cy=form-dialog]').contains('Save').click();
+                cy.get('[data-cy=form-dialog]').should('not.exist');
                 // Confirm proper vocabulary IDs were saved on the backend.
                 cy.doRequest('GET', `/arvados/v1/collections/${this.testCollection.uuid}`)
                     .its('body').as('collection')
                     .then(function () {
                         expect(this.collection.properties.IDTAGCOLORS).to.equal('IDVALCOLORS3');
                     });
+                // Confirm the property is displayed on the UI.
+                cy.get('[data-cy=collection-info-panel')
+                    .should('contain', this.testCollection.name)
+                    .and('contain', 'Color: Magenta');
+            });
+    });
+
+    it('uses the editor (from details panel) with vocabulary terms', function () {
+        cy.createCollection(adminUser.token, {
+            name: `Test collection ${Math.floor(Math.random() * 999999)}`,
+            owner_uuid: activeUser.user.uuid,
+            manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
+        })
+            .as('testCollection').then(function () {
+                cy.loginAs(activeUser);
+                cy.goToPath(`/collections/${this.testCollection.uuid}`);
+
+                cy.get('[data-cy=collection-info-panel')
+                    .should('contain', this.testCollection.name)
+                    .and('not.contain', 'Color: Magenta')
+                    .and('not.contain', 'Size: S');
+                cy.get('[data-cy=additional-info-icon]').click();
+
+                cy.get('[data-cy=details-panel]').within(() => {
+                    cy.get('[data-cy=details-panel-edit-btn]').click();
+                });
+                cy.get('[data-cy=form-dialog').contains('Edit Collection');
+
+                // Key: Color (IDTAGCOLORS) - Value: Magenta (IDVALCOLORS3)
+                cy.get('[data-cy=resource-properties-form]').within(() => {
+                    cy.get('[data-cy=property-field-key]').within(() => {
+                        cy.get('input').type('Color');
+                    });
+                    cy.get('[data-cy=property-field-value]').within(() => {
+                        cy.get('input').type('Magenta');
+                    });
+                    cy.root().submit();
+                });
+                // Confirm proper vocabulary labels are displayed on the UI.
+                cy.get('[data-cy=form-dialog]')
+                    .should('contain', 'Color: Magenta');
 
                 // Case-insensitive on-blur auto-selection test
                 // Key: Size (IDTAGSIZES) - Value: Small (IDVALSIZES2)
@@ -131,19 +170,21 @@ describe('Collection panel tests', function () {
                     cy.root().submit();
                 });
                 // Confirm proper vocabulary labels are displayed on the UI.
-                cy.get('[data-cy=resource-properties-dialog]')
+                cy.get('[data-cy=form-dialog]')
                     .should('contain', 'Size: S');
+
+                cy.get('[data-cy=form-dialog]').contains('Save').click();
+                cy.get('[data-cy=form-dialog]').should('not.exist');
+
                 // Confirm proper vocabulary IDs were saved on the backend.
                 cy.doRequest('GET', `/arvados/v1/collections/${this.testCollection.uuid}`)
                     .its('body').as('collection')
                     .then(function () {
+                        expect(this.collection.properties.IDTAGCOLORS).to.equal('IDVALCOLORS3');
                         expect(this.collection.properties.IDTAGSIZES).to.equal('IDVALSIZES2');
                     });
 
-                // Close property editor & confirm properties display on the UI.
-                cy.get('[data-cy=resource-properties-dialog]').within(() => {
-                    cy.get('[data-cy=close-dialog-btn]').click();
-                });
+                // Confirm properties display on the UI.
                 cy.get('[data-cy=collection-info-panel')
                     .should('contain', this.testCollection.name)
                     .and('contain', 'Color: Magenta')
@@ -750,7 +791,7 @@ describe('Collection panel tests', function () {
             });
     });
 
-    it('creates new collection on home project', function () {
+    it('creates new collection with properties on home project', function () {
         cy.loginAs(activeUser);
         cy.goToPath(`/projects/${activeUser.user.uuid}`);
         cy.get('[data-cy=breadcrumb-first]').should('contain', 'Projects');
@@ -760,6 +801,8 @@ describe('Collection panel tests', function () {
         cy.get('[data-cy=side-panel-new-collection]').click();
         // Name between brackets tests bugfix #17582
         const collName = `[Test collection (${Math.floor(999999 * Math.random())})]`;
+
+        // Select a storage class.
         cy.get('[data-cy=form-dialog]')
             .should('contain', 'New collection')
             .and('contain', 'Storage classes')
@@ -775,15 +818,42 @@ describe('Collection panel tests', function () {
                 });
                 cy.get('[data-cy=checkbox-foo]').click();
             })
+
+        // Add a property.
+        // Key: Color (IDTAGCOLORS) - Value: Magenta (IDVALCOLORS3)
+        cy.get('[data-cy=form-dialog]').should('not.contain', 'Color: Magenta');
+        cy.get('[data-cy=resource-properties-form]').within(() => {
+            cy.get('[data-cy=property-field-key]').within(() => {
+                cy.get('input').type('Color');
+            });
+            cy.get('[data-cy=property-field-value]').within(() => {
+                cy.get('input').type('Magenta');
+            });
+            cy.root().submit();
+        });
+        // Confirm proper vocabulary labels are displayed on the UI.
+        cy.get('[data-cy=form-dialog]').should('contain', 'Color: Magenta');
+
         cy.get('[data-cy=form-submit-btn]').click();
-        // Confirm that the user was taken to the newly created thing
+        // Confirm that the user was taken to the newly created collection
         cy.get('[data-cy=form-dialog]').should('not.exist');
         cy.get('[data-cy=breadcrumb-first]').should('contain', 'Projects');
         cy.get('[data-cy=breadcrumb-last]').should('contain', collName);
         cy.get('[data-cy=collection-info-panel]')
             .should('contain', 'default')
             .and('contain', 'foo')
+            .and('contain', 'Color: Magenta')
             .and('not.contain', 'bar');
+        // Confirm that the collection's properties has the real values.
+        cy.doRequest('GET', '/arvados/v1/collections', null, {
+            filters: `[["name", "=", "${collName}"]]`,
+        })
+        .its('body.items').as('collections')
+        .then(function() {
+            expect(this.collections).to.have.lengthOf(1);
+            expect(this.collections[0].properties).to.have.property(
+                'IDTAGCOLORS', 'IDVALCOLORS3');
+        });
     });
 
     it('shows responsible person for collection if available', () => {