Hello everyone, following up with my <recent annou...

# feed

[ahmadhamwi999]

Hello everyone, following up with my recent announcement of lazy-pagination-compose, I'm happy to share that I've also added support for a PaginatedLazyRow along with the original PaginatedLazyColumn

Some abstraction behind the scenes is happening which is what enabling the support to the lazy lists, while still keeping the same simple APIs.

Also the same tests have been abstracted away and reapplied on the new composable.

Huge respect to the authors of the Lazy lists in Compose, their code design enables such robust abstraction on top of the concrete lazy lists.

Also big thanks to the people who are starring and supporting the repository 🙏🏻

https://github.com/Ahmad-Hamwi/lazy-pagination-compose/

Screen Recording 2024-08-09 at 1.26.20 AM.mov

[Artem Kobzar]

Do you have plans to add the web target?

[ahmadhamwi999]

Yes I do, hopefully soon

[ahmadhamwi999]

Big thanks to TomislavMladenov for the PR that added the wasm js target in this PR

I'll soon be publishing the wasm js artifacts

[Artem Kobzar]

There is only JS target. It would nice also to add wasmJs (not much harder that this PR)

[ahmadhamwi999]

Oh my bad, got it, I'll be checking the wasm target too.

[ahmadhamwi999]

I'll also need to see how I can run the UI tests targeting JS and wasmJs, do you have any clue what are the gradle commands for them?

[Artem Kobzar]

@Ilya Goncharov [JB] I believe Karma should handle it right?

[Ilya Goncharov [JB]]

By default lines

js {
    browser()
}

should add test run.

[ahmadhamwi999]

Thank you, I believe same goes for wasmJs.

If I'm encountering errors running my UI tests on the js and wasmJs targets, where do I seek help?

[Ilya Goncharov [JB]]

You can ask here.
As for wasm-js we have bugs for versions earlier than 2.0.20 (https://kotlinlang.slack.com/archives/CDFP59223/p1722925272045489)
They can be workarounded, but actually you can check if it works for you with 2.0.20-RC version

[ahmadhamwi999]

Hi @Artem Kobzar, I've published the js and wasm js targets 🎉

As for the testing part I encountered some errors and I may ask for help soon.

[Artem Kobzar]

Sure, feel free to ask any question.

[ahmadhamwi999]

wasm tests are now working for me after upgrading to 2.0.20-RC using wasmJsBrowserTest, thank you for the heads up @Ilya Goncharov [JB]

Running the tests using jsBrowserTest is failing, saying:

ReferenceError: org_jetbrains_skia_Surface__1nMakeRasterN32Premul is not defined

A minimal reproducing code is under js-testing branch in my repo

And here's the full logs after cleaning the project:

JsBrowserTest-logs.txt

[Artem Kobzar]

@Ilya Goncharov [JB] do we use some separate version of index.html for tests?

[Ilya Goncharov [JB]]

Yes, JS setup is a bit harder, so it is recommended to use wasm for compose web.
You need to add a bit configuration to test framework.
Initially add configuration to build.gradle.kts

js(IR) {
            browser {
                testTask {
                    useKarma {
                        useChromeHeadless()
                        useConfigDirectory(project.projectDir.resolve("karma.config.d").resolve("js"))
                    }
                }
            } 
}

Then add js file (with any name, for example index.js) to karma.config.d/js

const path = require("path");

const basePath = config.basePath;
const wasmPath = path.resolve(basePath, "kotlin")

config.files = [
    path.resolve(wasmPath, "skiko.js"),
    {pattern: path.resolve(wasmPath, "skiko.wasm"), included: false, served: true, watched: false},
].concat(config.files);

And you need special callback for JS tests to work

@OptIn(ExperimentalTestApi::class)
    @Test
    fun firstPageProgressIndicatorShownInitially() {
        onWasmReady {
            runComposeUiTest {
                setContent {
                    PaginatedLazyColumn(
                        paginationState = rememberPaginationState<Int, String>(
                            initialPageKey = 1,
                            onRequestPage = {}
                        ),
                        firstPageProgressIndicator = {
                            Box(
                                modifier = Modifier.testTag("indicator")
                            )
                        },
                    ) {}
                }

                onNodeWithTag("indicator").assertExists()
            }
        }
    }

expect fun onWasmReady(arg: () -> Unit)

// actual js
actual external fun onWasmReady(arg: () -> Unit)

// actual others
actual fun onWasmReady(arg: () -> Unit) {
    arg()
}

[ahmadhamwi999]

Thank you for your detailed response 🙏🏻