graphdb-workbench-tests 3.4.0-dynamic-guides-test → 3.5.0-reactodia-poc

package/e2e-legacy/guides/visual-graph/visual-graph-guide.spec.js

@@ -10,157 +10,363 @@ describe('Visual Graph', () => {
 
     beforeEach(() => {
         repositoryId = 'visual-graph-guide-step-' + Date.now();
-        GuidesStubs.stubVisualGraphGuide();
         cy.createRepository({id: repositoryId});
         cy.presetRepository(repositoryId);
         cy.enableAutocomplete(repositoryId);
         cy.importServerFile(repositoryId, FILE_TO_IMPORT);
-
-        GuideSteps.visit();
-        GuideSteps.verifyGuidesListExists();
-        cy.wait('@getGuides');
-        GuideSteps.runFirstGuide()
     });
 
     afterEach(() => {
         cy.deleteRepository(repositoryId);
     });
 
-    it('Should explore the visual graph (User interaction)', () => {
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The following steps show how to use the Visual graph view to explore data in a visual manner.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
-        MainMenuSteps.clickOnExplore();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
-        MainMenuSteps.clickOnSubmenuVisualGraph();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Enter wine in the Easy graph text input.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on the http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine IRI to show the visual graph.');
-        VisualGraphSteps.clickOnAutocompleteElement('wine <http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine>');
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The graph shows connections between the start node, wine, and other nodes. Each arrow represents one or more connections (RDF statements).');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
-        GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, wine.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph links');
-        GuideDialogSteps.assertDialogWithContentIsVisible('An arrow with a label represents one or more links between nodes. In this case, the arrow shows the relation Wine → type → Potable Liquid.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 1/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on Wine to show its properties.');
-        VisualGraphSteps.clickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine');
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 2/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The side panel shows the properties of the clicked node, Wine.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 3/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Types shows all the RDF types for Wine.We can see that Wine has a single type, owl:Class.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 4/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The values for generic properties like rdfs:label are listed in dedicated sections.This shows the label of Wine.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 5/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('This shows the label of Wine.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 6/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('You can close the panel by clicking on the X icon.');
-        VisualGraphSteps.closeSidePanel();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph: expand node');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Double click on Whitehall Lane Primavera to expand the graph.');
-        VisualGraphSteps.dblclickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#WhitehallLanePrimavera');
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
-        GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, Napa Region.');
-        GuideDialogSteps.clickOnNextButton();
-
-        GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
-        GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+    describe('Visual graph explore guide', () => {
+        beforeEach(() => {
+            GuidesStubs.stubVisualGraphGuide();
+            GuideSteps.visit();
+            GuideSteps.verifyGuidesListExists();
+            cy.wait('@getGuides');
+            GuideSteps.runFirstGuide();
+        });
+
+        it('Should explore the visual graph (User interaction)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The following steps show how to use the Visual graph view to explore data in a visual manner.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            MainMenuSteps.clickOnExplore();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            MainMenuSteps.clickOnSubmenuVisualGraph();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter wine in the Easy graph text input.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine IRI to show the visual graph.');
+            VisualGraphSteps.clickOnAutocompleteElement('wine <http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine>');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph shows connections between the start node, wine, and other nodes. Each arrow represents one or more connections (RDF statements).');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph links');
+            GuideDialogSteps.assertDialogWithContentIsVisible('An arrow with a label represents one or more links between nodes. In this case, the arrow shows the relation Wine → type → Potable Liquid.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on Wine to show its properties.');
+            VisualGraphSteps.clickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The side panel shows the properties of the clicked node, Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Types shows all the RDF types for Wine.We can see that Wine has a single type, owl:Class.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The values for generic properties like rdfs:label are listed in dedicated sections.This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('You can close the panel by clicking on the X icon.');
+            VisualGraphSteps.closeSidePanel();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph: expand node');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on Whitehall Lane Primavera to expand the graph.');
+            VisualGraphSteps.dblclickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#WhitehallLanePrimavera');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, Napa Region.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+        });
+
+        it('Should explore the visual graph (Next flow)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The following steps show how to use the Visual graph view to explore data in a visual manner.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter wine in the Easy graph text input.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine IRI to show the visual graph.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph shows connections between the start node, wine, and other nodes. Each arrow represents one or more connections (RDF statements).');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph links');
+            GuideDialogSteps.assertDialogWithContentIsVisible('An arrow with a label represents one or more links between nodes. In this case, the arrow shows the relation Wine → type → Potable Liquid.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 1/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on Wine to show its properties.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 2/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The side panel shows the properties of the clicked node, Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 3/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Types shows all the RDF types for Wine.We can see that Wine has a single type, owl:Class.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 4/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The values for generic properties like rdfs:label are listed in dedicated sections.This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 5/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This shows the label of Wine.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 6/6');
+            GuideDialogSteps.assertDialogWithContentIsVisible('You can close the panel by clicking on the X icon.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph: expand node');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on Whitehall Lane Primavera to expand the graph.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
+            GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, Napa Region.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+            GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+        });
     });
 
