Merge pull request #1495 from spotify/mob/techdocs-tests

Mob/techdocs tests

plugins/techdocs/src/reader/components/Reader.tsx

@@ -75,9 +75,7 @@ export const Reader = () => {
           componentId,
           path,
         }),
-        rewriteDocLinks({
-          componentId,
-        }),
+        rewriteDocLinks(),
         modifyCss({
           cssTransforms: {
             '.md-main__inner': [{ 'margin-top': '0' }],

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.ts

@@ -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/reader/transformers/rewriteDocLinks.test.ts

@@ -0,0 +1,57 @@
+/*
+ * 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, getSample } from '../../test-utils';
+import { rewriteDocLinks } from '../transformers';
+
+describe('rewriteDocLinks', () => {
+  it('should not do anything', () => {
+    const shadowDom = createTestShadowDom(`
+        <a href="http://example.org/">Test</a>
+        <a href="../example">Test</a>
+        <a href="example-docs">Test</a>
+        <a href="example-docs/example-page">Test Sub Page</a>
+    `);
+
+    expect(getSample(shadowDom, 'a', 'href', 6)).toEqual([
+      'http://example.org/',
+      '../example',
+      'example-docs',
+      'example-docs/example-page',
+    ]);
+  });
+
+  it('should transform a href with licalhost as baseUrl', () => {
+    const shadowDom = createTestShadowDom(
+      `
+        <a href="http://example.org/">Test</a>
+        <a href="../example">Test</a>
+        <a href="example-docs">Test</a>
+        <a href="example-docs/example-page">Test Sub Page</a>
+    `,
+      {
+        transformers: [rewriteDocLinks()],
+      },
+    );
+
+    expect(getSample(shadowDom, 'a', 'href', 6)).toEqual([
+      'http://example.org/',
+      'http://localhost/example',
+      'http://localhost/example-docs',
+      'http://localhost/example-docs/example-page',
+    ]);
+  });
+});

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

@@ -17,9 +17,7 @@
 import URLParser from '../urlParser';
 import type { Transformer } from './index';
 
-type AddBaseUrlOptions = {};
-
-export const rewriteDocLinks = ({}: AddBaseUrlOptions): Transformer => {
+export const rewriteDocLinks = (): Transformer => {
   return dom => {
     const updateDom = <T extends Element>(
       list: Array<T>,

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

@@ -0,0 +1,63 @@
+/*
+ * 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 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,
+  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);
+    });
+};