diff --git a/src/presentation/Scripts/Cards/NonCollapsingDirective.ts b/src/presentation/Scripts/Cards/NonCollapsingDirective.ts
index 2ac6ab2c..ebd91be1 100644
--- a/src/presentation/Scripts/Cards/NonCollapsingDirective.ts
+++ b/src/presentation/Scripts/Cards/NonCollapsingDirective.ts
@@ -1,6 +1,6 @@
 import { DirectiveOptions } from 'vue';
 
-const attributeName = 'data-interactionDoesNotCollapse';
+const attributeName = 'data-interaction-does-not-collapse';
 
 export function hasDirective(el: Element): boolean {
     if (el.hasAttribute(attributeName)) {
diff --git a/tests/unit/presentation/Scripts/Cards/NonCollapsingDirective.spec.ts b/tests/unit/presentation/Scripts/Cards/NonCollapsingDirective.spec.ts
new file mode 100644
index 00000000..704c8c5f
--- /dev/null
+++ b/tests/unit/presentation/Scripts/Cards/NonCollapsingDirective.spec.ts
@@ -0,0 +1,54 @@
+import 'mocha';
+import { expect } from 'chai';
+import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
+import { hasDirective } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
+
+const expectedAttributeName = 'data-interaction-does-not-collapse';
+
+describe('NonCollapsingDirective', () => {
+    describe('NonCollapsing', () => {
+        it('adds expected attribute to the element when inserted', () => {
+            // arrange
+            const element = getElementMock();
+            // act
+            NonCollapsing.inserted(element, undefined, undefined, undefined);
+            // assert
+            expect(element.hasAttribute(expectedAttributeName));
+        });
+    });
+    describe('hasDirective', () => {
+        it('returns true if the element has expected attribute', () => {
+            // arrange
+            const element = getElementMock();
+            element.setAttribute(expectedAttributeName, undefined);
+            // act
+            const actual = hasDirective(element);
+            // assert
+            expect(actual).to.equal(true);
+        });
+        it('returns true if the element has a parent with expected attribute', () => {
+            // arrange
+            const parent = getElementMock();
+            const element = getElementMock();
+            parent.appendChild(element);
+            element.setAttribute(expectedAttributeName, undefined);
+            // act
+            const actual = hasDirective(element);
+            // assert
+            expect(actual).to.equal(true);
+        });
+        it('returns false if nor the element or its parent has expected attribute', () => {
+            // arrange
+            const element = getElementMock();
+            // act
+            const actual = hasDirective(element);
+            // assert
+            expect(actual).to.equal(false);
+        });
+    });
+});
+
+function getElementMock(): HTMLElement {
+    const element = document.createElement('div');
+    return element;
+}