ac4abff8-497d-4e8f-885f-a488225550ff

Committed 17 Apr 2024 09:54AM UTC coverage: 90.344% (-0.04%) from 90.387%

Build # ac4abff8-497d-4e8f-885f-a488225550ff

Build Type

Pull #3079

circleci

Committed by

smile1016

Commit Message

feat(segment): fix test case

Pull Request Pull Request #3079: feat(segment): fix options bug and style #PJM-12166

Run Details

5434 of 6661 branches covered (81.58%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

7 existing lines in 1 file now uncovered.

13176 of 13938 relevant lines covered (94.53%)

982.87 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

81.36

/src/segment/segment.component.ts

import {
    AfterContentInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChildren,
    DestroyRef,
    EventEmitter,
    HostBinding,
    Input,
    Output,
    QueryList,
    ViewEncapsulation,
    booleanAttribute,
    numberAttribute
} from '@angular/core';
import { ThumbAnimationProps } from 'ngx-tethys/core';
import { thumbMotion } from 'ngx-tethys/core';
import { ThySegmentItem } from './segment-item.component';
import { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';
import { ThySegmentEvent } from './types';
import { AnimationEvent } from '@angular/animations';
import { NgIf } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export type ThySegmentSize = 'xs' | 'sm' | 'md' | 'default';

export type ThySegmentMode = 'block' | 'inline';

/**
 * 分段控制器组件
 * @name thy-segment
 */
@Component({
    selector: 'thy-segment',
    templateUrl: './segment.component.html',
    exportAs: 'thySegment',
    animations: [thumbMotion],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: THY_SEGMENTED_COMPONENT,
            useExisting: ThySegment
        }
    ],
    host: {
        class: 'thy-segment',
        '[class.thy-segment-xs]': `thySize === 'xs'`,
        '[class.thy-segment-sm]': `thySize === 'sm'`,
        '[class.thy-segment-md]': `thySize === 'md'`,
        '[class.thy-segment-default]': `!thySize || thySize === 'default'`,
        '[class.thy-segment-block]': `thyMode === 'block'`
    },
    standalone: true,
    imports: [NgIf]
})
export class ThySegment implements IThySegmentComponent, AfterContentInit {
    /**
     * @internal
     */
    @ContentChildren(ThySegmentItem) options!: QueryList<ThySegmentItem>;

    /**
     * 大小
     * @type xs | sm | md | default
     */
    @Input() thySize: ThySegmentSize = 'default';

    /**
     * 模式
     * @type block | inline
     */
    @Input() thyMode: ThySegmentMode = 'block';

    /**
     * 是否禁用分段控制器
     */
    @Input({ transform: booleanAttribute })
    @HostBinding(`class.disabled`)
    thyDisabled = false;

    /**
     * 选中选项的索引
     */
    @Input({ transform: numberAttribute })
    set thyActiveIndex(value: number) {
        this._thyActiveIndex = value;
        if (value < 0 || value === this.activeIndex) {
            return;
        }
        setTimeout(() => {
            const selectedItem = this.options?.get(this.activeIndex);
            if (selectedItem) {
                selectedItem.unselect();
                this.changeSelectedItem(this.options.get(value));
            } else {
                this.activeIndex = value;
            }
        });
    }

    get thyActiveIndex() {
        return this._thyActiveIndex;
    }

    /**
     * 选项被选中的回调事件
     */
    @Output() readonly thySelectChange = new EventEmitter<ThySegmentEvent>();

    public selectedItem: ThySegmentItem;

    private _thyActiveIndex: number;

    private activeIndex = 0;

    public animationState: null | { value: string; params: ThumbAnimationProps } = null;

    public transitionedTo: any = null;

    constructor(private cdr: ChangeDetectorRef, private destroyRef: DestroyRef) {}

    ngAfterContentInit(): void {
        this.selectedItem = this.options.get(this.activeIndex) || this.options.get(0);
        this.selectedItem?.select();

        this.options.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.options.forEach(item => {
                item.unselect();
            });
            this.selectedItem = this.options.get(this.thyActiveIndex) || this.options.get(0);
            this.selectedItem?.select();
            this.cdr.detectChanges();
        });
    }

    public changeSelectedItem(item: ThySegmentItem, event?: Event): void {
        this.animationState = {
            value: 'from',
            params: getThumbAnimationProps(this.options?.get(this.activeIndex)?.elementRef.nativeElement!)
        };
        this.selectedItem = null;
        this.cdr.detectChanges();

        this.animationState = {
            value: 'to',
            params: getThumbAnimationProps(item.elementRef.nativeElement!)
        };
        this.transitionedTo = item;
        this.activeIndex = this.options?.toArray().findIndex(option => {
            return option.thyValue === item?.thyValue;
        });
        this.thySelectChange.emit({ event: event, value: item.thyValue, activeIndex: this.activeIndex });
        this.cdr.detectChanges();
    }

    public handleThumbAnimationDone(event: AnimationEvent): void {
        if (event.fromState === 'from') {
            this.selectedItem = this.transitionedTo;
            this.selectedItem?.select();
            this.transitionedTo = null;
            this.animationState = null;
            this.cdr.detectChanges();
        }
    }
}

function getThumbAnimationProps(element: HTMLElement): ThumbAnimationProps {
    return {
        transform: element.offsetLeft,
        width: element.clientWidth
    };
}

