Merge pull request #560 from eBay/559-ebay-button-id

Fix providing id attribute to ebay button

marko.json

@@ -32,6 +32,7 @@
         "renderer": "./src/components/ebay-button/index.js",
         "@*": "expression",
         "@html-attributes": "expression",
+        "@id": "string",
         "@class": "string",
         "@style": "string",
         "@type": "string",

src/common/get-marko-3-widget-id/index.js

@@ -0,0 +1,15 @@
+const markoWidgets = require('marko-widgets');
+
+/**
+ * Hack to get the widget id before w-bind in Marko 3.
+ * In Marko 4 this will return undefined, which means no id.
+ */
+module.exports = function(out) {
+    const widgetArgs = out.data.widgetArgs;
+    if (widgetArgs) {
+        return `${widgetArgs.scope}-${widgetArgs.id}`;
+    }
+
+    const ctx = markoWidgets.getWidgetsContext && markoWidgets.getWidgetsContext(out);
+    return ctx && ctx._nextWidgetId();
+};

src/components/ebay-button/index.js

@@ -3,9 +3,10 @@ const emitAndFire = require('../../common/emit-and-fire');
 const eventUtils = require('../../common/event-utils');
 const processHtmlAttributes = require('../../common/html-attributes');
 const observer = require('../../common/property-observer');
+const getWidgetId = require('../../common/get-marko-3-widget-id');
 const template = require('./template.marko');
 
-function getInitialState(input) {
+function getInitialState(input, out) {
     const href = input.href;
     const priority = input.priority || 'secondary';
     const size = input.size;
@@ -77,6 +78,7 @@ function getInitialState(input) {
 
     return {
         htmlAttributes: processHtmlAttributes(input),
+        id: input.id || getWidgetId(out),
         classes,
         style: input.style,
         tag,

src/components/ebay-button/template.marko

@@ -2,6 +2,7 @@
     w-bind
     w-onclick="handleClick"
     w-onkeydown="handleKeydown"
+    id=data.id
     type=data.type
     class=data.classes
     style=data.style

src/components/ebay-button/test/test.server.js

@@ -1,4 +1,5 @@
 const expect = require('chai').expect;
+const isMarko3 = require('marko/package.json').version.split('.')[0] === '3';
 const testUtils = require('../../../common/test-utils/server');
 
 const properties = {
@@ -29,7 +30,17 @@ Object.keys(properties).forEach(property => {
 test('renders defaults', context => {
     const input = {};
     const $ = testUtils.getCheerio(context.render(input));
-    expect($('button.btn.btn--secondary[type=button]').length).to.equal(1);
+    const $button = $('button.btn.btn--secondary[type=button]');
+    expect($button.length).to.equal(1);
+    expect($button.attr('id')).to.be.a(isMarko3 ? 'string' : 'undefined');
+});
+
+test('renders with id override', context => {
+    const input = { id: 'test' };
+    const $ = testUtils.getCheerio(context.render(input));
+    const $button = $('button.btn.btn--secondary[type=button]');
+    expect($button.length).to.equal(1);
+    expect($button.attr('id')).to.equal('test');
 });
 
 test('renders with type override', context => {