@testing-library/react#waitForElement JavaScript Examples

describe("Everything is rendered correctly", () => {
    test("label is correctly displayed when there are no files selected for a single file button", () => {
        waitForElement(() => {
            expect(queryByTestId(uploadButton, "upload-button-label").textContent).toBe("No images selected");
        });
    });
    test("label is correctly displayed when there are no files selected for a multple file button", () => {
        rerenderFunc(<UploadButton multiple text="No files selected" onChange={(e) => e}></UploadButton>);
        waitForElement(() => {
            expect(queryByTestId(uploadButton, "upload-button-label").textContent).toBe("No files selected");
        });
    });

});

test("on calling char_count it renders the number of characters", async () => {
  const testString = "React Testing";
  const url = `/char_count?text=${testString}`;
  axiosMock.get.mockResolvedValueOnce({
    data: { count: testString.length },
  });
  const { getByText, getByPlaceholderText, getByTestId } = render(<App />);

  const charInputElement = getByPlaceholderText("my string");
  expect(charInputElement).toBeInTheDocument();

  fireEvent.change(charInputElement, { target: { value: testString } });
  fireEvent.click(getByText("have?"));
  const responseTextNode = await waitForElement(() =>
    getByTestId("char-count")
  );

  expect(axiosMock.get).toHaveBeenCalledTimes(1);
  expect(axiosMock.get).toHaveBeenCalledWith(url);
  expect(getByTestId("char-count")).toHaveTextContent(
    `${testString.length} characters!`
  );
});

test('5) Repository search bar, search as type', async () => {
  var { getByText } = render(<App />);
  fireEvent.change(screen.getByPlaceholderText('Search username'), { target: { value: 'ntzi' } })
  userEvent.click(getByText('Search'))
  await waitForElement(() => getByText('Nikos Tziralis'));

  fireEvent.change(screen.getByPlaceholderText('Search repository'), { target: { value: 'cha' } })
  let chatbot = getByText('chatbot');
  let cryptopals_challenges = screen.queryByText('cryptopals_challenges');

  expect(chatbot).toBeInTheDocument();
  expect(cryptopals_challenges).toBeInTheDocument();

  fireEvent.change(screen.getByPlaceholderText('Search repository'), { target: { value: 'chat' } })
  expect(chatbot).toBeInTheDocument();
  expect(cryptopals_challenges).not.toBeInTheDocument();
});

describe('UseEffect', () => {
  it('waiting user effect to ', async () => {
    const props = {
      id: item.id,
      imageUrl: item.product.images.primary.thumbnail,
      rate: item.rate,
      price: item.price,
      translationsKey: '61af5cbf97e964ccc50e2c31'
    };
    await act(async () => {
      render(
        <BrowserRouter>
          <SimilarProductsItem {...props} />
        </BrowserRouter>
      );
    });
    waitForElement(() => {
      expect(getImage).toHaveBeenCalled();
    });
  });
});

describe('ImagesConstructor component tests', () => {
  it('renders h1', async () => {
    waitForElement(() => {
      expect(screen.getByText(/Створи сам/i)).toBeInTheDocument();
    });
  });

  it('it can change selected item', () => {
    waitForElement(() => {
      const select = screen.getByTestId('model');
      expect(select).toBeInTheDocument();
    });
  });

  it('modal', () => {
    waitForElement(() => {
      const button = screen.getAllByRole('button')[0];
      fireEvent.click(button);
      expect(<Modal />).toBeTruthy();
    });
  });
});

test('renders learn react link', async () => {
    const { getByText } = render(
        <FirebaseProvider>
            <AuthProvider>
                <SendBirdProvider>
                    <Router>
                        <App />
                    </Router>
                </SendBirdProvider>
            </AuthProvider>
        </FirebaseProvider>
    )
    const lazyElement = await waitForElement(() =>
        getByText(/SendBird Messenger/i)
    )
    expect(lazyElement).toBeInTheDocument()
})