1	import {
2	AfterContentInit,
3	ChangeDetectionStrategy,
4	ChangeDetectorRef,
5	Component,
6	ContentChildren,
7	DestroyRef,
8	EventEmitter,
9	HostBinding,
10	Input,
11	Output,
12	QueryList,
13	ViewEncapsulation,	1✔
14	booleanAttribute,
15	numberAttribute	5✔
16	} from '@angular/core';	5✔
17	import { ThumbAnimationProps } from 'ngx-tethys/core';	1✔
18	import { thumbMotion } from 'ngx-tethys/core';
19	import { ThySegmentItem } from './segment-item.component';	4✔
20	import { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';	4✔
21	import { ThySegmentEvent } from './types';	4!
22	import { AnimationEvent } from '@angular/animations';	4✔
23	import { NgIf } from '@angular/common';	4✔
24	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
25
UNCOV 26	export type ThySegmentSize = 'xs' \| 'sm' \| 'md' \| 'default';	×
27
28	export type ThySegmentMode = 'block' \| 'inline';
29
30	/**
UNCOV 31	* 分段控制器组件	×
32	* @name thy-segment
33	*/
34	@Component({	15✔
35	selector: 'thy-segment',	15✔
36	templateUrl: './segment.component.html',	15✔
37	exportAs: 'thySegment',	15✔
38	animations: [thumbMotion],	15✔
39	encapsulation: ViewEncapsulation.None,	15✔
40	changeDetection: ChangeDetectionStrategy.OnPush,	15✔
41	providers: [	15✔
42	{	15✔
43	provide: THY_SEGMENTED_COMPONENT,
44	useExisting: ThySegment
45	}	15!
46	],	15✔
47	host: {	15✔
UNCOV 48	class: 'thy-segment',	×
UNCOV 49	'[class.thy-segment-xs]': `thySize === 'xs'`,	×
50	'[class.thy-segment-sm]': `thySize === 'sm'`,
UNCOV 51	'[class.thy-segment-md]': `thySize === 'md'`,	×
UNCOV 52	'[class.thy-segment-default]': `!thySize \|\| thySize === 'default'`,	×
UNCOV 53	'[class.thy-segment-block]': `thyMode === 'block'`	×
54	},
55	standalone: true,
56	imports: [NgIf]
57	})	5✔
58	export class ThySegment implements IThySegmentComponent, AfterContentInit {
59	/**
60	* @internal
61	*/	5✔
62	@ContentChildren(ThySegmentItem) options!: QueryList<ThySegmentItem>;	5✔
63		5✔
64	/**
65	* 大小
66	* @type xs \| sm \| md \| default
67	*/	5✔
68	@Input() thySize: ThySegmentSize = 'default';	5✔
69		14✔
70	/**
71	* 模式	5✔
72	* @type block \| inline	5✔
73	*/
74	@Input() thyMode: ThySegmentMode = 'block';
75		2✔
76	/**	1✔
77	* 是否禁用分段控制器	1✔
78	*/	1✔
79	@Input({ transform: booleanAttribute })	1✔
80	@HostBinding(`class.disabled`)	1✔
81	thyDisabled = false;
82
83	/**	1✔
84	* 选中选项的索引
85	*/
86	@Input({ transform: numberAttribute })
87	set thyActiveIndex(value: number) {	1✔
88	this._thyActiveIndex = value;
89	if (value < 0 \|\| value === this.activeIndex) {
90	return;
91	}
92	setTimeout(() => {
93	const selectedItem = this.options?.get(this.activeIndex);
94	if (selectedItem) {
95	selectedItem.unselect();
96	this.changeSelectedItem(this.options.get(value));	1✔
97	} else {
98	this.activeIndex = value;
99	}
100	});
101	}
102
103	get thyActiveIndex() {
104	return this._thyActiveIndex;
105	}
106
107	/**
108	* 选项被选中的回调事件
109	*/
110	@Output() readonly thySelectChange = new EventEmitter<ThySegmentEvent>();
111
112	public selectedItem: ThySegmentItem;
113
114	private _thyActiveIndex: number;
115
116	private activeIndex = 0;
117
118	public animationState: null \| { value: string; params: ThumbAnimationProps } = null;
119
120	public transitionedTo: any = null;
121
122	constructor(private cdr: ChangeDetectorRef, private destroyRef: DestroyRef) {}
123
124	ngAfterContentInit(): void {
125	this.selectedItem = this.options.get(this.activeIndex) \|\| this.options.get(0);	10✔
126	this.selectedItem?.select();
127
128	this.options.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
129	this.options.forEach(item => {
130	item.unselect();
131	});
132	this.selectedItem = this.options.get(this.thyActiveIndex) \|\| this.options.get(0);
133	this.selectedItem?.select();
134	this.cdr.detectChanges();
135	});
136	}
137
138	public changeSelectedItem(item: ThySegmentItem, event?: Event): void {
139	this.animationState = {
140	value: 'from',
141	params: getThumbAnimationProps(this.options?.get(this.activeIndex)?.elementRef.nativeElement!)
142	};
143	this.selectedItem = null;
144	this.cdr.detectChanges();
145
146	this.animationState = {
147	value: 'to',
148	params: getThumbAnimationProps(item.elementRef.nativeElement!)
149	};
150	this.transitionedTo = item;
151	this.activeIndex = this.options?.toArray().findIndex(option => {
152	return option.thyValue === item?.thyValue;
153	});
154	this.thySelectChange.emit({ event: event, value: item.thyValue, activeIndex: this.activeIndex });
155	this.cdr.detectChanges();
156	}
157
158	public handleThumbAnimationDone(event: AnimationEvent): void {
159	if (event.fromState === 'from') {
160	this.selectedItem = this.transitionedTo;
161	this.selectedItem?.select();
162	this.transitionedTo = null;
163	this.animationState = null;
164	this.cdr.detectChanges();
165	}
166	}
167	}
168
169	function getThumbAnimationProps(element: HTMLElement): ThumbAnimationProps {
170	return {
171	transform: element.offsetLeft,
172	width: element.clientWidth
173	};
174	}

atinc / ngx-tethys / ac4abff8-497d-4e8f-885f-a488225550ff

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous