@spectrum-web-components/button 0.42.3 → 0.42.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +10 -10
- package/src/Button.dev.js +2 -4
- package/src/Button.dev.js.map +1 -1
- package/src/ButtonBase.dev.js +1 -2
- package/src/ButtonBase.dev.js.map +1 -1
- package/src/ClearButton.dev.js +1 -2
- package/src/ClearButton.dev.js.map +1 -1
- package/src/CloseButton.dev.js +1 -2
- package/src/CloseButton.dev.js.map +1 -1
- package/src/button.css.dev.js +1 -1
- package/src/button.css.dev.js.map +1 -1
- package/src/button.css.js +1 -1
- package/src/button.css.js.map +1 -1
- package/src/spectrum-button.css.dev.js +1 -1
- package/src/spectrum-button.css.dev.js.map +1 -1
- package/src/spectrum-button.css.js +1 -1
- package/src/spectrum-button.css.js.map +1 -1
- package/test/button.test.js +161 -193
- package/test/button.test.js.map +2 -2
package/test/button.test.js
CHANGED
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
waitUntil
|
|
10
10
|
} from "@open-wc/testing";
|
|
11
11
|
import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
|
|
12
|
+
import { stub } from "sinon";
|
|
12
13
|
import {
|
|
13
14
|
a11ySnapshot,
|
|
14
15
|
findAccessibilityNode,
|
|
@@ -17,18 +18,47 @@ import {
|
|
|
17
18
|
import { spy } from "sinon";
|
|
18
19
|
describe("Button", () => {
|
|
19
20
|
testForLitDevWarnings(
|
|
20
|
-
async () => await fixture(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
`
|
|
24
|
-
)
|
|
21
|
+
async () => await fixture(html`
|
|
22
|
+
<sp-button tabindex="0">Button</sp-button>
|
|
23
|
+
`)
|
|
25
24
|
);
|
|
25
|
+
describe("dev mode", () => {
|
|
26
|
+
let consoleWarnStub;
|
|
27
|
+
before(() => {
|
|
28
|
+
window.__swc.verbose = true;
|
|
29
|
+
consoleWarnStub = stub(console, "warn");
|
|
30
|
+
});
|
|
31
|
+
afterEach(() => {
|
|
32
|
+
consoleWarnStub.resetHistory();
|
|
33
|
+
});
|
|
34
|
+
after(() => {
|
|
35
|
+
window.__swc.verbose = false;
|
|
36
|
+
consoleWarnStub.restore();
|
|
37
|
+
});
|
|
38
|
+
it("warns in devMode when white/black variant is provided", async () => {
|
|
39
|
+
const el = await fixture(html`
|
|
40
|
+
<sp-button tabindex="0" variant="white">Button</sp-button>
|
|
41
|
+
`);
|
|
42
|
+
await elementUpdated(el);
|
|
43
|
+
expect(consoleWarnStub.called).to.be.true;
|
|
44
|
+
const spyCall = consoleWarnStub.getCall(0);
|
|
45
|
+
expect(
|
|
46
|
+
spyCall.args.at(0).includes("deprecated"),
|
|
47
|
+
"confirm deprecated variant warning"
|
|
48
|
+
).to.be.true;
|
|
49
|
+
expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
|
|
50
|
+
data: {
|
|
51
|
+
localName: "sp-button",
|
|
52
|
+
type: "api",
|
|
53
|
+
level: "default"
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
});
|
|
26
58
|
it("loads default", async () => {
|
|
27
|
-
const el = await fixture(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
`
|
|
31
|
-
);
|
|
59
|
+
const el = await fixture(html`
|
|
60
|
+
<sp-button tabindex="0">Button</sp-button>
|
|
61
|
+
`);
|
|
32
62
|
await elementUpdated(el);
|
|
33
63
|
expect(el).to.not.be.undefined;
|
|
34
64
|
expect(el.textContent).to.include("Button");
|
|
@@ -37,24 +67,20 @@ describe("Button", () => {
|
|
|
37
67
|
expect(el.getAttribute("variant")).to.equal("accent");
|
|
38
68
|
});
|
|
39
69
|
it("loads default w/ element content", async () => {
|
|
40
|
-
const el = await fixture(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
`
|
|
44
|
-
);
|
|
70
|
+
const el = await fixture(html`
|
|
71
|
+
<sp-button label="Button"><svg></svg></sp-button>
|
|
72
|
+
`);
|
|
45
73
|
await elementUpdated(el);
|
|
46
74
|
expect(el).to.not.be.undefined;
|
|
47
75
|
await expect(el).to.be.accessible();
|
|
48
76
|
});
|
|
49
77
|
it("loads default w/ an icon", async () => {
|
|
50
|
-
const el = await fixture(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
`
|
|
57
|
-
);
|
|
78
|
+
const el = await fixture(html`
|
|
79
|
+
<sp-button label="">
|
|
80
|
+
Button
|
|
81
|
+
<svg slot="icon"></svg>
|
|
82
|
+
</sp-button>
|
|
83
|
+
`);
|
|
58
84
|
await elementUpdated(el);
|
|
59
85
|
expect(el).to.not.be.undefined;
|
|
60
86
|
expect(el.textContent).to.include("Button");
|
|
@@ -62,23 +88,19 @@ describe("Button", () => {
|
|
|
62
88
|
await expect(el).to.be.accessible();
|
|
63
89
|
});
|
|
64
90
|
it("loads default only icon", async () => {
|
|
65
|
-
const el = await fixture(
|
|
66
|
-
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
`
|
|
71
|
-
);
|
|
91
|
+
const el = await fixture(html`
|
|
92
|
+
<sp-button label="Button" icon-only>
|
|
93
|
+
<svg slot="icon"></svg>
|
|
94
|
+
</sp-button>
|
|
95
|
+
`);
|
|
72
96
|
await elementUpdated(el);
|
|
73
97
|
expect(el).to.not.be.undefined;
|
|
74
98
|
await expect(el).to.be.accessible();
|
|
75
99
|
});
|
|
76
100
|
it("has a stable/predictable `updateComplete`", async () => {
|
|
77
|
-
const test = await fixture(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
`
|
|
81
|
-
);
|
|
101
|
+
const test = await fixture(html`
|
|
102
|
+
<div></div>
|
|
103
|
+
`);
|
|
82
104
|
let keydownTime = -1;
|
|
83
105
|
let updateComplete1 = -1;
|
|
84
106
|
let updateComplete2 = -1;
|
|
@@ -105,11 +127,9 @@ describe("Button", () => {
|
|
|
105
127
|
expect(updateComplete2).lte(keydownTime);
|
|
106
128
|
});
|
|
107
129
|
it('manages "role"', async () => {
|
|
108
|
-
const el = await fixture(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
`
|
|
112
|
-
);
|
|
130
|
+
const el = await fixture(html`
|
|
131
|
+
<sp-button>Button</sp-button>
|
|
132
|
+
`);
|
|
113
133
|
await elementUpdated(el);
|
|
114
134
|
expect(el.getAttribute("role")).to.equal("button");
|
|
115
135
|
el.setAttribute("href", "#");
|
|
@@ -121,14 +141,12 @@ describe("Button", () => {
|
|
|
121
141
|
});
|
|
122
142
|
it("allows label to be toggled", async () => {
|
|
123
143
|
const testNode = document.createTextNode("Button");
|
|
124
|
-
const el = await fixture(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
`
|
|
131
|
-
);
|
|
144
|
+
const el = await fixture(html`
|
|
145
|
+
<sp-button>
|
|
146
|
+
${testNode}
|
|
147
|
+
<svg slot="icon"></svg>
|
|
148
|
+
</sp-button>
|
|
149
|
+
`);
|
|
132
150
|
await elementUpdated(el);
|
|
133
151
|
const labelTestableEl = el;
|
|
134
152
|
expect(labelTestableEl.hasLabel, "starts with label").to.be.true;
|
|
@@ -140,36 +158,26 @@ describe("Button", () => {
|
|
|
140
158
|
expect(labelTestableEl.hasLabel, "label is returned").to.be.true;
|
|
141
159
|
});
|
|
142
160
|
it("loads with href", async () => {
|
|
143
|
-
const el = await fixture(
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
`
|
|
147
|
-
);
|
|
161
|
+
const el = await fixture(html`
|
|
162
|
+
<sp-button href="test_url">With Href</sp-button>
|
|
163
|
+
`);
|
|
148
164
|
await elementUpdated(el);
|
|
149
165
|
expect(el).to.not.be.undefined;
|
|
150
166
|
expect(el.textContent).to.include("With Href");
|
|
151
167
|
});
|
|
152
168
|
it("loads with href and target", async () => {
|
|
153
|
-
const el = await fixture(
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
With Target
|
|
157
|
-
</sp-button>
|
|
158
|
-
`
|
|
159
|
-
);
|
|
169
|
+
const el = await fixture(html`
|
|
170
|
+
<sp-button href="test_url" target="_blank">With Target</sp-button>
|
|
171
|
+
`);
|
|
160
172
|
await elementUpdated(el);
|
|
161
173
|
expect(el).to.not.be.undefined;
|
|
162
174
|
expect(el.textContent).to.include("With Target");
|
|
163
175
|
});
|
|
164
176
|
it("accepts shit+tab interactions", async () => {
|
|
165
177
|
let focusedCount = 0;
|
|
166
|
-
const el = await fixture(
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
With Target
|
|
170
|
-
</sp-button>
|
|
171
|
-
`
|
|
172
|
-
);
|
|
178
|
+
const el = await fixture(html`
|
|
179
|
+
<sp-button href="test_url" target="_blank">With Target</sp-button>
|
|
180
|
+
`);
|
|
173
181
|
await elementUpdated(el);
|
|
174
182
|
const input = document.createElement("input");
|
|
175
183
|
el.insertAdjacentElement("beforebegin", input);
|
|
@@ -194,11 +202,9 @@ describe("Button", () => {
|
|
|
194
202
|
});
|
|
195
203
|
it("manages `disabled`", async () => {
|
|
196
204
|
const clickSpy = spy();
|
|
197
|
-
const el = await fixture(
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
`
|
|
201
|
-
);
|
|
205
|
+
const el = await fixture(html`
|
|
206
|
+
<sp-button @click=${() => clickSpy()}>Button</sp-button>
|
|
207
|
+
`);
|
|
202
208
|
await elementUpdated(el);
|
|
203
209
|
el.click();
|
|
204
210
|
await elementUpdated(el);
|
|
@@ -221,11 +227,9 @@ describe("Button", () => {
|
|
|
221
227
|
expect(clickSpy.calledOnce).to.be.true;
|
|
222
228
|
});
|
|
223
229
|
it("`disabled` manages `tabindex`", async () => {
|
|
224
|
-
const el = await fixture(
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
`
|
|
228
|
-
);
|
|
230
|
+
const el = await fixture(html`
|
|
231
|
+
<sp-button disabled>Button</sp-button>
|
|
232
|
+
`);
|
|
229
233
|
await elementUpdated(el);
|
|
230
234
|
expect(el.tabIndex).to.equal(-1);
|
|
231
235
|
expect(el.getAttribute("tabindex")).to.equal("-1");
|
|
@@ -239,13 +243,9 @@ describe("Button", () => {
|
|
|
239
243
|
expect(el.getAttribute("tabindex")).to.equal("-1");
|
|
240
244
|
});
|
|
241
245
|
it("manages `aria-disabled`", async () => {
|
|
242
|
-
const el = await fixture(
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
With Target
|
|
246
|
-
</sp-button>
|
|
247
|
-
`
|
|
248
|
-
);
|
|
246
|
+
const el = await fixture(html`
|
|
247
|
+
<sp-button href="test_url" target="_blank">With Target</sp-button>
|
|
248
|
+
`);
|
|
249
249
|
await elementUpdated(el);
|
|
250
250
|
expect(el.hasAttribute("aria-disabled"), "initially not").to.be.false;
|
|
251
251
|
el.disabled = true;
|
|
@@ -256,19 +256,17 @@ describe("Button", () => {
|
|
|
256
256
|
expect(el.hasAttribute("aria-disabled"), "finally not").to.be.false;
|
|
257
257
|
});
|
|
258
258
|
it("manages aria-label from disabled state", async () => {
|
|
259
|
-
const el = await fixture(
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
`
|
|
271
|
-
);
|
|
259
|
+
const el = await fixture(html`
|
|
260
|
+
<sp-button
|
|
261
|
+
href="test_url"
|
|
262
|
+
target="_blank"
|
|
263
|
+
label="clickable"
|
|
264
|
+
disabled
|
|
265
|
+
pending-label="Pending Button"
|
|
266
|
+
>
|
|
267
|
+
Click me
|
|
268
|
+
</sp-button>
|
|
269
|
+
`);
|
|
272
270
|
await elementUpdated(el);
|
|
273
271
|
expect(el.getAttribute("aria-label")).to.equal("clickable");
|
|
274
272
|
el.pending = true;
|
|
@@ -282,18 +280,16 @@ describe("Button", () => {
|
|
|
282
280
|
expect(el.getAttribute("aria-label")).to.equal("clickable");
|
|
283
281
|
});
|
|
284
282
|
it("manages aria-label from pending state", async () => {
|
|
285
|
-
const el = await fixture(
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
`
|
|
296
|
-
);
|
|
283
|
+
const el = await fixture(html`
|
|
284
|
+
<sp-button
|
|
285
|
+
href="test_url"
|
|
286
|
+
target="_blank"
|
|
287
|
+
label="clickable"
|
|
288
|
+
pending
|
|
289
|
+
>
|
|
290
|
+
Click me
|
|
291
|
+
</sp-button>
|
|
292
|
+
`);
|
|
297
293
|
await elementUpdated(el);
|
|
298
294
|
expect(el.getAttribute("aria-label")).to.equal("Pending");
|
|
299
295
|
el.disabled = true;
|
|
@@ -307,18 +303,16 @@ describe("Button", () => {
|
|
|
307
303
|
expect(el.getAttribute("aria-label")).to.equal("clickable");
|
|
308
304
|
});
|
|
309
305
|
it("manages aria-label set from outside", async () => {
|
|
310
|
-
const el = await fixture(
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
`
|
|
321
|
-
);
|
|
306
|
+
const el = await fixture(html`
|
|
307
|
+
<sp-button
|
|
308
|
+
href="test_url"
|
|
309
|
+
target="_blank"
|
|
310
|
+
aria-label="test"
|
|
311
|
+
pending-label="Pending Button"
|
|
312
|
+
>
|
|
313
|
+
Click me
|
|
314
|
+
</sp-button>
|
|
315
|
+
`);
|
|
322
316
|
await elementUpdated(el);
|
|
323
317
|
expect(el.getAttribute("aria-label")).to.equal("test");
|
|
324
318
|
el.pending = true;
|
|
@@ -335,11 +329,9 @@ describe("Button", () => {
|
|
|
335
329
|
expect(el.getAttribute("aria-label")).to.equal("test");
|
|
336
330
|
});
|
|
337
331
|
it("updates pending label accessibly", async () => {
|
|
338
|
-
const el = await fixture(
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
`
|
|
342
|
-
);
|
|
332
|
+
const el = await fixture(html`
|
|
333
|
+
<sp-button href="test_url" target="_blank">Button</sp-button>
|
|
334
|
+
`);
|
|
343
335
|
await elementUpdated(el);
|
|
344
336
|
el.pending = true;
|
|
345
337
|
await elementUpdated(el);
|
|
@@ -367,13 +359,9 @@ describe("Button", () => {
|
|
|
367
359
|
expect(el.pending).to.be.false;
|
|
368
360
|
});
|
|
369
361
|
it("manages tabIndex while disabled", async () => {
|
|
370
|
-
const el = await fixture(
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
With Target
|
|
374
|
-
</sp-button>
|
|
375
|
-
`
|
|
376
|
-
);
|
|
362
|
+
const el = await fixture(html`
|
|
363
|
+
<sp-button href="test_url" target="_blank">With Target</sp-button>
|
|
364
|
+
`);
|
|
377
365
|
await elementUpdated(el);
|
|
378
366
|
expect(el.tabIndex).to.equal(0);
|
|
379
367
|
el.disabled = true;
|
|
@@ -388,13 +376,9 @@ describe("Button", () => {
|
|
|
388
376
|
});
|
|
389
377
|
it("swallows `click` interaction when `[disabled]`", async () => {
|
|
390
378
|
const clickSpy = spy();
|
|
391
|
-
const el = await fixture(
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
Button
|
|
395
|
-
</sp-button>
|
|
396
|
-
`
|
|
397
|
-
);
|
|
379
|
+
const el = await fixture(html`
|
|
380
|
+
<sp-button disabled @click=${() => clickSpy()}>Button</sp-button>
|
|
381
|
+
`);
|
|
398
382
|
await elementUpdated(el);
|
|
399
383
|
expect(clickSpy.callCount).to.equal(0);
|
|
400
384
|
el.click();
|
|
@@ -403,11 +387,9 @@ describe("Button", () => {
|
|
|
403
387
|
});
|
|
404
388
|
it("translates keyboard interactions to click", async () => {
|
|
405
389
|
const clickSpy = spy();
|
|
406
|
-
const el = await fixture(
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
`
|
|
410
|
-
);
|
|
390
|
+
const el = await fixture(html`
|
|
391
|
+
<sp-button @click=${() => clickSpy()}>Button</sp-button>
|
|
392
|
+
`);
|
|
411
393
|
await elementUpdated(el);
|
|
412
394
|
el.dispatchEvent(
|
|
413
395
|
new KeyboardEvent("keypress", {
|
|
@@ -520,22 +502,20 @@ describe("Button", () => {
|
|
|
520
502
|
it('proxies clicks by "type"', async () => {
|
|
521
503
|
const submitSpy = spy();
|
|
522
504
|
const resetSpy = spy();
|
|
523
|
-
const test = await fixture(
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
>
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
`
|
|
538
|
-
);
|
|
505
|
+
const test = await fixture(html`
|
|
506
|
+
<form
|
|
507
|
+
@submit=${(event) => {
|
|
508
|
+
event.preventDefault();
|
|
509
|
+
submitSpy();
|
|
510
|
+
}}
|
|
511
|
+
@reset=${(event) => {
|
|
512
|
+
event.preventDefault();
|
|
513
|
+
resetSpy();
|
|
514
|
+
}}
|
|
515
|
+
>
|
|
516
|
+
<sp-button>Button</sp-button>
|
|
517
|
+
</form>
|
|
518
|
+
`);
|
|
539
519
|
const el = test.querySelector("sp-button");
|
|
540
520
|
await elementUpdated(el);
|
|
541
521
|
el.type = "submit";
|
|
@@ -556,11 +536,9 @@ describe("Button", () => {
|
|
|
556
536
|
});
|
|
557
537
|
it("proxies click by [href]", async () => {
|
|
558
538
|
const clickSpy = spy();
|
|
559
|
-
const el = await fixture(
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
`
|
|
563
|
-
);
|
|
539
|
+
const el = await fixture(html`
|
|
540
|
+
<sp-button href="test_url">With Href</sp-button>
|
|
541
|
+
`);
|
|
564
542
|
await elementUpdated(el);
|
|
565
543
|
el.anchorElement.addEventListener("click", (event) => {
|
|
566
544
|
event.preventDefault();
|
|
@@ -573,13 +551,11 @@ describe("Button", () => {
|
|
|
573
551
|
expect(clickSpy.callCount).to.equal(1);
|
|
574
552
|
});
|
|
575
553
|
it('manages "active" while focused', async () => {
|
|
576
|
-
const el = await fixture(
|
|
577
|
-
|
|
578
|
-
<
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
`
|
|
582
|
-
);
|
|
554
|
+
const el = await fixture(html`
|
|
555
|
+
<sp-button label="Button">
|
|
556
|
+
<svg slot="icon"></svg>
|
|
557
|
+
</sp-button>
|
|
558
|
+
`);
|
|
583
559
|
await elementUpdated(el);
|
|
584
560
|
el.focus();
|
|
585
561
|
await elementUpdated(el);
|
|
@@ -596,11 +572,9 @@ describe("Button", () => {
|
|
|
596
572
|
});
|
|
597
573
|
describe("deprecated variants and attributes", () => {
|
|
598
574
|
it("manages [quiet]", async () => {
|
|
599
|
-
const el = await fixture(
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
`
|
|
603
|
-
);
|
|
575
|
+
const el = await fixture(html`
|
|
576
|
+
<sp-button quiet>Button</sp-button>
|
|
577
|
+
`);
|
|
604
578
|
await elementUpdated(el);
|
|
605
579
|
expect(el.treatment).to.equal("outline");
|
|
606
580
|
el.quiet = false;
|
|
@@ -608,31 +582,25 @@ describe("Button", () => {
|
|
|
608
582
|
expect(el.treatment).to.equal("fill");
|
|
609
583
|
});
|
|
610
584
|
it('upgrades [variant="cta"] to [variant="accent"]', async () => {
|
|
611
|
-
const el = await fixture(
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
`
|
|
615
|
-
);
|
|
585
|
+
const el = await fixture(html`
|
|
586
|
+
<sp-button variant="cta">Button</sp-button>
|
|
587
|
+
`);
|
|
616
588
|
await elementUpdated(el);
|
|
617
589
|
expect(el.variant).to.equal("accent");
|
|
618
590
|
});
|
|
619
591
|
it('manages [variant="overBackground"]', async () => {
|
|
620
|
-
const el = await fixture(
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
`
|
|
624
|
-
);
|
|
592
|
+
const el = await fixture(html`
|
|
593
|
+
<sp-button variant="overBackground">Button</sp-button>
|
|
594
|
+
`);
|
|
625
595
|
await elementUpdated(el);
|
|
626
596
|
expect(el.hasAttribute("variant")).to.not.equal("overBackground");
|
|
627
597
|
expect(el.treatment).to.equal("outline");
|
|
628
598
|
expect(el.static).to.equal("white");
|
|
629
599
|
});
|
|
630
600
|
it('forces [variant="accent"]', async () => {
|
|
631
|
-
const el = await fixture(
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
`
|
|
635
|
-
);
|
|
601
|
+
const el = await fixture(html`
|
|
602
|
+
<sp-button variant="not-supported">Button</sp-button>
|
|
603
|
+
`);
|
|
636
604
|
await elementUpdated(el);
|
|
637
605
|
expect(el.variant).to.equal("accent");
|
|
638
606
|
});
|