Skip to content

Commit

Permalink
test(spec): add test example
Browse files Browse the repository at this point in the history 
include i18n, icon and image component
  • Loading branch information
@ng-nest-moon
ng-nest-moon committed Oct 21, 2024
1 parent ce9f03b commit 25ec5ff
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 167 deletions.
173 changes: 49 additions & 124 deletions lib/ng-nest/ui/i18n/i18n.pipe.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,142 +2,23 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, ChangeDetectorRef, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { XI18nPipe, XI18nDirective } from '@ng-nest/ui/i18n';
import { XI18nPrefix } from './i18n.property';
import { XCommentComponent, XCommentNode } from '@ng-nest/ui/comment';
import { XAddMinutes, XAddHours } from '@ng-nest/ui/core';
import { XCommentComponent } from '@ng-nest/ui/comment';
import { XButtonComponent } from '@ng-nest/ui/button';
import { XI18nService } from './i18n.service';
import en_US from './languages/en_US';
import zh_CN from './languages/zh_CN';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

describe(XI18nPrefix, () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestXI18nComponent],
imports: [XI18nPipe, XI18nDirective, XButtonComponent, XCommentComponent],
providers: [
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
provideExperimentalZonelessChangeDetection()
]
}).compileComponents();
});
describe(`default.`, () => {
let fixture: ComponentFixture<TestXI18nComponent>;
beforeEach(() => {
fixture = TestBed.createComponent(TestXI18nComponent);
fixture.detectChanges();
});
it('should create.', () => {
expect(true).toBe(true);
});
});
});
import { provideAnimations } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';

@Component({
template: `
<div class="row">
<x-button (click)="english()">切换为英文</x-button>
<x-button (click)="chinese()">切换为中文</x-button>
<x-button>{{ 'comment.comments' | xI18n }}</x-button>
<p x-i18n="comment.comments"></p>
<x-comment [data]="data"></x-comment>
</div>
<x-button>{{ 'comment.comments' | xI18n }}</x-button>
<p x-i18n="comment.comments"></p>
`
})
class TestXI18nComponent {
now = new Date();
src = 'https://ngnest.com/img/logo/logo-144x144.png';
content = `天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。
天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。`;
data: XCommentNode[] = [
{
id: '1',
src: this.src,
author: '张琪峰',
datetime: XAddMinutes(this.now, -40),
content: this.content,
count: 23,
likes: 88,
children: [
{
id: '1-1',
pid: '1',
src: this.src,
author: '刘三',
datetime: XAddMinutes(this.now, -30),
content: this.content,
likes: 2
},
{
id: '1-2',
pid: '1',
src: this.src,
author: '刘四',
datetime: XAddMinutes(this.now, -35),
content: this.content,
likes: 0
},
{
id: '1-2',
pid: '1',
src: this.src,
author: '刘五',
datetime: XAddMinutes(this.now, -38),
content: this.content,
likes: 0
}
]
},
{
id: '2',
src: this.src,
author: '李牧云',
datetime: XAddMinutes(this.now, -50),
content: this.content,
count: 2,
likes: 88,
children: [
{
id: '1-1',
pid: '1',
src: this.src,
author: '刘三',
datetime: XAddMinutes(this.now, -30),
content: this.content,
likes: 2
},
{
id: '1-2',
pid: '1',
src: this.src,
author: '刘四',
datetime: XAddMinutes(this.now, -35),
content: this.content,
likes: 0
}
]
},
{
id: '3',
src: this.src,
author: '刘芸',
datetime: XAddHours(this.now, -5),
content: this.content,
count: 0,
likes: 10,
children: []
}
];

constructor(
private i18nService: XI18nService,
private cdr: ChangeDetectorRef
Expand All @@ -160,3 +41,47 @@ class TestXI18nComponent {
this.cdr.detectChanges();
}
}

describe(XI18nPrefix, () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestXI18nComponent],
imports: [XI18nPipe, XI18nDirective, XButtonComponent, XCommentComponent],
providers: [
provideAnimations(),
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
provideExperimentalZonelessChangeDetection()
],
teardown: { destroyAfterEach: false }
}).compileComponents();
});
describe(`default.`, () => {
let fixture: ComponentFixture<TestXI18nComponent>;
let component: TestXI18nComponent;
beforeEach(() => {
fixture = TestBed.createComponent(TestXI18nComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create.', () => {
const com = fixture.debugElement.query(By.directive(XI18nDirective));
const btn = fixture.debugElement.query(By.directive(XButtonComponent));
expect(com.nativeElement.innerText).toBe('评论');
expect(btn.nativeElement.innerText).toBe('评论');
});
it('switch language.', () => {
component.english();
fixture.detectChanges();
const com = fixture.debugElement.query(By.directive(XI18nDirective));
const btn = fixture.debugElement.query(By.directive(XButtonComponent));
expect(com.nativeElement.innerText).toBe('Comments');
expect(btn.nativeElement.innerText).toBe('Comments');

component.chinese();
fixture.detectChanges();
expect(com.nativeElement.innerText).toBe('评论');
expect(btn.nativeElement.innerText).toBe('评论');
});
});
});
53 changes: 36 additions & 17 deletions lib/ng-nest/ui/icon/icon.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, provideExperimentalZonelessChangeDetection, signal } from '@angular/core';
import { By } from '@angular/platform-browser';
import { XIconComponent, XIconPrefix } from '@ng-nest/ui/icon';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { XComputedStyle, XSleep } from '@ng-nest/ui/core';

