Test case to check if Button onClick opens a new tab

Question

I am new to UI development and recently I have started to write code in React using Typescript. I have created a Button and after clicking the same, it opens a menu with some options to select from. If I click on one of the option a new tab will be opened with some target URL. I am using window.open(target_URL, "_blank"); to achieve this.

Now I am writing test cases for my code and I want to write a test case that checks if I click on that option it opens a new tab with the target_URL.

const myButton: HTMLElement = TestUtils.findRenderedDOMComponentWithClass(renderedComponent, "my-button") as HTMLElement;
    expect(myButton).to.not.be.undefined;

    // Click the Button and check number of options displayed
    TestUtils.Simulate.click(myButton);
    const menuItems: HTMLElement[] = TestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, "ms-ContextualMenu-item") as HTMLElement[];
    expect(menuItems).to.not.be.undefined;
    expect(menuItems.length).to.be.equal(4, "4 options dispalyed");

    const menuItem1: HTMLElement = TestUtils.findRenderedDOMComponentWithClass(renderedComponent, "menu-item-1") as HTMLElement;
    TestUtils.Simulate.click(menuItem1);

I have written the above code but I am not sure how to complete this to check the case of opening a new tab in the browser.

This other thread helped me; hope it will do the same for you: https://stackoverflow.com/a/56999581/14814467 — AndrésAugusto, Aug 30 '22 at 13:47

score 0 · Answer 1 · answered Apr 19 '18 at 08:13

0

window.open() method will return the window object, you can check that widow: for example, just try to close the window.
Normally, you can only close the window that you created, otherwise, there would be an error occur.

answered Apr 19 '18 at 08:13

Charles Geng

1
1

Isn't testing implementation details discouraged? – backslashN May 18 '21 at 18:43

Test case to check if Button onClick opens a new tab

1 Answers1