首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在单元测试中使用参数模拟ngrx存储选择器(Angular)

在单元测试中使用参数模拟ngrx存储选择器是为了测试与ngrx存储选择器相关的功能。ngrx是一个用于管理状态的Angular库,存储选择器是ngrx中的一个重要概念,用于从存储中选择和转换数据。

在单元测试中,我们可以使用参数模拟来模拟存储选择器的输入和输出。参数模拟是指在测试中手动设置存储选择器的参数,以便测试不同的情况和边界条件。

下面是一个示例代码,展示了如何在单元测试中使用参数模拟ngrx存储选择器:

代码语言:txt
复制
import { createSelector, Store } from '@ngrx/store';
import { AppState } from './app.state';

// 定义一个存储选择器
const getSelectedData = createSelector(
  (state: AppState) => state.data,
  (data) => data.filter(item => item.selected)
);

describe('App Component', () => {
  let store: Store<AppState>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [Store],
    });

    store = TestBed.inject(Store);
  });

  it('should select only the selected data', () => {
    const selectedData = [{ id: 1, selected: true }, { id: 2, selected: false }, { id: 3, selected: true }];

    // 使用参数模拟设置存储选择器的输入
    spyOn(store, 'select').and.returnValue(of(selectedData));

    // 调用存储选择器获取输出
    const result = getSelectedData(store);

    // 断言输出是否符合预期
    result.subscribe(data => {
      expect(data).toEqual([{ id: 1, selected: true }, { id: 3, selected: true }]);
    });
  });
});

在上述示例中,我们首先定义了一个存储选择器getSelectedData,它从存储中选择所有selected属性为true的数据。然后,在测试中,我们使用参数模拟设置存储选择器的输入,即模拟存储中的数据。接着,我们调用存储选择器获取输出,并断言输出是否符合预期。

对于这个问题,腾讯云没有特定的产品或服务与之直接相关。但是,腾讯云提供了一系列云计算产品和服务,可以用于构建和部署Angular应用程序,例如云服务器、云数据库、云存储等。您可以根据具体需求选择适合的腾讯云产品。

请注意,以上答案仅供参考,具体的实现方式可能因项目需求和技术栈而异。在实际开发中,您可以根据具体情况进行调整和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 接入 NGRX 状态管理

存储的状态做出相应的改变; Selector:用于获取存储状态切片的纯函数; Effects:基于流实现的副作用的处理,以减少基于外部交互的状态。...ng new angular-ngrx --standalone=false 安装 NGRX 核心模块: @ngrx/store:状态管理核心模块,包含了状态存储、Actions、Reducers、Selectors...Angular 进行整合使用; 安装命令: npm install @ngrx/store --save npm install @ngrx/store-devtools --save npm install...props 约束所接收的参数类型; 增加用于删除用户的DelUser,并使用emptyProps表示不传递任何参数(仅存储一位用户); 创建根据 Action 来更新状态的 Reducer: 选项介绍...: 模拟这样一个场景:组件加载完成后首先执行添加 User 的 Action, 5 秒之后执行删除 User 的 Action,用来模拟 User 数据状态的变化,并将 User 绑定到页面用来观察

23010

使用angular2使用nodejs创建服务器,并成功获取参数

首先创建服务器: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...app.get("/api/products",(req,res)=>{ res.json(products) }) app.get("/api/products/:id",(req,res)=>{ //命令行打印...引入过了,这里需要声明构造函数里头,并引入Http from "@angular/Http"; 接着就是坑了,写完后,发现还是获取不到服务器上的数据: 接下来还有配置: 根目录新建一个文件:proxy.conf.json... 内容为: { "/api":{ "target":"http://localhost:8000" } } 然后package.json文件,修改一行 "start": "ng serve...--proxy-config proxy.confi.json", 然后启动 要用npm run start; 只要使用这个命令,才能告诉页面,需要到这个地址去拿数据.

4.3K70
  • Angular2 之 单元测试

    TestBed类和@angular/core/testing的一些方法。...它的By.css静态方法产生标准CSS选择器 predicate,与JQuery选择器相同的方式过滤。 detectChanges:测试Angular变化检测。...调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成,在这个测试案例,包含getQuote承诺的解析。...第二个参数是传递给事件处理器的事件对象。 ---- 自己遇到的坑儿 下面都是自己实际的编写单元测试时,真实遇到的问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?...第二点就是模拟的时候,我竟然傻傻的自己去spec文件自己去new了BaseDataRemoteService,所以我根本没有办法去执行spyOn(foo, "getBar")这样的模拟,然后就是一直的出错

    5.5K20

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    我们讨论了State它的不变性,这意味着我们创建它之后不能改变它的任何属性。这使得我们的应用程序状态存储我们的系统几乎不可能State。...Ngrx提供了一个记录器,并为我们的卡阵列创建了选择器功能。...请记住,我们正好将Firebase集成到我们的应用程序。现在它由于高度可维护的Ngrx商店而丢失了。也就是说,它存储在任何地方。...我们可以使用诸如ngrx-store-localstorage之类的东西来存储我们的数据到浏览器的localStore,但是如何使用API​​呢?...但是相同的代码,我们看到了另一个效果,它ServerFailure使用装饰器参数处理动作dispatch: false。这是什么意思?

    42.6K10

    SAP 电商云 Spartacus UI Store 相关的设计明细

    注意 SITE_CONTEXT_FEATURE 的使用场合,除了本文件定义 feature state 之外,还用在下列两个文件内: 场景1:用来创建 feature selector: 场景2:使用...StoreModule.forFeature 注册 store: 当使用 createSelector 和 createFeatureSelector 函数时,@ngrx/store 会跟踪调用选择器函数的最新参数...因为选择器是纯函数,所以当参数匹配时可以返回最后一个结果,而无需重新调用选择器函数。 这可以提供性能优势,特别是对于执行昂贵计算的选择器。...3 的类型必须和 2 的类型一致: 2 的位置其实就是 result 的位置: 写法2 import { createSelector, createFeatureSelector } from '@ngrx...selectFeatureCount = createSelector( selectFeature, (state: FeatureState) => state.counter ); 我做过测试,

    11910

    Angular vs React 最全面深入对比

    React决定使用一种类似XML的语言组件把标记和代码结合起来,直接在JavaScript代码编写HTML标记。...@ngrx/store @ngrx/store是由Redux启发的Angular的状态管理库,基于由pure reducer进行突变的状态。...Jest(来自Facebook的一个单元测试工具)也同时集成Create-react-app内部,更方便的让我们进行单元测试。...不像Redux那样将状态保存在一个不可变的存储,它鼓励您仅存储最低限度的必需状态,并从其中获取剩余的数据。它提供了一组装饰器来定义可观察和观察者,并将反应逻辑引入到你的状态管理代码。...这些都在文档。RxJS是一个很重的话题,官方网站上有详细描述。虽然基本功能层面上使用起来相对容易,但在转到高级应用时会变得更加复杂。 总而言之,我们注意到Angular的进入壁垒高于React。

    3.8K70

    【UTP自动化测试平台系列之终章】前端探索之路

    Jquery是和DOM选择器绑在一起,开发随处可以对显示的文字、样式和排版进行修改,让前端开发人员开发、定位问题都特别难,使得代码难以维护。...五、Angular4UTP的实践 UTP平台前端采用Angular4框架进行开发,使用了组件化开发、双向数据绑定、引入外部插件、cookie缓存、Http服务、单元测试等技术,经过了不断挖坑、填坑的过程...Angular4是搭建框架繁琐些,但组件开发效率高、维护成本低。 Angular把一些耦合的功能独立成一个子模块,方便进行组件化开发,同时也方便进行单元测试和后台接口模拟。...一定要遵循angular架构的顺序,首先通过npm i的方式进行组件下载,然后module中进行引用,最后使用的组件引入接口。...(1)下载angular-mocks:npm install ng2-mock-server --save-dev。 (2)定义需要模拟的接口: ? (3)模块引入mock技术: ?

    2.5K110

    写在 2021: 值得关注学习的前端框架和工具库

    你可能同样犹豫要不要学这玩意,我的意见是:学!因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...比如:写入环境变量—使用NodeJS 10/12/14,Windows/Linux/MacOS 最新版本,每个组合跑一遍构建流程,确保每个组合都能构建成功—跑一遍Lint+单元测试,上传测试覆盖率—跑一遍...Reactive.How[92],生动的展示RxJS Observable操作符管道的流动,入门期间使用有奇效。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    4.2K10

    Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

    使用方式 -- 长什么样子?什么场景被使用?怎么被使用? 将每个特性写成单元测试,然后写代码,将这个单元的代码测试通过后,再进行下一个特性代码的单元测试。...@Directive装饰器需要一个 CSS 选择器(属性名称加方括号-[attr]),以便从模板识别出关联到这个指令的 HTML。...指令的选择器是[myHighlight],Angular 将会在模板中找到所有带myHighlight属性的元素。.../** * 参数1:DOM事件的名字 * 参数2:注入的事件,常用的是$event */ @HostListener('click', ['$event']) onclick(event: MouseEvent... 使用数据绑定向指令传递值,定义这个属性的时候,我们调用了@Input()装饰器。

    1.4K30

    写在2021: 值得关注学习的前端框架和工具库

    你可能同样犹豫要不要学这玩意,我的意见是:学! 因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...比如:写入环境变量—使用NodeJS 10/12/14,Windows/Linux/MacOS 最新版本,每个组合跑一遍构建流程,确保每个组合都能构建成功—跑一遍Lint+单元测试,上传测试覆盖率—跑一遍...Reactive.How,生动的展示RxJS Observable操作符管道的流动,入门期间使用有奇效。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    2.9K10

    Angular 面试题汇总2-ComponentService (Angular v8+)

    这是 Angular 的默认设置。 ViewEncapsulation.Native – 使用原生的 Shadow DOM 特性。但需要考虑浏览器是否支持。...单例服务(singleton) 使用Angular CLI创建服务,默认会创建单例服务; 把 @Injectable() 的 providedIn 属性声明为 root, 即为单例服务。...对于复杂的全局变量,推荐使用状态管理组件(state management – Ngrx)。...有多种方式来防止这种现象: 用 providedIn 语法代替模块中注册服务的方式。 把服务分离到它们自己的模块模块中分别定义 forRoot() 和 forChild() 方法。...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    942140

    使用Enzyme测试React(Native)组件|洞见

    组件化与UI测试 组件化出现之前,我们不谈UI的单元测试,哪怕是对于UI页面进行测试都是一件非常困难的事情。...而Enzyme则来自于活跃JavaScript开源社区的Airbnb公司,是对官方测试工具库(react-addons-test-utils)的封装,它模拟了jQuery的API,非常直观并且易于使用和学习...它本质上是一个完全JavaScript实现的headless浏览器。...Enzyme 的 API 方法 find() 方法与选择器 从前面的示例代码可以看到,无论哪种渲染方式所返回的wrapper都有一个.find()方法,它接受一个selector参数,然后返回一个类型相同的...Enzyme的Selectors即选择器类似于CSS选择器,但是只支持非常简单的CSS选择器,如果需要支持复杂的CSS选择器,就需要引入react-dom模块的findDOMNode方法,而这是官方的

    2.4K40

    这些必备的VSCode JavaScript插件你都用过吗?

    而这些功能,曾经只像Eclipse或者Visual Studio 2017这样的完整集成开发环境(IDEs)才有。 VS Code的强大无疑来自于它的插件市场。...项目跟目录下使用.jshintrc文件作为其配置。) JavaScript Standard Style(零配置和严格规则的代码检测,强制使用StandardJS规则。...Debugger for Chrome(在编辑器打断点,让你轻松地Chrome里调试JavaScript。源码(vscode-chrome-debug。 ) ? 2....Angular 6(提供Angular 6的代码片段,支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。...它带有很好的发布GitBook上的文档。) Ember(为Ember提供了命令行支持和智能提示。安装完后,所有ember cli的命令可直接在VS Code自己的命令行列表中使用。)

    5.9K10

    2019-Web开发技术指南和趋势

    学习一个前端框架在目前前端开发是必须的. 大公司开发中非常流行 更多的交互 & 有趣的UI组件 组件化 & 模块化前端代码 对团队有利 2.4 状态管理 ?...对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...变量, 函数等类型 类 其他ES6的特性 Angular中被使用到, 同时也可以React和Vue中被使用 4.5 无服务架构 ?...AI和机器学习已经被广泛应用在所有的程序和技术, 甚至包括web开发....Progressive Web Apps是一个web app但是功能和样式上给用户带来原生应用使用体验的一项技术.

    3.4K20

    angularJS的DOM操作

    注意:一旦div使用ng-app(如ng-app="myApp")时,js就必须申明var myApp = angular.module('myApp', []);,否则会报错误。...三.angular.element方法汇总 addClass()-为每个匹配的元素添加指定的样式类名 after()-匹配元素集合的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()...-每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合每个元素的子元素...data()-匹配元素上存储任意相关数据 detach()-从DOM中去掉所有匹配的元素 empty()-从DOM移除集合匹配元素的所有子节点 eq()-减少匹配元素的集合为指定的索引的哪一个元素...处理函数每个元素上每种事件类型最多执行一次 parent() - 取得匹配元素集合,每个元素的父元素,可以提供一个可选的选择器 prepend()-将参数内容插入到每个匹配元素的前面(元素内部) prop

    8110

    2019-Web开发技术指南和趋势

    学习一个前端框架在目前前端开发是必须的. 大公司开发中非常流行 更多的交互 & 有趣的UI组件 组件化 & 模块化前端代码 对团队有利 2.4 状态管理 ?...对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...变量, 函数等类型 类 其他ES6的特性 Angular中被使用到, 同时也可以React和Vue中被使用 4.5 无服务架构 ?...AI和机器学习已经被广泛应用在所有的程序和技术, 甚至包括web开发....Progressive Web Apps是一个web app但是功能和样式上给用户带来原生应用使用体验的一项技术.

    3.3K20

    如何对第一个Vue.js组件进行单元测试 (下)

    我们首先需要使用shallowMount手动挂载我们的组件,并将其存储我们将执行断言的变量。我们还可以通过propsData属性传递道具作为对象。        ...首先,我们使用Jest的expect函数,它将我们想要测试的值作为参数我们的例子父级上用findAll方法来获取具有活动类的所有元素。...模拟用户输入        Vue Test Utils可以轻松模拟真实用户最终实际中所做的事情。我们的用例,用户可以点击stars来切换它们。...一个指令钩子可以带几个参数我们的例子,我们只需要前两个:el和binding。el参数引用指令绑定的元素。binding参数是一个对象,它包含我们指令传递的数据。...因此,决定是否应该使用已有的选择器或设置v-test指令时,请问自己一个问题:我测试什么,并且使用选择器对业务逻辑透视图有意义吗? 它与功能或端到端测试有何不同?

    3.3K00

    AngularDart4.0 英雄之旅-教程-06服务 顶

    不是一遍又一遍复制和粘贴相同的代码,而是创建一个可重用的数据服务,并将其注入到需要它的组件使用单独的服务可使组件保持精简并专注于支持视图,并使用模拟服务对组件进行单元测试变得容易。...这告诉Angular编译器,HeroService将成为注入的候选者(更多关于这个)。 获取英雄数据 HeroService可以从任何地方(Web服务,本地存储模拟数据源)获取英雄数据。...通过将AppComponent锁定到HeroService的特定实现,切换实现用于不同的场景(如离线操作或使用不同的模拟版本进行测试)将很困难。...您可能会试图构造函数调用getHeroes()方法,但构造函数不应包含复杂的逻辑,特别是调用服务器的构造函数(如数据访问方法)。 构造函数用于简单的初始化,如将构造函数参数连接到属性。...当组件实现该方法时,Angular会在适当的时候调用它。 “Lifecycle Hooks”页面详细了解生命周期挂钩。

    2.9K10

    【译】Angular,向子组件传值的5种方式

    使用Angular Router 使用NgRx 我会从最基本的开始,最后整个会变得很复杂。...它们每一个技术都能适应众多的场景,但由你来决定你的app, 最终使用哪个技术! Inputs Inputs 是最简单最直接的传值到子组件内的方式。...只需要添加input 装饰器到相应的属性,如下: @Input() price:number; 模板文件,它只是一个属性,你可以用  [ ] 来绑定它的值,也可以传入静态值。...ViewChild 使用ViewChild,你可以操作子组件内的属性以及方法。动态插入组件或元素时,你可以通过子组件的类或模板引用变量的方式,来直接引用子组件,这技术就会得心应手。...要使用ViewChild,需要传入子组件的类或是模板引用变量,这样父组件内轻易的得到属性指向子组件。

    2.1K20
    领券