从 cypress 写入 Svelte 可写存储值

在 Svelte 应用程序中，我有一个布尔变量。

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

这将导入到 App.svelte 和其他 svelte 文件中，并使用 $authorized 进行访问和更新。

我无法在 Cypress 中使用 $ 语法，所以我使用了

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

在 App.svelte 中，我有一个 console.log 显示 $authorized 的值。

在cypress浏览器输出中使用开发工具，授权显示为false。

测试通过后端 api 登录，在正文响应中接收令牌和用户 ID。使用这些数据，我在 svelte 商店中设置了各种值（包括授权），以便在访问应用程序时，它应该显示授权屏幕而不是登录屏幕。

那么为什么 svelte store 中没有设置授权呢？

Updated:

使用 Fody 的方法，我在脚本之外添加到 App.svelte 的开头，

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

将其放入脚本中会在声明时出现错误。但是上面的代码，在界面上给出了错误。

关键字“interface”被保留

我看过解析错误：关键字“interface”被保留正在安装 ts-standard 并更新 package.json。但安装需要很长时间。

我应该安装 ts-standard 吗？

进一步更新：

在 main.ts 中，我添加了

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

在 App.svelte 中。

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

最后在 test.js 文件中

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

运行测试显示“windows.authorized is undefined”错误，控制台日志为 未捕获的类型错误：window.authorized 未定义 实例App.svelte:16 初始化索引.mjs:1891 应用程序包.js：4033 应用程序 main.ts:14 捆绑.js：4050

其中 App.svelte:16 是“window.authorized.set($authorized) ”

如果您直接导入可写存储，它不会使用与应用程序中的实例相同的实例。

但您可以将其作为属性附加window允许 Cypress 访问同一实例。

一个最小的例子：

精简的应用程序

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

  export const authorised = writable(false)

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

  let authorisedValue;
  authorised.subscribe(value => {
    authorisedValue = value;
  });
</script>

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

Test

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

打字稿支持

如果项目是基于打字稿的，window.Cypress and window.authorised参考文献会产生问题。

定义这些在main.ts.

对于我的最小应用程序：

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

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

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

export default app;

将通用参数添加到可写存储也是一个很好的做法。

In App.svelte:

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

最后，定义全局类型导入global.d.ts:

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