Can we get a live demo to assist in testing?

[quantuminformation]

Is your feature request related to a problem? Please describe. I need to test libs in edge 44 Describe the solution you'd like a link to avoid having to set up my own example Describe alternatives you've considered my minimal example fails on edge 44 but im not sure if its due to svelte navigator

[mefechoel]

An example for testing would be nice, I agree!

I'm not quite sure I understand what you mean though... What is edge 44? And what is your testing setup like? Could you explain your problem in more detail?

[mefechoel]

I wrote a little helper for a project of mine I tested with svelte-testing-library.

Some components weren't working because they relied on svelte-navigator's features. I rendered them in a memory router for the tests with a helper function, wrapping svelte-testing-library's render function:

// renderWithRouter.js
import { render } from '@testing-library/svelte';
import WrapRouter from './WrapRouter.svelte';

/**
 * Test-render a component, that relies on some of svelte-navigator's features,
 * inside a Router.
 *
 * @param component The component you want to wrap in a Router
 * @param componentProps The props you want to pass to it
 * @param routerOptions Futher configuration (`onNavigate`, `withRoute`, `initialPathname`)
 * @param options Options for testing library's `render` function
 */
const renderWithRouter = (
  component,
  componentProps,
  routerOptions,
  options,
) =>
  render(
    WrapRouter,
    { component, componentProps, ...routerOptions },
    options,
  );

export default renderWithRouter;

<!-- WrapRouter.svelte -->
<script>
  import { onDestroy } from 'svelte';
  import {
    Router,
    Route,
    createMemorySource,
    createHistory,
  } from 'svelte-navigator';

  /** The component you want to wrap in a Router */
  export let component;
  /** The props you want to pass to it */
  export let componentProps;
  /**
   * A callback you can use to check if a navigation has occurred.
   * It will be called with the new location and the action that lead
   * to the navigation.
   */
  export let onNavigate = () => {};
  /**
   * If true, the component will be wrapped in a Route component as well.
   * Some features of svelte-navigator can only be used inside a Route,
   * for example `useParams`.
   */
  export let withRoute = false;
  /** Supply an initial location to the Router */
  export let initialPathname = '/';

  const history = createHistory(createMemorySource(initialPathname));

  const unlisten = history.listen(onNavigate);

  onDestroy(unlisten);
</script>

<Router {history}>
  {#if withRoute}
    <Route path="*">
      <svelte:component this={component} {...componentProps} />
    </Route>
  {:else}
    <svelte:component this={component} {...componentProps} />
  {/if}
</Router>

Not sure if this is what you were looking for, but I'm sure it'll help someone.

[quantuminformation]

edge 44 is default browser in windows 10, before chromium versions

[mefechoel]

Ok, I thought they'd jumped straight from v18 to v79 with chromium...

How are you running your tests there? Or rather what setup are you looking for?

[quantuminformation]

I just need a non blank screen)

see https://github.com/dominikg/svite/issues/76

[quantuminformation]

fixed with

add vite.config.js

export default { esbuildTarget: "es2015" }

[mefechoel]

@quantuminformation is your issue resolved with this?

[quantuminformation]

Yeah it’s fine

On Sun, 11 Oct 2020 at 14:38, mefechoel notifications@github.com wrote:

@quantuminformation https://github.com/quantuminformation is your issue resolved with this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mefechoel/svelte-navigator/issues/17#issuecomment-706698867, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABU35STA3DCUUIQFYOY6DTSKGRODANCNFSM4SLWCHBA .

--

Kind regards

Nikos Katsikanis