naive solution to embedding iframes into example pages

w3c · Dec 15, 2021 · fc0acac · fc0acac
1 parent 306c806
commit fc0acac
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/scripts/pre-build/library/loadExamples/loadExample.js b/scripts/pre-build/library/loadExamples/loadExample.js
@@ -5,7 +5,7 @@ const walkHtmlElements = require("../../utilities/walkHtmlElements");
 const getTemplateBoilerplate = require("../getTemplateBoilerplate");
 const { getHandleElement, getContent } = require("./handleElement");
 
-const loadExample = async (filePath, { exampleRelativeDirectory }) => {
+const loadExample = async (filePath, { exampleRelativeDirectory, reportId }) => {
   const html = await fs.readFile(filePath, { encoding: "utf8" });
   const slug = path.basename(filePath).slice(0, -5);
   const permalink = `/index/${exampleRelativeDirectory}/${slug}`;
@@ -16,6 +16,11 @@ const loadExample = async (filePath, { exampleRelativeDirectory }) => {
 
   const { title, head, body, outline, relatedLinks } = getContent();
 
+  const testReport = reportId ? `<div>
+  <h2 id="test-report" tabindex="-1">Test Report</h2>
+  <iframe width="560" height="315" src="https://aria-at.w3.org/reports/${reportId}"></iframe>
+  </div>` : ''
+
   return {
     fileName: `${slug}.md`,
     fileContent: getTemplateBoilerplate({
@@ -36,10 +41,14 @@ const loadExample = async (filePath, { exampleRelativeDirectory }) => {
                   `;
                 })
                 .join(" ")}
+                <li><a href="#test-report">Test Report</a></li>
             </ul>
             ${relatedLinks}
           </aside>
-          <div class="sidebar-right">${body}</div>
+          <div class="sidebar-right">
+            ${body}
+            ${testReport}            
+          </div>
         </div>
       `,
     }),

diff --git a/scripts/pre-build/library/loadExamples/loadExamples.js b/scripts/pre-build/library/loadExamples/loadExamples.js
@@ -1,3 +1,4 @@
+const axios = require("axios");
 const fs = require("fs/promises");
 const path = require("path");
 const { promiseFiles: getPaths } = require("node-dir");
@@ -56,12 +57,45 @@ const loadExamples = async () => {
 
   await editAppJs({ destinationExamplesPath });
 
+  const query = `
+    query {
+      testPlanReports {
+        testPlanVersion {
+          id
+          testPlan {
+            id
+          }
+          gitSha
+          updatedAt
+        }
+        status
+      }
+    }
+  `
+
+  const response = await axios.post(
+   'https://aria-at.w3.org/api/graphql',
+   { query }
+  )
+
+  const finalizedTestReports = response.data.data.testPlanReports.filter(testPlanVersion => testPlanVersion.status === 'FINALIZED')
+
   for (const currentPath of exampleFilePaths) {
     const exampleRelative = path.relative(examplesPath, currentPath);
     const exampleRelativeDirectory = path.dirname(exampleRelative);
+
+    const exampleName = currentPath.replace('.html','').split('/').pop();
+    const reportUrls = finalizedTestReports.filter(report => report.testPlanVersion.testPlan.id === exampleName);
+    let url = reportUrls[0]
+    if (reportUrls.length > 1) {
+      // Get the latest SHA for an example
+      url = reportUrls.reduce((a, b) => Date.parse(a.testPlanVersion.updatedAt) > Date.parse(b.testPlanVersion.updatedAt) ? a : b
+      )
+    }
 
     const { fileName, fileContent } = await loadExample(currentPath, {
       exampleRelativeDirectory,
+      reportId: url && url.testPlanVersion.id
     });
 
     const destinationPath = path.join(