@teleporthq/teleport-uidl-resolver 0.44.0-alpha.0 → 0.44.0

package/__tests__/abilities/data-source-links.ts

@@ -0,0 +1,71 @@
+import { insertLinks } from '../../src/resolvers/abilities/utils'
+import { elementNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLElementNode, UIDLNavLinkNode } from '@teleporthq/teleport-types'
+
+/**
+ * The editor exports an element bound to a data source as an ELEMENT whose
+ * content is the data provider, rendering the element itself inside it. A
+ * details-page link on that element reads its record off the provider, and was
+ * dropped: walked as a plain element the wrapper looked empty, so the link
+ * inside it was never resolved and the published element did not navigate.
+ */
+
+const detailsLink: UIDLNavLinkNode = {
+  type: 'navlink',
+  content: {
+    // tslint:disable-next-line:no-invalid-template-strings
+    routeName: { type: 'expr', content: '`/page/${Templates_data_data?.items?.[3]?.slug}`' },
+  },
+}
+
+const providerWrapping = (child: UIDLElementNode, type: string): UIDLElementNode =>
+  ({
+    type: 'element',
+    content: {
+      type,
+      content: {
+        elementType: 'DataProvider',
+        renderPropIdentifier: 'Templates_data_data',
+        resourceDefinition: {
+          type: 'external-data-source',
+          dataSourceId: 'ds-rest',
+          tableName: 'data',
+          dataSourceType: 'rest-api',
+        },
+        nodes: {
+          success: { type: 'element', content: { elementType: 'fragment', children: [child] } },
+        },
+      },
+      children: [],
+    },
+  } as unknown as UIDLElementNode)
+
+const linkedChildOf = (page: UIDLElementNode): UIDLElementNode => {
+  const wrapper = page.content.children[0] as unknown as {
+    content: { content: { nodes: { success: UIDLElementNode } } }
+  }
+  return wrapper.content.content.nodes.success.content.children[0] as UIDLElementNode
+}
+
+describe('insertLinks — an element wrapping a data provider', () => {
+  it.each(['data-source-item', 'data-source-list'])(
+    'resolves the link of the element a %s renders',
+    (type) => {
+      const linked = elementNode('text')
+      linked.content.abilities = { link: detailsLink }
+      const page = elementNode('container', {}, [providerWrapping(linked, type)])
+
+      const resolved = linkedChildOf(insertLinks(page, {}, false))
+
+      expect(resolved.content.elementType).toBe('navlink')
+      expect(resolved.content.attrs.transitionTo).toEqual(detailsLink.content.routeName)
+    }
+  )
+
+  it('leaves an element with no link inside the provider as it was', () => {
+    const plain = elementNode('text')
+    const page = elementNode('container', {}, [providerWrapping(plain, 'data-source-item')])
+
+    expect(linkedChildOf(insertLinks(page, {}, false)).content.elementType).toBe('text')
+  })
+})

package/__tests__/abilities/link-wrapper-attributes.ts

@@ -0,0 +1,52 @@
+import { insertLinks } from '../../src/resolvers/abilities/utils'
+import { elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLElementNode, UIDLLinkNode } from '@teleporthq/teleport-types'
+
+/**
+ * A styled element that is one link is wrapped in an `<a>`, which takes the
+ * attributes that belong to a link — a `data-` hook a script selects the link
+ * by among them. A listing card's anatomy (`data-tq-card-slot`, `-size`,
+ * `-tone`) describes the card's own box and stays on it: the card's styles
+ * answer it on the element that carries the card's class, and the blog's post
+ * card — one link to its post — lost every layout and its list rows when the
+ * attributes moved to the wrapper.
+ */
+
+const postLink: UIDLLinkNode = {
+  type: 'url',
+  content: { url: staticNode('/blog/post'), newTab: false },
+}
+
+function linkedCard(): UIDLElementNode {
+  const card = elementNode('container', {
+    'data-tq-card-slot': staticNode('root'),
+    'data-tq-card-size': staticNode('wide'),
+    'data-tq-card-tone': staticNode('default'),
+    'data-tq-hook': staticNode('post-card'),
+    title: staticNode('A post'),
+  })
+  card.content.semanticType = 'article'
+  card.content.abilities = { link: postLink }
+  return card
+}
+
+describe('insertLinks — the wrapper of a linked element', () => {
+  it("keeps a card's anatomy on the card and hands the link's attributes to the wrapper", () => {
+    const page = elementNode('container', {}, [linkedCard()])
+    const wrapper = insertLinks(page, {}, false).content.children[0] as UIDLElementNode
+    const card = wrapper.content.children[0] as UIDLElementNode
+
+    expect(wrapper.content.elementType).toBe('link')
+    expect(Object.keys(wrapper.content.attrs)).toEqual(
+      expect.arrayContaining(['data-tq-hook', 'title'])
+    )
+    expect(Object.keys(wrapper.content.attrs).some((key) => key.startsWith('data-tq-card-'))).toBe(
+      false
+    )
+    expect(card.content.attrs).toEqual({
+      'data-tq-card-slot': staticNode('root'),
+      'data-tq-card-size': staticNode('wide'),
+      'data-tq-card-tone': staticNode('default'),
+    })
+  })
+})

package/__tests__/abilities/mocks.ts

@@ -4,6 +4,8 @@ import {
   UIDLMailLinkNode,
   UIDLPhoneLinkNode,
   UIDLSectionLinkNode,
+  UIDLDynamicReference,
+  UIDLPropDefinition,
 } from '@teleporthq/teleport-types'
 import { staticNode } from '@teleporthq/teleport-uidl-builders'
 
@@ -25,6 +27,16 @@ export const navlinkMockedDefinition = (): UIDLNavLinkNode => ({
   },
 })
 
+export const exprNavlinkMockedDefinition = (): UIDLNavLinkNode => ({
+  type: 'navlink',
+  content: {
+    routeName: {
+      type: 'expr',
+      content: '`/blog/' + '$' + '{' + 'blogPost?.slug}' + '`',
+    },
+  },
+})
+
 export const phoneMockedDefinition = (): UIDLPhoneLinkNode => ({
   type: 'phone',
   content: {
@@ -35,7 +47,10 @@ export const phoneMockedDefinition = (): UIDLPhoneLinkNode => ({
 export const sectionMockedDefinition = (): UIDLSectionLinkNode => ({
   type: 'section',
   content: {
-    section: 'contact',
+    section: {
+      type: 'static',
+      content: 'contact',
+    },
   },
 })
 
@@ -47,3 +62,18 @@ export const mailMockedDefinition = (): UIDLMailLinkNode => ({
     body: "Is it me you're looking for?",
   },
 })
+
+export const linkTypePropDefinitions = (): Record<string, UIDLPropDefinition> => ({
+  cardLink: {
+    type: 'link',
+    defaultValue: { url: '/', newTab: false },
+  },
+})
+
+export const linkTypePropDynamicReference = (): UIDLDynamicReference => ({
+  type: 'dynamic',
+  content: {
+    referenceType: 'prop',
+    id: 'cardLink',
+  },
+})