diff --git a/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs b/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs index 4525dfd..7042acc 100644 --- a/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs +++ b/Lombiq.Walkthroughs.Test.UI/Extensions/TestCaseUITestContextExtensions.cs @@ -359,12 +359,8 @@ await AssertStepAndClickNextAsync( await AssertStepAndFillInShepherdTargetAndClickNextAsync("Layout widgets", "Give it a title.", "Sample paragraph widget"); await AssertStepAndClickNextAsync("Layout widgets", "Give it some content."); await AssertStepAndClickShepherdTargetAsync("Layout widgets", "We are ready, let's publish it!"); - // In Orchard Core 1.8 this link doesn't open a new tab anymore so these three lines will need to be switched to - // just AssertStepAndClickShepherdTargetAsync() after an Orchard upgrade. - AssertStep( + await AssertStepAndClickShepherdTargetAsync( "Layout widgets", "Your paragraph widget is now published.", assertShepherdTargetIsNotBody: false); - await context.ClickReliablyOnAsync(_byShepherdTarget); - SwitchToLastWindowAndSetDefaultBrowserSize(); await AssertStepAndClickNextAsync( "Layout widgets", "You should see your paragraph", assertShepherdTargetIsNotBody: false); }); diff --git a/Lombiq.Walkthroughs.Test.UI/Lombiq.Walkthroughs.Tests.UI.csproj b/Lombiq.Walkthroughs.Test.UI/Lombiq.Walkthroughs.Tests.UI.csproj index 07cf181..f98eba7 100644 --- a/Lombiq.Walkthroughs.Test.UI/Lombiq.Walkthroughs.Tests.UI.csproj +++ b/Lombiq.Walkthroughs.Test.UI/Lombiq.Walkthroughs.Tests.UI.csproj @@ -21,7 +21,7 @@ - + diff --git a/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js b/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js index 42049eb..5759aad 100644 --- a/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js +++ b/Lombiq.Walkthroughs/Assets/Scripts/walkthroughs.js @@ -76,6 +76,12 @@ jQuery(($) => { addShepherdQueryParams(); } + function firstWithText(query, text) { + return Array + .from(document.querySelectorAll(query)) + .filter((element) => element.textContent.includes(text))[0]; + } + const backButton = { action: function () { return this.back(); @@ -148,7 +154,7 @@ jQuery(($) => { steps: [ { title: 'Welcome to the
Orchard Core Admin Walkthrough!', - text: `This walkthrough covers key Orchard Core features, such as content management, user roles, + text: `This walkthrough covers key Orchard Core features, such as content management, user roles, and theme selection, and points you to further learning resources.`, buttons: [ { @@ -169,16 +175,16 @@ jQuery(($) => { }, { title: 'Setup recipe', - text: `

The setup recipe in the Walkthroughs module used the + text: `

The setup recipe in the Walkthroughs module used the Blog recipe as a base recipe.

-

In Orchard Core, a +

In Orchard Core, a recipe is a JSON file that defines a set of instructions for setting up and configuring an Orchard Core application. Recipes can include predefined content types, widgets, menus, content items, and other configuration. They are used to streamline the setup of an Orchard Core site, making it easier to create consistent site structures and content.

-

Setup recipes can be executed during the initial setup of a site, and non-setup recipes +

Setup recipes can be executed during the initial setup of a site, and non-setup recipes at any point to apply configuration or import content.

`, buttons: [ backButton, @@ -188,7 +194,7 @@ jQuery(($) => { }, { title: 'Site setup', - text: `To get to this point (a set up site), first you will need to get through the setup + text: `To get to this point (a set up site), first you will need to get through the setup screen. There you can decide which setup recipe you'd like to use. Currently, we are using the Walkthroughs recipe.`, buttons: [ @@ -199,7 +205,7 @@ jQuery(($) => { }, { title: 'Log in', - text: `Let's log in! Please go to the "~/Login", by clicking on the "Next" + text: `Let's log in! Please go to the "~/Login", by clicking on the "Next" button.`, buttons: [ backButton, @@ -317,7 +323,7 @@ jQuery(($) => { }, { title: 'Admin dashboard', - text: `Let's see the admin dashboard now! Please go to the "~/Admin" URL by + text: `Let's see the admin dashboard now! Please go to the "~/Admin" URL by clicking on the "Next" button.`, buttons: [ backButton, @@ -375,7 +381,7 @@ jQuery(($) => { }, { title: 'Top menu', - text: `This is the top menu. Here you can switch between dark and light modes, go to the + text: `This is the top menu. Here you can switch between dark and light modes, go to the homepage, log off, or take a look at your profile.`, attachTo: { element: '.user-top-navbar', on: 'bottom' }, @@ -394,7 +400,7 @@ jQuery(($) => { recipe as a base. There is also a singular blog content item and there is a menu pointing to it.

Click on the "Blog" link and you will see all the blog posts within the blog.

`, - attachTo: { element: '.icon-class-fas.icon-class-fa-rss.item-label.d-flex', on: 'right' }, + attachTo: { element: () => firstWithText('.item-label', 'Blog'), on: 'right' }, buttons: [ backButton, ], @@ -473,7 +479,7 @@ jQuery(($) => { }, { title: 'Permalink', - text: `You can give the blog post an URL by hand, but you can leave it empty to let Orchard + text: `You can give the blog post an URL by hand, but you can leave it empty to let Orchard Core auto-generate it. We recommend you let Orchard do its magic.`, attachTo: { element: '#AutoroutePart_Path', on: 'bottom' }, buttons: [ @@ -1063,7 +1069,7 @@ jQuery(($) => { }, { title: 'Managing the menu', - text: `

As you can see, you can easily access it via the menu. It's a pity our new article + text: `

As you can see, you can easily access it via the menu. It's a pity our new article doesn't have this... Let's add a menu item for it too!

Go back to the admin dashboard by clicking on the "Next" button.

`, attachTo: { element: 'body', on: 'top' }, @@ -1092,7 +1098,7 @@ jQuery(($) => { { title: 'Managing the menu', text: 'Click on the "Main Menu" link.', - attachTo: { element: '.icon-class-fas.icon-class-fa-sitemap.item-label.d-flex', on: 'right' }, // #spell-check-ignore-line + attachTo: { element: () => firstWithText('.item-label', 'Main Menu'), on: 'right' }, // #spell-check-ignore-line buttons: [ { action: function () { @@ -1170,7 +1176,7 @@ jQuery(($) => { }, { title: 'Managing the menu', - text: `

For now, let's go with the Link Menu Item one. This can be used to easily add menu + text: `

For now, let's go with the Link Menu Item one. This can be used to easily add menu items for any URL.

Click on the "Add" button.

`, attachTo: { element: 'a[href*="Create/LinkMenuItem"]', on: 'bottom' }, @@ -1311,7 +1317,7 @@ jQuery(($) => { }, { title: 'Content listing', - text: `Now let's go back to the admin dashboard! We'll check out how you can list all the + text: `Now let's go back to the admin dashboard! We'll check out how you can list all the content of your website. Click on the "Next" button.`, buttons: [ backButton, @@ -1399,9 +1405,9 @@ jQuery(($) => { title: 'Taxonomies', text: `

We'll now see how to use the Taxonomies module for categorization (remember the Tags and Categories fields of blog posts?).

-

With this module you can create Taxonomy content items that can contain Taxonomy Terms. - These will be the specific categories or tags, and they can even be organized as a - hierarchy (like News → Sports). Then, you can use the Taxonomy Field on other content items +

With this module you can create Taxonomy content items that can contain Taxonomy Terms. + These will be the specific categories or tags, and they can even be organized as a + hierarchy (like News → Sports). Then, you can use the Taxonomy Field on other content items (like blog posts) to add these terms to them.

`, buttons: [ { @@ -1427,7 +1433,7 @@ jQuery(($) => { }, { title: 'Taxonomies', - text: `

You can access this list by filtering for the "Taxonomy" content type (see + text: `

You can access this list by filtering for the "Taxonomy" content type (see top-right corner).

There are two taxonomies here: Categories and Tags. These are both used for blog posts.

`, attachTo: { element: '.list-group.with-checkbox', on: 'top' }, @@ -1501,8 +1507,8 @@ jQuery(($) => { }, { title: 'Taxonomies', - text: `You can select an icon for the category. This will be displayed as decoration when - listing categories on the frontend (like here). + text: `You can select an icon for the category. This will be displayed as decoration when + listing categories on the frontend (like here). You need to pick an icon, otherwise you can't publish your category.)`, // Not attaching to #Category_Icon because then the opening UI overlay would be partially // obstructed. @@ -1526,7 +1532,7 @@ jQuery(($) => { }, { title: 'Taxonomies', - text: `And you can set a permalink for it or just leave it blank for Orchard Core to + text: `And you can set a permalink for it or just leave it blank for Orchard Core to auto-generate it.`, attachTo: { element: '#AutoroutePart_Path', on: 'top' }, buttons: [ @@ -1840,7 +1846,7 @@ jQuery(($) => { }, { title: 'Flow Part', - text: `

The page has a part called "Flow Part". It allows you to add different + text: `

The page has a part called "Flow Part". It allows you to add different widgets to your page, building complex layouts that are displayed in a responsive way, so they look good on all screen sizes (hence the name "flow").

If you want a simple page, with only some simpler HTML content, it's better to create an @@ -1861,8 +1867,8 @@ jQuery(($) => { }, { title: 'Flow Part', - text: `

You will see the different widgets here that you can add. Blockquote, Image, Paragraph, - and Raw Html are all just what their names suggest. Container is a container for widgets, + text: `

You will see the different widgets here that you can add. Blockquote, Image, Paragraph, + and Raw Html are all just what their names suggest. Container is a container for widgets, so you can build some multi-level structure.

These widgets came with the Blog recipe, but modules can add new ones too, and you can create your own widget types as well!

@@ -1912,7 +1918,7 @@ jQuery(($) => { title: 'Flow Part', text: 'Click on the dropdown to edit it!', attachTo: { - element: '.btn.btn-outline-secondary.btn-sm.widget-editor-btn-toggle.widget-editor-btn-expand', + element: '.widget-editor-btn-toggle.widget-editor-btn-expand', on: 'top', }, buttons: [ @@ -2630,7 +2636,7 @@ jQuery(($) => { }, { title: 'Audit Trail', - text: `

The Audit Trail module provides an immutable (for users, even administrators, but not + text: `

The Audit Trail module provides an immutable (for users, even administrators, but not for developers), auditable log of certain changes and events in the system. This includes e.g. creation or deletion of content items, and events like user login failures. For content items, previous versions and deleted items can be restored, and changes can be @@ -3492,7 +3498,7 @@ jQuery(($) => { }, { title: 'Deployment', - text: `

"Update Content Definitions" exports the chosen content types and parts (you + text: `

"Update Content Definitions" exports the chosen content types and parts (you can configure it later which ones).

After running the deployment plan, each step will add its own JSON to the final "recipe.json" file, which you can later download. You can then import this file on @@ -3584,7 +3590,7 @@ jQuery(($) => { }, { title: 'Deployment', - text: `Here you can use "File Download" so the exported recipe.json file will + text: `Here you can use "File Download" so the exported recipe.json file will be downloaded (inside a zip file).`, attachTo: { element: '.btn.btn-primary.btn-sm[href*="ExportFile"]', on: 'right' }, buttons: [ @@ -3680,7 +3686,7 @@ jQuery(($) => { }, { title: 'Deployment', - text: `After you selected the file, click on "Import" to import it. This will add, + text: `After you selected the file, click on "Import" to import it. This will add, delete, or change everything that is configured in the deployment plan.`, attachTo: { element: '.btn.btn-primary.import', on: 'top' }, buttons: [ @@ -3707,7 +3713,7 @@ jQuery(($) => { { title: 'Themes and modules', text: `

Now let's take a look at how plugins work in Orchard Core. Note that we call them - extensions here.

+ extensions here.

There are many built-in extensions (like all the ones that you use during this walkthrough), and you or other developers can create their own ones too.

We have two kinds of extensions: Themes and modules. Themes define how a website looks @@ -3854,7 +3860,7 @@ jQuery(($) => { }, { title: 'Walkthrough completed', - text: `

Congratulations! You completed the walkthrough. For further learning, we recommend you + text: `

Congratulations! You completed the walkthrough. For further learning, we recommend you check out the following resources: