Skip to content

Commit 52a113f

Browse files
mukul-agrapoza
mukul-a
authored and
grapoza
committed
Updated template refs used with useTemplateRef
Updated template refs used with `useTemplateRef` to not match its reference variable name, as a workaround to avoid the vue warning ("Set operation on key "value" failed: target is readonly") Fix references to nodeElement in TreeViewNode tests Bump version to 7.0.1
1 parent 8296344 commit 52a113f

File tree

4 files changed

+25
-25
lines changed

4 files changed

+25
-25
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@grapoza/vue-tree",
3-
"version": "7.0.0",
3+
"version": "7.0.1",
44
"description": "Tree components for Vue 3",
55
"author": "Gregg Rapoza <[email protected]>",
66
"license": "MIT",

‎src/components/TreeView.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div ref="treeElement" class="grtv-wrapper" :class="skinClass">
2+
<div ref="treeElementRef" class="grtv-wrapper" :class="skinClass">
33
<slot v-if="!areNodesLoaded" name="loading-root">
44

55
<span class="grtv-loading">
@@ -167,7 +167,7 @@ const areNodesAsyncLoaded = ref(false);
167167
const isMounted = ref(false);
168168
const radioGroupValues = ref({});
169169
const uniqueId = ref('');
170-
const treeElement = useTemplateRef("treeElement");
170+
const treeElement = useTemplateRef("treeElementRef");
171171
172172
const { createMetaModel } = useNodeDataNormalizer();
173173

‎src/components/TreeViewNode.spec.ts

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ async function triggerKeydown(wrapper: ReturnType<typeof mount<typeof TreeViewNo
5757
vi.spyOn(e, "stopPropagation");
5858
vi.spyOn(e, "preventDefault");
5959

60-
wrapper.vm.$refs.nodeElement.dispatchEvent(e);
60+
wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
6161
await wrapper.vm.$nextTick();
6262
return e;
6363
}
@@ -87,17 +87,17 @@ describe('TreeViewNode.vue', () => {
8787
})
8888

8989
it('should have an ARIA role of treeitem', () => {
90-
expect(wrapper.vm.$refs.nodeElement.role).to.equal('treeitem');
90+
expect(wrapper.vm.$refs.nodeElementRef.role).to.equal('treeitem');
9191
});
9292

9393
it('should have a tabindex of 0 if focusable', async () => {
9494
wrapper.vm.modelValue.focusable = true;
9595
await wrapper.vm.$nextTick();
96-
expect(wrapper.vm.$refs.nodeElement.tabIndex).to.equal(0);
96+
expect(wrapper.vm.$refs.nodeElementRef.tabIndex).to.equal(0);
9797
});
9898

9999
it('should have a tabindex of -1 if not focusable', () => {
100-
expect(wrapper.vm.$refs.nodeElement.tabIndex).to.equal(-1);
100+
expect(wrapper.vm.$refs.nodeElementRef.tabIndex).to.equal(-1);
101101
});
102102
});
103103

@@ -306,7 +306,7 @@ describe('TreeViewNode.vue', () => {
306306
});
307307

308308
it('should have an aria-expanded attribute value of false', () => {
309-
expect(wrapper.vm.$refs.nodeElement.ariaExpanded).to.equal('false');
309+
expect(wrapper.vm.$refs.nodeElementRef.ariaExpanded).to.equal('false');
310310
});
311311
});
312312

@@ -338,7 +338,7 @@ describe('TreeViewNode.vue', () => {
338338
});
339339

340340
it('should have an aria-expanded attribute value of true', () => {
341-
expect(wrapper.vm.$refs.nodeElement.ariaExpanded).to.equal('true');
341+
expect(wrapper.vm.$refs.nodeElementRef.ariaExpanded).to.equal('true');
342342
});
343343
});
344344
});
@@ -390,7 +390,7 @@ describe('TreeViewNode.vue', () => {
390390
});
391391

392392
it('should not have an aria-expanded attribute', () => {
393-
expect(wrapper.vm.$refs.nodeElement.ariaExpanded).to.be.null;
393+
expect(wrapper.vm.$refs.nodeElementRef.ariaExpanded).to.be.null;
394394
});
395395
});
396396

@@ -413,7 +413,7 @@ describe('TreeViewNode.vue', () => {
413413
});
414414

415415
it('should not have an aria-selected attribute', () => {
416-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
416+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
417417
});
418418
});
419419

@@ -436,7 +436,7 @@ describe('TreeViewNode.vue', () => {
436436
});
437437

438438
it('should not have an aria-selected attribute', () => {
439-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
439+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
440440
});
441441
});
442442