-    it('Should explore the visual graph (Next flow)', () => {
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The following steps show how to use the Visual graph view to explore data in a visual manner.');
-        GuideDialogSteps.clickOnNextButton();
+    describe('Visual graph create config guide', () => {
+        beforeEach(() => {
+            cy.deleteGraphConfig('visual');
+            cy.intercept('rest/explore-graph/node?config=**').as('getNodes');
+            GuidesStubs.stubVisualGraphConfigGuide();
+            GuideSteps.visit();
+            GuideSteps.verifyGuidesListExists();
+            cy.wait('@getGuides');
+            GuideSteps.runFirstGuide();
+        });
+
+        it('Should create a visual graph config (User interaction)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the create config button to Create graph config.');
+            VisualGraphSteps.createCustomGraph();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a name for your visual graph configuration.');
+            VisualGraphSteps.typeGraphConfigName('visual');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a description: my description');
+            VisualGraphSteps.typeGraphConfigDescription('my description');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Copy and use the following IRI as the starting point for the visual graph: my hint');
+            VisualGraphSteps.typeGraphConfigHint('my hint');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 7/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Starting point defines how the visual graph begins when it is opened. It determines the first resource or set of results that will appear in the graph and from which the visualization starts.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 9/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Select Start with a fixed node to always start the visual graph from a specific resource.')
+            VisualGraphSteps.selectStartMode('node');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 10/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following text: MerlotGrape');
+            VisualGraphSteps.searchForRdfResource('MerlotGrape');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 11/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#MerlotGrape');
+            VisualGraphSteps.clickOnAutocompleteElement('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#MerlotGrape');
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 12/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Graph expansion tab');
+            VisualGraphSteps.openConfigTab(2);
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 13/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following SPARQL query:');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph expansion query defines what happens when a node is expanded in the visual graph. Expanding a node loads additional resources connected to it and adds them to the graph as new nodes and edges.');
+            GuideDialogSteps.copyQueryToEditor();
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 14/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Include inferred data in results includes inferred statements produced by reasoning in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 15/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Expand results over owl sameAs includes equivalent resources connected with owl:sameAs in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 16/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The Sample queries includes example graph expansion queries. Unfiltered object properties shows all object property connections of a node, while Filtered object properties shows only selected ones.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 17/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Check the Share visual graph with other users box to make the visual graph configuration available to other users in the repository.');
+            VisualGraphSteps.shareVisualGraphWithOtherUsers();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 18/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click to save the visual graph configuration.');
+            VisualGraphSteps.saveConfig();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 19/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click the visual graph you just created to open and explore it.');
+            VisualGraphSteps.selectConfig('visual');
+
+            Cypress._.times(4, () => cy.wait('@getNodes'));
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 20/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter 200 as the maximum number of links to show.');
+            VisualGraphSteps.updateLinksLimitField(200);
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 21/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on WineGrape to expand the graph.');
+            VisualGraphSteps.dblclickOnNode('http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#WineGrape')
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 22/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Scrolling with the mouse wheel or two fingers on the touchpad zooms the visual graph in and out.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+        });
+
+        it('Should create a visual graph config (next flow)', () => {
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 1/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the create config button to Create graph config.');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a name for your visual graph configuration.');
+            VisualGraphSteps.typeGraphConfigName('visual');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter a description: my description');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Copy and use the following IRI as the starting point for the visual graph: my hint');
+            GuideDialogSteps.clickOnNextButton();
+
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 7/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Starting point defines how the visual graph begins when it is opened. It determines the first resource or set of results that will appear in the graph and from which the visualization starts.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 2/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Explore menu.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 9/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Select Start with a fixed node to always start the visual graph from a specific resource.')
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 3/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Visual graph menu.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 10/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following text: MerlotGrape');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 4/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Enter wine in the Easy graph text input.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 11/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#MerlotGrape');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 5/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on the http://www.w3.org/TR/2003/PR-owl-guide-20031209/wine#Wine IRI to show the visual graph.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 12/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click on the Graph expansion tab');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 6/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The graph shows connections between the start node, wine, and other nodes. Each arrow represents one or more connections (RDF statements).');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 13/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter the following SPARQL query:');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The graph expansion query defines what happens when a node is expanded in the visual graph. Expanding a node loads additional resources connected to it and adds them to the graph as new nodes and edges.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
-        GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, wine.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 14/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Include inferred data in results includes inferred statements produced by reasoning in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph links');
-        GuideDialogSteps.assertDialogWithContentIsVisible('An arrow with a label represents one or more links between nodes. In this case, the arrow shows the relation Wine → type → Potable Liquid.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 15/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Expand results over owl sameAs includes equivalent resources connected with owl:sameAs in the query results. Clicking the toggle disables this behavior.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 1/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Click on Wine to show its properties.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 16/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('The Sample queries includes example graph expansion queries. Unfiltered object properties shows all object property connections of a node, while Filtered object properties shows only selected ones.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 2/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The side panel shows the properties of the clicked node, Wine.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 17/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Check the Share visual graph with other users box to make the visual graph configuration available to other users in the repository.');
+            VisualGraphSteps.shareVisualGraphWithOtherUsers();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 3/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Types shows all the RDF types for Wine.We can see that Wine has a single type, owl:Class.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 18/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click to save the visual graph configuration.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 4/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('The values for generic properties like rdfs:label are listed in dedicated sections.This shows the label of Wine.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 19/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Click the visual graph you just created to open and explore it.');
+            VisualGraphSteps.selectConfig('visual');
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 5/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('This shows the label of Wine.');
-        GuideDialogSteps.clickOnNextButton();
+            Cypress._.times(4, () => cy.wait('@getNodes'));
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph properties — 6/6');
-        GuideDialogSteps.assertDialogWithContentIsVisible('You can close the panel by clicking on the X icon.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 20/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Enter 200 as the maximum number of links to show.');
+            VisualGraphSteps.updateLinksLimitField(200);
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph: expand node');
-        GuideDialogSteps.assertDialogWithContentIsVisible('Double click on Whitehall Lane Primavera to expand the graph.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 21/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Double click on WineGrape to expand the graph.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph nodes');
-        GuideDialogSteps.assertDialogWithContentIsVisible('A circle represents an RDF resource. In this case, Napa Region.');
-        GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.assertDialogWithTitleIsVisible('Visual graph explore — 22/22');
+            GuideDialogSteps.assertDialogWithContentIsVisible('Scrolling with the mouse wheel or two fingers on the touchpad zooms the visual graph in and out.');
+            GuideDialogSteps.clickOnNextButton();
 
-        GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
-        GuideDialogSteps.assertDialogWithContentIsVisible('This guide has ended.');
+            GuideDialogSteps.assertDialogWithTitleIsVisible('End of guide');
+        });
     });
 });

