5679494411

pending completion

Build # 5679494411

Build Type

push

github

Committed by

lucas-koehler

Commit Message

angular-material: Fix unfocused description display for number renderer

The template had a bug closing the ngIf that checks whether the description
is shown too early. This lead to a DOMException and the description to never be shown.

Fix #2166

Run Details

110 of 179 branches covered (61.45%)

305 of 362 relevant lines covered (84.25%)

13.81 hits per line

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

62.16

/packages/angular-material/src/controls/autocomplete.renderer.ts

/*
  The MIT License
  
  Copyright (c) 2017-2019 EclipseSource Munich
  https://github.com/eclipsesource/jsonforms
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:
  
  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.
  
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
*/
import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit,
} from '@angular/core';
import type { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
import {
  Actions,
  composeWithUi,
  ControlElement,
  isEnumControl,
  OwnPropsOfControl,
  RankedTester,
  rankWith,
} from '@jsonforms/core';
import type { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

/**
 * To use this component you will need to add your own tester:
 * <pre><code>
 * ...
 * export const AutocompleteControlRendererTester: RankedTester = rankWith(2, isEnumControl);
 * ...
 * </code></pre>
 * Add the tester and renderer to JSONForms registry:
 * <pre><code>
 * ...
 * { tester: AutocompleteControlRendererTester, renderer: AutocompleteControlRenderer },
 * ...
 * </code></pre>
 * Furthermore you need to update your module.
 * <pre><code>
 * ...
 * imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
 * declarations: [AutocompleteControlRenderer],
 * entryComponents: [AutocompleteControlRenderer]
 * ...
 * </code></pre>
 *
 */
@Component({
  selector: 'AutocompleteControlRenderer',
  template: `
    <mat-form-field fxFlex [fxHide]="hidden">
      <mat-label>{{ label }}</mat-label>
      <input
        matInput
        type="text"
        (change)="onChange($event)"
        [id]="id"
        [formControl]="form"
        [matAutocomplete]="auto"
        (keydown)="updateFilter($event)"
        (focus)="focused = true"
        (focusout)="focused = false"
      />
      <mat-autocomplete
        autoActiveFirstOption
        #auto="matAutocomplete"
        (optionSelected)="onSelect($event)"
      >
        <mat-option
          *ngFor="let option of filteredOptions | async"
          [value]="option"
        >
          {{ option }}
        </mat-option>
      </mat-autocomplete>
      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
        description
      }}</mat-hint>
      <mat-error>{{ error }}</mat-error>
    </mat-form-field>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AutocompleteControlRenderer
  extends JsonFormsControl
  implements OnInit
{
  @Input() options: string[];
  filteredOptions: Observable<string[]>;
  shouldFilter: boolean;

  constructor(jsonformsService: JsonFormsAngularService) {
    super(jsonformsService);
  }
  getEventValue = (event: any) => event.target.value;

  ngOnInit() {
    super.ngOnInit();
    this.shouldFilter = false;
    this.filteredOptions = this.form.valueChanges.pipe(
      startWith(''),
      map((val) => this.filter(val))
    );
  }

  updateFilter(event: any) {
    // ENTER
    if (event.keyCode === 13) {
      this.shouldFilter = false;
    } else {
      this.shouldFilter = true;
    }
  }

  onSelect(ev: MatAutocompleteSelectedEvent) {
    const path = composeWithUi(this.uischema as ControlElement, this.path);
    this.shouldFilter = false;
    this.jsonFormsService.updateCore(
      Actions.update(path, () => ev.option.value)
    );
    this.triggerValidation();
  }

  filter(val: string): string[] {
    return (this.options || this.scopedSchema.enum || []).filter(
      (option) =>
        !this.shouldFilter ||
        !val ||
        option.toLowerCase().indexOf(val.toLowerCase()) === 0
    );
  }
  protected getOwnProps(): OwnPropsOfAutoComplete {
    return {
      ...super.getOwnProps(),
      options: this.options,
    };
  }
}

export const enumControlTester: RankedTester = rankWith(2, isEnumControl);

interface OwnPropsOfAutoComplete extends OwnPropsOfControl {
  options: string[];
}

1	/*
2	The MIT License
3
4	Copyright (c) 2017-2019 EclipseSource Munich
5	https://github.com/eclipsesource/jsonforms
6
7	Permission is hereby granted, free of charge, to any person obtaining a copy
8	of this software and associated documentation files (the "Software"), to deal
9	in the Software without restriction, including without limitation the rights
10	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11	copies of the Software, and to permit persons to whom the Software is
12	furnished to do so, subject to the following conditions:
13
14	The above copyright notice and this permission notice shall be included in
15	all copies or substantial portions of the Software.
16
17	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23	THE SOFTWARE.
24	*/
25	import {
26	ChangeDetectionStrategy,
27	Component,
28	Input,
29	OnInit,
30	} from '@angular/core';
31	import type { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
32	import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
33	import {
34	Actions,
35	composeWithUi,
36	ControlElement,
37	isEnumControl,
38	OwnPropsOfControl,
39	RankedTester,
40	rankWith,
41	} from '@jsonforms/core';
42	import type { Observable } from 'rxjs';
43	import { map, startWith } from 'rxjs/operators';
44
45	/**
46	* To use this component you will need to add your own tester:
47	* <pre><code>
48	* ...
49	* export const AutocompleteControlRendererTester: RankedTester = rankWith(2, isEnumControl);
50	* ...
51	* </code></pre>
52	* Add the tester and renderer to JSONForms registry:
53	* <pre><code>
54	* ...
55	* { tester: AutocompleteControlRendererTester, renderer: AutocompleteControlRenderer },
56	* ...
57	* </code></pre>
58	* Furthermore you need to update your module.
59	* <pre><code>
60	* ...
61	* imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
62	* declarations: [AutocompleteControlRenderer],
63	* entryComponents: [AutocompleteControlRenderer]
64	* ...
65	* </code></pre>
66	*
67	*/
68	@Component({
69	selector: 'AutocompleteControlRenderer',
70	template: `
71	<mat-form-field fxFlex [fxHide]="hidden">
72	<mat-label>{{ label }}</mat-label>
73	<input
74	matInput
75	type="text"
76	(change)="onChange($event)"
77	[id]="id"
78	[formControl]="form"
79	[matAutocomplete]="auto"
80	(keydown)="updateFilter($event)"
81	(focus)="focused = true"
82	(focusout)="focused = false"
83	/>
84	<mat-autocomplete
85	autoActiveFirstOption
86	#auto="matAutocomplete"
87	(optionSelected)="onSelect($event)"
88	>
89	<mat-option
90	*ngFor="let option of filteredOptions \| async"
91	[value]="option"
92	>
93	{{ option }}
94	</mat-option>
95	</mat-autocomplete>
96	<mat-hint *ngIf="shouldShowUnfocusedDescription() \|\| focused">{{
97	description
98	}}</mat-hint>
99	<mat-error>{{ error }}</mat-error>
100	</mat-form-field>
101	`,
102	changeDetection: ChangeDetectionStrategy.OnPush,
103	})
104	export class AutocompleteControlRenderer	1✔
105	extends JsonFormsControl	1✔
106	implements OnInit
107	{
108	@Input() options: string[];	1✔
109	filteredOptions: Observable<string[]>;
110	shouldFilter: boolean;
111
112	constructor(jsonformsService: JsonFormsAngularService) {
113	super(jsonformsService);	11!
114	}
115	getEventValue = (event: any) => event.target.value;	11✔
116
117	ngOnInit() {	22✔
118	super.ngOnInit();	22✔
119	this.shouldFilter = false;	22✔
120	this.filteredOptions = this.form.valueChanges.pipe(	22✔
121	startWith(''),
122	map((val) => this.filter(val))	40✔
123	);
124	}
125
126	updateFilter(event: any) {	1✔
127	// ENTER
128	if (event.keyCode === 13) {	×
129	this.shouldFilter = false;	×
130	} else {
131	this.shouldFilter = true;	×
132	}
133	}
134
135	onSelect(ev: MatAutocompleteSelectedEvent) {	1✔
136	const path = composeWithUi(this.uischema as ControlElement, this.path);	×
137	this.shouldFilter = false;	×
138	this.jsonFormsService.updateCore(	×
139	Actions.update(path, () => ev.option.value)	×
140	);
141	this.triggerValidation();	×
142	}
143
144	filter(val: string): string[] {	40✔
145	return (this.options \|\| this.scopedSchema.enum \|\| []).filter(	40!
146	(option) =>
147	!this.shouldFilter \|\|	120!
148	!val \|\|
149	option.toLowerCase().indexOf(val.toLowerCase()) === 0
150	);
151	}
152	protected getOwnProps(): OwnPropsOfAutoComplete {	1✔
153	return {	32✔
154	...super.getOwnProps(),
155	options: this.options,
156	};
157	}
158	}	1✔
159
160	export const enumControlTester: RankedTester = rankWith(2, isEnumControl);	1✔
161
162	interface OwnPropsOfAutoComplete extends OwnPropsOfControl {
163	options: string[];
164	}

eclipsesource / jsonforms / 5679494411

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