User testing and debugging

[Mte90]

Question

So I am trying to use https://nicegui.io/documentation/user but with this code something doesn't work.

login.py:

	from fastapi.responses import RedirectResponse
	from nicegui import ui

    @ui.page("/login")
    async def login() -> RedirectResponse | None:
        async def try_login() -> None:
            ui.notify('logged')

        if await is_logged():
            ui.navigate.to("/dashboard")

        with ui.card().classes("p-8 border-none flex flex-col items-center shadow-none absolute-center"):
            ui.image("../static/images/logo-dark.png").classes("w-40")
            username = (
                ui.input("Username")
                .classes("w-full")
                .props('input-class="font-semibold"')
                .on("keydown.enter", try_login)
            )
            password = (
                ui.input("Password", password=True, password_toggle_button=True)
                .classes("w-full")
                .props('input-class="font-semibold"')
                .on("keydown.enter", try_login)
            )
            ui.button("Log in", on_click=try_login).classes("font-extrabold")

async def test_login(user: User) -> None:
    startup()
    await user.open('/')
    # print(user.client.layout)
    user.find('Username').type('admin')
    user.find('Password').type('password').trigger('keydown.enter')

The tests stops at the first find:

E               AssertionError: expected to find at least one element with marker=Username or content=Username on the page:
E               q-layout
E                q-page-container
E                 q-page
E                  div

I tried to add a print in the login.py but is not getting printed on pytest also with -s parameter so maybe it is executed in another thread?
Anyway I think that the login code get blocked at the is_logged function that is:

async def is_logged():
    return app.storage.user.get('user_id', False)

But there is no error about what is happening, maybe there are no mocking functions for the app module?

[Mte90]

Also with:

from typing import Callable
import time


async def test_login(create_user: Callable[[], User]) -> None:
    startup()
    user = create_user()

And the same test code I am getting the same issue.

[Mte90]

On

nicegui/tests/test_user_simulation.py

Line 82 in 5032ca4

@pytest.mark.parametrize('storage_builder', [lambda: app.storage.browser, lambda: app.storage.user])

I see that for storage is requested something probably as it is a simulation and we are talking about cookie or something else but the doc doesn't mention anything about it.
In my case also the code should just return that is not logged because the data is not found...

@pytest.mark.parametrize('storage_builder', [lambda: app.storage.user])
async def test_login(user: User, storage_builder: Callable[[], Dict]) -> None:
    startup()
    storage_builder()
    await user.open('/')
    # print(user.client.layout)
    user.find('Username').type('admin')
    user.find('Password').type('password').trigger('keydown.enter')
    time.sleep(2)
    await user.should_see('Tasks')

