SAP Spartacus autofocus Directive的失败的单元测试 - 2021年1月13日 1.1

最新推荐文章于 2023-03-23 15:08:53 发布
最新推荐文章于 2023-03-23 15:08:53 发布
阅读量302 收藏
点赞数
分类专栏： Spartacus标准开发 我的工作日志
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/112569313
版权

我现在把setDefaultConfiguration移到ngAfterViewInit里了：

所以对于这段代码：

<div cxAutoFocus id="a">

auto focus的ngAfterViewInit执行时，其父类的super.ngAfterViewInit还未有机会执行，所以此时第48行的this.handleFocus不会得到执行。

host是定义在base-focus.directive.ts上的：

做出如下改动之后，单元测试通过：

初始化工作仍然放在ngOnInit里：

更多Jerry的原创文章，尽在：“汪子熙”:

汪子熙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
spartacus-capybara：基于https：storefrontui.io外观和设计系统的SAP Spartacus主题。 Hybris的无头店面解决方案。 始终开放源代码，MIT许可证。 Divante用:blue_heart:制成
02-05
您可以将此存储库视为示例Spartacus实现或入门代码。 随意四处看看并获得启发。 :hammer: 当前状态：开发者预览 大多数工作已经完成。 但是，我们仍在开发和增强它。 :rocket: 实际观看 :sparkles: 产品特点 ...
hybris-b2b-spartacus:docker中的SAP Commerce B2B-与Spartacus组合
05-20
SAP Commerce + Spartacus docker-compose脚本 易于运行的脚本，可在本地Spatacus店面中运行SAP Commmerce。 脚本侧重于B2B功能和Powertools店面。 仅用于非生产用途。 怎么跑 安装码头工人和搬运工-撰写（ ， ） ...
自己动手开发SAP Spartacus focus Directive的单元测试
SAP 资深技术专家 Jerry Wang 的技术分享
12-22 306
在已有的单元测试代码，加了这个div标签之后就报错了： 报错：this.service.findFirstFocusable is not a function: at FocusDirective.get (http://localhost:9876/karma_webpack/src/layout/a11y/keyboard-focus/autofocus/auto-focus.directive.ts:91:25) 从调用栈能看出，FocusDirective实例调用get时，会将控制转角给t
SAP Spartacus AutoFocus directive的一个例子
SAP 资深技术专家 Jerry Wang 的技术分享
12-19 263
有两种变体，如果不加方括号，直接传字符串给cxFocus，字符串内容会被当成persistent key处理；否则，传一个对象给[cxFocus]: <div [cxFocus]="{ autofocus: true, group: 'address-book-dialog' }"> <button class="close">Jerry Button</button> <input class="value" cxFocus="key-1" />
SAP Spartacus autofocus directive，如何锁住使用了directive的元素本身？
SAP 资深技术专家 Jerry Wang 的技术分享
12-19 241
如果autofocus传字符串:host进去，就可以锁住自身。
SAP Spartacus的Lock Focus Directive单元测试实现
SAP 资深技术专家 Jerry Wang 的技术分享
12-21 292
测试用的HTML页面： <div cxLockFocus id="a"> <button id="a1"></button> <a href="" id="a2"></a> </div> <div [cxLockFocus]="{ lock: true, group: 'g1' }" id="b" tabindex="-1"> <button id="b1"&
SAP Spartacus PersistFocus Directive是采取怎样的数据结构来存储focus信息的
SAP 资深技术专家 Jerry Wang 的技术分享
12-19 278
自动focus的directive会在ngAfterViewInit里调用不含输入参数的handleFocus： autofocus 的directive AfterViewInit里会handleFocus： 先执行子类LockFocus的handleFocus： 再执行父类的handleEvent，里面将focus信息写入内存的map里： focusDirective使用时没有传optional的group也不要紧，使用默认的_g_： group为key，focus Directive的ke
SAP Spartacus lock directive锁住元素所有子元素及设置FOCUS_GROUP_ATTR的行为
SAP 资深技术专家 Jerry Wang 的技术分享
12-19 318
FOCUS_GROUP_ATTR: data-cx-focus-group: 这个属性是动态添加上去的吗？ 如何判断哪个元素应该被focus，在auto-focus.service.ts里的selectFocusUtil里实现： select-focus.util.ts的selector，来自focus directive的配置config.autofocus, 只要focus传一个字符串，就将其当成selector： 如果autofucs是一个字符串，就用来当成selector，否则用硬编码的[au
SAP Spartacus lock focus Directive的工作原理示意图
SAP 资深技术专家 Jerry Wang 的技术分享
12-21 357
源代码： import { AfterViewInit, Directive, ElementRef, EventEmitter, HostBinding, HostListener, OnInit, Output, Renderer2, } from '@angular/core'; import { FOCUS_GROUP_ATTR, LockFocusConfig } from '../keyboard-focus.model'; import { TrapFocu
SAP Spartacus auto focus Directive的工作原理示意图
SAP 资深技术专家 Jerry Wang 的技术分享
12-21 290
import { AfterViewInit, Directive, ElementRef, SimpleChanges } from '@angular/core'; import { EscapeFocusDirective } from '../escape/escape-focus.directive'; import { AutoFocusConfig } from '../keyboard-focus.model'; import { AutoFocusService } from './aut
SAP Spartacus unit detail 页面显示后自动 focus 设置的原理
SAP 资深技术专家 Jerry Wang 的技术分享
04-12 360
这个自动 focus 设置的效果是：我们从 Spartacus Unit list 页面，随便选择一行，进入明细页面之后： 键盘 focus 会自动停留在 detail 页面(下图右边红色矩形框内)第一个 focusable 的元素上： 敲回车试试： 发现 (i) icon 是 unit 明细页面第一个 focusable 的元素。 这个功能的实现原理：在 unit 明细页面，即 unit-details.component.html 里，将 cx-org-card 元素里施加 cxFocus, 自动
sap-commerce-2011-spartacus
03-28
sap-commerce-2011-spartacus
spartacus-core-builds:每晚为云商务-斯巴达克斯-店面核心库构建
05-28
Spartacus核心快照构建为Spartacus核心库构建快照此程序包的源位于库的core库中。 请提出问题并针对该存储库提出请求。 可以在找到有关快照构建的信息执照版权所有（c）2019 SAP SE或SAP关联公司。 版权所有。 该...
spartacus:Spartacus是SAP Commerce Cloud的精简，基于AngularJavaScript店面，专门通过Commerce REST API进行通信
03-22
Spartacus是SAP Commerce Cloud的精简，基于AngularJavaScript店面。 Spartacus仅通过Commerce REST API与SAP Commerce Cloud对话。 文档存储在我们专用的。 在我们的公共演示站点上尝试。 技术问题？ 与我们联系 ...
Windows 10 操作系统 System Interrupt 系统中断 CPU 占用率高的原因和解决方法
热门推荐
SAP 资深技术专家 Jerry Wang 的技术分享
09-04 2万+
原文：7 Fixes to System Interrupts High CPU Usage in Windows 10 什么是系统中断？ 为什么系统中断使用这么多 CPU？ 是病毒吗？ 如果您使用 Windows10 操作系统，并且遇到过系统中断CPU占用率高的问题，那么这篇文章不容错过。 What Causes System Interrupts High CPU Usage 系统中断是 Windows 操作系统的官方组成部分，它管理计算机硬件和系统之间的通信。您可以在任务管理器中发现它显示为一个进程
小学数学里的必胜问题，在扑克牌游戏里的应用
SAP 资深技术专家 Jerry Wang 的技术分享
03-19 5265
一副扑克牌共54张，两人轮流拿牌，每人每次只能拿1-4张，谁拿到最后1张牌谁就赢．先拿牌的人怎样才能确保胜利？ 假设先拿牌的是 Jerry，后拿牌的是 Tom. 要确保甲获胜, 用倒推的方式。假设到了倒数第二轮，还剩 5 张牌，此时该 Tom 拿，那么 Tom 无论取几张牌，都得给 Jerry 剩下 1 ～ 4张牌，则 Jerry 必胜。 54 ÷ ( 4+1 ) = 10 ······4，所以 Jerry 先取 4 张，然后无论 Tom 取几张，Jerry 都取 Tom 当前取的张数与 5 的差。这样每一
GitHub 推出了集成了 GPT-4 技术的 Copilot X，它对程序员有哪些积极和消极影响？
SAP 资深技术专家 Jerry Wang 的技术分享
03-23 3098
程序员需要保持对代码的质量和安全性的关注，并继续学习和提高自己的编程技能。增加程序员与机器的互动：Copilot X 可以理解程序员的意图并自动为其生成代码和注释，这意味着程序员可以与机器进行更紧密的互动，从而加速开发过程。提高编写代码的效率：Copilot X 可以利用先进的人工智能技术来快速生成代码和注释，从而帮助程序员更快地完成任务，减少错误和调试时间。提升代码质量：Copilot X 可以生成高质量的代码和注释，这可以帮助程序员遵循最佳实践和编程规范，从而提高代码的可读性和可维护性。
github 2FA里的recovery code，一定要好好保存
SAP 资深技术专家 Jerry Wang 的技术分享
11-05 2806
page layout
最新发布
07-28
回答: 在Spartacus中，页面布局可以通过页面模板和页面部分来配置。页面模板是包含全局布局和组件的，例如页眉和页脚部分。\[2\]而页面部分则是指页面中的特定区域，可以根据需要进行配置。为了向视图逻辑提供布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值