describe("TutorialPage", () => {
  afterEach(cleanup);

  it("renders TutorialPage", async () => {
    const page = render(
      <MockedProvider addTypename={false}>
        <TutorialPage theme={lightTheme} />
      </MockedProvider>
    );
    await waitForElement(() =>
      page.getByText(/Here to help you create better recycling habits./i)
    );
    await waitForElement(() => page.getByText(/Next/i));
  });

  it("fires next button", async () => {
    const page = render(
      <MockedProvider addTypename={false}>
        <TutorialPage theme={lightTheme} />
      </MockedProvider>
    );

    fireEvent.click(page.getByText(/Next/i));
    page.debug();

    expect(
      page.getByText(
        /Let us use your location to help you properly dispose of the item./i
      )
    ).toBeTruthy();
  });
});

describe("LocationsPage", () => {
  afterEach(cleanup);

  it("renders LocationsPage and blurb, and queries are used without error", async () => {
    const page = render(
      <MockedProvider
        mocks={(mocksQueryLocations, mocksQueryPostal, mocksQueryZip)}
        addTypename={false}
      >
        <LocationsPage location={mockUserLocation} />
      </MockedProvider>
    );
    page.debug();
    await waitForElement(() => page.getByText(/Where can I bring this?/i));
  });
});

describe("HomePage", () => {
  afterEach(cleanup);

  it("renders HomePage and GridCards based on description of mock Category List", async () => {
    const page = render(
      <MockedProvider mocks={mocksQuery} addTypename={false}>
        <HomePage />
      </MockedProvider>
    );
    await waitForElement(() => page.getByText(/first family/i));
    await waitForElement(() => page.getByText(/second family/i));
  });

  it("renders HomePage and input field with placeholder text 'enter search term'", async () => {
    const page = render(
      <MockedProvider mocks={mocksQuery} addTypename={false}>
        <HomePage />
      </MockedProvider>
    );
    await waitForElement(() => page.getByPlaceholderText(/enter search term/i));
  });

  //NO TEXT CHANGES ON FIRED EVENTS
});

describe("CategoryPage", () => {
  const cache = new InMemoryCache();

  afterEach(cleanup);

  it("renders CategoryPage and title based on description of mock Category 1(using params argument)", async () => {
    const page = render(
      <MockedProvider cache={cache} addTypename={false}>
        <CategoryPage categories={mockCategoryList} materials={mockMaterials} />
      </MockedProvider>
    );
    page.debug();
    await waitForElement(() => page.getByText(/first family/i));
  });

  it("renders CategoryPage and, after iterating over mocked catergory 1 material_ids, it renders grid cards with names of mocked material instances 1, 2 and 4", async () => {
    const page = render(
      <MockedProvider cache={cache} addTypename={false}>
        <CategoryPage categories={mockCategoryList} materials={mockMaterials} />
      </MockedProvider>
    );
    page.debug();
    await waitForElement(() => page.getByText(/first material/i));
    await waitForElement(() => page.getByText(/second material/i));
    await waitForElement(() => page.getByText(/fourth material/i));
  });
});

describe("State is resetet when the prop 'reset' is provided", () => {
    test("state resets for single file button", () => {
        rerenderFunc(<UploadButton onChange={(e) => e} text="No file selected" reset></UploadButton>);
        waitForElement(() => {
            expect(queryByTestId(uploadButton, "upload-button-label").textContent).toBe("No file selected");
        });
    });
    test("state resets for multiple file button", () => {

    });
});

describe("Upload an element to a single file button", () => {
    test("label changes accordingly with the name of the file uploaded in single file button", () => {
        let filename = "test.png";
        let mockFile = new File(["test"], filename, {type: "image/png"});

        Object.defineProperty(input, "files", {
            value: [mockFile]
        });
        fireEvent.change(input);
      waitForElement(() => {
        expect(queryByTestId(uploadButton, "upload-button-label").textContent).toBe(filename);
      });
    });


    test("label changes accordingly with the name of the file uploaded in multiple file button", () => {
        let mockFile1 = new File(["test1"], "filename1.png", {type: "image/png"});
        let mockFile2 = new File(["test2"], "filename2.png", {type: "image/png"});
        let mockFile3 = new File(["test3"], "filename3.png", {type: "image/png"});

        let myRef = React.createRef();
        rerenderFunc(<UploadButton text="No images" ref={myRef} onChange={(e) => e} multiple></UploadButton>);
        waitForElement(() => {
            Object.defineProperty(input, "files", {
                value: [mockFile1, mockFile2, mockFile3]
            });
            fireEvent.change(input);
            expect(queryByTestId(uploadButton, "upload-button-label").textContent).toBe("3 files selected");
        });
    });
});

describe("MyMap Component", () => {

    let wrapper;
    let wrapperb;
    beforeEach(() => {
        const props = {
            center: [[43.360976539, -5.831938919]],
            positions: []
        };
        wrapper = myMap(props.center, props.positions);
        wrapperb = <MyMap center={props.center} positions={props.positions}></MyMap>;
    });
    
    test("Component renders correctly", () => {
        waitForElement(() => {
            expect(wrapperb.prop("positions")).not.toBeNull();
            expect(wrapperb.prop("center")).not.toBeNull();
            expect(queryByTestId(wrapper, "mymap-container")).not.toBeNull();
            expect(queryByTestId(wrapper, "mymap-map")).not.toBeNull();
            expect(queryByTestId(wrapper, "mymap-tilelayer")).not.toBeNull();
            expect(queryByTestId(wrapper, "mymap-polyline")).not.toBeNull();
        });
    });

});

describe("Behaviour testing", () => {
  test("friends are selected correctly", () => {
    fireEvent.click(screen.queryByTestId("modalButton"));
    waitForElement(() => {
     expect(screen.queryByTestId("card0")).toBeInTheDocument();
    fireEvent.click(screen.queryByTestId("card0"));
    expect(
      screen.queryByTestId("share-route-share-button-numbers").textContent
    ).toBe("1");
    fireEvent.click(screen.queryByTestId("card1"));
    expect(
      screen.queryByTestId("share-route-share-button-numbers").textContent
    ).toBe("2");
    //Deselect
    fireEvent.click(screen.queryByTestId("card0"));
    expect(
      screen.queryByTestId("share-route-share-button-numbers").textContent
    ).toBe("1");
    fireEvent.click(screen.queryByTestId("card1"));
    expect(
      screen.queryByTestId("share-route-share-button-numbers")
    ).not.toBeInTheDocument();

    });
      });
});

describe("Everything renders correctly", () => {
  test("modal opens up", () => {
    expect(screen.queryByText("modalTitle")).not.toBeInTheDocument();
    expect(screen.queryByTestId("card0")).not.toBeInTheDocument();
    expect(screen.queryByTestId("card1")).not.toBeInTheDocument();

    expect(
      screen.queryByTestId("friend-list-container")
    ).not.toBeInTheDocument();
    expect(screen.queryByTestId("modalCancelButton")).not.toBeInTheDocument();
    fireEvent.click(screen.queryByText("Share"));
    waitForElement(() => {

    expect(screen.queryByText("Pick some friends")).toBeInTheDocument();
    expect(screen.queryByTestId("friend-list-container")).toBeInTheDocument();
    expect(screen.queryByTestId("modalCancelButton")).toBeInTheDocument();
    expect(screen.queryByTestId("card0")).toBeInTheDocument();
    expect(screen.queryByTestId("card1")).toBeInTheDocument();
});
      });
});

describe("The buttons function the way they should", () => {
  test("delete button executes the function passed as a parameter", () => {
    let mock = jest.fn();
    let deleteButton = screen.queryByTestId("route-details-button-delete");
    rerenderFunc(<RouteDetails deleteRoute={mock}></RouteDetails>);
    waitForElement(() => {
      fireEvent.click(deleteButton);
      expect(mock).toBeCalled();
    });
  });
});

describe("The component is rendered correctly", () => {
  test("all the information is rendered correctly", () => {
    waitForElement(() => {
      expect(screen.queryByTestId("route-details-description")).not.toBeNull();
      expect(screen.queryByTestId("route-details-button-share")).not.toBeNull();
      expect(
        screen.queryByTestId("route-details-button-delete")
      ).not.toBeNull();
      expect(screen.queryByTestId("route-details-image")).not.toBeNull();
    });
  });
});

describe("Dashboard Component", () => {
  let wrapper;
  const mockFn = jest.fn();
  beforeEach(() => {
    const initState = {
      route: {},
      auth: {},
      user: {},
      control: {},
    };
    const store = testStore(rootReducer, initState);
    const { container } = render(
      <Provider store={store}>
        <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
          <HashRouter>
            <Dashboard
              routes={[]}
              selectedRoute={""}
              showRoute={() => mockFn}
            ></Dashboard>
          </HashRouter>
        </IntlProvider>
      </Provider>
    );
    wrapper = container;
  });

  test("renders correctly", () => {
    waitForElement(() => {
      expect(queryByTestId(wrapper, "dashboard-container")).not.toBeNull();
    });
  });
});

describe("Notifications component", () => {

    let component;

    beforeAll(() => {
        const {container, rerender} = render(<IntlProvider messages={locales["en"]} locale="en"><Notifications></Notifications></IntlProvider>);
        component = container;
    });

    describe("renders correctly", () => {
        test("div", () => {
            expect(queryByTestId(component, "notifications-div")).not.toBeNull();
        });
        test("list", () => {
            waitForElement(() => {
                expect(queryByTestId(component, "notifications-list")).not.toBeNull();
            });
        });
    });
});

describe("Notification component", () => {

    const mockNot = {
        text: "Esto es una prueba"
    };

    let component;

    beforeEach(() => {
        const {container, rerender} = render(<Notification notification={mockNot}></Notification>);
        component = container;
    });

    describe("renders correctly", () => {
        test("card", () => {
            expect(component).not.toBe(null);
            expect(queryByTestId(component, "notification-card")).not.toBe(null);
        });
    });

    test("content", () => {
        waitForElement(() => {
            expect(queryByTestId(component, "notification-card-text").innerHTML).toBe(mockNot.text);
        });
    });
});

describe("CommentList component", () => {
    let wrapper;
    beforeEach(() => {
        const comment =  <Comment author="alvarogarinf" text="This is a test" date="2020-4-29"></Comment>;
        const { container } = render(
                <CommentList comments={[comment]}></CommentList>
        );
        wrapper = container;
    });

    describe("renders correctly", () => {
        test("comments", () => {
            waitForElement(() => {
                expect(queryByTestId(wrapper, "comments")).not.toBeNull();
            });
        });

    });

});

describe("Buttons are rendered with different settings", () => {
  test("render save button but not cancel button", () => {
    rerenderFunc(
      <ViadeModal title="Title" onOpen={mock} saveText="Save"></ViadeModal>
    );
    waitForElement(() => {
      fireEvent.click(queryByTestId(modal, "modalButton"));
      waitForDomChange(() => {
        expect(queryByTestId(modal, "modalSaveButton")).not.toBeNull();
        expect(queryByTestId(modal, "modalCancelButton")).toBeNull();
        expect(queryByTestId(modal, "modalSaveButton")).toBe("Save");
      });
    });
  });

  test("render cancel button but not save button", () => {
    rerenderFunc(
      <ViadeModal title="Title" onOpen={mock} CancelText="Cancel"></ViadeModal>
    );
    waitForElement(() => {
      fireEvent.click(queryByTestId(modal, "modalButton"));
      waitForDomChange(() => {
        expect(queryByTestId(modal, "modalCancelButton")).not.toBeNull();
        expect(queryByTestId(modal, "modalSaveButton")).toBeNull();
        expect(queryByTestId(modal, "modalCancelButton")).toBe("Cancel");
      });
    });
  });
});