package/e2e-legacy/help/guides/guides-autostart.spec.js

@@ -14,6 +14,39 @@ describe('Guides autostart', () => {
             GuideSteps.assertPageNotInteractive();
             GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
         });
+
+        it('should not autostart the guide if it has been completed via autostart before', () => {
+            // Given, I visit the home page with autostart guide parameter in URL
+            GuideSteps.autostartGuide(guideName);
+            // Then, I should see the guide
+            GuideSteps.assertPageNotInteractive();
+            GuideDialogSteps.assertDialogWithTitleIsVisible(`Welcome to`);
+
+            // When, I finish the guide
+            GuideDialogSteps.clickOnNextButton();
+            GuideDialogSteps.clickOnNextButton();
+            // skip create repo
+            GuideDialogSteps.clickOnSkipButton();
+            // skip select repo
+            GuideDialogSteps.clickOnSkipButton();
+            // skip autocomplete
+            GuideDialogSteps.clickOnSkipButton();
+            // skip import
+            GuideDialogSteps.clickOnSkipButton();
+            // skip visual graph
+            GuideDialogSteps.clickOnSkipButton();
+            // skip sparql
+            GuideDialogSteps.clickOnSkipButton();
+            // close the dialog, completing the guide
+            GuideDialogSteps.clickOnCloseButton();
+
+            // Then, I should not see the guide anymore. A disabled flag should be set to true in the storage, when the
+            // guide is completed via autostart, preventing the guide from autostarting again.
+            GuideSteps.autostartGuide(guideName);
+            HomeSteps.getTutorialPanel().should('be.visible');
+            GuideSteps.getGuidesModal().should('not.exist');
+            GuideDialogSteps.getModalDialog().should('not.exist');
+        });
     });
 
     describe('With security enabled', () => {
@@ -26,7 +59,7 @@ describe('Guides autostart', () => {
             cy.switchOffSecurity(true);
         });
 
-        context('admin', () => {
+        describe('admin', () => {
             it('Should autostart guide with admin', () => {
                 // Given, I visit the home page with autostart guide parameter in URL
                 GuideSteps.autostartGuide(guideName);
@@ -38,7 +71,7 @@ describe('Guides autostart', () => {
             });
         });
 
-        context('repo manager', () => {
+        describe('repo manager', () => {
             beforeEach(() => {
                 cy.loginAsAdmin();
                 cy.createUser({
@@ -64,7 +97,7 @@ describe('Guides autostart', () => {
             });
         });
 
-        context('user', () => {
+        describe('user', () => {
             beforeEach(() => {
                 cy.loginAsAdmin();
                 cy.createUser({