From 5adb27d65b3ccc095161d9fd81e34cdea532b33f Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Tue, 24 Sep 2024 17:14:44 +0200
Subject: [PATCH] fix(update): added usage; improve

---
 docs/.vitepress/navigation.js                 |   3 +-
 docs/src/introduction.md                      |  37 ++---
 docs/src/usage.md                             |  85 ++++++++++++
 playground/src/App.vue                        | 102 +++++++-------
 .../components/ArticleContentContainer.vue    |   1 -
 ...ontainer.vue => BasicContentContainer.vue} |   3 +-
 src/ContentContainer.vue                      |   4 +-
 src/useContentContainer.js                    |   8 +-
 src/useContentHeadline.js                     |   4 +-
 test/contentContainer.test.js                 |   2 +-
 test/contentHeadline.test.js                  |   4 +-
 test/useContentContainer.test.js              |   2 +-
 test/useContentHeadline.test.js               | 130 +++++++++++++++++-
 13 files changed, 288 insertions(+), 97 deletions(-)
 create mode 100644 docs/src/usage.md
 rename playground/src/components/{DefaultContentContainer.vue => BasicContentContainer.vue} (89%)

diff --git a/docs/.vitepress/navigation.js b/docs/.vitepress/navigation.js
index e2871e8..6c59f8c 100644
--- a/docs/.vitepress/navigation.js
+++ b/docs/.vitepress/navigation.js
@@ -10,7 +10,8 @@ export default {
       text: 'Guide',
       items: [
         { text: 'Introduction', link: '/introduction' },
-        { text: 'Setup', link: '/setup' }
+        { text: 'Setup', link: '/setup' },
+        { text: 'Usage', link: '/usage' }
       ]
     },
     {
diff --git a/docs/src/introduction.md b/docs/src/introduction.md
index dfaaed3..44f8c50 100644
--- a/docs/src/introduction.md
+++ b/docs/src/introduction.md
@@ -33,27 +33,22 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
   <div>
     <header>Header</header>
     <ContentContainer>
-      <div>
+      <header>
         <ContentHeadline> Primary Headline (h1) </ContentHeadline>
-      </div>
+      </header>
       <ContentContainer>
         <ContentHeadline> Secondary Headline 1 (h2) </ContentHeadline>
         <ContentContainer>
-          <ContentContainer>
-            <ContentHeadline> Tertiary Headline 1.1 (h3) </ContentHeadline>
-          </ContentContainer>
-          <ContentContainer>
-            <ContentHeadline> Tertiary Headline 1.2 (h3) </ContentHeadline>
-          </ContentContainer>
+          <ContentHeadline> Tertiary Headline 1.1 (h3) </ContentHeadline>
+        </ContentContainer>
+        <ContentContainer>
+          <ContentHeadline> Tertiary Headline 1.2 (h3) </ContentHeadline>
         </ContentContainer>
       </ContentContainer>
-    </ContentContainer>
       <ContentContainer>
         <ContentHeadline> Secondary Headline 2 (h2) </ContentHeadline>
         <ContentContainer>
-          <ContentContainer>
-            <ContentHeadline> Tertiary Headline 2.1 (h3) </ContentHeadline>
-          </ContentContainer>
+          <ContentHeadline> Tertiary Headline 2.1 (h3) </ContentHeadline>
         </ContentContainer>
       </ContentContainer>
     </ContentContainer>
@@ -66,26 +61,22 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
 <div>
   <header>Header</header>
   <main>
-    <div>
+    <header>
       <h1> Primary Headline (h1) </h1>
-    </div>
+    </header>
     <article>
       <h2> Secondary Headline 1 (h2) </h2>
       <section>
-        <article>
-          <h3> Tertiary Headline 1.1 (h3) </h3>
-        </article>
-        <article>
-          <h3> Tertiary Headline 1.2 (h3) </h3>
-        </article>
+        <h3> Tertiary Headline 1.1 (h3) </h3>
+      </section>
+      <section>
+        <h3> Tertiary Headline 1.2 (h3) </h3>
       </section>
     </article>
     <article>
       <h2> Secondary Headline 2 (h2) </h2>
       <section>
-        <article>
-          <h3> Tertiary Headline 2.1 (h3) </h3>
-        </article>
+        <h3> Tertiary Headline 2.1 (h3) </h3>
       </section>
     </article>
   </main>
diff --git a/docs/src/usage.md b/docs/src/usage.md
new file mode 100644
index 0000000..68ad986
--- /dev/null
+++ b/docs/src/usage.md
@@ -0,0 +1,85 @@
+---
+title: Usage
+---
+
+# {{$frontmatter.title}}
+
+The standard behavior of `vue-semantic-structure` defines the most common approach for the use of HTML structure components.
+
+In this structure, the main content contains different modules *(example: Stage (Hero), Text-Image, Gallery, etc.)*.
+
+The main structure is in the `<main>` tag, which contains the main components.
+
+::: code-group
+
+```html [HTML]
+<main>
+  <header class="hero">…</header>
+  <section class="text-image">…</section>
+  <section class="gallery">…</section>
+</main>
+```
+
+```vue [Vue]
+<template>
+  <ContentContainer>
+    <header class="hero">…</header>
+    <ContentContainer class="text-image">…</ContentContainer>
+    <ContentContainer class="gallery">…</ContentContainer>
+  </ContentContainer>
+</template>
+```
+
+:::
+
+## Advance Usage
+
+The behavior of the `ContentContainer` can also be adapted for blog article pages.
+
+Here, an `<article>` is often used in the `<main>` tag, for which the `ContentContainer` must be adapted.
+
+The `rootTags` property must be extended by an `<article>` (e.g. `['main', 'article']`).
+
+It is recommended to create a separate component that extends the `ContentContainer`.
+
+### `CustomContentContainer.vue`
+
+```vue
+<template>
+  <ContentContainer :root-tags="['main', 'article']">
+    <slot />
+  </ContentContainer>
+</template>
+
+<script setup>
+import { ContentContainer } from 'vue-semantic-structure';
+</script>
+```
+
+In comparison to the basic application, the entire content is enclosed in another `CustomContentContainer` (e.g. `ContentContainer`), which represents the `<article>` tag.
+
+::: code-group
+
+```html [HTML]
+<main>
+  <article>
+    <header class="hero">…</header>
+    <section class="text-image">…</section>
+    <section class="gallery">…</section>
+  </article>
+</main>
+```
+
+```vue [Vue]
+<template>
+  <CustomContentContainer>
+    <CustomContentContainer>
+      <header class="hero">…</header>
+      <CustomContentContainer class="text-image">…</CustomContentContainer>
+      <CustomContentContainer class="gallery">…</CustomContentContainer>
+    </CustomContentContainer>
+  </CustomContentContainer>
+</template>
+```
+
+:::
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 250dff7..27512e4 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DefaultContentContainer debug>
+    <BasicContentContainer debug>
       <header>
         <DebugHeadline>Stage</DebugHeadline>
         <p>
@@ -9,56 +9,54 @@
         </p>
         <pre class="structure-debug" data-debug-current-tag="header"></pre>
       </header>
-      <DefaultContentContainer>
-        <DefaultContentContainer>
-          <DebugHeadline>Text Component</DebugHeadline>
-          <p>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
-            sea takimata sanctus est Lorem ipsum dolor sit amet.
-          </p>
-        </DefaultContentContainer>
-        <DefaultContentContainer>
-          <DebugHeadline>Gallery Component</DebugHeadline>
-          <p>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-            dolore magna aliquyam.
-          </p>
-          <div class="gallery columns-4">
-            <div v-for="(item, index) in Array(4)" :key="index"></div>
-          </div>
-        </DefaultContentContainer>
-        <DefaultContentContainer>
-          <DebugHeadline>Teasers Component</DebugHeadline>
-          <div class="columns-3">
-            <DefaultContentContainer>
-              <DebugHeadline>Teaser 1</DebugHeadline>
-              <p>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-            </DefaultContentContainer>
-            <DefaultContentContainer>
-              <DebugHeadline>Teaser 2</DebugHeadline>
-              <p>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-            </DefaultContentContainer>
-            <DefaultContentContainer>
-              <DebugHeadline>Teaser 3</DebugHeadline>
-              <p>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-            </DefaultContentContainer>
-          </div>
-        </DefaultContentContainer>
-      </DefaultContentContainer>
-    </DefaultContentContainer>
+      <BasicContentContainer>
+        <DebugHeadline>Text Component</DebugHeadline>
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+          consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+          takimata sanctus est Lorem ipsum dolor sit amet.
+        </p>
+      </BasicContentContainer>
+      <BasicContentContainer>
+        <DebugHeadline>Gallery Component</DebugHeadline>
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam.
+        </p>
+        <div class="gallery columns-4">
+          <div v-for="(item, index) in Array(4)" :key="index"></div>
+        </div>
+      </BasicContentContainer>
+      <BasicContentContainer>
+        <DebugHeadline>Teasers Component</DebugHeadline>
+        <div class="columns-3">
+          <BasicContentContainer>
+            <DebugHeadline>Teaser 1</DebugHeadline>
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+          </BasicContentContainer>
+          <BasicContentContainer>
+            <DebugHeadline>Teaser 2</DebugHeadline>
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+          </BasicContentContainer>
+          <BasicContentContainer>
+            <DebugHeadline>Teaser 3</DebugHeadline>
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+          </BasicContentContainer>
+        </div>
+      </BasicContentContainer>
+    </BasicContentContainer>
 
     <hr />
 
@@ -130,7 +128,7 @@
 import DebugHeadline from '@/components/DebugHeadline.vue';
 import GithubCorner from './components/GithubCorner.vue';
 import ArticleContentContainer from './components/ArticleContentContainer.vue';
-import DefaultContentContainer from './components/DefaultContentContainer.vue';
+import BasicContentContainer from './components/BasicContentContainer.vue';
 
 const GITHUB_URL = import.meta.env.VITE_GITHUB_URL;
 </script>
diff --git a/playground/src/components/ArticleContentContainer.vue b/playground/src/components/ArticleContentContainer.vue
index 2ca84b1..12dd461 100644
--- a/playground/src/components/ArticleContentContainer.vue
+++ b/playground/src/components/ArticleContentContainer.vue
@@ -1,6 +1,5 @@
 <template>
   <ContentContainer
-    :contentTags="['article', 'section']"
     :rootTags="['main', 'article']"
     v-slot="{ parentLevel, currentLevel, currentTag }"
     :data-debug="isDebug ? 'container' : undefined">
diff --git a/playground/src/components/DefaultContentContainer.vue b/playground/src/components/BasicContentContainer.vue
similarity index 89%
rename from playground/src/components/DefaultContentContainer.vue
rename to playground/src/components/BasicContentContainer.vue
index 3ca8e8b..1368dc6 100644
--- a/playground/src/components/DefaultContentContainer.vue
+++ b/playground/src/components/BasicContentContainer.vue
@@ -1,7 +1,6 @@
 <template>
   <ContentContainer
-    :contentTags="['section', 'article']"
-    :rootTags="['main', undefined]"
+    :rootTags="['main']"
     v-slot="{ parentLevel, currentLevel, currentTag }"
     :data-debug="isDebug ? 'container' : undefined">
     <slot />
diff --git a/src/ContentContainer.vue b/src/ContentContainer.vue
index 56f4270..9fee59c 100644
--- a/src/ContentContainer.vue
+++ b/src/ContentContainer.vue
@@ -34,13 +34,13 @@ export default {
     contentTags: {
       type: Array,
       default() {
-        return ['section', 'article'];
+        return ['article', 'section'];
       }
     },
     rootTags: {
       type: Array,
       default() {
-        return ['main', null];
+        return ['main'];
       }
     },
     level: {
diff --git a/src/useContentContainer.js b/src/useContentContainer.js
index 02aa781..d15a070 100644
--- a/src/useContentContainer.js
+++ b/src/useContentContainer.js
@@ -2,13 +2,12 @@ import { provide, inject, computed } from 'vue';
 
 export default function useContentContainer({ tag, contentTags, rootTags, level } = {}) {
   tag = tag || null;
-  contentTags = contentTags || ['section', 'article'];
-  rootTags = rootTags || ['main', null];
+  contentTags = contentTags || ['article', 'section'];
+  rootTags = rootTags || ['main'];
   level = level || undefined;
-  const parentLevel = inject('parentLevel', 0);
 
+  const parentLevel = inject('parentLevel', 0);
   const currentLevel = computed(() => (level !== undefined ? level : parentLevel + 1));
-
   const currentTag = computed(() => {
     if (tag) {
       return tag;
@@ -16,7 +15,6 @@ export default function useContentContainer({ tag, contentTags, rootTags, level
     if (Number(parentLevel) in rootTags) {
       return rootTags[Number(parentLevel)];
     }
-
     return contentTags[currentLevel.value % contentTags.length];
   });
 
diff --git a/src/useContentHeadline.js b/src/useContentHeadline.js
index 2b4e840..3c2edba 100644
--- a/src/useContentHeadline.js
+++ b/src/useContentHeadline.js
@@ -3,7 +3,7 @@ import { inject, computed } from 'vue';
 export default function useContentHeadline({ tag } = {}) {
   const parentLevel = inject('parentLevel', 1) + 1;
   const rootLevel = inject('rootLevel', 1);
-  const getMax = number => Math.max(1, Math.min(number, 6));
+
   const currentLevel = computed(() => getMax(parentLevel - rootLevel));
   const currentTag = computed(() => tag || `h${currentLevel.value}`);
 
@@ -12,3 +12,5 @@ export default function useContentHeadline({ tag } = {}) {
     currentTag
   };
 }
+
+const getMax = number => Math.max(1, Math.min(number, 6));
diff --git a/test/contentContainer.test.js b/test/contentContainer.test.js
index 474c913..6723cf4 100644
--- a/test/contentContainer.test.js
+++ b/test/contentContainer.test.js
@@ -29,7 +29,7 @@ describe('ContentContainer', () => {
 
     const wrapper = mount(root);
     expect(wrapper.find(`main>article>section>article>section`).text()).toBe('Test');
-    const needsd = ['main', null, 'article'];
+    const needsd = ['main', 'article'];
     needsd.forEach((tag, index) => {
       if (tag) {
         expect(wrapper.find(`[data-current-level="${index + 1}"]`).attributes('data-parent-level')).toBe(String(index));
diff --git a/test/contentHeadline.test.js b/test/contentHeadline.test.js
index 3c338ed..05dc1e1 100644
--- a/test/contentHeadline.test.js
+++ b/test/contentHeadline.test.js
@@ -15,6 +15,7 @@ describe('contentHeadline', () => {
       components: { ContentContainer, ContentHeadline: DebugContentHeadline },
       template: `
   <ContentContainer>
+    <ContentHeadline />
     <ContentContainer>
       <ContentHeadline />
       <ContentContainer>
@@ -25,9 +26,6 @@ describe('contentHeadline', () => {
             <ContentHeadline />
             <ContentContainer>
               <ContentHeadline />
-              <ContentContainer>
-                <ContentHeadline />
-              </ContentContainer>
             </ContentContainer>
           </ContentContainer>
         </ContentContainer>
diff --git a/test/useContentContainer.test.js b/test/useContentContainer.test.js
index 6191756..221c461 100644
--- a/test/useContentContainer.test.js
+++ b/test/useContentContainer.test.js
@@ -36,7 +36,7 @@ describe('useContentContainer', () => {
 
     const wrapper = mount(root);
     expect(wrapper.find(`main>article>section>article>section`).text()).toBe('Test');
-    const needsd = ['main', null, 'article'];
+    const needsd = ['main', 'article'];
     needsd.forEach((tag, index) => {
       if (tag) {
         expect(wrapper.find(`[data-current-level="${index + 1}"]`).attributes('data-parent-level')).toBe(String(index));
diff --git a/test/useContentHeadline.test.js b/test/useContentHeadline.test.js
index 4a38814..8205b29 100644
--- a/test/useContentHeadline.test.js
+++ b/test/useContentHeadline.test.js
@@ -26,7 +26,6 @@ describe('useContentHeadline', () => {
     const root = defineComponent({
       components: { ContentContainer, ContentHeadline },
       template: `
-  <ContentContainer>
     <ContentContainer>
       <ContentHeadline />
       <ContentContainer>
@@ -44,12 +43,10 @@ describe('useContentHeadline', () => {
           </ContentContainer>
         </ContentContainer>
       </ContentContainer>
-    </ContentContainer>
-  </ContentContainer>`
+    </ContentContainer>`
     });
 
     const wrapper = mount(root);
-    console.log(wrapper.html());
     expect(wrapper.find('main > h1').text()).toBe(String('h1'));
     expect(wrapper.find('main > article > h2').text()).toBe(String('h2'));
     expect(wrapper.find('main > article > section > h3').text()).toBe(String('h3'));
@@ -59,9 +56,132 @@ describe('useContentHeadline', () => {
     expect(
       wrapper
         .find(
-          '[data-current-level="1"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > [data-current-level="7"] > h6'
+          '[data-current-level="1"] > [data-current-level="2"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > h6'
         )
         .text()
     ).toBe(String('h6'));
   });
 });
+
+describe('useContentHeadline (rootTags)', () => {
+  test('Structure Value Check', () => {
+    const ContentContainer = defineComponent({
+      template: `<component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
+        <slot v-else />`,
+      setup() {
+        const { currentTag, currentLevel, parentLevel } = useContentContainer({
+          rootTags: ['main', 'article']
+        });
+        return { currentTag, currentLevel, parentLevel };
+      }
+    });
+
+    const ContentHeadline = defineComponent({
+      template: '<component :is="currentTag" :data-level="level">{{currentTag}}</component>',
+      setup() {
+        const { currentTag, level } = useContentHeadline();
+        return { currentTag, level };
+      }
+    });
+
+    const root = defineComponent({
+      components: { ContentContainer, ContentHeadline },
+      template: `
+    <ContentContainer>
+      <ContentContainer>
+        <ContentHeadline />
+        <ContentContainer>
+          <ContentHeadline />
+          <ContentContainer>
+            <ContentHeadline />
+            <ContentContainer>
+              <ContentHeadline />
+              <ContentContainer>
+                <ContentHeadline />
+                <ContentContainer>
+                  <ContentHeadline />
+                </ContentContainer>
+              </ContentContainer>
+            </ContentContainer>
+          </ContentContainer>
+        </ContentContainer>
+      </ContentContainer>
+    </ContentContainer>`
+    });
+
+    const wrapper = mount(root);
+
+    expect(wrapper.find('main > article > h1').text()).toBe(String('h1'));
+    expect(wrapper.find('main > article > section > h2').text()).toBe(String('h2'));
+    expect(wrapper.find('main > article > section > article > h3').text()).toBe(String('h3'));
+    expect(wrapper.find('main > article > section > article > section > h4').text()).toBe(String('h4'));
+    expect(wrapper.find('main > article > section > article > section > article > h5').text()).toBe(String('h5'));
+    expect(wrapper.find('main > article > section > article > section > article > section > h6').text()).toBe(
+      String('h6')
+    );
+    expect(
+      wrapper
+        .find(
+          '[data-current-level="1"] > [data-current-level="2"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > [data-current-level="7"] > h6'
+        )
+        .text()
+    ).toBe(String('h6'));
+  });
+});
+
+describe('useContentHeadline (contentTags)', () => {
+  test('Structure Value Check', () => {
+    const ContentContainer = defineComponent({
+      template: `<component v-if="currentTag" :is="currentTag" :data-current-tag="currentTag" :data-current-level="currentLevel" :data-parent-level="parentLevel"><slot /></component>
+        <slot v-else />`,
+      setup() {
+        const { currentTag, currentLevel, parentLevel } = useContentContainer({
+          rootTags: ['ul'],
+          contentTags: ['li', 'ul']
+        });
+        return { currentTag, currentLevel, parentLevel };
+      }
+    });
+
+    const ContentHeadline = defineComponent({
+      template: '<component :is="currentTag" :data-level="level">{{currentTag}}</component>',
+      setup() {
+        const { currentTag, level } = useContentHeadline();
+        return { currentTag, level };
+      }
+    });
+
+    const root = defineComponent({
+      components: { ContentContainer, ContentHeadline },
+      template: `
+    <ContentContainer>
+      <ContentContainer>
+        <span>Item 1.</span>
+        <ContentContainer>
+          <ContentContainer>
+            <span>Item 1.1.</span>
+            <ContentContainer>
+              <ContentContainer>
+                <span>Item 1.1.1.</span>
+              </ContentContainer>
+            </ContentContainer>
+          </ContentContainer>
+        </ContentContainer>
+      </ContentContainer>
+    </ContentContainer>`
+    });
+
+    const wrapper = mount(root);
+
+    expect(wrapper.find('ul > li > span').text()).toBe(String('Item 1.'));
+    expect(wrapper.find('ul > li > ul > li > span').text()).toBe(String('Item 1.1.'));
+    expect(wrapper.find('ul > li > ul > li > ul > li > span').text()).toBe(String('Item 1.1.1.'));
+    expect(
+      wrapper
+        .find(
+          '[data-current-level="1"] > [data-current-level="2"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > span'
+        )
+        .text()
+    ).toBe(String('Item 1.1.1.'));
+  });
+});