Test: Complete the test set for the smart menus feature, solves #375

tests/behat/theme_boost_union_smartmenusettings_menuitems_presentation.feature

@@ -106,6 +106,213 @@ Feature: Configuring the theme_boost_union plugin on the "Smart menus" page, app
       | Course full name  |               | Test course word count | C1                     |
       | Course full name  | 2             | Test course..          | Test course word count |
 
+  @javascript
+  Scenario: Smartmenus: Menu items: Presentation - Display the menu item title in different type
+    Given I log in as "admin"
+    And I navigate to smart menu "Quick links" items
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | External links   |
+      | Menu item type    | Heading          |
+    And I should see "External links" in the "smartmenus_items" "table"
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | Resources          |
+      | Menu item type    | Static             |
+      | Menu item URL     | https://moodle.org |
+    And I should see "Resources" in the "smartmenus_items" "table"
+    And I should see smart menu "Quick links" item "External links" in location "Main, Menu, User, Bottom"
+    # Main menu test.
+    And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
+    And I should see "External links" in the ".primary-navigation .menu-item-heading" "css_element"
+    Then the "href" attribute of ".primary-navigation .menu-item-heading" "css_element" should contain "#"
+    And I should see "Resources" in the ".primary-navigation .menu-item-static" "css_element"
+    Then the "href" attribute of ".primary-navigation .menu-item-static" "css_element" should contain "https://moodle.org"
+    # Menu bar.
+    And I click on "Quick links" "link" in the ".boost-union-menubar" "css_element"
+    And I should see "External links" in the ".boost-union-menubar .menu-item-heading" "css_element"
+    Then the "href" attribute of ".boost-union-menubar .menu-item-heading" "css_element" should contain "#"
+    And I should see "Resources" in the ".boost-union-menubar .menu-item-static" "css_element"
+    Then the "href" attribute of ".boost-union-menubar .menu-item-static" "css_element" should contain "https://moodle.org"
+    # Menu items in user menu.
+    And I click on "#user-menu-toggle" "css_element"
+    And I click on "Quick links" "link" in the "#usermenu-carousel" "css_element"
+    And I should see "External links" in the "#usermenu-carousel .menu-item-heading" "css_element"
+    And I should see "Resources" in the "#usermenu-carousel .menu-item-static" "css_element"
+    And the "href" attribute of "//div[contains(@class, 'carousel-item')]//a[contains(@class, 'menu-item-heading')]" "xpath_element" should contain "#"
+    And the "href" attribute of "//div[contains(@class, 'carousel-item')]//a[contains(@class, 'menu-item-static')]" "xpath_element" should contain "https://moodle.org"
+    # Menu items in bottom menu.
+    Then I change the viewport size to "740x900"
+    And I click on "Quick links" "link" in the ".bottom-navigation" "css_element"
+    And I should see "External links" in the ".bottom-navigation" "css_element"
+    And the "href" attribute of "//div[@class='bottom-navigation']//a[contains(@class, 'menu-item-heading')]" "xpath_element" should contain "#"
+    And the "href" attribute of "//div[@class='bottom-navigation']//a[contains(@class, 'menu-item-static')]" "xpath_element" should contain "https://moodle.org"
+    Then I change the viewport size to "large"
+
+  @javascript
+  Scenario: Smartmenus: Menu items - Display the menu items in different order
+    Given I log in as "admin"
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | Demo item 01     |
+      | Menu item type    | Static           |
+      | Menu item URL     | https://example.com |
+      | desktop           |      1           |
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | Demo item 02     |
+      | Menu item type    | Static           |
+      | Menu item URL     | https://example.com |
+      | tablet            |      1           |
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | Demo item 03     |
+      | Menu item type    | Static           |
+      | Menu item URL     | https://example.com |
+      | mobile            |      1           |
+    And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
+    And "Demo item 02" "text" should appear after "Demo item 01" "text"
+    And "Demo item 03" "text" should appear after "Demo item 02" "text"
+    And I click on ".action-edit" "css_element" in the "Demo item 01" "table_row"
+    And I set the field "Order" to "3"
+    And I click on "Save changes" "button"
+    And I click on ".action-edit" "css_element" in the "Demo item 03" "table_row"
+    And I set the field "Order" to "1"
+    And I click on "Save changes" "button"
+    And "Demo item 02" "text" should appear after "Demo item 03" "text"
+    And "Demo item 01" "text" should appear after "Demo item 02" "text"
+
+  @javascript
+  Scenario Outline: Smartmenus: Menu items - Display the menu items in different viewports
+    Given I log in as "admin"
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | Resources          |
+      | Menu item type    | Static             |
+      | Menu item URL     | https://moodle.org |
+      | desktop           | <hidedesktop>      |
+      | tablet            | <hidetablet>       |
+      | mobile            | <hidemobile>       |
+    And I <desktopshouldornot> see smart menu "Quick links" item "Resources" in location "Menu, Main, User"
+    Then I change window size to "800x980"
+    And I <tabletshouldornot> see smart menu "Quick links" item "Resources" in location "User, Menu"
+    And I click on "More" "link" in the ".primary-navigation" "css_element"
+    And I <tabletshouldornot> see smart menu "Quick links" item "Resources" in location "Main"
+    Then I change window size to "mobile"
+    And I <mobileshouldornot> see smart menu "Quick links" item "Resources" in location "Menu, User"
+    And I <mobileshouldornot> see smart menu "Quick links" item "Resources" in location "Bottom"
+
+    Examples:
+      | hidedesktop | hidetablet | hidemobile | desktopshouldornot | tabletshouldornot | mobileshouldornot |
+      | 0           | 0          | 1          | should             | should            | should not        |
+      | 0           | 1          | 1          | should             | should not        | should not        |
+      | 1           | 0          | 0          | should not         | should            | should            |
+      | 1           | 0          | 1          | should not         | should            | should not        |
+
+  @javascript
+  Scenario Outline: Smartmenus: Menu items: Presentation - Display the menu items title with icon
+    Given I log in as "admin"
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title              | Resources        |
+      | Menu item type     | Heading          |
+      | Title presentation | <presentationtitle>  |
+    And I should see "Resources" in the "smartmenus_items" "table"
+    And I click on ".action-edit" "css_element" in the "Resources" "table_row"
+    Then I click on "input[name='iconsearch']" "css_element"
+    Then I click on ".fa-info-circle" "css_element" in the ".fontawesome-picker .popover-body " "css_element"
+    And I click on "Save changes" "button"
+    And I <desktopshouldornot> see smart menu "Quick links" item "Resources" in location "Main, Menu, User"
+    And ".fa-info-circle" "css_element" should exist in the ".primary-navigation .dropdown-item.menu-item-heading" "css_element"
+    And ".fa-info-circle" "css_element" should exist in the ".boost-union-menubar .dropdown-item" "css_element"
+    And ".fa-info-circle" "css_element" should exist in the "#usermenu-carousel .carousel-item.submenu .dropdown-item" "css_element"
+    Then I change window size to "mobile"
+    And I <mobiletitleshould> see smart menu "Quick links" item "Resources" in location "Menu, User"
+    And I click on "More" "button" in the ".bottom-navigation" "css_element"
+    And I click on "Quick links" "link" in the "#theme_boost-drawers-primary" "css_element"
+    And I <mobiletitleshould> see "Resources" in the "#theme_boost-drawers-primary" "css_element"
+    And ".fa-info-circle" "css_element" should exist in the ".primary-navigation .dropdown-item.menu-item-heading" "css_element"
+    And ".fa-info-circle" "css_element" should exist in the ".boost-union-menubar .dropdown-item" "css_element"
+    And ".fa-info-circle" "css_element" should exist in the "#usermenu-carousel .carousel-item.submenu .dropdown-item" "css_element"
+    Then I change window size to "large"
+
+    Examples:
+      | presentationtitle                                      | desktopshouldornot | mobiletitleshould |
+      | Show text and icon as title                            | should             | should            |
+      | Hide title text and show only icon (on all devices)    | should not         | should not        |
+      | Hide title text and show only icon (on mobile devices) | should             | should not        |
+
+  @javascript
+  Scenario: Smartmenus: Menu items: Presentation - Display the tooltip on hover over the menu items
+    Given I log in as "admin"
+    And I set "Quick links" smart menu items with the following fields to these values:
+      | Title             | Resources          |
+      | Menu item type    | Static             |
+      | Menu item URL     | https://moodle.org |
+      | Tooltip           | External links     |
+    And I should see "Resources" in the "smartmenus_items" "table"
+    And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
+    And I hover over the "Resources" "text" in the ".primary-navigation" "css_element"
+    Then I should see "External links" in the "body>.tooltip" "css_element"
+    And I click on ".action-edit" "css_element" in the "Resources" "table_row"
+    And I set the field "Tooltip" to ""
+    And I click on "Save changes" "button"
+    And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
+    And I hover over the "Resources" "link" in the ".primary-navigation" "css_element"
+    And "body>.tooltip" "css_element" should not exist
+
+  @javascript
+  Scenario: Smartmenus: Menu items: Presentation - Display the card type menu items title with different position and color
+    Given I log in as "admin"
+    And I navigate to smart menus
+    And I click on ".action-edit" "css_element" in the "Quick links" "table_row"
+    And I set the field "Presentation type" to "Card"
+    And I click on "Save and return" "button"
+    And I set "Quick links" smart menu items with the following fields to these values:
+    | Title             | Resources           |
+    | Menu item type    | Static              |
+    | Menu item URL     | https://moodle.org  |
+    | Card text position| Below image         |
+    | Card text color   | #FFFEFF             |
+    And I should see smart menu "Quick links" item "Resources" in location "Main"
+    Then DOM element ".dropdown-menu.show .card-block .content-block a.dropdown-item" should have computed style "color" "rgb(255, 254, 255)"
+    Then ".dropdown-menu.show .card-block.card-text-below" "css_element" should exist in the ".primary-navigation" "css_element"
+    And ".dropdown-menu.show .card-block .content-block" "css_element" should appear after ".dropdown-menu.show .card-block .img-block" "css_element"
+    And I click on ".action-edit" "css_element" in the "Resources" "table_row"
+    And I expand all fieldsets
+    Then I set the field "Card text position" to "Top overlay"
+    Then I set the field "Card text color" to "#230017"
+    And I click on "Save changes" "button"
+    And I should see smart menu "Quick links" item "Resources" in location "Main"
+    Then DOM element ".dropdown-menu.show .card-block .content-block a.dropdown-item" should have computed style "color" "rgb(35, 0, 23)"
+    Then ".dropdown-menu.show .card-block.card-text-overlay-top" "css_element" should exist in the ".primary-navigation" "css_element"
+    Then DOM element ".dropdown-menu.show .card-block .content-block" should have computed style "position" "absolute"
+    And I click on ".action-edit" "css_element" in the "Resources" "table_row"
+    And I expand all fieldsets
+    Then I set the field "Card text position" to "Bottom overlay"
+    And I click on "Save changes" "button"
+    And I should see smart menu "Quick links" item "Resources" in location "Main"
+    Then ".dropdown-menu.show .card-block.card-text-overlay-bottom" "css_element" should exist in the ".primary-navigation" "css_element"
+    Then DOM element ".dropdown-menu.show .card-block .content-block" should have computed style "position" "absolute"
+    Then DOM element ".dropdown-menu.show .card-block .content-block" should have computed style "align-items" "flex-end"
+
+  @javascript @_file_upload
+  Scenario: Smartmenus: Menu items: Presentation - Display the card type menu item with background image and colors
+    Given I log in as "admin"
+    And I navigate to smart menus
+    And I click on ".action-edit" "css_element" in the "Quick links" "table_row"
+    And I set the field "Presentation type" to "Card"
+    And I click on "Save and return" "button"
+    And I set "Quick links" smart menu items with the following fields to these values:
+    | Title                 | Resources           |
+    | Menu item type        | Static              |
+    | Menu item URL         | https://example.com |
+    | Card background color | #031FC3             |
+    And I should see smart menu "Quick links" item "Resources" in location "Main"
+    And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
+    Then DOM element ".dropdown-menu .menu-item-static .content-block" should have computed style "background-color" "rgb(3, 31, 195)"
+    And I click on "Quick links" "link" in the ".boost-union-menubar" "css_element"
+    Then DOM element ".boost-union-menubar .dropdown-menu.show .content-block" should have computed style "background-color" "rgb(3, 31, 195)"
+    And I click on ".action-edit" "css_element" in the "Resources" "table_row"
+    And I expand all fieldsets
+    And I upload "theme/boost_union/tests/fixtures/backimg.jpg" file to "Card image" filemanager
+    And I click on "Save changes" "button"
+    And I should see smart menu "Quick links" item "Resources" in location "Main, Menu"
+    Then the image at "//div[contains(@class, 'primary-navigation')]//img[contains(@src, 'pluginfile.php') and contains(@src, '/theme_boost_union/smartmenus_itemimage/')]" "xpath_element" should be identical to "theme/boost_union/tests/fixtures/backimg.jpg"
+
   @javascript
   Scenario: Smartmenu: Menu items: Presentation - Add a smart menu item with multilang tags
     When I log in as "admin"