Skip to content

Commit 0824261

Browse files
author
Dennis Labordus
committed
Added Pattern for Labels + moved some test code.
Signed-off-by: Dennis Labordus <[email protected]>
1 parent 9014177 commit 0824261

File tree

8 files changed

+57
-110
lines changed

8 files changed

+57
-110
lines changed

‎src/compas/CompasLabelsField.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export class CompasLabelsFieldElement extends LitElement {
8787
label="${translate('compas.newLabel')}"
8888
?disabled="${labels.length >= COMPAS_LABELS_MAXIMUM}"
8989
.maybeValue=${null}
90+
pattern="[A-Za-z][0-9A-Za-z_-]*"
9091
required
9192
>
9293
</wizard-textfield>

‎test/testfiles/compas/compas-scl-private-update-existing.scd‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<compas:SclName>existing</compas:SclName>
55
<compas:SclFileType>CID</compas:SclFileType>
66
<compas:Labels>
7-
<compas:Label>Label 1</compas:Label>
7+
<compas:Label>Label1</compas:Label>
88
</compas:Labels>
99
</Private>
1010
<Header id="380b5e70-4753-4b59-b5b4-d51ceb26a30c" version="3.0.0" revision="Revision" toolID="toolID" nameStructure="IEDName"/>

‎test/unit/compas/CompasLabelsField.test.ts‎

Lines changed: 5 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { expect, fixture, html } from '@open-wc/testing';
22

3-
import { Button } from '@material/mwc-button';
4-
5-
import { WizardTextField } from '../../../src/wizard-textfield.js';
6-
73
import '../../../src/compas/CompasLabelsField.js';
84

95
import { CompasLabelsFieldElement } from '../../../src/compas/CompasLabelsField.js';
106

7+
import { addLabel, removeLabel } from './test-support.js';
8+
119
describe('compas-labels-field', () => {
1210
let element: CompasLabelsFieldElement;
1311
let doc: Document;
@@ -33,7 +31,7 @@ describe('compas-labels-field', () => {
3331
});
3432

3533
it('when adding a label then label element created', async () => {
36-
await addLabel(element, 'Label 1');
34+
await addLabel(element, 'Label1');
3735

3836
const labelElements = Array.from(
3937
element.newLabelsElement.querySelectorAll('Label')
@@ -66,7 +64,7 @@ describe('compas-labels-field', () => {
6664
});
6765

6866
it('when adding a label then label element created', async () => {
69-
await addLabel(element, 'Label 2');
67+
await addLabel(element, 'Label2');
7068

7169
const labelElements = Array.from(
7270
element.newLabelsElement.querySelectorAll('Label')
@@ -75,7 +73,7 @@ describe('compas-labels-field', () => {
7573
});
7674

7775
it('when removing a label then label element removed', async () => {
78-
await removeLabel(element, 'Label 1');
76+
await removeLabel(element, 'Label1');
7977

8078
const labelElements = Array.from(
8179
element.newLabelsElement.querySelectorAll('Label')
@@ -88,39 +86,3 @@ describe('compas-labels-field', () => {
8886
});
8987
});
9088
});
91-
92-
export async function addLabel(
93-
element: CompasLabelsFieldElement,
94-
value: string
95-
): Promise<void> {
96-
const newLabelField = <WizardTextField>(
97-
element.shadowRoot!.querySelector('wizard-textfield#newLabel')!
98-
);
99-
newLabelField.value = value;
100-
await element.updateComplete;
101-
102-
const addButton = <Button>(
103-
element.shadowRoot!.querySelector('mwc-icon-button[icon="new_label"]')!
104-
);
105-
await addButton.click();
106-
await element.updateComplete;
107-
}
108-
109-
export async function removeLabel(
110-
element: CompasLabelsFieldElement,
111-
value: string
112-
): Promise<void> {
113-
const removeButton = <Button>Array.from(
114-
element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item')
115-
)
116-
.filter(
117-
item =>
118-
!!Array.from(item.querySelectorAll('span')).find(element =>
119-
element.textContent!.includes(value)
120-
)
121-
)
122-
.map(item => item.querySelector('mwc-icon-button[icon="delete"]'))[0];
123-
124-
removeButton.click();
125-
await element.updateComplete;
126-
}

‎test/unit/compas/CompasSave.test.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { expect, fixtureSync, html, waitUntil } from '@open-wc/testing';
22
import sinon from 'sinon';
33

4+
import { TextField } from '@material/mwc-textfield';
5+
46
import { CompasExistsInElement } from '../../../src/compas/CompasExistsIn.js';
57
import { CompasLabelsFieldElement } from '../../../src/compas/CompasLabelsField.js';
68
import CompasSaveElement from '../../../src/compas/CompasSave.js';
79

810
import '../../../src/compas/CompasSave.js';
911

10-
import { addLabel } from './CompasLabelsField.test';
11-
import { TextField } from '@material/mwc-textfield';
12+
import { addLabel } from './test-support.js';
1213

1314
describe('compas-save', () => {
1415
let element: CompasSaveElement & CompasExistsInElement;
@@ -111,7 +112,7 @@ describe('compas-save', () => {
111112
element.shadowRoot!.querySelector('compas-labels-field')!
112113
);
113114

114-
await addLabel(labelsField, 'New Label');
115+
await addLabel(labelsField, 'NewLabel');
115116
await element.updateComplete;
116117

117118
element['updateLabels']();

‎test/unit/compas/__snapshots__/CompasLabelsField.test.snap.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ snapshots["compas-labels-field with no labels in private section looks like the
77
<wizard-textfield
88
id="newLabel"
99
label="[compas.newLabel]"
10+
pattern="[A-Za-z][0-9A-Za-z_-]*"
1011
required=""
1112
>
1213
</wizard-textfield>
@@ -27,6 +28,7 @@ snapshots["compas-labels-field with labels in private section looks like the lat
2728
<wizard-textfield
2829
id="newLabel"
2930
label="[compas.newLabel]"
31+
pattern="[A-Za-z][0-9A-Za-z_-]*"
3032
required=""
3133
>
3234
</wizard-textfield>
@@ -45,7 +47,7 @@ snapshots["compas-labels-field with labels in private section looks like the lat
4547
tabindex="0"
4648
>
4749
<span>
48-
Label 1
50+
Label1
4951
</span>
5052
<mwc-icon slot="graphic">
5153
label

‎test/unit/compas/__snapshots__/CompasSave.test.snap.js‎

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -110,62 +110,3 @@ snapshots["compas-save existing document in compas looks like the latest snapsho
110110
`;
111111
/* end snapshot compas-save existing document in compas looks like the latest snapshot */
112112

113-
snapshots["compas-labels-field with no labels in private section looks like the latest snapshot"] =
114-
`<div style="display: flex; flex-direction: row;">
115-
<div style="flex: auto;">
116-
<wizard-textfield
117-
id="newLabel"
118-
label="[compas.newLabel]"
119-
required=""
120-
>
121-
</wizard-textfield>
122-
</div>
123-
<div style="display: flex; align-items: center; height: 56px;">
124-
<mwc-icon-button icon="new_label">
125-
</mwc-icon-button>
126-
</div>
127-
</div>
128-
<mwc-list>
129-
</mwc-list>
130-
`;
131-
/* end snapshot compas-labels-field with no labels in private section looks like the latest snapshot */
132-
133-
snapshots["compas-labels-field with labels in private section looks like the latest snapshot"] =
134-
`<div style="display: flex; flex-direction: row;">
135-
<div style="flex: auto;">
136-
<wizard-textfield
137-
id="newLabel"
138-
label="[compas.newLabel]"
139-
required=""
140-
>
141-
</wizard-textfield>
142-
</div>
143-
<div style="display: flex; align-items: center; height: 56px;">
144-
<mwc-icon-button icon="new_label">
145-
</mwc-icon-button>
146-
</div>
147-
</div>
148-
<mwc-list>
149-
<mwc-list-item
150-
aria-disabled="false"
151-
graphic="icon"
152-
hasmeta=""
153-
mwc-list-item=""
154-
tabindex="0"
155-
>
156-
<span>
157-
Label 1
158-
</span>
159-
<mwc-icon slot="graphic">
160-
label
161-
</mwc-icon>
162-
<mwc-icon-button
163-
icon="delete"
164-
slot="meta"
165-
>
166-
</mwc-icon-button>
167-
</mwc-list-item>
168-
</mwc-list>
169-
`;
170-
/* end snapshot compas-labels-field with labels in private section looks like the latest snapshot */
171-

‎test/unit/compas/private.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,14 +93,14 @@ describe('Private Utility', () => {
9393
const labelsElement = createLabels(privateElement);
9494
privateElement.append(labelsElement);
9595

96-
let labelElement: Element | null = createLabel(labelsElement, 'Label 1');
96+
let labelElement: Element | null = createLabel(labelsElement, 'Label1');
9797
expect(labelElement).to.be.not.null;
98-
expect(labelElement).to.have.text('Label 1');
98+
expect(labelElement).to.have.text('Label1');
9999

100100
labelsElement.append(labelElement);
101101
labelElement = labelsElement.querySelector('Label');
102102
expect(labelElement).to.be.not.null;
103-
expect(labelElement).to.have.text('Label 1');
103+
expect(labelElement).to.have.text('Label1');
104104
});
105105
});
106106

‎test/unit/compas/test-support.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Button } from '@material/mwc-button';
2+
3+
import { WizardTextField } from '../../../src/wizard-textfield.js';
4+
import { CompasLabelsFieldElement } from '../../../src/compas/CompasLabelsField.js';
5+
6+
export async function addLabel(
7+
element: CompasLabelsFieldElement,
8+
value: string
9+
): Promise<void> {
10+
const newLabelField = <WizardTextField>(
11+
element.shadowRoot!.querySelector('wizard-textfield#newLabel')!
12+
);
13+
newLabelField.value = value;
14+
await element.updateComplete;
15+
16+
const addButton = <Button>(
17+
element.shadowRoot!.querySelector('mwc-icon-button[icon="new_label"]')!
18+
);
19+
await addButton.click();
20+
await element.updateComplete;
21+
}
22+
23+
export async function removeLabel(
24+
element: CompasLabelsFieldElement,
25+
value: string
26+
): Promise<void> {
27+
const removeButton = <Button>Array.from(
28+
element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item')
29+
)
30+
.filter(
31+
item =>
32+
!!Array.from(item.querySelectorAll('span')).find(element =>
33+
element.textContent!.includes(value)
34+
)
35+
)
36+
.map(item => item.querySelector('mwc-icon-button[icon="delete"]'))[0];
37+
38+
removeButton.click();
39+
await element.updateComplete;
40+
}

0 commit comments

Comments
 (0)