fosstodon.org is one of the many independent Mastodon servers you can use to participate in the fediverse.
Fosstodon is an invite only Mastodon instance that is open to those who are interested in technology; particularly free & open source software. If you wish to join, contact us for an invite.

Administered by:

Server stats:

8.6K
active users

#webtestrunner

0 posts0 participants0 posts today
Sven<p>Unit testing a game, is it even possible? 🕹️🟢 Let's try with <a href="https://toot.berlin/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a>, live now on <a href="https://www.twitch.tv/noyainrain" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">twitch.tv/noyainrain</span><span class="invisible"></span></a> 😊 <a href="https://toot.berlin/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TypeScript</span></a> <a href="https://toot.berlin/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://toot.berlin/tags/Phaser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Phaser</span></a> <a href="https://toot.berlin/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenSource</span></a> <a href="https://toot.berlin/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a></p>
Doug Parker 🕸️<p>Turns out, not a <a href="https://techhub.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Chrome</span></a> bug instead a <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a> / <a href="https://techhub.social/tags/Puppeteer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Puppeteer</span></a> bug. Apparently concurrent tests run multiple tabs in the same window by default. This means only one page is visible and pages in the background don't update consistently, meaning `requestAnimationFrame` just doesn't get called sometimes.</p><p><a href="https://github.com/modernweb-dev/web/issues/2588" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/modernweb-dev/web/i</span><span class="invisible">ssues/2588</span></a></p><p>This is fixable by giving each test its own window, so every test is always visible.</p><p>Definitely not an obvious workaround though, so hopefully this is something which can be fixed by default.</p>
Doug Parker 🕸️<p>Pretty convinced I've got a Chrome bug on my hands here at this point.</p><p>Took all night, but I was able to narrow down the test cases to two files &lt;15 lines each failing on latest <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a> and <a href="https://techhub.social/tags/Puppeteer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Puppeteer</span></a>.</p><p>Last step is to strip <a href="https://techhub.social/tags/Jasmine" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Jasmine</span></a> from this and see if I can reproduce similar behavior with `setTimeout`, then file the bug.</p>
Doug Parker 🕸️<p>I've tried to get a minimal reproduction but this _literally_ takes at least 6 tests across 2 different files to replicate. Disabling any _one_ test fixes all of them. No shared state between them which I can find. The two files *should* be completely isolated from each other anyways (using <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a>).</p><p>I'm completely baffled here.</p>
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://mastodon.social/@westbrook" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>westbrook</span></a></span> I *think* I got all the options. I don't see anything else in your example which looks related.</p><p><a href="https://github.com/dgp1130/composite-weak-map/commit/49c09375ec9550e9a0328b0ef8250783f2407c40#diff-24d782e02f46a1eb18aed719d1c73354c23a5702d6e324a6163f6d90a6965cad" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/dgp1130/composite-w</span><span class="invisible">eak-map/commit/49c09375ec9550e9a0328b0ef8250783f2407c40#diff-24d782e02f46a1eb18aed719d1c73354c23a5702d6e324a6163f6d90a6965cad</span></a></p><p>Even outside <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a> I can't get it to work. Just running the <a href="https://techhub.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Chrome</span></a> binary directly with those flags doesn't work either. There must be some other condition for `window.gc` I'm not finding...</p>
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://mastodon.social/@westbrook" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>westbrook</span></a></span> Ooh, that's very cool. I was not aware of that API.</p><p>I'm trying to copy what you did there and was able to spawn <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a> with `measureUserAgentSpecificMemory`, but for the life of me can't get `window.gc` to be defined. I'm setting the `--expose-gc` flag just like you seem to, but I can't get Chrome to start with it. Is there some other special incantation I need to do this?</p><p><a href="https://github.com/adobe/spectrum-web-components/blob/e5a1a61bae448005abab9e6aa1a4be5c3efa3372/web-test-runner.utils.js#L37" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/adobe/spectrum-web-</span><span class="invisible">components/blob/e5a1a61bae448005abab9e6aa1a4be5c3efa3372/web-test-runner.utils.js#L37</span></a></p>
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://mastodon.social/@VamptVo" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>VamptVo</span></a></span> Sounds like you're looking for <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a>?</p><p><a href="https://modern-web.dev/docs/test-runner/overview/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">modern-web.dev/docs/test-runne</span><span class="invisible">r/overview/</span></a></p><p><a href="https://techhub.social/tags/ModernWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ModernWeb</span></a></p>
westbrook<p>Building on this area...</p><p>Testing is like a magic power, but lean into magic realism over magic fantasy for better results: <a href="https://dev.to/westbrook/testing-with-js-is-like-magic-but-is-it-science-23f8" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dev.to/westbrook/testing-with-</span><span class="invisible">js-is-like-magic-but-is-it-science-23f8</span></a></p><p>Now to get to work on the next installation!</p><p><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> <a href="https://mastodon.social/tags/webTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webTestRunner</span></a> <a href="https://mastodon.social/tags/testing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testing</span></a></p>
Doug Parker 🕸️<p><a href="https://techhub.social/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Angular</span></a> announcement: We're moving Angular to <a href="https://techhub.social/tags/Jest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Jest</span></a> and <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a>.</p><p>We've seen a lot of movement in the web testing ecosystem towards Jest and want to make it more available for <a href="https://techhub.social/tags/AngularCLI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AngularCLI</span></a> users.</p><p>We've also been particular impressed with Web Test Runner and are looking forward to bringing it into the Angular ecosystem as well.</p><p>Check out the <a href="https://techhub.social/tags/AngularBlog" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AngularBlog</span></a> for all the details:</p><p><a href="https://medium.com/angular-blog/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">medium.com/angular-blog/moving</span><span class="invisible">-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca</span></a></p>
westbrook<p>So, if you're into <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a>...</p><p>And, more importantly <a href="https://mastodon.social/tags/testing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testing</span></a> them...</p><p>And, most importantly doing it with <a href="https://mastodon.social/tags/webTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webTestRunner</span></a>... </p><p>Then you might be into the new post I wrote: <a href="https://dev.to/westbrook/testing-web-components-with-webtest-runner-51g6" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dev.to/westbrook/testing-web-c</span><span class="invisible">omponents-with-webtest-runner-51g6</span></a></p><p>Looking to make this part of series where I touch on a whole bunch of extended techniques and practices that I've found useful in this area, so share your thoughts in the comments or in response this toot.</p><p>Learn more about @​web/test-runner here: <a href="https://modern-web.dev/docs/test-runner/overview/" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">modern-web.dev/docs/test-runne</span><span class="invisible">r/overview/</span></a></p>
Sasha Firsov<p>@web/test-runner and StoryBook are great tools to work with in front-end. Till now the another handy tool was not available in this stack - MSW mocking. </p><p>It took a bit of trickery to baptize MSW into es6 modules. If you want to use MSW for <a href="https://fosstodon.org/tags/webcomponents" class="mention hashtag" rel="tag">#<span>webcomponents</span></a> testing, take a look</p><p><a href="https://fosstodon.org/tags/modernweb" class="mention hashtag" rel="tag">#<span>modernweb</span></a> <a href="https://fosstodon.org/tags/webtestrunner" class="mention hashtag" rel="tag">#<span>webtestrunner</span></a> <a href="https://fosstodon.org/tags/msw" class="mention hashtag" rel="tag">#<span>msw</span></a> </p><p><a href="https://blog.firsov.net/2023/03/how-to-integrate-msw-queries-mocking.html" target="_blank" rel="nofollow noopener" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.firsov.net/2023/03/how-to</span><span class="invisible">-integrate-msw-queries-mocking.html</span></a></p>
Doug Parker 🕸️<p>So I've been doing a bit of research into <a href="https://techhub.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://techhub.social/tags/UnitTesting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UnitTesting</span></a> <a href="https://techhub.social/tags/tooling" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tooling</span></a> (<a href="https://techhub.social/tags/Jest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Jest</span></a>, <a href="https://techhub.social/tags/Vitest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vitest</span></a>, <a href="https://techhub.social/tags/Jasmine" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Jasmine</span></a>, <a href="https://techhub.social/tags/Karma" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Karma</span></a>, <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a>, ...).</p><p>I'm curious if there's any interest in a blog post on some of my takeaways about aspects like:</p><p>* Test runners vs test frameworks.<br>* Browser-based runners vs Node-based runners.<br>* Changes in the ecosystem.<br>* Future directions of JS unit testing.<br>* ...</p>
Doug Parker 🕸️<p><span class="h-card"><a href="https://hachyderm.io/@eliajf" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>eliajf</span></a></span> I was mostly looking into test runners moreso than test frameworks.</p><p><a href="https://techhub.social/tags/Jest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Jest</span></a> is still dominant by a huge amount, but <a href="https://techhub.social/tags/WebTestRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebTestRunner</span></a> and <a href="https://techhub.social/tags/JasmineBrowserRunner" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JasmineBrowserRunner</span></a> looked interesting to me. I've had good experiences with WTR in the past, but haven't tried Jasmine's browser runner.</p><p><a href="https://modern-web.dev/docs/test-runner/overview/" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">modern-web.dev/docs/test-runne</span><span class="invisible">r/overview/</span></a><br><a href="https://www.npmjs.com/package/jasmine-browser-runner" rel="nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">npmjs.com/package/jasmine-brow</span><span class="invisible">ser-runner</span></a></p>