Create Test Site

packages/cli/test/functional/test_site/index.md

@@ -349,6 +349,8 @@ and **this**.
 
 **Test nunjucks raw tags**
 
+<include src="testInlineExpansion.md" />
+
 {% raw %}
 
 <div v-pre>{{ variable interpolation syntax can be used with v-pre }}</div>

packages/cli/test/functional/test_site/site.json

@@ -70,6 +70,10 @@
       "src": "testThumbnails.md",
       "title": "Thumbnails Test"
     },
+    {
+      "src": "testInlineExpansion.md",
+      "title": "Inline Expansion Test"
+    },
     {
       "src": "testPlantUML.md",
       "title": "PlantUML Test"

packages/cli/test/functional/test_site/testInlineExpansion.md

@@ -0,0 +1,11 @@
+## InlineExpansion
+
+<div>
+  <inlineExpansion 
+    collapsedText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris." 
+    expandedText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Curabitur varius erat non lectus fermentum malesuada." />
+
+  <inlineExpansion  
+    collapsedText="This is some collapsed text." 
+    expandedText="This is the expanded version of the text." />
+</div>

packages/vue-components/src/InlineExpansion.vue

@@ -1,11 +1,8 @@
 <template>
   <div>
-    <!-- Text Displayed -->
-    <p>{{ isExpanded ? expandedText : processedCollapsedText }}</p>
-
     <!-- Toggle between Collapsed and Expanded -->
-    <button @click="toggleExpansion">
-      {{ isExpanded ? 'Collapse' : 'Expand' }}
+    <button class="inline-panel" @click="toggleExpansion">
+      {{ isExpanded ? expandedText : processedCollapsedText }}
     </button>
   </div>
 </template>
@@ -46,3 +43,16 @@ export default {
   },
 };
 </script>
+
+<style>
+    .inline-panel {
+        border: 1px solid #ccc;
+        background-color: #f9f9f9;
+        padding: 6px 8px;
+        border-radius: 5px;
+        color: #444;
+        margin: 0 8px 6px 0;
+        display: inline-block;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style>

packages/vue-components/src/__tests__/InlineExpansion.spec.js

@@ -13,7 +13,7 @@ describe('InlineExpansion.vue', () => {
       propsData: defaultProps,
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('Short version');
+    expect(wrapper.find('button.inline-panel').text()).toBe('Short version');
   });
 
   it('displays truncated collapsedText if it exceeds maxChars', async () => {
@@ -25,7 +25,7 @@ describe('InlineExpansion.vue', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('This is a custom ...');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is a custom ...');
   });
 
   it('falls back to expandedText if collapsedText is not provided', async () => {
@@ -37,7 +37,7 @@ describe('InlineExpansion.vue', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('This is a very lo...');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is a very lo...');
   });
 
   it('displays truncated collapsedText if it exceeds maxChars and expandedText is missing', async () => {
@@ -49,7 +49,7 @@ describe('InlineExpansion.vue', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('This is a very lo...');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is a very lo...');
   });
 
   it('displays collapsedText truncated to maxChars when expandedText is provided', async () => {
@@ -61,7 +61,7 @@ describe('InlineExpansion.vue', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('This is a very lo...');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is a very lo...');
   });
 
   it('handles missing expandedText gracefully', async () => {
@@ -72,7 +72,7 @@ describe('InlineExpansion.vue', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('Short version');
+    expect(wrapper.find('button.inline-panel').text()).toBe('Short version');
   });
 
   it('handles missing expandedText and collapsedText gracefully', async () => {
@@ -83,10 +83,10 @@ describe('InlineExpansion.vue', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('p').text()).toBe('');
+    expect(wrapper.find('button.inline-panel').text()).toBe('');
   });
 
-  // Test for Button
+  // Test for Button Toggle
   it('toggles between collapsed and expanded text when button is clicked', async () => {
     const wrapper = mount(InlineExpansion, {
       propsData: {
@@ -97,18 +97,18 @@ describe('InlineExpansion.vue', () => {
     });
 
     // Initially, we expect the collapsed text to be shown
-    expect(wrapper.find('p').text()).toBe('This is some coll...');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is some coll...');
 
     // Simulate clicking the button to expand the text
-    await wrapper.find('button').trigger('click');
+    await wrapper.find('button.inline-panel').trigger('click');
 
     // Now we expect the expanded text to be shown
-    expect(wrapper.find('p').text()).toBe('This is the expanded text.');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is the expanded text.');
 
     // Simulate clicking the button to collapse the text again
-    await wrapper.find('button').trigger('click');
+    await wrapper.find('button.inline-panel').trigger('click');
 
     // Expect the collapsed text to show again
-    expect(wrapper.find('p').text()).toBe('This is some coll...');
+    expect(wrapper.find('button.inline-panel').text()).toBe('This is some coll...');
   });
 });