graphdb-workbench-tests 2.2.0-QDRPLACPOC3 → 2.2.1-TR1

package/fixtures/locale-en.json

@@ -473,11 +473,11 @@
     "view.connector.management.title": "Connector management",
     "view.connector.management.helpInfo": "The Connector management view is used to create and manage GraphDB connector instances.",
     "view.class.hierarchy.title": "Class hierarchy",
-    "view.class.hierarchy.helpInfo": "This diagram shows the hierarchy of RDF classes by number of instances. The biggest circles are the parent classes and the nested ones are their children. Hover over a given class to see its subclasses or zoom in a nested circle (RDF class) for further exploration.",
+    "view.class.hierarchy.helpInfo": "The Class hierarchy view shows the hierarchy of RDF classes by the number of instances. The biggest circles are the parent classes, and the smaller nested ones are their subclasses. Hover over a given class to see its subclasses or zoom in a nested circle (RDF class) for further exploration.",
     "view.domain.range.graph.title": "Domain-Range graph",
     "view.domain.range.graph.helpInfo": "This diagram shows the classes and properties that lead to a given RDF class, which plays the role of <b>range</b> for all properties on the left of it, and <b>domain</b> for all properties on the right of it. You can navigate to another class by double clicking on it.",
     "view.class.relationships.title": "Class relationships",
-    "view.class.relationships.helpInfo": "This diagram shows the relationships between RDF classes, where a relationship is represented by links between the individual instances of two classes. Each link is an RDF statement where the subject is an instance of one class, the object is an instance of another class, and the link is the predicate. Depending on the number of links between the instances of two classes, the bundle can be thicker or thinner and it gets the colour of the class with more incoming links. The links can be in both directions.",
+    "view.class.relationships.helpInfo": "The Class relationships view shows the relationships between RDF classes, where a relationship is represented by links between the individual instances of two classes. Each link is an RDF statement where the subject is an instance of one class, the object is an instance of another class, and the link is the predicate. Depending on the number of links between the instances of two classes, the bundle can be thicker or thinner, and it receives the colour of the class with more incoming links. The links can be in both directions.",
     "view.visual.graph.helpInfo": "Provides a way to create a visual representation of parts of the data graph. You start from a single resource and the resources connected to it or from a graph query result. Click on resources to show their connections too.",
     "view.create.visual.graph.title": "Create visual graph config",
     "view.create.visual.graph.helpInfo": "A visual graph config defines the SPARQL queries used to retrieve nodes and edges in the visual graph, as well as the starting point of visualisation.",

package/integration/explore/visual.graph.spec.js

@@ -1,3 +1,5 @@
+import VisualGraphSteps from "../../steps/visual-graph-steps";
+
 const FILE_TO_IMPORT = 'wine.rdf';
 const DRY_GRAPH = "http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Dry";
 
