Implement MFTF test to cover scenario: "User searches stock images by keywords"
Test steps
Before - Save Adobe Stock API credentials in Magento Admin
Before - LoginAsAdmin
Navigate to */cms/page/
Fill basic(test independent) data for CMS Page
User clicks "Insert Image..." Insert Image...
Assert that User searches for "popular" using keyboard input and mouse navigation and sees "that grid was updated by new images"
Assert that User searches for "0" using keyboard input and mouse navigation and sees "that grid was updated by new images"
Assert that User searches for "}:->""" using keyboard input and mouse navigation and sees "that filters were reset to initial state" and doesn't see "spinner loading, 'something went wrong' message"
Assert that User searches for "bluetooth true wireless headphones" using clipboard input and mouse navigation and sees "that grid was updated by new images"
Assert that User searches for "} { ] [ ) ( ~ ! @ # $ % ^ & ` | \ : " ; ' < > ? , . ⁄ - +" using clipboard input and mouse navigation and sees "that empty set was returned" and doesn't see "spinner loading, 'something went wrong' message"
Assert that User searches for "top secret" using keyboard input and keyboard navigation and sees "that grid was updated by new images"
Assert that User searches for "%0F" using keyboard input and keyboard navigation and sees "that filters were reset to initial state" and doesn't see "spinner loading, 'something went wrong' message"
Assert that User searches for "chest band heart rate" using clipboard input and mouse navigation and sees "that grid was updated by new images"
Assert that User searches for "mi band heart rate" using clipboard input and mouse navigation and sees "that grid was updated by new images" and doesn't see "spinner loading, 'something went wrong' message"
After - Remove Adobe Stock API credentials in Magento Admin
Show popup window with ability to login with Adobe credentials
Implement callback endpoint to receive token information
Dependency
Current task has a dependency on the: Implement setup script for user metadata. Please, make sure that the mentioned task is done before starting any progress on this.
Images grid filters, paging, sorting, search query and the expanded image (if any) state should be preserved and recreated the next time admin opens the image grid
As a Merchant I want to return to the stock image search that I run last during my session in Admin Panel after I was navigated outside of it for Media Gallery or other activities.
Business Value
no need to run image search again after downloading image preview to browse other images in that search
Preconditions
Admin User is logged into Admin Panel
User searched for stock images
User applied filters to image search
User navigated to X page of search results
User saved preview of the image
User accesses Adobe Stock images from Media Gallery
Acceptance Criteria
User sees search keywords and filters applied
User lands to the same page of search results that they were at before leaving it
Add tooltip with a message that explains how to get credentials for the integration.
Similar tooltip already implemented in the admin panel, please, see Configuration for PayPal Express
Message text: "Configure Adobe Stock account on the 'Adobe.io to retrieve API key"
As a Developer, I want a configurable and extendable grid component that allows to display images using masonry layout in a responsive grid, so that I can use it in Magento extensions or core functionality
Business Value
unified admin user experience, reduce code duplication, save time on development by reusing existing grid components in Magento UI library
Acceptance Criteria
Masonry grid component displays images and attributes associated with them. Some examples of successful: implementation:
✔️ 1. For search query % returns images
✔️ 2. For search query "a returns images
✔️ 3. For search query "% spinner knows what to do if error came instead of images
✔️ 4. For search query "% filters have been reset to its original state
Actual result
✔️ 1. For search query % returns images
✔️ 2. For search query "a returns images
❌ 3. For search query "% spinner will continue to work while the page is not reloaded by Admin
❌ 4. For search query "% filters haven't been reset to its original state
❌ 5. For search query "% the spinner will continue to work even after X (Close) button is clicked and slide out panel revealed again
As a Merchant I want search for stock images using the same language I have selected for Magento Admin Panel and see search results localized
Business Value
non-english speakers can use stock image search, unified language across Magento Admin
Preconditions
Magento Admin Panel is localized language other than English
Admin User is logged into Admin Panel
Admin User sees stock images
Acceptance Criteria
User views stock image details and sees attributes values in the same language that selected in Magento Admin Panel if these localized values exist in Stock
User searches for stock images using keywords in the same language selected in Magento Admin panel and sees search returning results
User saves image preview and localized image attribute values ( if they exist in Stock, are saved to the DB)
User sees messages that come from Stock API localized (success, error, info messages)
As a Magento/Adobe product manager I want to understand the actual level of interest that Magento merchants have to integrated stock images by tracking the number of search requests, saved preview images and licensed images via Adobe Stock-Magento integration.
Business Value
collect metrics to evaluate product success
Acceptance Criteria
All requests to Adobe Stock that merchants send need to include static identifier in the header of request.
The value of this identifier needs to be hardcoded
As a Merchant I want to control level of access that Admin users have to stock images
Business Value
control the level of spending on stock images
Preconditions
Admin User is logged into Admin Panel
Admin user created new role in Magento Admin
Acceptance Criteria
User opens Resources tree and sees Adobe Stock Config node under Settings - Configuration - System Section.
User includes this resource into the role. That will allow admin user with this role to set up an integration with Adobe stock
User sees Adobe Stock node under Content - Elements - Media Gallery. This node has 2 child nodes:
Save preview images
License images
User includes Save preview images resource into the role. This will allow admin user with the role assigned only search for stock images and same their previews into Media Gallery. License image is not accessible.
If user doesn't select any of the 2 options, user with the role won't see the access to Adobe Stock from Media Gallery
If user selects the parent node Adobe Stock, both child nodes get selected.
✔️ 1. Step 7 is impossible - "Search Adobe Stock" is not visible on the page
✔️ 2. or/and "Invalid API key" alert appears because of validation.
(Link to settings page is +1 for usability:{{base_url}}/admin/admin/system_config/edit/section/system/group/adobe_stock_integration/)
Actual result
❌ 1. Return value of Magento\AdobeStockAsset\Model\Config::getApiKey() must be of the type string, null returned
As a Merchant I want to find stock images where subject is isolated from the background by being on a uniformly colored background to narrow search result to images that better fit my needs
Business Value
Better stock image search relevance
Preconditions
Admin User is logged into Admin Panel
Admin User sees stock images
Acceptance Criteria
User opens image grid filtering
User sees filter Isolated Assets
User sees this filter not applied by default
User selects to find isolated images only and applies this filter
User sees updated search results with images that match filtering
User sees image grid filter collapses and selected filter displays
If filter returns zero results, user sees the message
As a Merchant I want to configure Adobe Stock integration on my Magento instance
Business Value
no need to maintain API credentials on Magento side
Preconditions
Admin User is logged into Admin Panel
User configured new Adobe Stock integration on adobe.io console
Acceptance Criteria
User goes Media Gallery and opens Adobe Stock. User sees message that Adobe Stock disabled and API is missing with the link to Store-Configuration-Advanced-System. User clicks the link and navigates to Adobe Stock Integration configuration options
User enables Adobe Stock
User sees the following required fields in empty state:
API Keys (x-api-key)
User sees a message that explains how to get these credentials with a link to Adobe.io
User copies API key generated on Adobe.io side and inserts it into the API key field
User sees a message that API key is valid. If user inserted wrong API key, error message displayed. Configuration can't be saved with not valid API key
User copies name that they chose for the integration when created it on adobe.io console
User saves configuration
If API key is invalid, user sees message about that next the API Keys field. Configuration is saved with the wrong key
User goes Media Gallery and opens Adobe Stock. If API key is invalid, user sees message about that. No image search possible.
As a Merchant I want to filter stock images by their orientations (horizontal, vertical, square, panoramic) to narrow search result to images that better fit my needs
Business Value
Better stock image search relevance
Preconditions
Admin User is logged into Admin Panel
Admin User sees stock images
Acceptance Criteria
User opens image grid filtering
User sees filter by Orientation
User sees the default filter "All" applied. It doesn't filter search result
User sees 4 other filtering options available:
horizontal
vertical
square
panoramic
User selects new value for the filter and applies it
User sees updated search results with images that match filtering
User sees image grid filter collapses and selected filter displays
If filter returns zero results, user sees the message
As a Merchant, I want to access and browse Adobe stock images inside Magento Admin Panel through the fully integrated business friendly user interface. Images include photos and illustrations.
Business Value
no need to switch between different systems (Adobe Stock and Magento) to access stock images
Preconditions
User logged into Magento Admin Panel
Adobe Stock API credentials are stored in Magento.
Acceptance Criteria
Admin user access stock images from Magento Media Gallery. If API credentials are missing, user can't access stock images.
Admin user sees the most recent stock images
Admin user sees 32 images per page
Admin user uses pagination to see the next/previous page
Uncaught Error: Youcannotapplybindingsmultipletimestothesameelement.atapplyBindingsToNodeInternal(knockout.js:3287)atapplyBindingsToNodeAndDescendantsInternal(knockout.js:3233)atObject.ko.applyBindings(knockout.js:3444)at_super(wrapper.js:73)atObject.applyBindings(bound-nodes.js:120)atObject.applyBindings(wrapper.js:78)atbindings.js:84atArray.forEach(<anonymous>)
at jQuery.fn.init.$.fn.applyBindings (bindings.js:81)
at panel.js:18
applyBindingsToNodeInternal
@
knockout.js:3287
applyBindingsToNodeAndDescendantsInternal
@
knockout.js:3233
ko.applyBindings
@
knockout.js:3444
_super
@
wrapper.js:73
applyBindings
@
bound-nodes.js:120
(anonymous)
@
wrapper.js:78
(anonymous)
@
bindings.js:84
$.fn.applyBindings
@
bindings.js:81
(anonymous)
@
panel.js:18
(anonymous)
@
main.js:31
execCb
@
require.js:1650
context.execCb
@
resolver.js:145
check
@
require.js:866
enable
@
require.js:1143
init
@
require.js:774
(anonymous)
@
require.js:1416
setTimeout (async)
req.nextTick
@
require.js:1755
localRequire
@
require.js:1405
window.require
@
mixins.js:245
init
@
main.js:24
(anonymous)
@
main.js:96
.each..forEach
@
underscore.js:150
(anonymous)
@
main.js:79
apply
@
main.js:76
(anonymous)
@
mage.js:98
dispatch
@
jquery.js:5232
elemData.handle
@
jquery.js:4884
trigger
@
jquery.js:5136
jQuery.event.trigger
@
jquery-migrate.js:633
(anonymous)
@
jquery.js:5866
each
@
jquery.js:376
each
@
jquery.js:142
trigger
@
jquery.js:5865
(anonymous)
@
browser.js:76
fire
@
jquery.js:3238
fireWith
@
jquery.js:3368
done
@
jquery.js:9846
callback
@
jquery.js:10317
XMLHttpRequest.send (async)
send
@
jquery.js:10260
ajax
@
jquery.js:9744
openDialog
@
browser.js:69
onclick
@
(index):1
Important
The bug caused by performing two requests for gallery data retrieving. Should be fixed in Magento 2 open source edition. We need to eliminate the second redundant request.