Bug 1561000 - Open linkmenu to left for last item in layout (#5126)

* Bug 1561000 - Open linkmenu to left for last item in layout

* Fixes test

content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx

@@ -32,8 +32,14 @@ export class _DSLinkMenu extends React.PureComponent {
     this.setState({showContextMenu});
   }
 
-  onMenuShow() {
+  nextAnimationFrame() {
+   return new Promise(resolve => requestAnimationFrame(resolve));
+  }
+
+  async onMenuShow() {
     const dsLinkMenuHostDiv = this.contextMenuButtonRef.current.parentElement;
+    // Wait for next frame before computing scrollMaxX to allow fluent menu strings to be visible
+    await this.nextAnimationFrame();
     if (this.windowObj.scrollMaxX > 0) {
       dsLinkMenuHostDiv.parentElement.classList.add("last-item");
     }

test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx

@@ -31,17 +31,21 @@ describe("<DSLinkMenu>", () => {
       assert.isFalse(wrapper.state(["showContextMenu"]));
     });
 
-    it("Should add active on Menu Show", () => {
+    it("Should add active on Menu Show", async () => {
       wrapper.instance().onMenuShow();
+      // Wait for next frame to allow fluent to render strings
+      await new Promise(r => requestAnimationFrame(r));
       wrapper.update();
       assert.equal(parentNode.className, "active");
     });
 
-    it("Should add last-item to support resized window", () => {
+    it("Should add last-item to support resized window", async () => {
       const fakeWindow = {scrollMaxX: "20"};
       wrapper = mountWithIntl(<DSLinkMenu windowObj={fakeWindow} />);
       parentNode = wrapper.getDOMNode().parentNode;
       wrapper.instance().onMenuShow();
+      // Wait for next frame to allow fluent to render strings
+      await new Promise(r => requestAnimationFrame(r));
       wrapper.update();
       assert.equal(parentNode.className, "last-item active");
     });
@@ -54,11 +58,13 @@ describe("<DSLinkMenu>", () => {
       assert.calledOnce(remove);
     });
 
-    it("should add .active and .last-item classes to the parent component", () => {
+    it("should add .active and .last-item classes to the parent component", async () => {
       const instance = wrapper.instance();
       const add = sinon.stub();
       instance.contextMenuButtonRef = {current: {parentElement: {parentElement: {classList: {add}}}}};
       instance.onMenuShow();
+      // Wait for next frame to allow fluent to render strings
+      await new Promise(r => requestAnimationFrame(r));
       assert.calledOnce(add);
     });
   });