describe("Comment component", () => {
    let wrapper;
    beforeEach(() => {
        const { container } = render(
                <Comment author="alvarogarinf" text="This is a test" date="2020-4-29"></Comment>
        );
        wrapper = container;
    });

    describe("renders correctly", () => {
        test("comment", () => {
            waitForElement(() => {
                expect(queryByTestId(wrapper, "comment")).not.toBeNull();
            });
        });

        test("date", () => {
            waitForElement(() => {
                expect(queryByTestId(wrapper, "date")).not.toBeNull();
            });
        });

        test("text", () => {
            waitForElement(() => {
                expect(queryByTestId(wrapper, "text")).not.toBeNull();
            });
        });

        test("text", () => {
            waitForElement(() => {
                expect(queryByTestId(wrapper, "text")).not.toBeNull();
            });
        });

    });

});

describe("login component", () => {
  test("renders the header correctly", async () => {
    const text = "Login";
    waitForElement(() => {
      expect(queryByTestId(rendered, "login-header")).toEqual("Login");
      expect(queryByTestId(rendered, "login-header")).not.toBeNull();
    });
  });

  test("pop up opens up", () => {
    waitForElement(() => {
      global.open = jest.fn();
      fireEvent.click(queryByText(rendered, "Login here!"));
      expect(global.open).toBeCalled();
    });
  });
});

describe("Footer component", () => {
  let wrapper;
  beforeEach(() => {
    const { container } = render(
      <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
        <Footer></Footer>
      </IntlProvider>
    );
    wrapper = container;
  });

  describe("renders correctly", () => {
    test("footer", () => {
      waitForElement(() => {
        expect(queryByTestId(wrapper, "footer")).toBeNull();
      });
    });

    test("team", () => {
      waitForElement(() => {
        expect(queryByTestId(wrapper, "footer-team")).toBeNull();
      });
    });

    test("github", () => {
      waitForElement(() => {
        expect(queryByTestId(wrapper, "footer-github")).not.toBeNull();
      });
    });

    test("react", () => {
      waitForElement(() => {
        expect(queryByTestId(wrapper, "footer-react")).not.toBeNull();
      });
    });
  });
});

describe("Everything is rendered correctly", () => {
  test("routes are rendered", () => {
    waitForElement(() => {
      expect(queryByTestId(myRoutes, "myRoutes-route-list")).not.toBeNull();
      expect(queryByTestId(myRoutes, "myRoutes-route-details")).not.toBeNull();
    });
  });
});

test('6) Username not exist', async () => {
  var { getByText } = render(<App />);
  fireEvent.change(screen.getByPlaceholderText('Search username'), { target: { value: '' } })
  userEvent.click(getByText('Search'))
  await waitForElement(() => getByText("Username: '' is not found."));
});

test('4) Username search bar get the name of the user', async () => {
  var { getByText } = render(<App />);

  fireEvent.change(screen.getByPlaceholderText('Search username'), { target: { value: 'ntzi' } })
  userEvent.click(getByText('Search'))
  await waitForElement(() => getByText('Nikos Tziralis'));
});

describe('MyCertificates test', () => {
  it('should render two certificates', async () => {
    render(
      <MockedProvider mocks={[certificateMock1]} addTypename={false}>
        <Router>
          <MyCertificates />
        </Router>
      </MockedProvider>
    );

    await new Promise((resolve) => setTimeout(resolve, 0));
    const element = screen.getAllByText(/XYQ332765/i);

    expect(element).toHaveLength(2);
  });
  it('should render title', async () => {
    render(
      <MockedProvider mocks={[certificateMock2]} addTypename={false}>
        <Router>
          <MyCertificates />
        </Router>
      </MockedProvider>
    );

    await new Promise((resolve) => setTimeout(resolve, 0));
    const element = screen.getByText(/certificate.emptyTitle/i);

    expect(element).toBeInTheDocument();
    cleanup();
  });
  it('should change page', async () => {
    render(
      <MockedProvider mocks={[certificateMock3]} addTypename={false}>
        <Router>
          <MyCertificates />
        </Router>
      </MockedProvider>
    );

    await new Promise((resolve) => setTimeout(resolve, 0));
    const nextPageButton = document.querySelector('[aria-label="Go to page 2"]');
    fireEvent.click(nextPageButton);

    waitForElement(() => {
      expect(document.querySelector('[aria-current="true"]')).toHaveTextContent('2');
    });
  });
});