Skip to content

Commit 242d93e

Browse files
andrewtelnovandrewtelnov
authored
Use uniqueId in Base classes (#10470)
* Use uniqueId in Base classes * Fix markup tests * FIx e2e tests after changing the question.id value * Remove using "normalizedId" * FIx functional tests * FIx markup tests * Use uniqueId in rendering for key attributes * FIx compilation in Angular
1 parent 922e230 commit 242d93e

File tree

56 files changed

+181
-219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+181
-219
lines changed

‎e2e/questions/checkboxes.spec.ts‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -72,31 +72,26 @@ frameworks.forEach((framework) => {
7272
});
7373

7474
test("change column count", async ({ page }) => {
75-
const getClassName = async () => {
76-
return await page.evaluate(() => {
77-
const element = document.querySelector("div[id*=sq_1] fieldset > div > div");
78-
return element ? element.className : "";
79-
});
75+
const getClassName = async (colCount: number) => {
76+
const clName = colCount > 1 ? ".sd-selectbase__column" : ".sd-selectbase__item";
77+
return await page.locator(clName).nth(0).getAttribute("class");
8078
};
8179

82-
let className = await getClassName();
80+
let className = await getClassName(4);
8381
expect(className).toContain("sv-q-column-4");
8482

8583
await page.evaluate(() => {
8684
window["survey"].getAllQuestions()[0].colCount = 1;
8785
});
8886

89-
className = await page.evaluate(() => {
90-
const element = document.querySelector("div[id*=sq_1] fieldset > div");
91-
return element ? element.className : "";
92-
});
87+
className = await getClassName(1);
9388
expect(className).toContain("sv-q-col-1");
9489

9590
await page.evaluate(() => {
9691
window["survey"].getAllQuestions()[0].colCount = 2;
9792
});
9893

99-
className = await getClassName();
94+
className = await getClassName(2);
10095
expect(className).toContain("sv-q-column-2");
10196
});
10297

@@ -107,18 +102,18 @@ frameworks.forEach((framework) => {
107102
return await page.evaluate(() => {
108103
const checkboxControlClassName = ".sd-checkbox__control";
109104
return document.querySelectorAll(
110-
`div[id*=sq_1] fieldset ${checkboxControlClassName}`
105+
`div[id*=sq_] fieldset ${checkboxControlClassName}`
111106
).length;
112107
});
113108
};
114109

115110
const getFirst = async () => {
116-
const element = await page.locator(`div[id*=sq_1] ${columnClassName}:nth-child(1) .sv-string-viewer`).nth(0).textContent();
111+
const element = await page.locator(`div[id*=sq_] ${columnClassName}:nth-child(1) .sv-string-viewer`).nth(0).textContent();
117112
return element || "";
118113
};
119114

120115
const getSecond = async () => {
121-
const element = await page.locator(`div[id*=sq_1] ${columnClassName}:nth-child(2) .sv-string-viewer`).nth(0).textContent();
116+
const element = await page.locator(`div[id*=sq_] ${columnClassName}:nth-child(2) .sv-string-viewer`).nth(0).textContent();
122117
return element || "";
123118
};
124119

@@ -178,7 +173,7 @@ frameworks.forEach((framework) => {
178173
const columnClassName = ".sd-selectbase__column";
179174
const checkboxControlClassName = ".sd-checkbox__control";
180175
return document.querySelectorAll(
181-
`div[id*=sq_1] fieldset ${checkboxControlClassName}`
176+
`div[id*=sq_] fieldset ${checkboxControlClassName}`
182177
).length;
183178
});
184179
};
@@ -246,7 +241,7 @@ frameworks.forEach((framework) => {
246241
return await page.evaluate(() => {
247242
const columnClassName = ".sd-selectbase__column";
248243
const element = document.querySelector(
249-
`div[id*=sq_1] fieldset ${columnClassName}:nth-child(1) div:nth-of-type(4)`
244+
`div[id*=sq_] fieldset ${columnClassName}:nth-child(1) div:nth-of-type(4)`
250245
);
251246
return element ? element.textContent : "";
252247
});

‎functionalTests/questions/matrix.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ frameworks.forEach((framework) => {
4242
let surveyResult;
4343

4444
await t
45-
.click("input[name=\"sq_100_easy_to_use\"][value=\"5\"]")
45+
.click(Selector("input[value=\"5\"]").nth(3))
4646
.click("input[value=Complete]");
4747

4848
surveyResult = await getSurveyResult();
@@ -53,8 +53,8 @@ frameworks.forEach((framework) => {
5353
let surveyResult;
5454

5555
await t
56-
.click("input[name=\"sq_100_does_what_it_claims\"][value=\"4\"]")
57-
.click("input[name=\"sq_100_easy_to_use\"][value=\"5\"]")
56+
.click(Selector("input[value=\"4\"]").nth(1))
57+
.click(Selector("input[value=\"5\"]").nth(3))
5858
.click("input[value=Complete]");
5959

6060
surveyResult = await getSurveyResult();
@@ -73,10 +73,10 @@ frameworks.forEach((framework) => {
7373
await t.expect(typeof surveyResult).eql("undefined");
7474

7575
await t
76-
.click("input[name=\"sq_100_affordable\"][value=\"3\"]")
77-
.click("input[name=\"sq_100_does_what_it_claims\"][value=\"4\"]")
78-
.click("input[name=\"sq_100_better_than_others\"][value=\"2\"]")
79-
.click("input[name=\"sq_100_easy_to_use\"][value=\"5\"]")
76+
.click(Selector("input[value=\"3\"]").nth(0))
77+
.click(Selector("input[value=\"4\"]").nth(1))
78+
.click(Selector("input[value=\"2\"]").nth(2))
79+
.click(Selector("[value=\"5\"]").nth(3))
8080
.click("input[value=Complete]");
8181

8282
surveyResult = await getSurveyResult();
@@ -98,12 +98,12 @@ frameworks.forEach((framework) => {
9898
assert.equal(await isCheckedClassExistsByIndex(2), false);
9999
assert.equal(await isCheckedClassExistsByIndex(3), false);
100100

101-
await t.click("input[name=\"sq_100_affordable\"][value=\"2\"]");
101+
await t.click(Selector("input[value=\"2\"]").nth(0));
102102

103103
assert.equal(await isCheckedClassExistsByIndex(2), true);
104104
assert.equal(await isCheckedClassExistsByIndex(3), false);
105105

106-
await t.click("input[name=\"sq_100_affordable\"][value=\"3\"]");
106+
await t.click(Selector("input[value=\"3\"]").nth(0));
107107

108108
assert.equal(await isCheckedClassExistsByIndex(2), false);
109109
assert.equal(await isCheckedClassExistsByIndex(3), true);

‎functionalTests/questions/radiogroup.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,15 @@ frameworks.forEach(framework => {
5050

5151
test("change column count", async t => {
5252
const getClassName = ClientFunction(
53-
() => document.querySelector("div[id*=sq_1] fieldset .sd-selectbase__column").className
53+
() => document.querySelector("div[id*=sq_] fieldset .sd-selectbase__column").className
5454
);
5555
let className = await getClassName();
5656
assert.notEqual(className.indexOf("sv-q-column-4"), -1);
5757

5858
await setOptions("car", { colCount: 1 });
5959

6060
const getClassNameOneCol = ClientFunction(
61-
() => document.querySelector("div[id*=sq_1] fieldset > .sd-radio").className
61+
() => document.querySelector("div[id*=sq_] fieldset > .sd-radio").className
6262
);
6363
className = await getClassNameOneCol();
6464
assert.notEqual(className.indexOf("sv-q-col-1"), -1);

‎packages/survey-angular-ui/src/questions/matrix.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ export class MatrixQuestionComponent extends QuestionAngular<QuestionMatrixModel
2020
this.detectChanges();
2121
}
2222
trackRowByFn(i: number, row: any): string {
23-
return "column-" + row.name + "-" + i;
23+
return row.uniqueId;
2424
}
2525
trackColumnByFn(i: number, column: any): string {
26-
return "column-" + column.value + "-" + i;
26+
return column.uniqueId;
2727
}
2828
}
2929

‎packages/survey-angular-ui/src/questions/multipletextrow.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ export class MultipleTextRowComponent extends BaseAngular<MutlipleTextRow> {
1414
return this.model;
1515
}
1616
trackItemBy (_: number, cell: MultipleTextCell): string {
17-
return "item" + cell.item.editor.id;
17+
return cell.item.editor.id;
1818
}
1919
}

‎packages/survey-angular-ui/src/questions/ranking.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { SelectBaseComponent } from "./selectbase.component";
99
})
1010
export class RankingQuestionComponent extends SelectBaseComponent<QuestionRankingModel> {
1111
public override inputType: string = "";
12-
override trackItemBy = (index: number, item: ItemValue): string => {
13-
return item.value + "-" + index + "-item";
12+
override trackItemBy = (index: number, item: ItemValue): number => {
13+
return item.uniqueId;
1414
};
1515
public override getDefaultComponentName(): string {
1616
return "sv-ng-ranking-item";

‎packages/survey-angular-ui/src/questions/selectbase.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export class SelectBaseComponent<T extends QuestionSelectBase> extends QuestionA
1818
return "sv-ng-selectbase-item";
1919
}
2020
public trackItemBy(_: number, item: ItemValue): any {
21-
return item.value;
21+
return item.uniqueId;
2222
}
2323
public trackColumnBy(index: number): any {
2424
return index;

‎packages/survey-core/src/itemvalue.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -299,10 +299,6 @@ export class ItemValue extends BaseAction implements ILocalizableOwner, IShortcu
299299
protected getCorrectValue(value: any): any {
300300
return value;
301301
}
302-
public get normalizedId(): string {
303-
const val = !Helpers.isValueEmpty(this.value) ? this.value.toString() : "";
304-
return val.replace(/[^a-zA-Z0-9_]/g, "_");
305-
}
306302
public get hasText(): boolean {
307303
return this.pureText ? true : false;
308304
}

‎packages/survey-core/src/panel.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@ import { PanelLayoutColumnModel } from "./panel-layout-column";
3333
import { ValidationContext } from "./question";
3434

3535
export class QuestionRowModel extends Base {
36-
private static rowCounter = 100;
37-
private static getRowId(): string {
38-
return "pr_" + QuestionRowModel.rowCounter++;
39-
}
4036
protected _scrollableParent: any = undefined;
4137
protected _updateVisibility: any = undefined;
4238
private get allowRendering(): boolean {
@@ -97,10 +93,8 @@ export class QuestionRowModel extends Base {
9793
this._scrollableParent = undefined;
9894
this._updateVisibility = undefined;
9995
}
100-
private idValue: string;
10196
constructor(public panel: PanelModelBase) {
10297
super();
103-
this.idValue = QuestionRowModel.getRowId();
10498
this.visible = panel.areInvisibleElementsShowing;
10599
this.createNewArray("elements");
106100
this.createNewArray("visibleElements");
@@ -114,7 +108,7 @@ export class QuestionRowModel extends Base {
114108
return this.isLazyRenderingValue === true;
115109
}
116110
public get id(): string {
117-
return this.idValue;
111+
return "pr_" + this.uniqueId;
118112
}
119113
protected equalsCore(obj: Base): boolean {
120114
return this == obj;
@@ -295,10 +289,6 @@ export class QuestionRowModel extends Base {
295289
*/
296290
export class PanelModelBase extends SurveyElement<Question>
297291
implements IPanel, IConditionRunner, ISurveyErrorOwner, ITitleOwner {
298-
private static panelCounter = 100;
299-
private static getPanelId(): string {
300-
return "sp_" + PanelModelBase.panelCounter++;
301-
}
302292

303293
private elementsValue: Array<IElement>;
304294
private isQuestionsReady: boolean = false;
@@ -395,7 +385,7 @@ export class PanelModelBase extends SurveyElement<Question>
395385
this.onAddElement.bind(this),
396386
this.onRemoveElement.bind(this)
397387
);
398-
this.setPropertyValueDirectly("id", PanelModelBase.getPanelId());
388+
this.setPropertyValueDirectly("id", "sp_" + this.uniqueId);
399389

400390
this.addExpressionProperty("visibleIf",
401391
(obj: Base, res: any) => { this.visible = res === true; },

‎packages/survey-core/src/question.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -249,10 +249,6 @@ export class ValidationContext extends AsyncElementsRunner {
249249
export class Question extends SurveyElement<Question>
250250
implements IQuestion, IConditionRunner, IValidatorOwner, ITitleOwner {
251251
[index: string]: any;
252-
private static questionCounter = 100;
253-
private static getQuestionId(): string {
254-
return "sq_" + Question.questionCounter++;
255-
}
256252
private isCustomWidgetRequested: boolean;
257253
private customWidgetValue: QuestionCustomWidget;
258254
customWidgetData = { isNeedRender: true };
@@ -333,7 +329,7 @@ export class Question extends SurveyElement<Question>
333329

334330
constructor(name: string) {
335331
super(name);
336-
this.setPropertyValueDirectly("id", Question.getQuestionId());
332+
this.setPropertyValueDirectly("id", "sq_" + this.uniqueId);
337333
this.onCreating();
338334
this.createNewArray("validators", (validator: any) => {
339335
validator.errorOwner = this;

0 commit comments

Comments
 (0)