Update tests for TooltipMarker.ts

[lakbychance]

@Progyan1997 Currently the test for setPosition in this don't reflect the final updated tooltipWidget coordinates as they should.

The reason is two fold :-

• The mock implementation of documentToScreenPosition needs to be provided to return different screenPosition for each position.
• marker.update has to be manually called inside a changeFrontMarker event handler to reflect the update.

Here is the possible new code to do the same :-

import { TooltipMarker } from "@otjs/ace/src/tooltip-marker";

describe("Test Tooltip Marker", () => {
  let aceEditor: AceAjax.Editor,
    aceSession: AceAjax.IEditSession,
    tooltipWidget: HTMLElement,
    layerConfig: any,
    markerLayer: any;

  beforeAll(() => {
    const containerEl = document.createElement("div");
    document.body.appendChild(containerEl);
    aceEditor = ace.edit(containerEl);
    aceSession = aceEditor.getSession();
    tooltipWidget = document.createElement("div");

    jest.spyOn(aceSession, "documentToScreenPosition")
      .mockImplementation((docRow, docCol) => ({ row: docRow, column: docCol }))
    layerConfig = {
      characterWidth: 5,
      lineHeight: 12,
    };
    markerLayer = {
      $padding: 2,
      $getTop(row: number): number {
        return row;
      },
    };
  });

  afterAll(() => {
    aceEditor.destroy();
    layerConfig = null;
    markerLayer = null;
  });

  describe("#update", () => {

    it("should update position of the marker in the DOM", () => {
      const position = {
        row: 1,
        column: 1,
      };
      const marker = new TooltipMarker(aceSession, position, tooltipWidget);
      marker.update([], markerLayer, aceSession, layerConfig);

      expect(tooltipWidget.style.top).toBe("14px");
      expect(tooltipWidget.style.left).toBe("7px");
    });
  });

  describe("#setPosition", () => {

    it("should update position of the marker in the Widget", () => {
      const initialPosition = {
        row: 1,
        column: 1,
      };
      const finalPosition = {
        row: 12,
        column: 3,
      };
      const marker = new TooltipMarker(
        aceSession,
        initialPosition,
        tooltipWidget
      );

      aceSession.on('changeFrontMarker', () => {
        marker.update([], markerLayer, aceSession, layerConfig);
      })
      marker.setPosition(finalPosition);
      expect(tooltipWidget.style.opacity).toBe("1");
      expect(tooltipWidget.style.top).toBe("25px");
      expect(tooltipWidget.style.left).toBe("17px");
    });
  });
});

If the above looks cool, I can update the tests in a new issue.

[0xTheProDev]

Lgtm. You can log an issue under project Adapter and start working on it.

…

On Wed, Oct 13, 2021, 3:54 PM Lakshya Thakur ***@***.***> wrote: @Progyan1997 <https://github.com/Progyan1997> Currently the test for setPosition in this <https://github.com/Progyan1997/Operational-Transformation/blob/main/__tests__/ace/__tests__/tooltip-marker.spec.ts#L93> don't reflect the final updated tooltipWidget coordinates as they should. The reason is two fold :- - The mock implementation of documentToScreenPosition needs to be provided to return different screenPosition for each position. - marker.update has to be manually called inside a changeFrontMarker event handler to reflect the update. Here is the possible new code to do the same :- import { TooltipMarker } from ***@***.***/ace/src/tooltip-marker"; describe("Test Tooltip Marker", () => { let aceEditor: AceAjax.Editor, aceSession: AceAjax.IEditSession, tooltipWidget: HTMLElement, layerConfig: any, markerLayer: any; beforeAll(() => { const containerEl = document.createElement("div"); document.body.appendChild(containerEl); aceEditor = ace.edit(containerEl); aceSession = aceEditor.getSession(); tooltipWidget = document.createElement("div"); jest.spyOn(aceSession, "documentToScreenPosition") .mockImplementation((docRow, docCol) => ({ row: docRow, column: docCol })) layerConfig = { characterWidth: 5, lineHeight: 12, }; markerLayer = { $padding: 2, $getTop(row: number): number { return row; }, }; }); afterAll(() => { aceEditor.destroy(); layerConfig = null; markerLayer = null; }); describe("#update", () => { it("should update position of the marker in the DOM", () => { const position = { row: 1, column: 1, }; const marker = new TooltipMarker(aceSession, position, tooltipWidget); marker.update([], markerLayer, aceSession, layerConfig); expect(tooltipWidget.style.top).toBe("14px"); expect(tooltipWidget.style.left).toBe("7px"); }); }); describe("#setPosition", () => { it("should update position of the marker in the Widget", () => { const initialPosition = { row: 1, column: 1, }; const finalPosition = { row: 12, column: 3, }; const marker = new TooltipMarker( aceSession, initialPosition, tooltipWidget ); aceSession.on('changeFrontMarker', () => { marker.update([], markerLayer, aceSession, layerConfig); }) marker.setPosition(finalPosition); expect(tooltipWidget.style.opacity).toBe("1"); expect(tooltipWidget.style.top).toBe("25px"); expect(tooltipWidget.style.left).toBe("17px"); }); });}); If the above looks cool, I can update the tests in a new issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#87>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADNTX6ERSBB7DT2LOUKYWUDUGVM47ANCNFSM5F42OD3A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.