@Component({
standalone: true,
Expand All @@ -15,7 +16,7 @@ class XTestIconComponent {}
@Component({
standalone: true,
imports: [XIconComponent],
template: ` <x-icon> </x-icon> `
template: ` <x-icon [href]="href()" [type]="type()" [color]="color()" [spin]="spin()"> </x-icon> `
})
class XTestIconPropertyComponent {
href = signal('https://ngnest.com/static/icons/');
Expand All @@ -28,11 +29,8 @@ describe(XIconPrefix, () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [XTestIconComponent, XTestIconPropertyComponent],
providers: [
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
provideExperimentalZonelessChangeDetection()
]
providers: [provideAnimations(), provideHttpClient(withFetch()), provideExperimentalZonelessChangeDetection()],
teardown: { destroyAfterEach: false }
}).compileComponents();
});
describe('default.', () => {
Expand All @@ -48,23 +46,44 @@ describe(XIconPrefix, () => {
});
describe(`input.`, async () => {
let fixture: ComponentFixture<XTestIconPropertyComponent>;
// let component: XTestIconPropertyComponent;
let component: XTestIconPropertyComponent;
beforeEach(async () => {
fixture = TestBed.createComponent(XTestIconPropertyComponent);
// component = fixture.componentInstance;
component = fixture.componentInstance;
fixture.detectChanges();
});
it('href.', () => {
expect(true).toBe(true);
it('href.', async () => {
// href can be specified as empty, copy icon resources to the local asset directory
// icon resources: https://github.com/NG-NEST/ng-nest-icon
component.type.set('fto-user');
fixture.detectChanges();
await XSleep(300);
const icon = fixture.debugElement.query(By.css('x-icon'));
expect(icon.nativeElement).toHaveClass('fto-user');
expect(icon.nativeElement.firstChild.localName).toBe('svg');
});
it('type.', () => {
expect(true).toBe(true);
it('type.', async () => {
component.type.set('fto-user');
fixture.detectChanges();
await XSleep(300);
const icon = fixture.debugElement.query(By.css('x-icon'));
expect(icon.nativeElement).toHaveClass('fto-user');
expect(icon.nativeElement.firstChild.localName).toBe('svg');
});
it('color.', () => {
expect(true).toBe(true);
it('color.', async () => {
component.color.set('rgb(255, 255, 0)');
component.type.set('fto-user');
fixture.detectChanges();
const icon = fixture.debugElement.query(By.css('x-icon'));
const color = XComputedStyle(icon.nativeElement, 'color');
expect(color).toBe('rgb(255, 255, 0)');
});
it('spin.', () => {
expect(true).toBe(true);
component.type.set('fto-settings');
component.spin.set(true);
fixture.detectChanges();
const icon = fixture.debugElement.query(By.css('x-icon'));
expect(icon.nativeElement).toHaveClass('x-icon-spin');
});
});
});
2 changes: 1 addition & 1 deletion lib/ng-nest/ui/icon/icon.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class XIconComponent extends XIconProperty {

sourceUrl = computed(() => {
const type = this.type();
if (typeof type === 'undefined') return '';
if (typeof type === 'undefined' || type === '') return '';
const split = type.split('-');
const souce = split.shift();
if (typeof souce === 'undefined') return '';
Expand Down
1 change: 1 addition & 0 deletions lib/ng-nest/ui/image/image.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
[src]="src()"
[style.width]="width()"
[style.height]="height()"
[attr.alt]="alt()"
(error)="onError($event)"
(load)="onLoad($event)"
/>
Expand Down
Loading

0 comments on commit 25ec5ff

Please sign in to comment.