@sitecore-feaas/clientside 0.1.17 → 0.1.19

package/test/extras.ts

@@ -0,0 +1,714 @@
+import { describe, it, assert, beforeAll, expect } from 'vitest'
+import { CH1Node, serializeCH1RichText } from '../src/dom.js'
+describe('Extras', function () {
+  it('should serialize content hub', function () {
+    const data: CH1Node = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Customers want to experience uninterrupted interactions with brands —whether shopping, surfing, or asking questions —from wherever they are and on whichever device they happen to be using. If they put one device down and pick up another, they want the brand to recognize where they were previously so their journey can continue. '
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is the '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.sitecore.com/knowledge-center/digital-marketing-resources/omnichannel-marketing',
+                    target: '_blank',
+                    class: null
+                  }
+                }
+              ],
+              text: 'seamless omnichannel experience'
+            },
+            {
+              type: 'text',
+              text: ' that customers crave today. But it can be a struggle for marketers to keep up with customers as they swap from one device to another and expand to new devices. One way that marketers can keep pace with the ever-growing number of customer touchpoints is to use a headless content management system (CMS), which enables content to flow to where customers interact. A headless CMS opens up the possibility of serving content and experiences to the latest, or most popular customer touchpoint.'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Unfortunately, with legacy content management systems still dominating the global CMS market, many marketers struggle to meet today’s customer expectations. As expectations and digital behaviors continue to evolve, there’s never been a better time to investigate the flexibility of a headless CMS and the benefits it provides to digital marketers today.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 2
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Headless CMS vs. traditional CMS: What’s the difference?'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Traditional CMS platforms are built with desktop web browsers in mind. They help you construct web pages and e-commerce experiences that can be served through templates built for popular internet browsers like Google Chrome, Firefox, and Internet Explorer.'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Which is fine, if that’s all you need to do. But consumers today expect personalized and consistent omnichannel experiences through various channels such as smart speakers, kiosks, event screens, and smart watches. This is where the “headless” element comes in.'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'The presentation of your content is not dictated by a headless CMS. The front-end display —also known as the “head” —isn’t connected to your backend. Your content can be created once, stored centrally, and distributed to any device or touchpoint, without restrictions. This means marketers can be far more flexible while still maintaining data and analytics tracking —and personalization.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 2
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Six benefits of going headless'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: '1. Beat competitors to new channels'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Did you know that every second '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.mckinsey.com/business-functions/mckinsey-digital/our-insights/the-internet-of-things-the-value-of-digitizing-the-physical-world',
+                    target: '_blank',
+                    class: null
+                  }
+                }
+              ],
+              text: '127 new devices'
+            },
+            {
+              type: 'text',
+              text: ' get connected to the internet? That’s a lot of places a customer might be hanging out. The explosion of '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.sitecore.com/resources/index/ebooks/headless-key-to-iot',
+                    target: '_blank',
+                    class: null
+                  }
+                }
+              ],
+              text: 'IoT devices'
+            },
+            {
+              type: 'text',
+              text: ' has dramatically changed consumer behavior. A headless CMS enables marketers to push their content beyond web and mobile applications, to reach consumers on whichever exciting touchpoints come into existence.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: '2. Prepare for the future —without trying'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'By using the same technology to connect with any device or touchpoint on the market today and tomorrow, a headless CMS removes concerns about the future. You’re always prepared to meet your customers on the new frontier of interaction, wherever that may be.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: '3. Be consistent and avoid duplication'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'A headless CMS provides an environment where content can be repurposed and reused for any channel, or device. This removes the unnecessary duplication of content as well as helping to keep branding and messaging consistent across channels by breaking down channel silos that can disconnect marketing teams.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: '4. Be faster to market'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'With a headless CMS, your content is created, edited, stored, previewed, and published in the same place. Content can be re-published across channels, in varying presentation styles, without the need to re-create any of it. This '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.sitecore.com/resources/index/ebooks/why-cms-architecture-matters',
+                    target: '_blank',
+                    class: null
+                  }
+                }
+              ],
+              text: 'unified architecture'
+            },
+            {
+              type: 'text',
+              text: ' helps you evolve and iterate on campaigns at greater speed. The faster you are to market, the more time you put between you and your competitors, who are forced to catch up.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: '5. Decrease barriers to innovation'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'With the eruption of new IoT devices and sensors, a headless content management system enables marketers to experimentand explore different initiatives. For example, energy firm '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.sitecore.com/customers/service/innogy',
+                    target: '_blank',
+                    class: null
+                  }
+                },
+                {
+                  type: 'unknown'
+                }
+              ],
+              text: 'Innogy used Sitecore’s headless CMS'
+            },
+            {
+              type: 'text',
+              text: ' to connect IoT sensors to internal analytics systems and to customer-facing mobile apps to give their customers real-time gas meter readings, and personalized messaging.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: '6. Embrace martech freedom'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'A headless CMS doesn’t just seamlessly connect with any device, it can also easily connect with any third-party tool or software on the market. Marketers can connect their favorite tools, from marketing automation tools to CRMs to conversion optimization technologies. Vendor lock-in becomes a thing of the past as you are free to explore best-of-breed technologies for each dimension of your marketing campaign.'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 2
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Lose your head or risk losing customers'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Consumers seem to have an endless thirst for new ways to interact online. As a result, their time is divided up into smaller chunks, meaning that brands who are putting all their efforts into desktop and mobile applications are at risk of missing out.'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Investing in multiple technologies is one option, but now that the headless CMS secret is out, it’s fair to say that creating, storing, and publishing content in this flexible way is the best solution.'
+            }
+          ]
+        }
+      ]
+    }
+
+    expect(serializeCH1RichText(data)).toEqual(
+      `<p>Customers want to experience uninterrupted interactions with brands —whether shopping, surfing, or asking questions —from wherever they are and on whichever device they happen to be using. If they put one device down and pick up another, they want the brand to recognize where they were previously so their journey can continue.</p>
+<p>This is the 
+<a href="https://www.sitecore.com/knowledge-center/digital-marketing-resources/omnichannel-marketing" target="_blank">seamless omnichannel experience</a>
+ that customers crave today. But it can be a struggle for marketers to keep up with customers as they swap from one device to another and expand to new devices. One way that marketers can keep pace with the ever-growing number of customer touchpoints is to use a headless content management system (CMS), which enables content to flow to where customers interact. A headless CMS opens up the possibility of serving content and experiences to the latest, or most popular customer touchpoint.</p>
+<p>Unfortunately, with legacy content management systems still dominating the global CMS market, many marketers struggle to meet today’s customer expectations. As expectations and digital behaviors continue to evolve, there’s never been a better time to investigate the flexibility of a headless CMS and the benefits it provides to digital marketers today.</p>
+<h2>Headless CMS vs. traditional CMS: What’s the difference?</h2>
+<p>Traditional CMS platforms are built with desktop web browsers in mind. They help you construct web pages and e-commerce experiences that can be served through templates built for popular internet browsers like Google Chrome, Firefox, and Internet Explorer.</p>
+<p>Which is fine, if that’s all you need to do. But consumers today expect personalized and consistent omnichannel experiences through various channels such as smart speakers, kiosks, event screens, and smart watches. This is where the “headless” element comes in.</p>
+<p>The presentation of your content is not dictated by a headless CMS. The front-end display —also known as the “head” —isn’t connected to your backend. Your content can be created once, stored centrally, and distributed to any device or touchpoint, without restrictions. This means marketers can be far more flexible while still maintaining data and analytics tracking —and personalization.</p>
+<h2>Six benefits of going headless</h2>
+<h3>1. Beat competitors to new channels</h3>
+<p>Did you know that every second 
+<a href="https://www.mckinsey.com/business-functions/mckinsey-digital/our-insights/the-internet-of-things-the-value-of-digitizing-the-physical-world" target="_blank">127 new devices</a>
+ get connected to the internet? That’s a lot of places a customer might be hanging out. The explosion of 
+<a href="https://www.sitecore.com/resources/index/ebooks/headless-key-to-iot" target="_blank">IoT devices</a>
+ has dramatically changed consumer behavior. A headless CMS enables marketers to push their content beyond web and mobile applications, to reach consumers on whichever exciting touchpoints come into existence.</p>
+<h3>2. Prepare for the future —without trying</h3>
+<p>By using the same technology to connect with any device or touchpoint on the market today and tomorrow, a headless CMS removes concerns about the future. You’re always prepared to meet your customers on the new frontier of interaction, wherever that may be.</p>
+<h3>3. Be consistent and avoid duplication</h3>
+<p>A headless CMS provides an environment where content can be repurposed and reused for any channel, or device. This removes the unnecessary duplication of content as well as helping to keep branding and messaging consistent across channels by breaking down channel silos that can disconnect marketing teams.</p>
+<h3>4. Be faster to market</h3>
+<p>With a headless CMS, your content is created, edited, stored, previewed, and published in the same place. Content can be re-published across channels, in varying presentation styles, without the need to re-create any of it. This 
+<a href="https://www.sitecore.com/resources/index/ebooks/why-cms-architecture-matters" target="_blank">unified architecture</a>
+ helps you evolve and iterate on campaigns at greater speed. The faster you are to market, the more time you put between you and your competitors, who are forced to catch up.</p>
+<h3>5. Decrease barriers to innovation</h3>
+<p>With the eruption of new IoT devices and sensors, a headless content management system enables marketers to experimentand explore different initiatives. For example, energy firm 
+<a href="https://www.sitecore.com/customers/service/innogy" target="_blank">Innogy used Sitecore’s headless CMS</a>
+ to connect IoT sensors to internal analytics systems and to customer-facing mobile apps to give their customers real-time gas meter readings, and personalized messaging.</p>
+<h3>6. Embrace martech freedom</h3>
+<p>A headless CMS doesn’t just seamlessly connect with any device, it can also easily connect with any third-party tool or software on the market. Marketers can connect their favorite tools, from marketing automation tools to CRMs to conversion optimization technologies. Vendor lock-in becomes a thing of the past as you are free to explore best-of-breed technologies for each dimension of your marketing campaign.</p>
+<h2>Lose your head or risk losing customers</h2>
+<p>Consumers seem to have an endless thirst for new ways to interact online. As a result, their time is divided up into smaller chunks, meaning that brands who are putting all their efforts into desktop and mobile applications are at risk of missing out.</p>
+<p>Investing in multiple technologies is one option, but now that the headless CMS secret is out, it’s fair to say that creating, storing, and publishing content in this flexible way is the best solution.</p>`
+    )
+  })
+  it('should support all content hub rich text nodes', function () {
+    const data: CH1Node = {
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: {
+            level: 1
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is headline 1'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 2
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is headline 2'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 3
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is headline 3'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 4
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is headline 4'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 5
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is headline 5'
+            }
+          ]
+        },
+        {
+          type: 'heading',
+          attrs: {
+            level: 6
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is headline 6'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is paragraph with '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'bold'
+                }
+              ],
+              text: 'bold'
+            },
+            {
+              type: 'text',
+              text: ' and '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'italic'
+                }
+              ],
+              text: 'italic'
+            },
+            {
+              type: 'text',
+              text: ' and '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'underline'
+                }
+              ],
+              text: 'underline'
+            },
+            {
+              type: 'text',
+              text: ' and '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'strike'
+                }
+              ],
+              text: 'strikethrough'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is bulleted list'
+            }
+          ]
+        },
+        {
+          type: 'bulletList',
+          content: [
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [
+                    {
+                      type: 'text',
+                      text: 'bullet 1'
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [
+                    {
+                      type: 'text',
+                      text: 'bullet 2'
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is numbered list'
+            }
+          ]
+        },
+        {
+          type: 'orderedList',
+          attrs: {
+            start: 1
+          },
+          content: [
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [
+                    {
+                      type: 'text',
+                      text: 'number 1'
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [
+                    {
+                      type: 'text',
+                      text: 'number 2'
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is a '
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'www.test.com',
+                    target: '_blank',
+                    class: null
+                  }
+                }
+              ],
+              text: 'link'
+            },
+            {
+              type: 'text',
+              text: ' example'
+            }
+          ]
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'code'
+                }
+              ],
+              text: 'This is code example'
+            }
+          ]
+        },
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: null
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'This is code block example  '
+            }
+          ]
+        },
+        {
+          type: 'blockquote',
+          content: [
+            {
+              type: 'paragraph',
+              content: [
+                {
+                  type: 'text',
+                  text: 'This is quote example'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: 'horizontalRule'
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Above there is a line brake'
+            }
+          ]
+        },
+        {
+          type: 'paragraph'
+        },
+        {
+          type: 'unknown'
+        }
+      ]
+    }
+
+    expect(serializeCH1RichText(data)).toEqual(
+      `<h1>This is headline 1</h1>
+<h2>This is headline 2</h2>
+<h3>This is headline 3</h3>
+<h4>This is headline 4</h4>
+<h5>This is headline 5</h5>
+<h6>This is headline 6</h6>
+<p>This is paragraph with 
+<strong>bold</strong>
+ and 
+<em>italic</em>
+ and 
+<u>underline</u>
+ and 
+<s>strikethrough</s></p>
+<p>This is bulleted list</p>
+<ul><li><p>bullet 1</p></li>
+<li><p>bullet 2</p></li></ul>
+<p>This is numbered list</p>
+<ol start="1"><li><p>number 1</p></li>
+<li><p>number 2</p></li></ol>
+<p>This is a 
+<a href="www.test.com" target="_blank">link</a>
+ example</p>
+<p>This is code example</p>
+<code>This is code block example</code>
+<blockquote><p>This is quote example</p></blockquote>
+<hr />
+<p>Above there is a line brake</p>
+<p />`
+    )
+  })
+})