fix(techdocs): adjust test to use post and pre transformers

plugins/techdocs/src/reader/transformers/addBaseUrl.test.ts

@@ -39,7 +39,8 @@ describe('addBaseUrl', () => {
 
   it('contains transformed absolute paths', () => {
     const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
-      transformers: [
+      preTransformers: [],
+      postTransformers: [
         addBaseUrl({
           docStorageURL: DOC_STORAGE_URL,
           componentId: 'example-docs',
@@ -73,7 +74,8 @@ describe('addBaseUrl', () => {
       <script src="../assets/javascripts/vendor.d710d30a.min.js"></script>
     `,
       {
-        transformers: [
+        preTransformers: [],
+        postTransformers: [
           addBaseUrl({
             docStorageURL: DOC_STORAGE_URL,
             componentId: 'example-docs',
@@ -108,7 +110,8 @@ describe('addBaseUrl', () => {
       <script src="../assets/javascripts/vendor.d710d30a.min.js"></script>
     `,
       {
-        transformers: [
+        preTransformers: [],
+        postTransformers: [
           addBaseUrl({
             docStorageURL: DOC_STORAGE_URL,
             componentId: 'example-docs',

plugins/techdocs/src/reader/transformers/addLinkClickListener.test.ts

@@ -21,7 +21,8 @@ describe('addLinkClickListener', () => {
   it('calls onClick when a link has been clicked', () => {
     const fn = jest.fn();
     const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
-      transformers: [
+      preTransformers: [],
+      postTransformers: [
         addLinkClickListener({
           onClick: fn,
         }),

plugins/techdocs/src/reader/transformers/modifyCss.test.tsx

@@ -22,7 +22,8 @@ describe('modifyCss', () => {
     const shadowDom = createTestShadowDom(
       `<div class="md-typeset" style="font-size: 0.8em"></div>`,
       {
-        transformers: [],
+        preTransformers: [],
+        postTransformers: [],
       },
     );
 
@@ -37,7 +38,8 @@ describe('modifyCss', () => {
     const shadowDom = createTestShadowDom(
       `<div class="md-typeset" style="font-size: 1px"></div>`,
       {
-        transformers: [
+        preTransformers: [],
+        postTransformers: [
           modifyCss({
             cssTransforms: {
               '.md-typeset': [{ 'font-size': '1em' }],

plugins/techdocs/src/reader/transformers/onCssReady.test.ts

@@ -42,7 +42,8 @@ describe('onCssReady', () => {
     const onLoaded = jest.fn();
 
     createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
-      transformers: [
+      preTransformers: [],
+      postTransformers: [
         onCssReady({
           docStorageURL,
           onLoading,
@@ -61,7 +62,8 @@ describe('onCssReady', () => {
     const onLoaded = jest.fn();
 
     createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
-      transformers: [
+      preTransformers: [],
+      postTransformers: [
         addBaseUrl({
           docStorageURL,
           componentId: 'mkdocs',

plugins/techdocs/src/reader/transformers/removeMkdocsHeader.test.ts

@@ -20,7 +20,8 @@ import { removeMkdocsHeader } from '../transformers';
 describe('removeMkdocsHeader', () => {
   it('does not remove mkdocs header', () => {
     const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
-      transformers: [],
+      preTransformers: [],
+      postTransformers: [],
     });
 
     expect(shadowDom.querySelector('.md-header')).toBeTruthy();
@@ -28,7 +29,8 @@ describe('removeMkdocsHeader', () => {
 
   it('does remove mkdocs header', () => {
     const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
-      transformers: [removeMkdocsHeader()],
+      preTransformers: [],
+      postTransformers: [removeMkdocsHeader()],
     });
 
     expect(shadowDom.querySelector('.md-header')).toBeFalsy();

plugins/techdocs/src/reader/transformers/rewriteDocLinks.test.ts

@@ -43,7 +43,8 @@ describe('rewriteDocLinks', () => {
         <a href="example-docs/example-page">Test Sub Page</a>
     `,
       {
-        transformers: [rewriteDocLinks()],
+        preTransformers: [],
+        postTransformers: [rewriteDocLinks()],
       },
     );
 

plugins/techdocs/src/test-utils/shadowDom.ts

@@ -18,22 +18,36 @@ import transformer from '../reader/transformers';
 import type { Transformer } from '../reader/transformers';
 
 export type CreateTestShadowDomOptions = {
-  transformers: Transformer[];
+  preTransformers: Transformer[];
+  postTransformers: Transformer[];
 };
 
 export const createTestShadowDom = (
   fixture: string,
-  opts: CreateTestShadowDomOptions = { transformers: [] },
+  opts: CreateTestShadowDomOptions = {
+    preTransformers: [],
+    postTransformers: [],
+  },
 ): ShadowRoot => {
   const divElement = document.createElement('div');
   divElement.attachShadow({ mode: 'open' });
   document.body.appendChild(divElement);
 
-  const domParser = new DOMParser().parseFromString(fixture, 'text/html');
-  divElement.shadowRoot?.appendChild(domParser.documentElement);
+  // Transformers before the UI is rendered
+  let dom: Element | HTMLElement = new DOMParser().parseFromString(
+    fixture,
+    'text/html',
+  ).documentElement;
+  if (opts.preTransformers) {
+    dom = transformer(dom, opts.preTransformers);
+  }
 
-  if (opts.transformers) {
-    transformer(divElement.shadowRoot!.children[0], opts.transformers);
+  // Mount the UI
+  divElement.shadowRoot?.appendChild(dom);
+
+  // Transformers after the UI is rendered
+  if (opts.postTransformers) {
+    transformer(dom, opts.postTransformers);
   }
 
   return divElement.shadowRoot!;