- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 AuthGuard
服务,负责检测用户是否已登录。如果未登录,我会将用户重定向到我们的 oauth 提供程序 url。
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { environment } from './../../environments/environment';
import { Session } from './../core/security/session.service';
@Injectable()
export class AuthGuard implements CanActivate {
/**
* Class constructor.
* @constructor
*
* @param {Session} - Instance of session.
*/
constructor(private session: Session) {}
/**
* Method to implements from CanActivate interface.
* Check if a user is authenticated.
*
* @return {boolean}
*/
canActivate(): boolean {
if (this.session.isActive()) {
return true;
}
this.redirectToProvider();
return false;
}
/**
* Redirect to Identity unauthorized url.
*/
private redirectToProvider() {
const unauthorizeUrl = environment.api.identity.unauthorizeUrl;
window.location.href = unauthorizeUrl;
}
}
我想知道当 Session 不存在时是否调用了 window.location.href
。这是我到目前为止所做的:
import { TestBed, async, inject } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthGuard } from './auth-guard.service';
import { Session } from './../core/security/session.service';
describe('AuthGuard', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
AuthGuard,
Session
],
imports: [RouterTestingModule]
});
});
describe('.canActivate', () => {
describe('active session', () => {
it('returns true',
async(inject([AuthGuard, Session], (guard, session) => {
session.set({ name: 'user' });
expect(guard.canActivate()).toBeTruthy();
})
));
});
describe('no session', () => {
it('redirects the user',
async(inject([AuthGuard, Session], (guard, session) => {
spyOn(window.location, 'href');
session.destroy();
expect(guard.canActivate()).toBeFalsy();
expect(window.location.href).toHaveBeenCalled();
})
));
});
})
});
但它给了我以下错误:
Failed: <spyOn> : href is not declared writable or has no setter
有没有办法模拟窗口对象来实现这个,或者我是否需要依赖一些特殊的类来处理这种重定向,以便我可以在测试中注入(inject)它们?
最佳答案
您可以将 window
作为注入(inject) token 注入(inject)。 Angular 在@angular/common 中还有一个 DOCUMENT
DI token ,您可以直接将其与 document.location.href
一起使用。
import { InjectionToken } from '@angular/core';
export const WindowToken = new InjectionToken('Window');
export function windowProvider() { return window; }
在app.module.ts
中添加:
providers: [
...
{ provide: WindowToken, useFactory: windowProvider }
]
并将其注入(inject)到服务中:
constructor(@Inject(WindowToken) private window: Window, private session: Session)
在您的规范文件中,模拟窗口对象并对其进行测试。我创建了一个包含两个测试服务(一个依赖于另一个)的工作示例。该服务是使用 Angular 的静态注入(inject)器创建的:
import { TestBed } from '@angular/core/testing';
import { CustomHrefService } from './custom-href.service';
import {AppModule} from '../app.module';
import {WindowToken} from './window';
import {Injector} from '@angular/core';
import {CustomHref2Service} from './custom-href-2.service';
const MockWindow = {
location: {
_href: '',
set href(url: string) {
this._href = url;
},
get href() {
return this._href;
}
}
};
describe('CustomHrefService', () => {
let service: CustomHrefService;
let setHrefSpy: jasmine.Spy;
beforeEach(() => {
setHrefSpy = spyOnProperty(MockWindow.location, 'href', 'set');
const injector = Injector.create({
providers: [
{ provide: CustomHrefService, useClass: CustomHrefService, deps: [WindowToken, CustomHref2Service]},
{ provide: CustomHref2Service, useClass: CustomHref2Service, deps: []},
{ provide: WindowToken, useValue: MockWindow}
]
});
service = injector.get(CustomHrefService);
});
it('should be registered on the AppModule', () => {
service = TestBed.configureTestingModule({ imports: [AppModule] }).get(CustomHrefService);
expect(service).toEqual(jasmine.any(CustomHrefService));
});
describe('#jumpTo', () => {
it('should modify window.location.href', () => {
const url = 'http://www.google.com';
service.jumpTo(url);
expect(setHrefSpy).toHaveBeenCalledWith(url);
});
});
});
关于Angular 4 : test if window. location.href 已被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44880851/
我正在尝试通过 node.js 中的 puppeteer 抓取数据 目前,我正在寻找一个脚本,用于抓取 well.ca 某个部分中的所有数据 现在,这是我试图通过 node.js 实现的方法/逻辑 1
href=""、href="#" 和 href="javascript:void(0)" 之间有什么区别? 它们有哪些不同的用途,什么时候一个比另一个更好? 最佳答案 href=""将重新加载当前页面
这是html代码: Delivery Schedule Route Abstract Report 我有 href 值。使用 href 值,我应该找到 anchor 标记并使用 jQuery
我不确定是不是因为我使用的是 Wordpress 但 this.href 没有返回包含它们的项目的 href(例如在“联系人”上它返回 http://www.domain.net/undefined反
这个问题在这里已经有了答案: Is there a "previous sibling" selector? (33 个答案) 关闭 8 年前。
这个问题在这里已经有了答案: Are you allowed to nest a link inside of a link? (9 个回答) 关闭 6 年前。 我有一个可点击的面板,其中有一个工具
我的 css 如下所示 ul.sometclass li a { display:inline-block; } 我的 html 看起来像 outer test
我没看明白这段代码是什么意思? a[href*=#]:not([href=#]) 谢谢! 最佳答案 简单地: a[href*=#] 获取 href 中包含 # 的所有 anchor (a)。 但是有:
document.getElementById("IDOFELEMENT"); 将其转换为链接的正确方法是什么? 我可以写吗 document.getElementById("IDOFELEME
所以我在我的 Next JS 应用程序中遇到了这个奇怪的问题,我导入了谷歌字体,如下所示 在我的浏览器中显示的不是 href,而是 data-href="...",所以问题是谷歌无法将此识别为链接
我想获取所选选项的 href 值,以便我现在可以转到使用按钮选择的链接。 这是我的代码
我正在尝试获取我的一个链接的 href 并将其克隆/复制到另一个链接的 href 这是我正在尝试的 var link = $('.topbook'); var link2 =
我基本上是试图从一个链接获取href,然后将其填充到另一个链接中: HTML: Link to thing Link to duplicate 脚本: $('.main-link').attr('hr
我使用的 CSS 工具提示必须包含在“a href”中才能工作。 iPad [add_to_cart_anchor item="ipad"]purchase the iPad[/add_to_c
我有一个以前是纯文本的电子邮件正文,但现在我把它变成了 HTML。电子邮件是使用多种方法生成的,但没有一种方法易于转换。 我有的是: Some content emailaddress@somethi
我正在尝试从网页中抓取数据,然后通过提取下一页的 href 来转到下一页。 但是,在这种情况下,包含下一页的 href 的标签是 href='#next'。使用 Chrome 检查此元素后,当我将鼠标
在我的 html 页面中,我看到一个链接,其“查看源代码”代码如下: 当我将鼠标悬停在链接上并单击它时,我看到了一个有效链接。但我无法找到生成此 URL 的位置和方式。我发现类 a.view 是在其
看完这篇文章net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/我
我想用 SvelteKit 构建一个 Web 应用程序,其中一页列出所有项目(带有潜在的搜索查询参数),然后每个单独的项目一页。如果我必须使用后端生成的所有内容以老式方式构建它,我的路径将是 /ite
此 js 搜索包含 page=fleet 的 href其中: var links = document.querySelectorAll('a[href*="page=fleet"]'); var h
我是一名优秀的程序员,十分优秀!