updating a value in a svelte writable store using cypress

Question

updating a value in a svelte writable store using cypress

Inside my Svelte application, I am working with a boolean variable.

import { writable } from 'svelte/store'
export const authorised = writable(false)

This variable is imported into App.svelte and other Svelte files, where it can be accessed and updated using $authorised.

However, the $ syntax cannot be used in Cypress, so instead I have utilized the following:

import { authorised } from '../../src/stores'
describe( etc etc
        authorised.set(true)
        cy.visit(`/`)

In App.svelte, there is a console.log displaying the value of $authorised.

Despite setting values in the Svelte store during testing, the output in the Cypress browser's dev tools shows that authorised is still false.

The backend API successfully logs in and provides the necessary data. This data is used to update various values in the Svelte store, including authorised, with the expectation that the app will show the authorized screen upon visit rather than the login screen.

But why does the authorised value not get properly set in the Svelte store?

An update was made by incorporating Fody's approach at the beginning of App.svelte, outside of the script tags,

declare global {
  interface Window {
    Cypress?: Cypress.Cypress;
  }
}

Moving this declaration inside the script led to an error related to the use of 'interface,' while placing it as shown above caused an issue regarding the keyword itself.

The keyword 'interface' is reserved

After referring to Parsing error: The keyword 'interface' is reserved and attempting to install ts-standard for resolution, the lengthy installation process has commenced.

Is installing ts-standard mandatory in this context?

A further modification involved adding the following code to main.ts:

import type { Writable } from 'svelte/store';    
declare global {
        interface Window {
          Cypress?: Cypress.Cypress
          authorised?: Writable<boolean>
        }
    }

This was then utilized in App.svelte as follows:

if (window.Cypress) {
    window.authorised.set($authorised)          
}

Lastly, in the test.js file:

.its('body').then((body) => {
        cy.log(body)
        cy.visit(`/`)
        cy.window().then(win => win.authorised.set(true))

Running the test resulted in an error stating "window.authorised is undefined" along with the log message: Uncaught TypeError: window.authorised is undefined instance App.svelte:16 init index.mjs:1891 App bundle.js:4033 app main.ts:14 bundle.js:4050

The line causing the error is mentioned as "window.authorised.set($authorised)" on line 16 of App.svelte.

typescript cypress svelte

Answer 1

Answer №1

When importing the writable store directly, it does not utilize the same instance as the one in the application.

However, you can make it accessible to Cypress by attaching it as a property of window.

An example to demonstrate this:

Svelte app

<script>
  import { writable } from 'svelte/store'

  export const authorized = writable(false)

  if (window.Cypress) {
    window.authorized = authorized;          // only if Cypress is running
  }

  let authorizedValue;
  authorized.subscribe(value => {
    authorizedValue = value;
  });
</script>

<main>
  <div id="app-container" class="app-container">
    <div id="authorized-display-value">{authorizedValue}</div>
  </div>
</main>

Testing

it('passes', () => {
  cy.visit('http://localhost:8080/')
  cy.get('#authorized-display-value').should('contain', 'false')    // passes
  cy.window().then(win => win.authorized.set(true))
  cy.get('#authorized-display-value').should('contain', 'true')     // passes
})

Typescript support

If the project is typescript-based, referencing window.Cypress and window.authorized may pose an issue.

To address this, define these references in main.ts.

In my minimal app example:

import type { Writable } from 'svelte/store';
import App from './App.svelte';

declare global {
  interface Window {
    Cypress?: Cypress.Cypress;
    authorized?: Writable<Boolean>;
  }
}

const app = new App({
    target: document.body
});

export default app;

It is recommended to add a generic parameter to the writable store for better practice.

In App.svelte:

<script lang="ts">
  import { writable } from 'svelte/store'
  export const authorized = writable<Boolean>(false)
  ...

Lastly, define the global type imports in global.d.ts:

/// <reference types="svelte" />
/// <reference types="cypress" />

Answer 2

When importing the writable store directly, it does not utilize the same instance as the one in the application.

However, you can make it accessible to Cypress by attaching it as a property of window.

An example to demonstrate this:

Svelte app

<script>
  import { writable } from 'svelte/store'

  export const authorized = writable(false)

  if (window.Cypress) {
    window.authorized = authorized;          // only if Cypress is running
  }

  let authorizedValue;
  authorized.subscribe(value => {
    authorizedValue = value;
  });
</script>

<main>
  <div id="app-container" class="app-container">
    <div id="authorized-display-value">{authorizedValue}</div>
  </div>
</main>

Testing

it('passes', () => {
  cy.visit('http://localhost:8080/')
  cy.get('#authorized-display-value').should('contain', 'false')    // passes
  cy.window().then(win => win.authorized.set(true))
  cy.get('#authorized-display-value').should('contain', 'true')     // passes
})

Typescript support

If the project is typescript-based, referencing window.Cypress and window.authorized may pose an issue.

To address this, define these references in main.ts.

In my minimal app example:

import type { Writable } from 'svelte/store';
import App from './App.svelte';

declare global {
  interface Window {
    Cypress?: Cypress.Cypress;
    authorized?: Writable<Boolean>;
  }
}

const app = new App({
    target: document.body
});

export default app;

It is recommended to add a generic parameter to the writable store for better practice.

In App.svelte:

<script lang="ts">
  import { writable } from 'svelte/store'
  export const authorized = writable<Boolean>(false)
  ...

Lastly, define the global type imports in global.d.ts:

/// <reference types="svelte" />
/// <reference types="cypress" />

Answer 3

Answer №2

After some trial and error, I managed to combine elements from @fody's solution with my own insights. I made modifications in main.ts by extending the Window interface to facilitate communication between Cypress and the application. Within App.svelte, I incorporated svelte store variables (indicated by $) along with additional changes.

 if (window.Cypress) {
    console.log("entering Cypress selection")
    authorised = window.authorised
    $emailName = window.emailName
    $authToken = window.authToken
    $userId = window.userId
  }

In the test script:

  cy.request('POST', Cypress.env('api')+'users/login', {
    email: "[email protected]",
    password: "12345678"
  }).its('body').then((body) => {
            cy.log(body)

            cy.visit(`/`, {
              onBeforeLoad(win) {
                win.authorised = true
                win.emailName = "[email protected]"
                win.authToken = body.token
                win.userId = body.userId
              },
            })
                                    
          cy.get('h1').should('contain', 'Svelte To-Do List')

The crucial aspect here is the onBeforeLoad function, which ensures that the new app window receives the authentication details. This step is essential for seamlessly passing information between the two window objects.

Answer 4

After some trial and error, I managed to combine elements from @fody's solution with my own insights. I made modifications in main.ts by extending the Window interface to facilitate communication between Cypress and the application. Within App.svelte, I incorporated svelte store variables (indicated by $) along with additional changes.

 if (window.Cypress) {
    console.log("entering Cypress selection")
    authorised = window.authorised
    $emailName = window.emailName
    $authToken = window.authToken
    $userId = window.userId
  }

In the test script:

  cy.request('POST', Cypress.env('api')+'users/login', {
    email: "[email protected]",
    password: "12345678"
  }).its('body').then((body) => {
            cy.log(body)

            cy.visit(`/`, {
              onBeforeLoad(win) {
                win.authorised = true
                win.emailName = "[email protected]"
                win.authToken = body.token
                win.userId = body.userId
              },
            })
                                    
          cy.get('h1').should('contain', 'Svelte To-Do List')

The crucial aspect here is the onBeforeLoad function, which ensures that the new app window receives the authentication details. This step is essential for seamlessly passing information between the two window objects.

updating a value in a svelte writable store using cypress

Answer №1

Typescript support

Answer №2

Similar questions

Tips for avoiding a form reload on onSubmit during unit testing with jasmine

Using a try block inside another try block to handle various errors is a common practice in JavaScript

What could be causing my React Redux state to not trigger a re-render?

Encountering issues in Angular 2 when attempting to pass data into root component through ng-content and binding. Objective: Creating a reusable form component

Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

What is the process for sending an http get request that provides a JSON array to populate an ngFor directive?

Develop a TypeScript class that includes only a single calculated attribute

Typescript error: Undefined reference to 'DhImportKeyParams'

Injecting AngularJS together with TypeScript and Restangular to optimize application performance

Customizing tsconfig.json: Enhancing an existing object by adding new keys in TypeScript

What are the reasons for deprecating bindToController in Typescript?

ANGULAR: Issue with filtering an array by clicking a button is not functioning

The function's overloading is not compatible with its implementation

Develop a flexible axios client

Top Recommendations: Comparing Standalone Components and Modules in Angular Version 14

I'm encountering an issue in my node application where it is unable to access the push

Getting the first nested object within an object in Angular 8: A comprehensive guide

Improprove the performance of an array of objects using JavaScript

Having trouble getting @types/express-session to function properly. Any suggestions on how to fix it?

In need of secure HTML, received a dose of Style instead