Added tests for transformers

plugins/techdocs/package.json

@@ -27,6 +27,8 @@
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "@types/jsdom": "^16.2.3",
+    "jsdom": "^16.2.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "^6.0.0-alpha.5",

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

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createTestShadowDom, FIXTURES, getSample } from '../../test-utils';
+import { addBaseUrl } from '../transformers';
+
+const DOC_STORAGE_URL = 'https://example-host.storage.googleapis.com';
+
+describe('addBaseUrl', () => {
+  it('contains relative paths', () => {
+    const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE);
+
+    expect(getSample(shadowDom, 'img', 'src')).toEqual([
+      'img/win-py-install.png',
+      'img/initial-layout.png',
+    ]);
+    expect(getSample(shadowDom, 'link', 'href')).toEqual([
+      'https://www.mkdocs.org/',
+      'assets/images/favicon.png',
+    ]);
+    expect(getSample(shadowDom, 'script', 'src')).toEqual([
+      'https://www.google-analytics.com/analytics.js',
+      'assets/javascripts/vendor.d710d30a.min.js',
+    ]);
+  });
+
+  it('contains transformed absolute paths', () => {
+    const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
+      transformers: [
+        addBaseUrl({
+          docStorageURL: DOC_STORAGE_URL,
+          componentId: 'example-docs',
+          path: '',
+        }),
+      ],
+    });
+
+    expect(getSample(shadowDom, 'img', 'src')).toEqual([
+      'https://example-host.storage.googleapis.com/example-docs/img/win-py-install.png',
+      'https://example-host.storage.googleapis.com/example-docs/img/initial-layout.png',
+    ]);
+    expect(getSample(shadowDom, 'link', 'href')).toEqual([
+      'https://www.mkdocs.org/',
+      'https://example-host.storage.googleapis.com/example-docs/assets/images/favicon.png',
+    ]);
+    expect(getSample(shadowDom, 'script', 'src')).toEqual([
+      'https://www.google-analytics.com/analytics.js',
+      'https://example-host.storage.googleapis.com/example-docs/assets/javascripts/vendor.d710d30a.min.js',
+    ]);
+  });
+
+  it('includes path option', () => {
+    const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
+      transformers: [
+        addBaseUrl({
+          docStorageURL: DOC_STORAGE_URL,
+          componentId: 'example-docs',
+          path: 'examplepath',
+        }),
+      ],
+    });
+
+    expect(getSample(shadowDom, 'img', 'src')).toEqual([
+      'https://example-host.storage.googleapis.com/example-docs/examplepath/img/win-py-install.png',
+      'https://example-host.storage.googleapis.com/example-docs/examplepath/img/initial-layout.png',
+    ]);
+    expect(getSample(shadowDom, 'link', 'href')).toEqual([
+      'https://www.mkdocs.org/',
+      'https://example-host.storage.googleapis.com/example-docs/examplepath/assets/images/favicon.png',
+    ]);
+    expect(getSample(shadowDom, 'script', 'src')).toEqual([
+      'https://www.google-analytics.com/analytics.js',
+      'https://example-host.storage.googleapis.com/example-docs/examplepath/assets/javascripts/vendor.d710d30a.min.js',
+    ]);
+  });
+});

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createTestShadowDom, FIXTURES } from '../../test-utils';
+import { addEventListener } from '../transformers';
+
+describe('addEventListener', () => {
+  it('calls onClick when a link has been clicked', () => {
+    const fn = jest.fn();
+    const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
+      transformers: [
+        addEventListener({
+          onClick: fn,
+        }),
+      ],
+    });
+
+    shadowDom.querySelector('a')?.click();
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import transform, { Transformer } from '.';
+
+describe('transform', () => {
+  it('calls the transformers', () => {
+    const fn = jest.fn();
+    const mockTransformer = (): Transformer => (dom: Element) => {
+      fn(dom);
+      return dom;
+    };
+
+    transform('<html></html>', [mockTransformer()]);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith(expect.any(Element));
+  });
+});

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createTestShadowDom } from '../../test-utils';
+import { modifyCss } from '../transformers';
+
+describe('modifyCss', () => {
+  it('does not modify css', () => {
+    const shadowDom = createTestShadowDom(
+      `<div class="md-typeset" style="font-size: 0.8em"></div>`,
+      {
+        transformers: [],
+      },
+    );
+
+    const { fontSize } = getComputedStyle(
+      shadowDom.querySelector<HTMLElement>('.md-typeset')!,
+    );
+
+    expect(fontSize).toBe('0.8em');
+  });
+
+  it('does modify css', () => {
+    const shadowDom = createTestShadowDom(
+      `<div class="md-typeset" style="font-size: 1px"></div>`,
+      {
+        transformers: [
+          modifyCss({
+            cssTransforms: {
+              '.md-typeset': [{ 'font-size': '1em' }],
+            },
+          }),
+        ],
+      },
+    );
+
+    const { fontSize } = getComputedStyle(
+      shadowDom.querySelector<HTMLElement>('.md-typeset')!,
+    );
+
+    expect(fontSize).toBe('1em');
+  });
+});

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createTestShadowDom, FIXTURES } from '../../test-utils';
+import { removeMkdocsHeader } from '../transformers';
+
+describe('removeMkdocsHeader', () => {
+  it('does not remove mkdocs header', () => {
+    const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
+      transformers: [],
+    });
+
+    expect(shadowDom.querySelector('.md-header')).toBeTruthy();
+  });
+
+  it('does remove mkdocs header', () => {
+    const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
+      transformers: [removeMkdocsHeader()],
+    });
+
+    expect(shadowDom.querySelector('.md-header')).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-ignore
+import { JSDOM } from 'jsdom';
+
+import FIXTURE_STANDARD_PAGE from './fixtures/mkdocs-index';
+import transformer from '../reader/transformers';
+import type { Transformer } from '../reader/transformers';
+
+export const FIXTURES = {
+  FIXTURE_STANDARD_PAGE,
+};
+
+export type CreateTestShadowDomOptions = {
+  transformers: Transformer[];
+};
+
+export const createTestShadowDom = (
+  fixture: string,
+  opts: CreateTestShadowDomOptions = { transformers: [] },
+): 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);
+
+  if (opts.transformers) {
+    transformer(divElement.shadowRoot!.children[0], opts.transformers);
+  }
+
+  return divElement.shadowRoot!;
+};
+
+export const getSample = (
+  shadowDom: ShadowRoot,
+  elementName: string,
+  elementAttribute: string,
+) => {
+  const sampleSize = 2;
+  const rootElement = shadowDom.children[0];
+
+  return Array.from(rootElement.getElementsByTagName(elementName))
+    .filter(elem => {
+      return elem.hasAttribute(elementAttribute);
+    })
+    .slice(0, sampleSize)
+    .map(elem => {
+      return elem.getAttribute(elementAttribute);
+    });
+};