1 files changed, 28 insertions, 5 deletions
diff --git a/spec/frontend/read_more_spec.js b/spec/frontend/read_more_spec.js
index 80d7c941660..9eddc50d50a 100644
--- a/spec/frontend/read_more_spec.js
+++ b/spec/frontend/read_more_spec.js
@@ -1,21 +1,23 @@
-import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import { loadHTMLFixture, resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
 import initReadMore from '~/read_more';
 
 describe('Read more click-to-expand functionality', () => {
   const fixtureName = 'projects/overview.html';
 
-  beforeEach(() => {
-    loadHTMLFixture(fixtureName);
-  });
+  const findTrigger = () => document.querySelector('.js-read-more-trigger');
 
   afterEach(() => {
     resetHTMLFixture();
   });
 
   describe('expands target element', () => {
+    beforeEach(() => {
+      loadHTMLFixture(fixtureName);
+    });
+
     it('adds "is-expanded" class to target element', () => {
       const target = document.querySelector('.read-more-container');
-      const trigger = document.querySelector('.js-read-more-trigger');
+      const trigger = findTrigger();
       initReadMore();
 
       trigger.click();
@@ -23,4 +25,25 @@ describe('Read more click-to-expand functionality', () => {
       expect(target.classList.contains('is-expanded')).toEqual(true);
     });
   });
+
+  describe('given click on nested element', () => {
+    beforeEach(() => {
+      setHTMLFixture(`
+        <p>Target</p>
+        <button type="button" class="js-read-more-trigger">
+          <span>Button text</span>
+        </button>
+      `);
+
+      const trigger = findTrigger();
+      const nestedElement = trigger.firstElementChild;
+      initReadMore();
+
+      nestedElement.click();
+    });
+
+    it('removes the trigger element', async () => {
+      expect(findTrigger()).toBe(null);
+    });
+  });
 });