@@ -461,7 +461,7 @@ describe('TreeViewNode.vue', () => {
461461
});
462462

463463
it('should have an aria-selected attribute of true', () => {
464-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('true');
464+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('true');
465465
});
466466
});
467467

@@ -484,7 +484,7 @@ describe('TreeViewNode.vue', () => {
484484
});
485485

486486
it('should not have an aria-selected attribute', () => {
487-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
487+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
488488
});
489489
});
490490
});
@@ -510,7 +510,7 @@ describe('TreeViewNode.vue', () => {
510510
});
511511

512512
it('should have an aria-selected attribute of true', () => {
513-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('true');
513+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('true');
514514
});
515515
});
516516

@@ -535,7 +535,7 @@ describe('TreeViewNode.vue', () => {
535535
});
536536

537537
it('should not have an aria-selected attribute', () => {
538-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.be.null;
538+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.be.null;
539539
});
540540
});
541541
});
@@ -561,7 +561,7 @@ describe('TreeViewNode.vue', () => {
561561
});
562562

563563
it('should have an aria-selected attribute of true', () => {
564-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('true');
564+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('true');
565565
});
566566
});
567567

@@ -584,7 +584,7 @@ describe('TreeViewNode.vue', () => {
584584
});
585585

586586
it('should have an aria-selected attribute of false', () => {
587-
expect(wrapper.vm.$refs.nodeElement.ariaSelected).to.equal('false');
587+
expect(wrapper.vm.$refs.nodeElementRef.ariaSelected).to.equal('false');
588588
});
589589
});
590590
});
@@ -1581,7 +1581,7 @@ describe('TreeViewNode.vue', () => {
15811581
});
15821582

15831583
it('should focus the node', () => {
1584-
expect(wrapper.vm.$refs.nodeElement).to.equal(document.activeElement);
1584+
expect(wrapper.vm.$refs.nodeElementRef).to.equal(document.activeElement);
15851585
});
15861586

15871587
it('should emit a treeViewNodeAriaFocusableChange event', () => {
@@ -1638,7 +1638,7 @@ describe('TreeViewNode.vue', () => {
16381638
beforeEach(async () => {
16391639
wrapper = await createWrapper();
16401640
const e =new KeyboardEvent('keydown', { shiftKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
1641-
wrapper.vm.$refs.nodeElement.dispatchEvent(e);
1641+
wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
16421642
await wrapper.vm.$nextTick();
16431643
});
16441644

@@ -1652,7 +1652,7 @@ describe('TreeViewNode.vue', () => {
16521652
beforeEach(async () => {
16531653
wrapper = await createWrapper();
16541654
const e =new KeyboardEvent('keydown', { altKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
1655-
wrapper.vm.$refs.nodeElement.dispatchEvent(e);
1655+
wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
16561656
await wrapper.vm.$nextTick();
16571657
});
16581658

@@ -1666,7 +1666,7 @@ describe('TreeViewNode.vue', () => {
16661666
beforeEach(async () => {
16671667
wrapper = await createWrapper();
16681668
const e =new KeyboardEvent('keydown', { ctrlKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
1669-
wrapper.vm.$refs.nodeElement.dispatchEvent(e);
1669+
wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
16701670
await wrapper.vm.$nextTick();
16711671
});
16721672

@@ -1680,7 +1680,7 @@ describe('TreeViewNode.vue', () => {
16801680
beforeEach(async () => {
16811681
wrapper = await createWrapper();
16821682
const e =new KeyboardEvent('keydown', { metaKey: true, keyCode: wrapper.vm.ariaKeyMap.focusPreviousItem[0] });
1683-
wrapper.vm.$refs.nodeElement.dispatchEvent(e);
1683+
wrapper.vm.$refs.nodeElementRef.dispatchEvent(e);
16841684
await wrapper.vm.$nextTick();
16851685
});
16861686

‎src/components/TreeViewNode.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
for a description of the expected data format.
55
-->
66
<li :id="nodeId"
7-
ref="nodeElement"
7+
ref="nodeElementRef"
88
class="grtvn"
99
:class="[
1010
customClasses.treeViewNode,
@@ -353,7 +353,7 @@ const elementsThatIgnoreClicks = 'input, .grtvn-self-expander, .grtvn-self-expan
353353
const metaModel = defineModel({ required: true, type: Object as PropType<TreeViewNodeMetaModel> });
354354
355355
const radioGroupValues = ref(props.initialRadioGroupValues);
356-
const nodeElement = useTemplateRef("nodeElement");
356+
const nodeElement = useTemplateRef("nodeElementRef");
357357
358358
// COMPUTED
359359

0 commit comments

Comments
 (0)