Download AD0 E705 Adobe Commerce JavaScript Developer Expert Professional Study and Certification G and more Exams Technology in PDF only on Docsity!
Expert Professional Study and Certification Guide
Question 1. Which file is primarily used to define RequireJS path aliases, shims, and map configurations in Adobe Commerce? A) view.xml B) requirejs-config.js C) di.xml D) composer.json Answer: B Explanation: requirejs-config.js is the standard place to declare RequireJS configuration such as path aliases, shims, and module mapping for Magento front-end JavaScript. Question 2. In a RequireJS mixin, which property must be set to true to ensure the mixin is applied after the original module is loaded? A) “deps” B) “priority” C) “after” D) “shim” Answer: B Explanation: The “priority” property (numeric) tells RequireJS the order in which mixins are applied; higher numbers are applied later, ensuring the mixin runs after the original module. Question 3. What attribute is used for declarative component initialization directly in HTML markup? A) data-mage-init B) data-init-js C) data-component
Expert Professional Study and Certification Guide
D) data-mage-config Answer: A Explanation: data-mage-init contains a JSON object that Magento parses to instantiate JavaScript components automatically when the DOM loads. Question 4. Which script type allows you to embed complex JSON component configurations without polluting the HTML? A) text/javascript B) application/json C) text/x-magento-init D) text/template Answer: C Explanation:
Expert Professional Study and Certification Guide
Explanation: mage/storage abstracts browser storage mechanisms (localStorage, sessionStorage) for persisting data across page loads. Question 9. In UI Component XML, which node defines the PHP class that supplies data to the component? A) B) C) D) Answer: C Explanation: The node references the PHP class that fetches and prepares data for the UI component. Question 10. What is the role of the uiRegistry in Magento’s UI component system? A) It registers RequireJS modules. B) It stores component instances for later retrieval. C) It validates form inputs. D) It compiles LESS files. Answer: B Explanation: uiRegistry acts as a global registry where components register themselves, allowing other components to retrieve them by name. Question 11. Which lifecycle method is called first when a UI component is created? A) initObservable B) initialize
Expert Professional Study and Certification Guide
C) initConfig D) render Answer: B Explanation: The initialize method is invoked first; it sets up the component before observables and configuration are processed. Question 12. In a UI component’s JavaScript file, what does the “defaults” property represent? A) Default RequireJS dependencies. B) Default observable values and component options. C) Default CSS classes. D) Default translation strings. Answer: B Explanation: The “defaults” object holds default values for observables, configuration options, and other properties that can be overridden by XML. Question 13. How does Knockout.js detect changes to a plain JavaScript object property? A) By using getters/setters automatically. B) By wrapping the property in ko.observable. C) By polling the property value. D) By listening to DOM events. Answer: B Explanation: Only properties wrapped in ko.observable (or observableArray) are tracked for changes; plain properties are not reactive.
Expert Professional Study and Certification Guide
Explanation: Magento adds an “i18n” binding that runs the translation engine on the bound text. Question 17. How can you manually subscribe to a Knockout observable to execute custom code on change? A) observable.subscribe(callback); B) observable.onChange(callback); C) observable.watch(callback); D) observable.addListener(callback); Answer: A Explanation: The subscribe method registers a callback that runs each time the observable’s value changes. Question 18. Which of the following is the correct way to bind a click event to a method named “saveData” in a Knockout view model? A) data-bind="click: saveData()" B) data-bind="click: saveData" C) data-bind="event: { click: saveData }" D) data-bind="onClick: saveData" Answer: B Explanation: Knockout’s click binding expects a function reference; adding parentheses would invoke the function immediately. Question 19. When integrating a JavaScript component with GraphQL, which Magento module provides the client-side query executor? A) mage/graphql B) mage/graphQL
Expert Professional Study and Certification Guide
C) Magento_GraphQl/js/query D) graphql/client Answer: B Explanation: The “mage/graphQL” module contains the execute function used to send GraphQL queries from the browser. Question 20. In the checkout, which layout XML file defines the main container for the steps? A) checkout_index_index.xml B) checkout_cart_index.xml C) checkout_onepage_success.xml D) checkout_summary.xml Answer: A Explanation: checkout_index_index.xml is the primary layout file for the one-page checkout, defining the step container and UI components. Question 21. To add a custom field to the shipping address form, which UI component must you extend? A) Magento_Checkout/js/view/shipping-address/address-renderer/default B) Magento_Checkout/js/view/shipping-address/address-form C) Magento_Checkout/js/model/shipping-save-processor D) Magento_Checkout/js/action/set-shipping-information Answer: B Explanation: The shipping address form UI component (address-form) renders the fields; extending it lets you inject new inputs.
Expert Professional Study and Certification Guide
Answer: B Explanation: invalidate marks the “cart” section as stale; Magento’s UI automatically reloads it, updating the mini-cart. Question 25. Which HTTP method does mage/storage use for updating an existing entry in localStorage? A) GET B) POST C) PUT D) DELETE Answer: C Explanation: mage/storage follows REST conventions; PUT is used to replace an existing storage entry. Question 26. When handling a global error message from a server response, which Magento UI component should you use to display it? A) mage/notification B) mage/message C) mage/alert D) mage/modal Answer: B Explanation: mage/message provides methods to show global success, warning, and error messages on the page. Question 27. Which of the following is the correct way to add a custom validation rule to jquery.validate in Magento?
Expert Professional Study and Certification Guide
A) $.validator.addMethod('myRule', function(value){ return true; }, $.mage.__('Invalid')); B) $.validator.addRule('myRule', function(value){ return true; }); C) $.validator.addValidator('myRule', function(value){ return true; }); D) $.validator.addCustom('myRule', function(value){ return true; }); Answer: A Explanation: $.validator.addMethod registers a new rule with a callback and a translated error message. Question 28. In a UI component form, where do you specify which validation rules apply to a field? A) In the field’s node inside UI component XML. B) In the field’s node. C) In the field’s node. D) In the field’s node. Answer: A Explanation: The node contains rule definitions (e.g., required-entry, validate-email) for the field. Question 29. Which browser developer tool feature helps you inspect the contents of uiRegistry? A) The “Elements” panel. B) The “Console” with require('uiRegistry').get('componentName'). C) The “Network” panel. D) The “Sources” panel. Answer: B
Expert Professional Study and Certification Guide
B) render: 'my-template' C) template: 'my-template' D) include: 'my-template' Answer: C Explanation: The template binding accepts either a string name or an object; using template: 'my-template' loads the remote HTML file with that identifier. Question 33. When customizing checkout steps, which UI component is responsible for rendering the step navigation bar? A) Magento_Checkout/js/view/progress-bar B) Magento_Checkout/js/view/steps C) Magento_Checkout/js/view/shipping D) Magento_Checkout/js/view/billing-address Answer: A Explanation: The progress-bar component displays the step titles and highlights the current step. Question 34. What is the effect of setting “cacheable” to false in sections.xml for a custom customer-data section? A) The section will never be stored in localStorage. B) The section will be fetched from the server on every page load. C) The section will be cached in the browser’s sessionStorage only. D) The section will be ignored by the customer-data module. Answer: B Explanation: cacheable="false" tells Magento not to store the section locally; it will be requested from the server each time it is needed.
Expert Professional Study and Certification Guide
Question 35. Which Magento UI component method is used to programmatically set a value on an observable field? A) setValue() B) value() C) set() D) update() Answer: B Explanation: In Knockout, calling observableField(newValue) sets the value; there is no separate setValue method. Question 36. How can you make a UI component’s field hidden based on another field’s value? A) Using the visible binding with a computed observable. B) Using CSS display:none directly in the template. C) Setting the field’s “hidden” property in XML. D) Adding a custom RequireJS plugin. Answer: A Explanation: The visible binding can be bound to a computed observable that evaluates the other field’s value, dynamically showing or hiding the element. Question 37. Which Magento JavaScript module provides utilities for URL manipulation (e.g., adding query parameters)? A) mage/urlBuilder B) mage/url C) mage/uri
Expert Professional Study and Certification Guide
A) The component’s root DOM element. B) The component instance (this). C) An array of observable names. D) A Promise that resolves when observables are ready. Answer: B Explanation: initObservable is chainable and returns “this” after initializing observables, allowing further method chaining. Question 41. Which Knockout binding is used to bind a CSS class based on an observable’s boolean value? A) css B) class C) style D) bindClass Answer: A Explanation: The css binding can map class names to observable values, adding or removing the class automatically. Question 42. In Magento’s checkout, which JavaScript model holds the current shipping address data? A) shippingAddress() in Magento_Checkout/js/model/shipping-address B) addressData in Magento_Checkout/js/model/address-converter C) quote.shippingAddress() in Magento_Checkout/js/model/quote D) checkoutData.getShippingAddress() in Magento_Checkout/js/checkout-data Answer: C
Expert Professional Study and Certification Guide
Explanation: The quote model’s shippingAddress observable stores the current shipping address throughout the checkout flow. Question 43. How can you invalidate a custom customer-data section named “wishlist” after a product is added to the wishlist via Ajax? A) customerData.invalidate(['wishlist']); B) customerData.reload(['wishlist']); C) customerData.refresh('wishlist'); D) customerData.set('wishlist', null); Answer: A Explanation: invalidate flags the section as stale; Magento will fetch fresh data for “wishlist” automatically. Question 44. Which Magento UI component is responsible for rendering the “Place Order” button? A) Magento_Checkout/js/view/place-order B) Magento_Checkout/js/view/payment-methods C) Magento_Checkout/js/view/payment D) Magento_Checkout/js/view/summary Answer: A Explanation: The place-order component contains the button and the logic to submit the order. Question 45. When using mage/graphQL, which method returns a Promise that resolves with the query response? A) execute(query, variables) B) fetch(query, variables)
Expert Professional Study and Certification Guide
Question 48. Which of the following statements about RequireJS “shim” configuration is true? A) Shim is used only for AMD-compatible modules. B) Shim allows non-AMD scripts to specify dependencies and export a global variable. C) Shim replaces the need for define() in modules. D) Shim automatically minifies the script. Answer: B Explanation: Shim tells RequireJS how to load legacy scripts that do not call define(), by declaring dependencies and the exported global. Question 49. What is the purpose of the “deps” array in a RequireJS module definition? A) To list modules that must be loaded before this module. B) To export multiple values from the module. C) To declare CSS dependencies. D) To set module priority. Answer: A Explanation: The “deps” array specifies required modules that RequireJS will load before executing the factory function. Question 50. Which Magento JavaScript component provides a throttled “debounce” utility for event handling? A) mage/utils B) mage/debounce C) mage/throttle D) mage/deferred
Expert Professional Study and Certification Guide
Answer: A Explanation: mage/utils includes a debounce function that can be used to limit the frequency of callback execution. **Question 51. In UI component XML, what does the attribute “component” specify? ** A) The JavaScript module that will instantiate the UI element. B) The PHP block class that renders the component. C) The HTML tag used for the component. D) The CSS class applied to the component. Answer: A Explanation: The “component” attribute points to the JavaScript module (e.g., Magento_Ui/js/form/element/abstract) that creates the UI element. Question 52. How do you retrieve a UI component instance from the console using uiRegistry? A) uiRegistry.get('componentName'); B) uiRegistry.find('componentName'); C) uiRegistry.fetch('componentName'); D) uiRegistry.lookup('componentName'); Answer: A Explanation: uiRegistry.get returns the registered component instance by its name. Question 53. Which Knockout binding would you use to bind a button’s disabled state to an observable named “isProcessing”? A) enable: !isProcessing()
