ktl-812 chore: test api references footer customization

nikpachoo · nikpachoo · commit 4b9c0611a5ff · 2022-09-09T12:22:36.000+02:00
diff --git a/dokka-templates/base.ftl b/dokka-templates/base.ftl
@@ -32,7 +32,7 @@
 </head>
 <body>
 <@header.display/>
-<div id="container">
+<div id="container" data-test="content">
     <div id="leftColumn">
         <div id="sideMenu"></div>
     </div>
diff --git a/dokka-templates/includes/footer.ftl b/dokka-templates/includes/footer.ftl
@@ -1,3 +1,5 @@
 <#macro display>
-    {% ktl_component "footer" %}
+    <div data-test="footer">
+        {% ktl_component "footer" %}
+    </div>
 </#macro>
diff --git a/playwright.config.js b/playwright.config.js
@@ -5,6 +5,7 @@ const config = {
     retries: process.env.CI ? 0 : 0,
     reporter: process.env.CI ? 'dot' : 'list',
     maxFailures: process.env.CI ? 2 : 0,
+    snapshotDir: 'test/snapshots',
     use: {
         baseURL: process.env.BASE_URL || 'http://localhost:9000',
         trace: 'off',
diff --git a/test/page/api-reference-page.ts b/test/page/api-reference-page.ts
@@ -0,0 +1,19 @@
+import { Page } from '@playwright/test';
+import { testSelector } from '../utils';
+import { BasePage } from './base-page';
+
+export class ApiReferencePage implements BasePage {
+    readonly page: Page;
+    readonly url: string;
+
+    constructor(page, url) {
+        this.page = page;
+        this.url = url;
+    }
+
+    async init() {
+        await this.page.goto(this.url);
+
+        await this.page.waitForSelector(testSelector('content'));
+    }
+}
diff --git a/test/visual/api-references-template-customization.spec.ts b/test/visual/api-references-template-customization.spec.ts
@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+import { ApiReferencePage } from '../page/api-reference-page';
+import { testSelector } from '../utils';
+
+const pagesWithCustomizedTemplates = [
+    {
+        name: 'kotlinx.coroutines index',
+        getInstance: (page) => new ApiReferencePage(page, '/api/kotlinx.coroutines/'),
+    },
+    {
+        name: 'kotlinx-coroutines-core module',
+        getInstance: (page) => new ApiReferencePage(page, '/api/kotlinx.coroutines/kotlinx-coroutines-core/'),
+    },
+    {
+        name: 'kotlinx-serialization index',
+        getInstance: (page) => new ApiReferencePage(page,  '/api/kotlinx.serialization/'),
+    },
+    {
+        name: 'kotlinx-serialization-core module',
+        getInstance: (page) => new ApiReferencePage(page,  '/api/kotlinx.serialization/kotlinx-serialization-core/'),
+    },
+];
+
+test.describe('Check api references template customization', async () => {
+    for (const pageWithCustomizedTemplate of pagesWithCustomizedTemplates) {
+        test(`Check footer on the ${pageWithCustomizedTemplate.name} page`, async ({ page }) => {
+            const currentPage = pageWithCustomizedTemplate.getInstance(page);
+            await currentPage.init();
+
+            expect(await page.locator(testSelector('footer')).screenshot()).toMatchSnapshot(
+                `${pageWithCustomizedTemplate.name}.footer.png`
+            );
+        });
+    }
+});
