Please enable JavaScript.

Coggle requires JavaScript to display documents.

svelte baby, sign up, validation, authentication, routing, client side…

- - - - consistent test results → we will mock the behavior
  - - - const firstCall = mockFn.mock.calls[0]; const body = firstCall[1]' expect (body).toEqual({ username''user1', esmil: 'user1@mail.com1, password: 'P4word' )}
      - we are
        
        rendering signup page
        
        filling in all the inputs
        
        clicking the submit button
        
        mocking the api call (axios.post)
        
        verifying data object
  - - - request payload : {username: a, email: "b", password : "c"}
- - - - getBy
      - findBy
      - queryBy
      - getAllBy
      - findAllBy
      - queryAllBy
- - - - add interceptor → mock service worker : https://mswjs.io/
      - we can mimic behavior of backend
      - add msw implementation
        
        install package → msw
  - - - let requestBody; const server = setupServer( rest.post("api/1.0/users, (req, res, ctx)_ => { requestBody = req.body; return res(ctx.status(200)); }) server.listen();
      - we will send an ok (status 200), when we make a request to this endpoint ("api/1.0/users")
      - when the endpoint receives a request → we will capture the request body (data object)
      - // ensure request is complete server.close() expect (requestBody).toEqual({ username''user1', esmil: 'user1@mail.com1, password: 'P4word' )}
- - - - npm run start-mem → to run in memory
        npm run start-stored → to store in work station
  - - - set up proxy in rollup.config.js
      - dev({ dirs: ["public"], host: "localhost", port: 9876, proxy: [{ from: "/api/*", to: "http://localhost:8080" }], }),
- - - - "Please check your email to activate account"
    - - it waits for one second → returns error
      - `expect(text).toBeInTheDocument();`
  - - - :check: "it does not displays account activation information after failing sign up request"
      - `return res(ctx.status(400));`
      - update signUpSucess = true upon successful request
  - - - await waitFor(()=> { expect(form).not.toBeInTheDocument(); })
      - test failed → use focus flag fit(" ... ")
        
        root cause was previous test ctx.status(400)
        
        → use xit("...") to exclude test
        
        solution is to change test order
- - - - render(SignUpPage); const usernameInput = screen.getByLabelText("Username"); const emailInput = screen.getByLabelText("E-mail"); const passwordInput = screen.getByLabelText("Password"); const passwordRepeatInput = screen.getByLabelText("Password Repeat"); await userEvent.type(usernameInput, "user1"); await userEvent.type(emailInput, "user1@mail.com"); await userEvent.type(passwordInput, "p4ssword"); await userEvent.type(passwordRepeatInput, "p4ssword");
    - - we will have a local state in this component (disabled) → state will be changed based on user actions
      - scope is limited to the component
      - update state based on input values
      - test and refactor
        
        refactor cycle is geared to enhance the implementation
        
        remove repetitions
        
        create reactive declaration → replace event function call
        
        $: disabled = password =! passwordRepeat;
        
        whenever either value changes → line of code will execute
        
        replace declared functions with inline assignment
        
        on:input="{(event) => passwordRepeat = event.target.value}
        
        bind input value to state variables
        
        bind:value={passwordRepeat}
    - - expect(button).toBeEnabled();
- - - - :check: "has user input"
        
        const renderResult = render(SignUpPage);
        
        render returns an object → document object
        e.g. containter.querySelector("input");
        
        render(SignUpPage);
        const input = screen.getByLabelText("Username");
        expect(input).toBeInTheDocument();
      - :check: "has email input"
        
        render(SignUpPage);
        const input = screen.getByLabelText("Email");
        expect(input).toBeInTheDocument();
      - :check: "has password input"
        
        render(SignUpPage);
        const input = screen.getByLabelText("Password");
        expect(input).toBeInTheDocument();
      - :check: "has password type for password input"
        
        render(SignUpPage);
        const input = screen.getByLabelText("Password");
        expect(input.type).toBe("password");
        
        same with repeat
      - :check: "has signup button"
        
        render(SignUpPage);
        const button= screen.getByRole("button", { name: "Sign Up" });
        expect(button).toBeInTheDocument();
        
        :check: disables the button initially
        
        expect(button).toBeDisabled();
        
        button disable
      - import
        
        import SignUpPage from "./SignUpPage.svelte"; import { render, screen } from "@testing-library/svelte";
- - - - export let label, id, entry, help;
      - const { container } = render(Input, { help: "Error Message" });
- - - - it.each' field | message ${"username"} | ${"Username cannot be null"} ${"email"} | ${"E-mail cannot be null"}'
- - - - export let label, id, entry, help;
- - - - disabled={disabled || apiProgress}
- - - - server.use(generateValidationError(field, message)); // fill oot form await setup(); await userEvent.click(button); // use findBy query → has await functionatlity const validationError = await screen.findByText(message); const input = screen.getByLabelText(label); await userEvent.type(input, "updated"); expect(validationError).not.toBeInTheDocument();
- - - - we have parent child relationship → we will use event listening logic to pass input events to parent component
  - - - parent
        
        <Input id="username" label="Username" help={errors.username} bind:value={username} onChange={onChangeUsername}/>
      - childe
        
        <input bind:this={inputElement} class="{help ? inputClassInvaild : inputClass}" id="{id}" bind:value={value} on:input={onChange}/>
      - change to event listener →
        
        can event send to App.svelte → prop drilling
    - - import {onMount, createEventDispatcher} from "svelte";
      - const onChange = (e) => { dispatch("myCustomEvent", {value: e.target.value}) }
      - <Input id="username" label="Username" help={errors.username} bind:value={username} on:myCustomEvent={onChangeUsername}/>
      - cannot listen on App.svelte → <SignUpPage on:myCustomEvent{changeListener} />
        
        → use event forwarding
        
        <Input id="username" label="Username" help={errors.username} bind:value={username} on:myCustomEvent/>
    - - remove all bind:value
      - create event listeners for all inputs
      - remove reactive values for input variables
      - create single function
        
        need to create object to dynamically assign values
- - - - provide 400 response along with response body
      - within server REST handler → we will be providing response body
      - ctx.json({ validiationErrors: { username: "Username cannot be null", },
      - const usernameValidationError = await screen.findByText("Username cannot be null"); expect(usernameValidationError).not.toBeInTheDocument();
    - - if (error.reponse.status == 400) { errors = error.response.data.validationErrors; }
      - we are mapping the validationErrors object to the errors object of our component
- - - - server
        
        server.use( rest.post("/api/1.0/users/:id", (req, res, ctx) => { return res(ctx.status(401)); }) );
      - expect(spinner).toBeInTheDocument();
    - - await waitFor(()=> { expect(spinner).not.toBeInTheDocument(); })
  - - - const onClick = async()=> { apiProgress = true; try { await login(); } catch (e) { // catch error } apiProgress = false; }
  - - - update API call → credentials
  - - - expect(counter).toBe(1);
      - not workin!
- - - - even though functionality is magically working → should still test our shit
      - good questions!
        
        choose to test behavior in different components
    - - set up server endpoint to serve
      - expect(errorMessage).toBeInTheDocument();
- - - - set failMessage to undefined → email input
      - expect(errorMessage).not.toBeInTheDocument();
    - - expect(errorMessage).not.toBeInTheDocument();
- - - - const onChange = (e) => { const {id, value} = e.target; if (id==="email") { email = value; } else { password = value; } disabled = (email && password) ? false : true; }
- - - - text
      - disabled
      - apiProgress
      - onClick
    - - text is a child element
      - <ButtonWithProgress {disabled} {apiProgress} {onClick} > {$_("login")} </ButtonWithProgress>
      - use <slot></slot>
        
        slot is dynamically filled with child element
        
        <button class=" ..." disabled={disabled || apiProgress} on:click|preventDefault={onClick}> {#if apiProgress} <Spinner /> {/if} <slot></slot> </button>

routing

client-side routing

custom routing

need to configure rollup to serve spa

 !production &&
    dev({
        dirs: ["public"],
        host: "localhost",
        port: 9876,
        spa: "public/index.html",
        proxy: [{ from: "/api/*", to: "http://localhost:8080" }],
    }),

refactor

describe("Routing", () => {
    it.each`
        path         | pageTestId
        ${"/"}       | ${"home-page"}
        ${"/signup"} | ${"signup-page"}
    `("displays $pageTestId when path is $path", ({ path, pageTestId }) => {
        window.history.pushState({}, "", path);
        render(App);
        const page = screen.queryByTestId(pageTestId);
        expect(page).toBeInTheDocument();
    });

add two more pages

add conditional page display & refactor

let path = window.location.pathname;
...
<!-- page display -->
{#if path === "/"}        
    <HomePage/>        
{:else if path === "/signup"}
    <SignUpPage />             
{:else if path === "/login"}
    <LoginPage />             
{:else if path.startsWith("/user")}
    <UserPage />             
{/if}

navbar display

:check: has a link to homepage on Navbar

expect(link).toBeInTheDocument();
expect(link.getAttribute("href")).toBe("/");

refactor

 it.each`
    path         | queryName
    ${"/"}       | ${"Home"}
    ${"/signup"} | ${"Sign Up"}
    `("has a link to $queryName on Navbar", ({ path, queryName }) => {
        // open home page
        setup("/");
        const link = screen.queryByRole("link", { name: queryName });
        expect(link).toBeInTheDocument();
        expect(link.getAttribute("href")).toBe(path);
    });

try html5 routing

:check: "displays sign up page after clicking sign up link"

expect(page).toBeInTheDocument();        expect(window.location.pathname).toBe("/signup");

this is a working scenario in the browser → test is not able to reload the page run → screen.debug()

// nav bar click event 
const onClickNavBar = (e) => {

    path =     e.target.attributes.href.value;
    window.history.pushState({}, "", path);

}

implement for other links

it.each`
    initialPath  | clicking     | visible          | lastUrl
    ${"/"}       | ${"Sign Up"} | ${"signup-page"} | ${"/signup"}
    ${"/signup"} | ${"Home"}    | ${"home-page"}   | ${"/"}
    ${"/"}       | ${"Login"}   | ${"login-page"}  | ${"/login"}
`("displays $visible page after clicking $clicking link", async ({ initialPath, clicking, visible, lastUrl }) => {
    setup(initialPath);
    const link = screen.queryByRole("link", { name: clicking });
    await userevent.click(link);

    const page = screen.queryByTestId(visible);
    expect(page).toBeInTheDocument();
    expect(window.location.pathname).toBe(lastUrl);
});

- - - - we will test jest to ignore the specific path
      - don't need tor run transform in these packages → already being transpiled to ES6
- - - - {#if $activeRoute !== null && $activeRoute.route === route} {#if component !== null} <svelte:component this="{component}" location={$location} {...routeParams} {...routeProps} /> {:else} <slot params="{routeParams}" location={$location}></slot> {/if} {/if}
- - - - let counter = 0; beforeEach(() => { counter = 0; server.use( rest.post("/api/1.0/users/token/:token", (req, res, ctx) => { counter += 1; return res(ctx.status(200)); }) ); });
  - - - const sendActivationRequest = ()=>{ activate(token); }
      - conditionally show success message

declarative routing

add new component

Route.svelte

 <script>
  export let path, component, currentPath;
 </script>

{#if path === currentPath}  
   <svelte:component this={component} /> 
{/if}

App.svelte


<Route path="/" component={HomePage} currentPath={path}/>
<Route path="/signup" component={SignUpPage} currentPath={path}/>
<Route path="/login" component={LoginPage} currentPath={path}/>

- - - - expect(LoginLink).not.toBeInTheDocument(); expect(SignUpLink).not.toBeInTheDocument();
    - - App needs to know
      - we need to have a global state management for our app
        
        create new folder → /store
      - login will set the state → nav will be updated
  - - - export const auth = writable({ isLoggedIn:false, })
  - - - auth.set({isLoggedIn:true})
      - upon successful login
    - - need to be updated whenever auth state is changed
      - let isLoggedIn = false; auth.subsribe((authState)=> { isLoggedIn = authState.isLoggedIn; })
  - - - expect(myProfileLink).toBeInTheDocument();
      - set conditional to add profile link in nav bar
    - - expect(window.location.pathname.endsWith("/user/5")).toBeTruthy()
      - update success login
        
        const onClick = async () => { apiProgress = true; try { const response = await login({email, password}); auth.set({isLoggedIn:true, id: response.data.id}); navigate("/") } catch (e) { // catch error failMessage = e.response.data.message; } apiProgress = false; }
      - update app page
        
        auth.subscribe((authState)=> { isLoggedIn = authState.isLoggedIn; loggedInUserId = authState.id; });
- - - - const state = JSON.parse(localStorage.getItem("auth")) expect(state.isLoggedIn).toBeTruthy();
      - store
        
        auth.subscribe((authState)=> { localStorage.setItem("auth", JSON.stringify(authState)); });
        
        login page will update the auth
        
        store → subscribed to the changes for the auth object → reflecting change in local storage
  - - - expect(myProfileLink).toBeInTheDocument();
    - - store is a singleton
      - export const resetAuthState = () => { auth.set({ isLoggedIn: false }); };
- - - - on:click={()=> counter.set(count+1)}
      - on:click={()=> counter.update((previousValue)=> {return previousValue+1})}
  - - - this is a memory leak → break our app
      - we must ensure that the component unsubscribes from the store in it is removed
        
        subscribe() returns a function
        
        const unsubcribe = counter.subscribe((value)=> { console.log("current count: ", value); }) ... onDestroy(()=> { unsubcribe(); })
    - - onMount → called when component is initiated
        
        onMount(()=> { console.log("mounted"); })
        
        advantage → if we have server-side rendering onMount is never called. It will already be aware of the user information → would not pass the api call back to the client ( browser )
      - onDestroy → called whenever component is removed
        
        onDestroy(()=> { console.log("destroyed"); })
      - <script> ... <script>
        
        console.log("this will be printed");
        
        is executed before onMount
      - what actions require component to be mounted?
  - - - implementation is simpler and safer
      - any name with a $ is assumed to refer to a store value → reserved character
      - e.g. $_("signUp")
    - - app.svelte
        
        <Link to={/user/${$auth.id}}>My Profile</Link>
        
        {#if !$auth.isLoggedIn}
      - login
        
        $auth = {isLoggedIn:true, id: response.data.id};
  - - - tracking mouse positions
      - geo location or user
    - - export const counter = readable(0, (set) => { let value = 0; // to update the value of this store (set) const int = setInterval(() => { value += 1; set(value); }, 1000); // called whenever component unsubscribes from store value return () => { clearInterval(int); }; });
  - - - export const message = derived(counter, ($counter) => { if ($counter > 5) { return "the shatter is increasing"; } else { return "the shatter is less that 5"; } });
      - $: console.log($message);
- - - - $auth = {...response.data, isLoggedIn:true};
- - - - import { addMessages, init} from "svelte-i18n";
    - - addMessages("en" { signUp: "Sign Up" }) init({initialLocale: "en"})
  - - - import { _ } from "svelte-i18n"
    - - $_{"signUp"}
  - - - Note that you need rollup/plugin-json to import JSON files
      - update rollup.config.js
- - - - expect(validationError).toBeInTheDocument();
    - - expect(validationError).toBeInTheDocument();
    - - look for header in request
      - update language selector component
        
        const onLanguageChange = (language)=> { locale.set(language) // update axious configuration axios.defaults.headers["Accept-Language"] = language; }
  - - - we will move all of our api calls to here
    - - locale.subscribe((language) => { axios.defaults.headers["Accept-Language"] = language; });
- - - - they are highly coupled together → translations are all visible on page
      - we can reference to our translation
        
        expect(screen.queryByRole("heading", { name: en.signUp })).toBeInTheDocument(); expect(screen.queryByRole("button", { name: en.signUp })).toBeInTheDocument(); expect(screen.queryByLabelText(en.username)).toBeInTheDocument(); expect(screen.queryByLabelText(en.email)).toBeInTheDocument(); expect(screen.queryByLabelText(en.password)).toBeInTheDocument(); expect(screen.queryByLabelText(en.passwordRepeat)).toBeInTheDocument();
- - - - ** multiple component renders break our document
        
        solution → manually clean it up
        
        lifecycle functions → afterEach
        
        afterEach(() => { document.body.innerHTML = ""; });
      - when we have a single render → document is cleaned up
    - - switch order of tests → failure
      - take a look at the debug object
        
        we see that our page is rendered in Turkish
        
        ** the state of our language is not being reset
      - solution
        
        export a function from the i18n.js module
        
        export const reset = () => { locale.set("en"); };
        
        setupTest.js
        
        import { reset } from "./src/locale/i18n"; afterEach(reset);
- - - - expect(validationMessageInTurkish).toBeInTheDocument();
- - - - const submit = async () => { apiProgress = true; // axios post returns a promise → await api progress const {username, email, password} = form; try { await signUp({username, email, password}) signUpSuccess = true; } catch(error) { if (error.response.status == 400) { errors = error.response.data.validationErrors; } apiProgress = false; } }
- - - - rollup → module bundler
      - sirv-cli → to serve the public folder
      - svelte compiler
    - - App.svelte
        
        main component
      - main.js → entry point
        
        target: document.body (bind)
        
        can pass in props
    - - index.html
      - global.css
  - - - <button on:click={()=> color="purple"}>
      - <button on:click={toggle}>
    - - {#if showText} ... {:else} ... {/if}
    - - {#each users as user (user.id)} ... {/each}
      - ** check your syntax :-|
- - - - it('description', () => { ... }
      - test('description', function() { // test code }
    - - render(SignUpPage);
        const header = screen.getByRole("heading", { name: "Sign Up" });
        expect(header).toBeTruthy();
    - - support for ES6 → babel-jest babel/preset-env
      - package.json
        
        "transform": { ... }
        
        "^.++\\.js$": "babel-jest"
        
        "^.+\\.svelte$": "svelte-jester"
      - add babel config file
        
        presets: [["@babel/preset-env", { targets: { node: "current" } }]],
- - - - import → import Temp from ...
      - markup → <Temp />

user list

set up test page

set up mock data & GET request

beforeEach(() => {
        server.use(
            rest.get("/api/1.0/users", (req, res, ctx) => {
                return res(ctx.status(200), ctx.json(page1));
            })
        );
    })

load users from backend

create api call

// load all users from backend
export const loadUsers = () => {
    return axios.get("/api/1.0/users");
};

load into component

  const loadData = async()=> {
     const result = await loadUsers(); 
     page = result.data;
  }

loop through array content

{#each page.content as user}
   <div> {user.username} </div>
{/each}

:check: "displays three users in List"

 it("displays three users in List", async()=> {
    //render page 
    render(UserList);

    await waitFor(()=> {
     const userList =  screen.queryAllByAltText(/user/)
     expect(userList.length).toBe(3);

    })   
  })

User not found

:check: "displays error message recieved from backend with the user is not found"

await waitFor(() => {
    expect(screen.queryByText("User not found")).toBeInTheDocument();
});

update syntax

  {#await apiCall}
    <div class="flex w-1/2 mx-auto justify-center items-center rounded shadow-md mt-20 h-20 bg-white">
      <Spinner size={"normal"} />
    </div>
  {:then response}     
    <ProfileCard user={response.data} />
  {:catch error}
    {error.response.data.message}
  {/await}

- - - - webpack, webpack-cli, and webpack-dev-server
      - svelte and svelte-loader
      - dotenv-webpack
      - css-loader, style-loader, and mini-css-extract-plugin
      - cross-env
      - INSTALL
  - - - at runtime, {name} is bound to the value of the name variable.
      - The same name variable is also exported using the export statement
      - The Svelte compiler looks for exported variables and makes them props (or properties), which can be set by outer components.
  - - - target: document.body,
      - export default app;
      - props: { ... }
      - This short snippet imports the App component as a class. It instantiates the class, and finally exports the component as the application's code.
      - The constructor for the App class accepts a JavaScript object with a dictionary of options, including the following:
      - target is the DOM element where the component should be rendered as a child
      - The props dictionary is an optional one that allows a value to be passed to the component's props
- - - - markdown-it converts Markdown into HTML: we use this so that our end users can write nicely formatted journal entries using Markdown
      - svelte-calendar is a Svelte component that displays a datepicker
      - idtoken-verifier is used by the authentication library (which we'll add in just a moment) to validate JSON Web Token (JWT) session tokens.
    - - src/lib/Session.js—This file contains functions for dealing with session tokens.
      - src/lib/Requests.js—This contains functions that make requests to the back-end API server.
      - src/global.css—This contains global styles for the application.
    - - We've included global.css and lib/Session.js files. Webpack will deal with the style sheet and output a single CSS file automatically
      - We're also importing a store.js file that contains the profile and token Svelte stores
      - We're encompassing the initialization code in a function that is immediately executed → our initialization steps include calling an async function HandleSession
      - inside the initialization function we're invoking the code that sets up the session, and we're storing the two returned values (profileData and tokenData) into the two Svelte stores
    - - This is a file called .env (it starts with a dot) that contains a series of constants that are used by our app at build time. It's a convenient way to define parameters, such as where to find the back-end service with our APIs.
      - Replace the value for AUTH_CLIENT_ID with a random Universally Unique IDentifier (UUID)
    - - Stores are a tool Svelte uses to share a state across components
    - - tailwindCSS
      - fork-awesome
  - - - create the Renderer component → two props : string and content
        
        Svelte if statement → #if val} …markup1… {:else} …markup2… {/if}
        
        export let title = ''
      - add Render component to App.svelte
        
        import Renderer from './components/Renderer.svelte'
        
        <Renderer title="Hello" content="World!" />
    - - you can put it inside other HTML elements too, such as within <div></div> blocks, and so on
      - tags for Svelte components must always be closed, either explicitly (<Renderer></Renderer>) or self-closed (<Renderer />).
    - - The most interesting thing is the $: syntax, which makes the statement reactive.
      - a label in the JavaScript language, which Svelte adopts to tell the compiler to mark a statement as reactive
      - Reactive statements are executed every time the value of a variable changes.
        
        Svelte will re-render our Markdown every time the content prop changes and will put the result in the rendered variable.
        
        we've added html to indicate to Svelte that the rendered variable contains HTML tags that should be rendered by the browser.
        
        Without the $: label, Svelte would execute our statement only once,
        
        the rendered variable was not initialized, but Svelte will do that as if we had used the let keyword.
    - - we're now telling Svelte to reference the content constant, defined in the script
      - the reference is defined by setting the value of the prop to {content}
      - when the prop uses a variable or constant with the same name, it can be simplified even further, like this
        
        <Renderer title="Hello" {content} />
    - - This component requests an object from the API server, then renders it using the Renderer component.
      - Svelte offers a built-in syntax in markup to await for Promises
        
        {#await promise} …block1… {:then val} …block2… {:catch err} …block3… {/await}
        
        While the Promise named promise is in a pending state, block1 is rendered.
        
        2.When promise is fulfilled, block2 is rendered, and it can use the Promise's final value in a variable named val.
        
        If promise is rejected, Svelte renders block3, and the rejection reason is available in the variable named err.
        
        The flow is akin to using promise.then() and promise.catch() in JS
    - - it is a good practice to split out this code into a reusable component
    - - which requests the list of journal entries and displays them.
      - you can create a {#each array as val, index}…block…{/each} loop.
        
        {#each} statement iterates over the list and renders the block for each element.
        
        The markup inside block can access the current element of the array with the val variable and its index with index
    - - we can use a third-party component → svelte-calendar
      - <Datepicker bind:selected />
      - binding → This creates a two-way binding between a prop inside the Datepicker component and a local variable
      - if you need to make more than one line of code reactive, you can wrap that in a block and prefix it with $:
  - - - The AddForm component renders a form that, when submitted, invokes a handler that sends the data to the API server.
      - notes
        
        bind:value={title}
        
        the running boolean variable is used to control whether the <button> tag is disabled.
      - All assignments to variables or properties of an object in Svelte are reactive
        
        This means that if the script changes the value of a variable that is used in the template, Svelte automatically re-renders the component with the new state.
        
        Even better: because Svelte is compiled, it can intelligently re-render only the elements that have changed.
        
        reactivity and assignments
        
        Reactivity applies to assignments to variables (foo = 'val') or object properties (obj.foo = 'val') only
        
        Svelte does not automatically detect changes when you use a function that mutates the state of a variable internally (for example, using push() on an array).
      - binding
        
        Bindings allow data to "flow up", from an element, or—in another case—a component, to its parent component.
        
        The simplest and most common bindings are applied to input elements, which are then mapped bi-directionally to their value.
        
        <input type="text" bind:value={title} />
        
        assigning a new value to the title variable in the script will also change the value of the input as displayed to the user.
    - - events from elements
        
        Using the on: keyword with an element, we can attach a handler to a specific Document Object Model (DOM) event that could be triggered by that element.
        
        <button on:click={handler} />
        
        <form on:submit={handler} />
        
        The handler is a function expression.
        
        It can be the name of a function defined in the script block, → on:click={() => showObject(el.oid)}.
        
        using just {showObject(el.oid)} would not work, as that's a function invocation and not a function expression.
        
        Svelte allows for modifiers to be added to events → shorthand ways of doing common tasks;
        
        preventDefault runs the event.preventDefault()
        
        once removes the handler after the event has been triggered the first time
        
        self runs the handler only if the target of the event is the element itself.
        
        stopPropagation runs event.stopPropagation() after the handler to stop the event bubbling to the next element.
        
        <a on:click|preventDefault|stopPropagation={handler}>
      - events from components
        
        import {createEventDispatcher} from 'svelte'
        
        const dispatch = createEventDispatcher()
        
        dispatch('added', {objectId})
        
        This example is the first one in which we're importing a method from the Svelte runtime
        
        The createEventDispatcher method is used to create a dispatch function (second line in the script), which can be invoked in the script to trigger custom events from the component.
        
        component events are created and triggered by a component's script and can have any name and data.
      - receiving events from components
        
        the ViewAdd component listens to the custom added event that the AddForm event triggers when an object has been saved in the server.
        
        dispatch('added', {objectId})
        
        the object we pass as the second argument for the dispatch function is available in the event listener as event.detail → our objectId value is available at event.detail.objectId
        
        <AddForm on:added />
        
        The full added function written previously stores the object ID in a Svelte store called $view
  - - - <AddForm on:added={added} bind:content bind:title />
    - - Assignments to props such as these are one-way operations. When ViewAdd assigns a value to a prop of AddForm, the latter receives it and re-renders itself using the new value.
      - When using bindings, instead, there's two-way communication between the props of a component and a variable in its parent
      - we get a live preview of what the user writes in the form,
- - - - Javascript, (Reusable) APIs, (Prerendered) Markup
        
        API's → RESTful endpoints that are accessed via HTTP
        
        → written in Javascript and run in the browser
        
        markup → bundles of HTML, JS and CSS files (+assets)
        
        Webpack → various source files are packaged together and minified
        
        the final bundle, which contains only HTML, JavaScript, and CSS files, in addition to any static asset, is self-contained, and is often deployed to object storage services in the cloud
        
        developers usually place a Content Delivery Network (CDN) in front of the object storage service: this caches the files in edge nodes around the world, delivering faster speeds and lower latencies to all visitors worldwide.
      - benefits
        
        simpler operations and better developer experience.
        
        JAMstack apps feel fast
        
        third-party api's
        
        e.g. authentication, creating a thumbnail, video encoding, converting file formats, etc.
        
        you can integrate with a very large number of APIs offered by SaaS providers.
        
        → you don't have to manage them
- - - - svelte stores
        
        They provide readable and writable stores that can be accessed by any component in the application, while being fully reactive
        
        if a component depends on a store and the value of such a store changes, Svelte automatically re-executes all reactive statements and templates that depend on it.
      - it's useful to maintain a state that is shared across multiple components, even those not having direct relationships.
    - - we are importing two methods from the svelte/store module (part of the Svelte runtime lib)
      - we're defining four different stores: profile, token, isAuthenticated, and view.
        
        profile, token, view → writeable (default of null)
        
        isAuthenticated → derived store
        
        const mystore = writable(initialValue)
        
        const mystore = derived(originalStore, (newStoreVal) => {
        → return derivedVal
        }
        
        const mystore = readable(initialValue, (set) => { ... })
        
        /* Code to execute when there is the first subscriber to this store */
        
        set(newValue)
        
        return () => { /* Code to be executed when there are no more subscribers to this store */ }
      - kinds of stores
        
        Writable stores can have their value changed at any time by components or scripts.
        
        Readable stores' value cannot be set by scripts or components from "outside".
        
        Derived stores are read-only ones whose value is derived from one or more other stores
    - - Stores are objects with a subscribe method and, optionally, a set method
      - you can access the value of a store by prefixing it with $
    - - You can programmatically set a value in a Svelte store with the mystore.set(newval) method
      - we're not putting the dollar-sign prefix to the store in this case, as that's a syntax that requires the Svelte compiler (works only in .svelte files)
      - accessing a value → time.subscribe((val) => console.log(val))
        
        the subscribe method returns a function that we can use to unsubscribe from the store
        
        const unsubscribe = time.subscribe((val) => console.log(val))
        setTimeout(unsubscribe, 10000)
      - If you wanted to read the value only once, you could use the get function → which internally creates a subscription, and then cancels the subscription
        
        import {get} from 'svelte/store'
  - - - view contains the name of the currently loaded view ("makeshift router")
      - we are determining the link to mark as active in the navbar by checking the value of the view store
      - first we import three stores: profile, isAuthenticated, and view.
      - we've marked the block as reactive ($:{ … }) → so that the active variable is updated every time $view changes.
    - - The two span tags are used to navigate between the views.
      - on click : an inline function sets the value of the $view store
- - - - expect(screen.queryByText("← previous")).toBeInTheDocument();
      - wait for user4
    - - expect(screen.queryByText("← previous")).not.toBeInTheDocument();
      - wait for user1
    - - expect(userOnPage1).toBeInTheDocument();
      - click next, click previous → expect to see first user

refactor page responses

create temp.js

const getPage = (page, size) => {
    let startIndex = page * size;
    let endIndex = startIndex + size;
    let totalPages = Math.ceil(users.length / size);

    return {
        content: users.slice(startIndex, endIndex),
        page,
        size,
        totalPages,
    };
};

refactor test with getPage function

refactor test

 rest.get("/api/1.0/users", (req, res, ctx) => {

    let page = Number.parseInt(req.url.searchParams.get("page"));
    let size = Number.parseInt(req.url.searchParams.get("size"));

    if (Number.isNaN(page)) page = 0;
    if (Number.isNaN(size)) size = 5;

    return res(ctx.status(200), ctx.json(getPage(page, size)));
})

refactor api call

 // load all users from backend
export const loadUsers = () => {
    return axios.get("/api/1.0/users", { params: { page: 0, size: 3 } });
};