Contrib.social

Improve automated functional acceptance testing for The Gin Admin theme to cover more scenarios on Feature: Preview the site in a number of responsive devices

Open on Drupal.org →
Created on 1 November 2023, about 1 year ago
Updated 12 December 2023, 12 months ago

Problem/Motivation

Following with:

📌 Fix issue with changing between responsive views and Gin secondary toolbar Fixed
🐛 Fix issue with changing between responsive views and Gin Toolbar over menus Needs review

Had the old minimal automated functional acceptance testing passing for the basic scenario

Steps to reproduce

03-admin-management/03-06-responsive-preview-devices.feature

Feature: Preview the site in a number of responsive devices
As a site admin user
I want to be able to preview the look and feel of the site in a number of devices
So that I can make sure that the site looks good in small devices too.

  Background:
    Given I am a logged in user with the "webmaster" user

  @javascript @check @local @development @staging @production
  Scenario: Check the site in a number of responsive preview devices
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
     When I press "Preview page layout"
     Then I should see "iPhone XS"
      And I should see "iPhone XS Max"
      And I should see "Galaxy S9"
      And I should see "iPad Pro"
      And I should see "Galaxy Tab S4"

Even tho the 📌 Fix issue with changing between responsive views and Gin secondary toolbar Fixed was in the page.

Proposed resolution

Change the feature to cover more scenarios

Watch the video for the Robot view of running the scenarios with all user roles

03-admin-management/03-06-responsive-preview-devices.feature

Feature: Preview the site in a number of responsive devices
As a site admin
I want to be able to preview the look and feel of the site in a number of devices
So that I can make sure that the site looks good in small and medium devices too.

  @javascript @check @local @development @staging @production
  Scenario: Check that an anonymous users can not access the responsive preview devices
    Given I am an anonymous user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should not see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"

  @javascript @check @local @development @staging @production
  Scenario: Check that an authenticated user can not access the responsive preview devices
    Given I am a logged in user with the "Normal user" user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should not see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"

  @javascript @check @local @development @staging @production
  Scenario: Check that Editor users can access the responsive preview devices
    Given I am a logged in user with the "Editor" user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
     When I press "Preview page layout"
     Then I should see "iPhone XS"
      And I should see "iPhone XS Max"
      And I should see "Galaxy S9"
      And I should see "iPad Pro"
      And I should see "Galaxy Tab S4"
      And I should not see "Configure devices"
     When I press "iPhone XS"
     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPhone XS Max"
     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy S9"
     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPad Pro"
     Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy Tab S4"
     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"

  @javascript @check @local @development @staging @production
  Scenario: Check that Content Admin users can access the responsive preview devices
    Given I am a logged in user with the "Content admin" user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
     When I press "Preview page layout"
     Then I should see "iPhone XS"
      And I should see "iPhone XS Max"
      And I should see "Galaxy S9"
      And I should see "iPad Pro"
      And I should see "Galaxy Tab S4"
      And I should not see "Configure devices"
     When I press "iPhone XS"
     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPhone XS Max"
     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy S9"
     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPad Pro"
     Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy Tab S4"
     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"

  @javascript @check @local @development @staging @production
  Scenario: Check that SEO Admin users can access the responsive preview devices
    Given I am a logged in user with the "SEO admin" user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
     When I press "Preview page layout"
     Then I should see "iPhone XS"
      And I should see "iPhone XS Max"
      And I should see "Galaxy S9"
      And I should see "iPad Pro"
      And I should see "Galaxy Tab S4"
      And I should not see "Configure devices"
     When I press "iPhone XS"
     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPhone XS Max"
     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy S9"
     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPad Pro"
     Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy Tab S4"
     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"

  @javascript @check @local @development @staging @production
  Scenario: Check that Site Admin users can access the responsive preview devices
    Given I am a logged in user with the "Site admin" user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
     When I press "Preview page layout"
     Then I should see "iPhone XS"
      And I should see "iPhone XS Max"
      And I should see "Galaxy S9"
      And I should see "iPad Pro"
      And I should see "Galaxy Tab S4"
      And I should not see "Configure devices"
     When I press "iPhone XS"
     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPhone XS Max"
     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy S9"
     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPad Pro"
     Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy Tab S4"
     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"

  @javascript @check @local @development @staging @production
  Scenario: Check that user Number 1 can access the responsive preview devices and configure devices
    Given I am a logged in user with the "webmaster" user
     When I go to the homepage
      And wait
     Then I should see "Welcome to Varbase"
      And I should see "Layout preview" in the "button" element with the "title" attribute set to "Preview page layout"
     When I press "Preview page layout"
     Then I should see "iPhone XS"
      And I should see "iPhone XS Max"
      And I should see "Galaxy S9"
      And I should see "iPad Pro"
      And I should see "Galaxy Tab S4"
      And I should see "Configure devices"
     When I press "iPhone XS"
     Then I should see "iPhone XS" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPhone XS Max"
     Then I should see "iPhone XS Max" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy S9"
     Then I should see "Galaxy S9" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "iPad Pro"
     Then I should see "iPad Pro" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"
     When I press "Galaxy Tab S4"
     Then I should see "Galaxy Tab S4" in the "span" element with the "class" attribute set to "responsive-preview-device-label-text"

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ✅ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ✅ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release varbase-10.0.0-rc1 →

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3398322 → : Improved the automated functional acceptance testing for The Gin Admin theme to cover more scenarios on Feature: Preview the site in a number of responsive devices
📌 Task
Status

Fixed

Version

10.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024