@@ -248,7 +250,7 @@ describe('Visual graph screen validation', () => {
         });
 
         it('Test verify mouse/keyboard actions', () => {
-            let mouseActions = 'Mouse actions\n                ' +
+            const mouseActions = 'Mouse actions\n                ' +
                 '\n                    \n                    \n                        \n                            ' +
                 'Single click\n                        \n                        ' +
                 'View node details and properties\n                    \n                    \n                        \n                            ' +
@@ -264,14 +266,14 @@ describe('Visual graph screen validation', () => {
                 'Pin down or unpin the node\n                    \n                    \n                        \n                            ' +
                 'Click and drag outside a node\n                        \n                        ' +
                 'Move the whole graph\n';
-            let touchActions = 'Touch actions\n            \n                \n                \n                    \n                        ' +
+            const touchActions = 'Touch actions\n            \n                \n                \n                    \n                        ' +
                 'Tap\n                    \n                    ' +
                 'View node details and properties\n                \n                \n                    \n                        ' +
                 'Tap and hold\n                    \n                    ' +
                 'Removes a node and its links\n                \n                \n                    \n                        ' +
                 'Tap twice\n                    \n                    ' +
                 'Load node connections\n';
-            let keyboardActions = 'Keyboard actions\n                \n                    \n                        \n                            ' +
+            const keyboardActions = 'Keyboard actions\n                \n                    \n                        \n                            ' +
                 'Left arrow\n                        \n                        ' +
                 'Rotate the graph to the left\n                    \n                    \n                        \n                            ' +
                 'Right arrow\n                        \n                        ' +
@@ -513,7 +515,7 @@ describe('Visual graph screen validation', () => {
         cy.get('.page-2-link').should('be.visible')
             .and('contain', 'Graph expansion');
         cy.get('.page-3-link').should('be.visible')
-            .and('contain', 'Node basics')
+            .and('contain', 'Node basics');
         cy.get('.page-4-link').should('be.visible')
             .and('contain', 'Edge basics');
         cy.get('.page-5-link').should('be.visible')
@@ -523,13 +525,73 @@ describe('Visual graph screen validation', () => {
 
         cy.get('.expand-samples .list-group-item').first().click();
         getSaveConfig().click();
-        cy.url().should('eq', Cypress.config('baseUrl') + '/graphs-visualizations')
+        cy.url().should('eq', Cypress.config('baseUrl') + '/graphs-visualizations');
         getGraphConfigurationsArea().should('be.visible')
             .and('contain', 'configName');
         getGraphConfigurationsArea().should('be.visible')
             .and('contain', 'No graph configs');
     });
 
+    it('CRUD on saved graph', () => {
+        const graphConfigName = 'MyGraphConfig_' + Date.now();
+        const namedGraph = 'myGraph_' + Date.now();
+        const renamedGraph = 'myRenamedGraph_' + Date.now();
+
+        //Creates saved graph
+        cy.visit('graphs-visualizations');
+        getCreateCustomGraphLink().click();
+        cy.url().should('include', '/config/save');
+        getGraphConfigName().type(graphConfigName);
+        cy.get('[data-cy="graph-config-by-graph-query-checkbox"]').check();
+        cy.pasteQuery('CONSTRUCT WHERE {?s ?p ?o} LIMIT 10').then( () => {
+                getSaveConfig().click();
+            }
+        );
+        getSaveConfig().click();
+        cy.url().should('include', 'graphs-visualizations');
+        cy.contains('td', graphConfigName).should('be.visible').parent().within(() => {
+            cy.get('td a')
+                .get('[data-cy="graph-config-starting-point-query-results"]').should('be.visible').click();
+        });
+        VisualGraphSteps
+            .updateGraphConfiguration(namedGraph);
+
+        //Visualize saved graph
+        cy.visit('graphs-visualizations');
+        cy.contains('td', namedGraph).parent().within(() => {
+            cy.get('td a').contains(namedGraph).click();
+        });
+        cy.get('[data-cy="save-or-update-graph"]').should('be.visible');
+
+        //Finds the button "Get URL to Graph" and opens the modal form "Copy URL to clipboard"
+        cy.visit('graphs-visualizations');
+        cy.contains('td', namedGraph).parent().within( () => {
+            cy.get('td a')
+                .get('[data-cy="copy-to-clipboard-saved-graph"]').click();
+        });
+           cy.get( '[id="copyToClipboardForm"]').contains('Copy URL to clipboard');
+
+        //Renames saved graph
+        cy.visit('graphs-visualizations');
+        cy.contains('td', namedGraph).parent().within( () => {
+            cy.get('td a')
+                .get('[data-cy="rename-saved-graph"]').click();
+        });
+        cy.get('[id="saveGraphForm"]')
+            .get('[id="wb-graphviz-savegraph-name"]').clear().type(renamedGraph)
+            .get('[id="wb-graphviz-savegraph-submit"]').click();
+        cy.get('.toast').contains('Saved graph ' + renamedGraph + ' was edited.');
+        cy.hideToastContainer();
+
+        //Deletes saved graph
+        VisualGraphSteps
+            .deleteSavedGraph(renamedGraph);
+
+        //Deletes graph config
+        VisualGraphSteps
+            .deleteGraphConfig(graphConfigName);
+    });
+
     // Visual graph home view access
 
     function getSearchField() {
@@ -545,7 +607,7 @@ describe('Visual graph screen validation', () => {
                 cy.waitUntil(() =>
                     cy.get('.graph-visualization')
                         .find('.nodes-container')
-                        .then(nodesContainer => nodesContainer))
+                        .then((nodesContainer) => nodesContainer))
                     .then(() => {
                         getNodes();
                     });
@@ -585,14 +647,14 @@ describe('Visual graph screen validation', () => {
     }
 
     function showPreferredTypes(enable) {
-        let command = enable ? 'check' : 'uncheck';
+        const command = enable ? 'check' : 'uncheck';
         getShowPreferredTypesOnlyCheckbox()[command]();
     }
 
     function toggleInferredStatements(enable) {
         openVisualGraphSettings();
         getSettingsPanel().should('be.visible');
-        let command = enable ? 'check' : 'uncheck';
+        const command = enable ? 'check' : 'uncheck';
         getIncludeInferredStatementsCheckbox()[command]();
         saveSettings();
     }

package/integration/setup/connectors-lucene.spec.js

@@ -120,7 +120,7 @@ describe('Setup / Connectors - Lucene', () => {
             cy.get('.toast-message')
                 .then(msg => msg && msg.text().indexOf(successMessage) > -1))
             .then(() => {
-                hideToastContainer();
+                cy.hideToastContainer();
             });
     }
 
@@ -131,13 +131,4 @@ describe('Setup / Connectors - Lucene', () => {
     function getConfirmConnectorDeletebutton() {
         return cy.get('.delete-connector-btn');
     }
-
-    /**
-     *  Toast success container for some reason
-     *  is overlapping create connector button
-     */
-    function hideToastContainer() {
-        cy.get('.toast-success')
-            .then(toastContainer => toastContainer && toastContainer.remove());
-    }
 });

package/integration/setup/namespaces.spec.js

@@ -1,7 +1,7 @@
 describe('Namespaces', () => {
 
     let repositoryId;
-    let DEFAULT_NAMESPACES = {};
+    const DEFAULT_NAMESPACES = {};
 
     beforeEach(() => {
         repositoryId = 'namespaces-' + Date.now();
@@ -47,16 +47,16 @@ describe('Namespaces', () => {
 
         // Should render a table with some default namespaces
         getNamespacesTable().should('be.visible');
+        getRefreshedTableNamespaces();
         getNamespaces().should('have.length', getDefaultNamespacesLength());
 
         // Should provide pagination options
         getNamespacesPerPageMenu().within(() => {
-            // Should show all namespaces by default (they are only 6 so they can be visualized all at once)
             cy.get('.dropdown-toggle')
                 .should('contain', 'All')
                 .click();
             cy.get('.page-size-option')
-                .should('have.length', 1)
+                .should('have.length', getPagingCount())
                 .and('contain', 'All');
             // Close the menu to avoid overlapping other elements
             cy.get('.dropdown-toggle').click();
@@ -126,11 +126,13 @@ describe('Namespaces', () => {
             .type('owl')
             .should('have.value', 'owl');
         getNamespaces()
-            .should('have.length', 1)
-            .and('contain', DEFAULT_NAMESPACES['owl']);
+            .should('contain', DEFAULT_NAMESPACES['owl']);
+        cy.visit('namespaces');
+        const updatedCount = getDefaultNamespacesLength();
+        getRefreshedTableNamespaces();
         getNamespacesHeaderPaginationInfo()
             .should('be.visible')
-            .and('contain', 'Showing 1 - 1 of 1 results');
+            .and('contain', `Showing 1 - ${updatedCount} of ${updatedCount} results`);
 
         getNamespacesFilterField()
             .clear()
@@ -161,6 +163,7 @@ describe('Namespaces', () => {
 
         let updatedCount = getDefaultNamespacesLength() + 1;
         // Verify results table is refreshed
+        getRefreshedTableNamespaces();
         getNamespaces().should('have.length', updatedCount);
         getNamespacesHeaderPaginationInfo()
             .should('contain', `Showing 1 - ${updatedCount} of ${updatedCount} results`);
@@ -186,6 +189,7 @@ describe('Namespaces', () => {
         confirmModal();
 
         // Should have not created new record, should update the existing
+        getRefreshedTableNamespaces();
         getNamespaces()
             .should('have.length', getDefaultNamespacesLength() + 1)
             // This assert here ensures the table will contain the modified namespace before actually checking it because the table is
@@ -199,9 +203,12 @@ describe('Namespaces', () => {
 
     it('should allow to delete existing namespaces', () => {
         // Delete single namespace from it's actions
+        getRefreshedTableNamespaces();
         deleteNamespace('xsd');
         confirmModal();
+        cy.hideToastContainer();
 
+        getRefreshedTableNamespaces();
         let updatedCount = getDefaultNamespacesLength() - 1;
         // Verify results table is refreshed
         getNamespaces().should('have.length', updatedCount);
@@ -212,7 +219,9 @@ describe('Namespaces', () => {
         selectNamespace('rdfs');
         getDeleteNamespacesButton().click();
         confirmModal();
+        cy.hideToastContainer();
 
+        getRefreshedTableNamespaces();
         updatedCount = updatedCount - 2;
         // Verify results table is refreshed
         getNamespaces().should('have.length', updatedCount);
@@ -222,6 +231,7 @@ describe('Namespaces', () => {
         getSelectAllNamespacesCheckbox().click();
         getDeleteNamespacesButton().click();
         confirmModal();
+        cy.hideToastContainer();
 
         getNamespacesTable().should('not.be.visible');
         getNoNamespacesAlert().should('be.visible');
@@ -319,23 +329,33 @@ describe('Namespaces', () => {
     }
 
     function getDeleteNamespacesButton() {
-        return getNamespacesTable().find('.delete-namespaces-btn');
+        return getNamespacesTable().get('[data-cy="delete-several-prefixes"]');
     }
 
     function getNamespaces() {
         return getNamespacesTable().find('.namespace');
     }
 
+    function getRefreshedTableNamespaces() {
+        cy.get('[data-cy="namespaces-per-page-menu"]').click()
+            .get('[data-cy="all-label"]').click();
+    }
+
     function getNamespace(prefix) {
-        return getNamespaces()
+        return getNamespacesTable().find('.namespace')
+            .should('be.visible')
             .find('.namespace-prefix')
+            .should('be.visible')
             .contains(prefix)
+            .should('be.visible')
             .parentsUntil('tbody')
             .last();
     }
 
     function getSelectNamespaceCheckbox(prefix) {
-        return getNamespace(prefix).find('.select-namespace');
+        return getNamespace(prefix)
+            .should('be.visible')
+            .find('.select-namespace');
     }
 
     function selectNamespace(prefix) {
@@ -343,7 +363,9 @@ describe('Namespaces', () => {
     }
 
     function getEditNamespaceButton(prefix) {
-        return getNamespace(prefix).find('.edit-namespace-btn');
+        return getNamespace(prefix)
+            .should('be.visible')
+            .find('.edit-namespace-btn');
     }
 
     // TODO: Not used yet
@@ -352,11 +374,14 @@ describe('Namespaces', () => {
     }
 
     function getDeleteNamespaceButton(prefix) {
-        return getNamespace(prefix).find('.delete-namespace-btn');
+        return getNamespace(prefix)
+            .should('be.visible')
+            .get(`[data-cy="delete-pref_${prefix}"]`)
+            .should('be.visible');
     }
 
     function deleteNamespace(prefix) {
-        getDeleteNamespaceButton(prefix).click();
+        getDeleteNamespaceButton(prefix).should('be.visible').click();
     }
 
     // ------ Namespaces pagination ------
@@ -368,4 +393,20 @@ describe('Namespaces', () => {
     function getDefaultNamespacesLength() {
         return Object.keys(DEFAULT_NAMESPACES).length;
     }
+
+    function getPagingCount() {
+        const count = getDefaultNamespacesLength();
+        if (count <= 10) {
+            return 1;
+        }
+        if (count <= 20) {
+            return 2;
+        }
+        if (count <= 50) {
+            return 3;
+        }
+        if (count <= 100) {
+            return 4;
+        } else return 5;
+    }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "graphdb-workbench-tests",
-    "version": "2.2.0-QDRPLACPOC3",
+    "version": "2.2.1-TR1",
     "description": "Cypress tests for GraphDB workbench",
     "scripts": {
         "start": "cypress open",

package/steps/visual-graph-steps.js

@@ -0,0 +1,31 @@
+class VisualGraphSteps {
+
+    static updateGraphConfiguration(namedGraph) {
+        cy.get('[data-cy="save-or-update-graph"]').click()
+            .get( '[id="wb-graphviz-savegraph-name"]').type(namedGraph)
+            .get('[id="wb-graphviz-savegraph-submit"]').should('be.visible').click();
+        cy.get('.toast').contains('Saved graph ' + namedGraph + ' was saved');
+    }
+
+    static deleteSavedGraph(renamedGraph) {
+        cy.contains('td', renamedGraph).parent().within( () => {
+            cy.get('[data-cy="delete-saved-graph"]').should('be.visible').click();
+        });
+        VisualGraphSteps.confirmDelete();
+    }
+
+    static deleteGraphConfig(graphConfigName) {
+        cy.contains('td', graphConfigName).parent().within( () => {
+            cy.get('[data-cy="delete-graph-config"]').should('be.visible').click();
+        });
+        VisualGraphSteps.confirmDelete();
+    }
+
+    static confirmDelete() {
+        cy.get('.modal-footer .confirm-btn').should('be.visible').click();
+        cy.get('.modal').should('not.exist');
+    }
+
+}
+
+export default VisualGraphSteps;

package/support/commands.js

@@ -17,11 +17,11 @@ Cypress.Commands.add('iframe', {prevSubject: 'element'}, ($iframe) => {
         name: 'iframe',
         consoleProps() {
             return {
-                iframe: $iframe,
+                iframe: $iframe
             };
-        },
+        }
     });
-    return new Cypress.Promise(resolve => {
+    return new Cypress.Promise((resolve) => {
         // Directly resolve the body if it is loaded, otherwise wait
         if ($iframe.contents().find('body').children().length > 0) {
             resolve($iframe.contents().find('body'));
@@ -41,10 +41,21 @@ Cypress.Commands.add("form_request", (url, formData) => {
         .route("POST", url)
         .as("formRequest")
         .window()
-        .then(win => {
+        .then((win) => {
             var xhr = new win.XMLHttpRequest();
             xhr.open("POST", url);
             xhr.send(formData);
         })
         .wait("@formRequest");
 });
+
+/**
+ *  Toast success container for some reason
+ *  is overlapping a needed button
+ *  @author Sava Savov sava.savov@ontotext.com
+ */
+
+Cypress.Commands.add("hideToastContainer", (url, formData) => {
+    cy.get('.toast-success')
+        .then((toastContainer) => toastContainer && toastContainer.remove());
+});