I get app.storage.user can only be used with page builder functions (https://nicegui.io/documentation/page)

[rodja]

What is sync_and_async_middleware? Is it needed to reproduce the behaviour? What else do you call in setup? There is quite some code missing to reproduce your findings.
Can you, please, create a minimum reproducible example? This would allow us and the community to help more efficiently.

[Mte90]

fixed the code, about startup it is like in nicegui documentation is just loading the various classes of all the endpoints.

def startup():
    from .login import Login  # noqa
    Login()

I just extracted the login function from that class in my code.

[rodja]

Sorry, but what is the minimal example for your issue? Can you post a super compact version which only contains the crucial parts which led to the issue you experience.

[Mte90]

The minimal example:

from nicegui.testing import User
from nicegui import ui, app
async def get_userid():
    return app.storage.user.get('user_id', False)

async def test_minimal_login(user: User) -> None:
    from fastapi.responses import RedirectResponse

    @ui.page("/")
    async def index():
        if not await get_userid():
            ui.navigate.to("/login")

    @ui.page("/login")
    async def login() -> RedirectResponse | None:
        async def try_login() -> None:
            ui.notify('logged')

        if await get_userid():
            ui.navigate.to("/dashboard")

        with ui.card().classes("p-8 border-none flex flex-col items-center shadow-none absolute-center"):
            ui.image("../static/images/logo-dark.png").classes("w-40")
            username = (
                ui.input("Username")
                .classes("w-full")
                .props('input-class="font-semibold"')
                .on("keydown.enter", try_login)
            )
            password = (
                ui.input("Password", password=True, password_toggle_button=True)
                .classes("w-full")
                .props('input-class="font-semibold"')
                .on("keydown.enter", try_login)
            )
            ui.button("Log in", on_click=try_login).classes("font-extrabold")


    await user.open('/')
    user.find('Username').type('admin')

With this minimal example I was able to see that the ui.navigate.to is not executed, so if in the test you change the url with login it works.

Changing the ui.navigate.to to RedirectResponse instead works in the tests.
So seems that doesn't make so much sense use ui.navigate.to if in any case you need to do a RedirectResponse to be able to check that in tests.

At same time if I use RedirectResponse when I run nicegui there is no redirect so ui.navigate.to is required but in this way with tests doesn't work.
Maybe we need a mock function for that method?

[rodja]

Thanks for trying to make the code minimal @Mte90. Still you have images, style definitions and more in the example which obscured the code. I boiled it down to this:

"""
Before running the test with pytest, install nicegui (pip install nicegui) 
and create a pytest.ini beside this file with the following content:

[pytest]
asyncio_mode = auto
"""
from nicegui import ui
from nicegui.testing import User
pytest_plugins = ['nicegui.testing.user_plugin']


def startup():
    @ui.page('/')
    def index() -> None:
        ui.label('Main Page')
        ui.navigate.to('/login')

    @ui.page('/login')
    def login() -> None:
        ui.input('Username')

async def test_navigate_to(user: User) -> None:
    startup()

    await user.open('/')
    # await user.should_see('Username')
    user.find('Username').type('admin')

if __name__ in ('__mp_main__', '__main__'):
    startup()
    ui.run()

The problem is quite obvious and can be seen if you run the file to actually start the server: when accessing / in the browser, you will shortly see "Main Page". Then the ui.navigate.to is executed which brings you to the /login page withthe input field.

Your test has used user.find which is not async and hence is not waiting for the page change. If you add await user.should_see('Username') after await user.open('/') the test passes.

[Mte90]

ahhh ok, probably improve the error message to understand the difference and the doc can be handy.

Be not able to print something it is not helpful, also the AssertionError doesn't print what is the page where it is but for debugging purpose I think that would helped me at the start of this issue.

[Mte90]

I am trying to understand what is not working in my code but not on the test but I am not able to find a way to print in pytest that works.

[Mte90]

minimal code:

async def test_navigate_to(user: User) -> None:
    @ui.page('/')
    def index() -> None:
        ui.label('Main Page')
        ui.navigate.to('/login')

    @ui.page('/login')
    def login() -> None:
        print(321)
        ui.input('Username')

    await user.open('/')
    # await user.should_see('Username')
    user.find('Username').type('admin')

In pytest with -s the 321 text is not printed, I tried also with logging to a file with no success. That code is executed?

[Mte90]

Reading from https://github.com/zauberzeug/nicegui/blob/main/nicegui/testing/user_plugin.py#L45 the code to test is executed separated.

async def test_navigate_to(user: User) -> None:
    @ui.page('/')
    def index() -> None:
        ui.label('Main Page')
        ui.navigate.to('/login')

    @ui.page('/login')
    def login() -> None:
        with open("/tmp/test", 'w') as f:
             f.write(username.value)
        print(321)
        ui.input('Username')

    await user.open('/')
    # await user.should_see('Username')
    user.find('Username').type('admin')

Also this code is not executed as the file in /tmp/test not exists.

[rodja]

Why do you still show examples without the await user.should_see? Have you tried

...
await user.open('/')
await user.should_see('Username')
user.find('Username').type('admin')