test: add tests for checking resolved links and update misc assertion…

… syntax

packages/html-canvas/test/create-html-parser.mts

@@ -1,9 +1,10 @@
 import { expect } from 'chai';
 import { CanvasField, createHtmlParser } from '@contensis/html-canvas';
-import { Block, HeadingBlock, ParagraphBlock } from '@contensis/canvas-types';
+import { Block, HeadingBlock, LinkBlock, ParagraphBlock } from '@contensis/canvas-types';
 import { Client, Config } from 'contensis-delivery-api';
 import { readFileSync } from 'fs';
 import { NockMocker, mocks } from './mocking/mocks.mts';
+import { getAllBlockTypes, getAllLinkBlocks } from './utils/block-types.mts';
 
 let mock: NockMocker;
 
@@ -29,8 +30,8 @@ describe('createHtmlParser function tests', () => {
     describe(`Given I wish to quickly test something with the parser, when the HTML is parsed`, () => {
       describe(`Then I expect it returns JSON output that is a Canvas representation of this HTML fragment in Canvas`, () => {
         it(` returns canvas content blocks`, () => {
-          expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-          expect(canvas.length).to.be.greaterThan(0);
+          expect(canvas).to.be.an('array');
+          expect(canvas).to.have.a.lengthOf.greaterThan(0);
         });
         it(` has a block of type "_heading"`, () => {
           expect(block.type).to.equal('_heading');
@@ -86,8 +87,8 @@ describe('createHtmlParser function tests', () => {
     describe(`Given I wish to target a canvas field in a particular content type, when the HTML is parsed`, () => {
       describe(`Then I expect the JSON is prepared with the content blocks that are allowed in editor configuration`, () => {
         it(` returns canvas content blocks`, () => {
-          expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-          expect(canvas.length).to.be.greaterThan(0);
+          expect(canvas).to.be.an('array');
+          expect(canvas).to.have.a.lengthOf.greaterThan(0);
         });
         it(` has a block of type "_heading"`, () => {
           expect(block.type).to.equal('_heading');
@@ -104,61 +105,88 @@ describe('createHtmlParser function tests', () => {
 
   describe(`Scenario: Parse realistic web page content`, () => {
     let canvas: Block[];
+    let links: LinkBlock[];
     after(() => mock.done(canvas));
     before(async () => {
       mock = mocks(`createHtmlParser_webpage_content`);
       const pageHtml = readFileSync('./test/examples/html-example.htm', { encoding: 'utf8' });
       const client = new Client(clientConfig);
-      const parser = await createHtmlParser({ client, contentTypeId: 'document', fieldId: 'canvas' });
+      const parser = await createHtmlParser({ client, contentTypeId: 'document', fieldId: 'canvas', rootUri: 'https://mysite.com' });
       canvas = await parser.parse(pageHtml);
+      links = getAllLinkBlocks(canvas);
     });
     describe(`Given I wish to convert part of my site to Canvas, when the HTML is parsed`, () => {
       describe(`Then I expect the Canvas to accurately represent my HTML content`, () => {
         it(` returns canvas content blocks`, () => {
-          expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-          expect(canvas.length).to.be.greaterThan(0);
+          expect(canvas).to.be.an('array');
+          expect(canvas).to.have.a.lengthOf.greaterThan(0);
         });
         it(` has multiple blocks of type "_heading", "_paragraph", "_list"`, () => {
-          const types = canvas.map((b) => b.type);
-          expect(types).to.include('_heading');
-          expect(types.filter((t) => t === '_heading')).length.is.greaterThan(1);
-          expect(types).to.include('_paragraph');
-          expect(types.filter((t) => t === '_paragraph')).length.is.greaterThan(1);
-          expect(types).to.include('_list');
-          expect(types.filter((t) => t === '_list')).length.is.greaterThan(1);
+          const blockTypes = getAllBlockTypes(canvas);
+          expect(blockTypes).to.include('_heading');
+          expect(blockTypes).to.include('_paragraph');
+          expect(blockTypes).to.include('_list');
+          expect(blockTypes).to.include('_link');
+
+          expect(blockTypes.filter((t) => t === '_heading')).to.have.lengthOf(5);
+          expect(blockTypes.filter((t) => t === '_paragraph')).to.have.lengthOf(5);
+          expect(blockTypes.filter((t) => t === '_list')).to.have.lengthOf(7);
+          expect(blockTypes.filter((t) => t === '_link')).to.have.lengthOf(7);
         });
         it(` with a first value of "Entry requirements"`, () => {
           expect(canvas[0].value).to.equal('Entry requirements');
         });
       });
     });
+    describe(`Given my HTML content contains links to other content`, () => {
+      describe(`Then I expect the Canvas to contain all of my links`, () => {
+        it(` which were provided as absolute urls`, () => {
+          const absolute = links.filter((l) => l.properties?.link?.sys?.uri?.startsWith('https://www.ludlow.ac.uk'));
+          expect(absolute).to.have.a.lengthOf(3);
+        });
+        // it(` which have been resolved in site view`, () => {
+        //   console.log(JSON.stringify(canvas));
+        // });
+        it(` which were provided as relative links and are not resolved in site view`, () => {
+          const relative = links.filter((l) => l.properties?.link?.sys?.uri?.startsWith('https://mysite.com'));
+          expect(relative).to.have.a.lengthOf(3);
+        });
+
+        it(` which are mailto: links`, () => {
+          const mailto = links.filter((l) => l.properties?.link?.sys?.uri?.startsWith('mailto:'));
+          expect(mailto).to.have.a.lengthOf(1);
+        });
+      });
+    });
   });
 
   describe(`Scenario: Parse content with an image`, () => {
     let canvas: Block[];
+    let firstBlock: Block;
     after(() => mock.done(canvas));
     before(async () => {
       mock = mocks(`createHtmlParser_image_content`);
       const pageHtml = readFileSync('./test/examples/image-example.htm', { encoding: 'utf8' });
       const client = new Client(clientConfig);
       const parser = await createHtmlParser({ client, contentTypeId: 'document', fieldId: 'canvas' });
       canvas = await parser.parse(pageHtml);
+      firstBlock = canvas[0];
     });
     describe(`Given I wish to convert part of my site to Canvas, when the HTML is parsed`, () => {
       describe(`Then I expect the Canvas to locate my existing images`, () => {
         it(` returns canvas content blocks`, () => {
-          expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-          expect(canvas.length).to.be.greaterThan(0);
+          expect(canvas).to.be.an('array');
+          expect(canvas).to.have.a.lengthOf.greaterThan(0);
         });
         it(` has a block of type "_image"`, () => {
-          expect(canvas[0].type).to.equal('_image');
+          expect(firstBlock.type).to.equal('_image');
         });
 
         it(` the image has a uri`, () => {
-          expect(typeof canvas[0].value).to.equal('object');
-          expect(typeof canvas[0].value.asset).to.equal('object');
-          expect(typeof canvas[0].value.asset.sys.uri).to.equal('string');
-          expect(canvas[0].value.asset.sys.uri).length.greaterThan(1);
+          expect(firstBlock.value).is.an('object');
+          expect(firstBlock.value.asset).is.an('object');
+          expect(firstBlock.value.asset.sys.uri).is.a('string');
+          expect(firstBlock.value.asset.sys.uri).has.a.lengthOf.greaterThan(1);
         });
       });
     });

packages/html-canvas/test/parse-html.mts

@@ -1,9 +1,10 @@
 import { expect } from 'chai';
 import { CanvasField, parseHtml } from '@contensis/html-canvas';
-import { Block, HeadingBlock, ParagraphBlock } from '@contensis/canvas-types';
+import { Block, HeadingBlock, LinkBlock, ParagraphBlock } from '@contensis/canvas-types';
 import { Client, Config } from 'contensis-delivery-api';
 import { readFileSync } from 'fs';
 import { NockMocker, mocks } from './mocking/mocks.mts';
+import { getAllBlockTypes, getAllLinkBlocks } from './utils/block-types.mts';
 
 let mock: NockMocker;
 
@@ -27,8 +28,8 @@ describe('parseHtml function tests', () => {
   describe(`Given I wish to quickly test something with the parser, when the HTML is parsed`, () => {
     describe(`Then I expect it returns JSON output that is a Canvas representation of this HTML fragment in Canvas`, () => {
       it(` returns canvas content blocks`, () => {
-        expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-        expect(canvas.length).to.be.greaterThan(0);
+        expect(canvas).to.be.an('array');
+        expect(canvas).to.have.a.lengthOf.greaterThan(0);
       });
       it(` has a block of type "_heading"`, () => {
         expect(block.type).to.equal('_heading');
@@ -81,8 +82,8 @@ describe('parseHtml function tests', () => {
     describe(`Given I wish to target a canvas field in a particular content type, when the HTML is parsed`, () => {
       describe(`Then I expect the JSON is prepared with the content blocks that are allowed in editor configuration`, () => {
         it(` returns canvas content blocks`, () => {
-          expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-          expect(canvas.length).to.be.greaterThan(0);
+          expect(canvas).to.be.an('array');
+          expect(canvas).to.have.a.lengthOf.greaterThan(0);
         });
         it(` has a block of type "_heading"`, () => {
           expect(block.type).to.equal('_heading');
@@ -99,32 +100,57 @@ describe('parseHtml function tests', () => {
 
   describe(`Scenario: Parse realistic web page content`, () => {
     let canvas: Block[];
+    let links: LinkBlock[];
     after(() => mock.done(canvas));
     before(async () => {
       mock = mocks(`parseHtml_webpage_content`);
       const pageHtml = readFileSync('./test/examples/html-example.htm', { encoding: 'utf8' });
       const client = new Client(clientConfig);
       canvas = await parseHtml({ client, contentTypeId: 'document', fieldId: 'canvas', html: pageHtml });
+      links = getAllLinkBlocks(canvas);
     });
     describe(`Given I wish to convert part of my site to Canvas, when the HTML is parsed`, () => {
       describe(`Then I expect the Canvas to accurately represent my HTML content`, () => {
         it(` returns canvas content blocks`, () => {
-          expect(typeof canvas === 'object' && Array.isArray(canvas)).to.be.true;
-          expect(canvas.length).to.be.greaterThan(0);
+          expect(canvas).to.be.an('array');
+          expect(canvas).to.have.a.lengthOf.greaterThan(0);
         });
         it(` has multiple blocks of type "_heading", "_paragraph", "_list"`, () => {
-          const types = canvas.map((b) => b.type);
-          expect(types).to.include('_heading');
-          expect(types.filter((t) => t === '_heading')).length.is.greaterThan(1);
-          expect(types).to.include('_paragraph');
-          expect(types.filter((t) => t === '_paragraph')).length.is.greaterThan(1);
-          expect(types).to.include('_list');
-          expect(types.filter((t) => t === '_list')).length.is.greaterThan(1);
+          const blockTypes = getAllBlockTypes(canvas);
+          expect(blockTypes).to.include('_heading');
+          expect(blockTypes).to.include('_paragraph');
+          expect(blockTypes).to.include('_list');
+          expect(blockTypes).to.include('_link');
+
+          expect(blockTypes.filter((t) => t === '_heading')).to.have.lengthOf(5);
+          expect(blockTypes.filter((t) => t === '_paragraph')).to.have.lengthOf(5);
+          expect(blockTypes.filter((t) => t === '_list')).to.have.lengthOf(7);
+          expect(blockTypes.filter((t) => t === '_link')).to.have.lengthOf(7);
         });
         it(` with a first value of "Entry requirements"`, () => {
           expect(canvas[0].value).to.equal('Entry requirements');
         });
       });
+      describe(`Given my HTML content contains links to other content`, () => {
+        describe(`Then I expect the Canvas to contain all of my links`, () => {
+          it(` which were provided as absolute urls`, () => {
+            const absolute = links.filter((l) => l.properties?.link?.sys?.uri?.startsWith('https://www.ludlow.ac.uk'));
+            expect(absolute).to.have.a.lengthOf(3);
+          });
+          // it(` which have been resolved in site view`, () => {
+          //   console.log(JSON.stringify(canvas));
+          // });
+          it(` which were provided as relative links and are not resolved in site view`, () => {
+            const relative = links.filter((l) => l.properties?.link?.sys?.uri?.startsWith('/'));
+            expect(relative).to.have.a.lengthOf(3);
+          });
+
+          it(` which are mailto: links`, () => {
+            const mailto = links.filter((l) => l.properties?.link?.sys?.uri?.startsWith('mailto:'));
+            expect(mailto).to.have.a.lengthOf(1);
+          });
+        });
+      });
     });
   });
 });

packages/html-canvas/test/utils/block-types.mts

@@ -0,0 +1,17 @@
+import { Block, LinkBlock } from '@contensis/canvas-types';
+
+export const getAllBlockTypes = (blocks: Block[], types: Block['type'][] = []) => {
+  for (const block of blocks) {
+    types.push(block.type);
+    if (Array.isArray(block.value)) getAllBlockTypes(block.value, types);
+  }
+  return types;
+};
+
+export const getAllLinkBlocks = (blocks: Block[], links: LinkBlock[] = []) => {
+  for (const block of blocks) {
+    if (block.type === '_link') links.push(block);
+    if (Array.isArray(block.value)) getAllLinkBlocks(block.value, links);
+  }
+  return links;
+};