@percy/report 0.0.3

package/src/summary.js

@@ -0,0 +1,138 @@
+const { Axios } = require('axios')
+const { startOfDay, startOfWeek, endOfDay, endOfWeek, isAfter, isBefore,intervalToDuration } = require('date-fns')
+const fs = require('fs')
+const { HtmlSummary } = require('./html-render')
+const defaultOptions = {
+    percyToken: process.env.PERCY_TOKEN,
+    apiUrl: 'https://percy.io/api/v1',
+}
+module.exports.Summary = async function (opts) {
+    let { percyToken, startDate, endDate, projectSlug, apiUrl } = Object.assign(defaultOptions, opts)
+    startDate = new Date(startDate)
+    endDate = new Date(endDate)
+ 
+    if(!startDate){
+        throw new Error("Start Date is required")
+    }
+    if(!endDate){
+        throw new Error("End Date is required")
+    }
+    if(intervalToDuration({start:startDate,end:endDate}).days > 30){
+        throw new Error("Interval between start & end date should be less than 30days")
+    }
+
+    let axios = new Axios({
+        baseURL: apiUrl,
+        headers: {
+            "Authorization": `Token ${percyToken}`
+        }
+    })
+
+    let project = await axios.get(`/projects?project_slug=${projectSlug}`, { responseType: 'json' }).then((res) => {
+        if (res.status == 200) {
+            return JSON.parse(res.data)
+        } else {
+            throw res.data
+        }
+    })
+    const isApp = project['data']['attributes']['type'] == 'app'
+    let projectId = project.data.id
+    let projectURL = "https://percy.io/"+project.data.attributes['full-slug']
+    let projectName = project.data.attributes.name
+    let browsers = project["included"].filter((i) => i['type'] == 'browser-families')?.map((v) => v['attributes'].name)
+    const buildSummary = async (cursor, _summary) => {
+        let done = false
+        let urlParams = {
+            project_id: projectId,
+            'page[limit]': 100,
+        }
+        let summary = Object.assign({
+            totalBuilds: 0,
+            totalBuildsApproved: 0,
+            totalBuildsUnreviewed:0,
+            totalBuildsFailed:0,
+            totalBuildsRequestingChanges:0,
+            totalSnapshots: 0,
+            totalSnapshotsRequestingChanges: 0,
+            totalSnapshotsUnreviewed: 0,
+            totalSnapshotsReviewed: 0,
+            totalComparisons: 0,
+            projectURL: projectURL,
+            unreviewedBuilds:[],
+            failedBuilds:[]
+        },_summary)
+        if (cursor) {
+            urlParams['page[cursor]'] = cursor
+        }
+        let _builds = await axios.get('/builds', { params: urlParams, responseType: 'json' }).then((res) => {
+            if (res.status == 200) {
+                return JSON.parse(res.data)
+            } else {
+                throw res.data
+            }
+        })
+        for (let build of _builds.data) {
+            let createdAt = new Date(build.attributes["created-at"])
+            if (isBefore(createdAt, startDate)) {
+                done = true;
+                continue
+            }
+            if (isBefore(createdAt, endDate) && isAfter(createdAt, startDate)) {
+                summary['totalBuilds']++;
+                if (build['attributes']['review-state'] == 'approved') {
+                    summary['totalBuildsApproved']++
+                }
+                if(build['attributes']['review-state'] == 'unreviewed'){
+                    summary['totalBuildsUnreviewed'] ++
+                    summary['unreviewedBuilds'].push({
+                        timestamp:new Date(build.attributes["created-at"]),
+                        buildUrl:build['attributes']['web-url'],
+                        buildNo:build['attributes']['build-number']
+                    })
+                }
+                if(build['attributes']['review-state'] == null){
+                    summary['totalBuildsFailed'] ++;
+                    summary['failedBuilds'].push({
+                        timestamp:new Date(build.attributes["created-at"]),
+                        buildUrl:build['attributes']['web-url'],
+                        buildNo:build['attributes']['build-number']
+                    })
+                }
+                if(build['attributes']['review-state'] == 'changes_requested'){
+                    summary['totalBuildsRequestingChanges'] ++;
+                }
+                summary['totalSnapshots'] += build['attributes']['total-snapshots']
+                summary['totalSnapshotsRequestingChanges'] += build['attributes']['total-snapshots-requesting-changes']
+                summary['totalSnapshotsUnreviewed'] += build['attributes']['total-snapshots-unreviewed']
+                summary['totalSnapshotsReviewed'] += (build['attributes']['total-snapshots'] - build['attributes']['total-snapshots-unreviewed'])
+                summary['totalComparisons'] += build['attributes']['total-comparisons']
+            }
+        }
+        if (done) {
+            return summary
+        } else {
+            if (_builds.data.length > 0) {
+                return buildSummary(_builds.data[_builds.data.length - 1].id,summary)
+            } else {
+                return summary;
+            }
+        }
+    }
+
+    let summary = await buildSummary()
+    summary = {
+        ...summary,
+        browsers,
+        projectName,
+        startDate,
+        endDate
+    }
+    if(!fs.existsSync('Summary') ){
+        fs.mkdirSync('Summary',{recursive:true})
+    }
+    fs.writeFileSync(`Summary/${summary.projectName}-${Date.now()}.json`,JSON.stringify(summary,undefined,2))
+    HtmlSummary(summary,`Summary/${summary.projectName}-${Date.now()}.html`, isApp)
+    console.log("Summary report generated")
+    return summary;
+
+}

package/src/template/app-report.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <style>
+        img {
+            width: 100%;
+            object-fit: contain;
+            border: 1px solid gray;
+        }
+
+        .comparison-container {
+            position: relative;
+            cursor: pointer;
+        }
+
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 50;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+
+        .color-red{
+            background-color: red !important;
+            color: white !important;
+        }
+        .color-green{
+            background-color: green !important;
+            color: white !important;
+        }
+        select{
+            max-width: 100%;
+        }
+    </style>
+    <script type="text/javascript">
+        function onClickOverlay(e, element) {
+            let hidden = e.currentTarget.querySelector(".overlay").classList.contains('d-none')
+            if(hidden){
+                e.currentTarget.querySelector(".overlay").classList.remove('d-none')
+            }else{
+                e.currentTarget.querySelector(".overlay").classList.add('d-none')
+            }
+        }
+        const snapshots = JSON.parse('<%- JSON.stringify(details.map(snp=>snp.name)) %>')
+        const widths = JSON.parse('<%- JSON.stringify(widths) %>')
+        const devices = JSON.parse('<%- JSON.stringify(devices) %>')
+        var snapshotSelect, widthSelect,deviceSelect,images
+        window.addEventListener('DOMContentLoaded', () => {
+            snapshotSelect = document.getElementById('select-snapshot')
+            deviceSelect = document.getElementById('select-device')
+            images = document.getElementsByTagName('img')
+            tables = document.getElementsByTagName('table')
+            snapshotSelect.addEventListener('change', ApplyFilter)
+            deviceSelect.addEventListener('change', ApplyFilter)
+            ApplyFilter()
+        })
+
+        function ApplyFilter() {
+            const shouldEnable = (dataset) => {
+                return (snapshotSelect.value == "All" || snapshotSelect.value == dataset.name)  && deviceSelect.value == dataset.device
+            }
+            for (let i = 0; i < images.length; i++) {
+                let image = images.item(i)
+                image.hidden = !shouldEnable(image.dataset)
+            }
+
+            for(let i = 0; i < tables.length; i++){
+                let table = tables.item(i)
+                if(table.id !== "build-details"){
+                    table.hidden = !shouldEnable(table.dataset)
+                }
+            }
+        }
+    </script>
+</head>
+
+<body class="p-5">
+    <div class="container">
+        <h1 class="my-3 text-center"> <u> <%= projectName %> </u></h1>
+        <h4 class="my-3 text-center"> <u> <a href="<%= buildURL %>">Go to Percy Dashboard Build</a> </u></h3>
+            <table class="table table-bordered table-striped" id="build-details">
+                <thead>
+                    <th class="text-center">Build Number</th>
+                    <th class="text-center">Device Count</th>
+                    <th class="text-center">Total Snapshots</th>
+                    <th class="text-center">Total Screenshots</th>
+                    <th class="text-center">Snapshots Unreviewed</th>
+                    <th class="text-center">Screenshots Unreviewed</th>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="text-center">
+                            <%= buildNumber %>
+                        </td>
+                        <td class="text-center"><%= devices.length %></td>
+                        <td class="text-center">
+                            <%= totalSnapshots %>
+                        </td>
+                        <td class="text-center">
+                            <%= totalScreenshots %>
+                        </td>
+                        <td class="text-center">
+                            <%= unreviewedSnapshots %>
+                        </td>
+                        <td class="text-center">
+                            <%= unreviewedScreenshots %>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="row g-0 my-3">
+                <div class="col-md-6 text-center border p-2">
+                    <label>Snapshot Name</label>
+                    <select id="select-snapshot">
+                        <option selected>All</option>
+                        <% for(let snapshot of details){ %>
+                            <option value="<%= snapshot['name']  %>">
+                                <%= snapshot['name'] %>
+                            </option>
+                            <% } %>
+                    </select>
+                </div>
+                <div class="col-md-6 text-center border p-2">
+                    <label>Devices</label>
+                    <select id="select-device">
+                        <% for(let device of devices){ %>
+                            <option value="<%= device %>">
+                                <%= device %>
+                            </option>
+                            <% } %>
+                    </select>
+                </div>
+            </div>
+            <hr>
+            <% for(let snapshot of details){ %>
+                <% for(let comparison of snapshot.comparisons){ %>
+                    <div class="row gx-2">
+                        <div class="col-md-12">
+                            <table hidden data-type="diff-ratio" data-name="<%= snapshot.name %>" data-device="<%= comparison.device %>" class="m-3">
+                               <tbody>
+                                   <tr>
+                                       <td>Diff Ratio:</td>
+                                       <td class="color-<%= comparison['diff-color'] %>" ><%= comparison['diff-percentage'] %></td>
+                                   </tr>
+                               </tbody>
+                            </table>
+                        </div>
+                        <div class="col-md-6 image-container">
+                            <img hidden data-type="base" data-name="<%= snapshot.name %>" data-device="<%= comparison.device %>"
+                                src="<%= comparison.images['base']?.file || comparison.images['base']?.url %>" alt="No Base Image Found">
+                        </div>
+                        <% if(!comparison.images['base'] || comparison.images['diff'] || comparison.images['head']){ %>
+                            <div onclick="onClickOverlay(event,this)" class="col-md-6 image-container comparison-container">
+                                <img hidden data-type="head" data-name="<%= snapshot.name %>" data-device="<%= comparison.device %>"
+                                    src="<%= comparison.images['head'].file || comparison.images['head']?.url %>" alt="No Head Image Found">
+                                <% if (comparison.images['diff']) { %> <img hidden data-type="diff"
+                                        data-name="<%= snapshot.name %>"
+                                        data-device="<%= comparison.device %>" class="overlay"
+                                        src="<%= comparison.images['diff']?.file || comparison.images['diff']?.url %>" alt="">
+                                    <% } %>
+                            </div>
+                            <% } %>
+                    </div>
+                    <% }} %>
+    </div>
+</body>
+
+</html>

package/src/template/app-summary.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <title>Document</title>
+</head>
+<style>
+    .table {
+        max-width: 768px !important;
+    }
+
+    .logo {
+        display: block;
+        width: 150px;
+        height: auto;
+        margin: auto;
+    }
+</style>
+
+<body class="p-5">
+    <div class="container">
+        <svg class="logo my-5" width="116" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M109.723 26.385c-.066.211-.175.36-.324.443l-.043.021c-.162.066-.335.057-.539.007-.657-.162-3.706-.505-2.487-4.067l.723-2.112-.164-.41-.792-1.885-4.966-11.538a.614.614 0 0 1 .028-.606c.101-.155.279-.233.531-.238h2.825c.194 0 .359.052.485.15.127.098.219.248.298.432l3.645 8.528 2.615-8.504a.8.8 0 0 1 .289-.446c.131-.1.298-.16.493-.16h3.018c.256 0 .438.074.545.21.107.14.121.338.042.6l-4.058 12.734-1.565 4.942-.599 1.9zM97.368 14.95h3.085c.477 0 .757.303.589.773-.87 2.873-3.618 4.861-6.9 4.861-4.263 0-7.432-3.176-7.432-7.291C86.71 9.175 89.879 6 94.142 6c3.282 0 6.03 1.988 6.9 4.86.168.47-.112.774-.589.774h-3.085c-.365 0-.617-.165-.842-.469-.504-.69-1.374-1.077-2.384-1.077-1.823 0-3.225 1.298-3.225 3.204 0 1.905 1.402 3.203 3.225 3.203 1.01 0 1.88-.386 2.384-1.049.225-.332.449-.497.842-.497zm-15.11-8.202v.72c.35-.61 1.146-1.474 3.223-1.447.15.002.272.059.36.15.132.134.195.315.195.549v3.375c0 .23-.049.4-.15.515-.098.114-.243.172-.431.172a4.08 4.08 0 0 0-1.187.129c-.378.1-.721.271-1.022.505-.3.239-.54.559-.716.949-.178.396-.268.877-.271 1.45l-.02 3.6c-.02 3.76-2.932 3.19-3.612 3.151-.231-.013-.412-.062-.537-.185-.126-.124-.19-.301-.19-.53V6.747c0-.229.064-.406.19-.53s.305-.185.537-.185h2.905c.233 0 .412.061.538.185.126.124.189.3.189.53zm-12.586-.74c1.025.004 1.966.188 2.824.55a6.743 6.743 0 0 1 2.232 1.524 6.957 6.957 0 0 1 1.463 2.303c.345.881.522 1.845.527 2.891 0 .18-.005.354-.019.519-.01.17-.023.335-.037.5-.028.22-.112.38-.242.482-.13.101-.303.151-.513.151h-9.338c.177.542.424.982.75 1.322.326.335.708.578 1.136.734.434.156.895.23 1.385.23a3.658 3.658 0 0 0 1.141-.188c.36-.124.671-.29.928-.5.135-.11.27-.198.4-.262.136-.064.29-.097.466-.097l2.685-.027c.256.005.442.078.554.22.107.142.112.326.005.55a5.947 5.947 0 0 1-1.468 2.006 6.162 6.162 0 0 1-2.125 1.22 8.256 8.256 0 0 1-2.642.41c-1.165-.006-2.214-.194-3.146-.56-.936-.368-1.733-.877-2.395-1.538a6.74 6.74 0 0 1-1.528-2.303c-.354-.882-.532-1.836-.536-2.869.005-1.032.186-1.987.55-2.867a6.913 6.913 0 0 1 1.542-2.304 7 7 0 0 1 2.367-1.538c.914-.367 1.925-.555 3.034-.56zm-19.617 1.5a6.578 6.578 0 0 1 1.88-1.09c.7-.262 1.44-.398 2.19-.398 1.856 0 3.67.817 4.887 2.138 1.215 1.319 1.967 3.14 1.967 5.152 0 2.01-.752 3.832-1.967 5.151a6.746 6.746 0 0 1-4.888 2.138c-1.36 0-2.786-.42-3.78-1.36l.003 4.473c.003 3.76-2.932 3.19-3.612 3.151-.23-.013-.411-.062-.537-.186-.126-.123-.189-.3-.189-.53L46 6.767c0-.233.065-.417.194-.544.13-.127.315-.19.552-.19H49.3c.238 0 .423.063.552.19.13.127.191.31.194.544l.01.741zm7.255 5.763c0-1.774-1.45-3.211-3.24-3.211-1.789 0-3.24 1.438-3.24 3.211 0 1.774 1.451 3.212 3.24 3.212 1.79 0 3.24-1.438 3.24-3.212zm10.363-3.055c-.527.357-.9.885-1.118 1.574h5.987c-.149-.519-.372-.937-.67-1.248a2.618 2.618 0 0 0-1.026-.67 3.446 3.446 0 0 0-1.202-.202c-.788.004-1.45.183-1.97.546z"
+                fill="#333"></path>
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M39.482 7.275c-.23-.758-.84-1.503-1.565-1.2A5.688 5.688 0 0 1 36 6.5c-1.429-1.341-5.631-4-8.398-5.505 0 0 .338.987.804 2.831 0 0-2.978-2.326-6.348-3.826 0 0 .948 1.946 1.026 2.576 0 0-3.092-1.076-7.43-1.484 0 0 2.084 1.453 2.892 2.564 0 0-3.066-.156-7.645 0 0 0 2.603 1.055 3.752 2.025 0 0-5.434.552-8.504 1.435 0 0 3.46 1.22 4.42 2.127 0 0-4.412 1.257-8.86 3.825 0 0 2.471.432 4.405 1.277 0 0-2.463 1.722-6.114 6.42 0 0 2.698-.515 4.549-.37 0 0-2.345 2.74-3.569 6.93 0 0 1.357-.864 2.67-1.177 0 0 .142 4.998 2.875 5.798l.002-.003c.134.042.261.057.372.057.134 0 .273-.02.415-.061.867-.248 1.523-1.104 2.283-2.095.249-.324.505-.657.776-.981a6.595 6.595 0 0 1 1.176-1.27c.966-.797 2.303-1.4 3.931-1.159 1.834.155 2.966 1.982 3.877 3.45.473.764 1.1 2.116 2.149 2.116 1.16 0 1.567-1.39 2.084-3.104a16.946 16.946 0 0 1 2.149-4.553c1.81-2.693 4.124-4.157 6.9-5.6 2.659-1.383 5.172-2.69 6.432-4.672.63-.991.943-2.207.928-3.615-.012-1.262-.288-2.427-.517-3.18zM26.352 6.5l-4.294-2 6.348 1.575-2.055.425zm-9.758.616l5.305 1.357 2.314-.768-7.62-.59zm10.46 2.66l1.132-.858L23.084 10l3.97-.224zm-8.508 0l-1.815 1.216-5.03-.479 6.845-.737zm5.667 3.039l1.841-1.03-6.844.737 5.003.293zm-5.07 1.143l-1.283 2.109-6.422 1.57 7.705-3.679zm-8.023 1.298L6.15 17.445l6.102-4.377-1.13 2.188zM9.401 17.88l-.196 2.19L6 23l3.401-5.12z"
+                fill="#333"></path>
+            <path
+                d="M26.332 31.457c-.558-.009-1.15-.486-1.8-1.454.383-2.192 1.897-4.991 3.718-6.869-.465 1.744-.527 3.495-.576 4.901v.002c-.032.91-.06 1.695-.19 2.267-.174.765-.555 1.154-1.133 1.154h-.02z"
+                fill="#333"></path>
+            <path
+                d="M10.901 29.875c.473 1.068.978 1.588 1.542 1.588a.893.893 0 0 0 .137-.01c.766-.121 1.476-1.606 2.07-3.043.154-.373.298-.745.427-1.09-1.696.02-3.345 1.384-4.176 2.555z"
+                fill="#333"></path>
+        </svg>
+        <table class="table table-bordered m-auto">
+            <thead>
+                <tr>
+                    <th>Summary Report</th>
+                    <th> <%=new Date(startDate).toDateString()%> - <%=new Date(endDate).toDateString()%> </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Project Name</td>
+                    <td> <a href="<%=projectURL%>"> <%=projectName%> </a></td>
+                </tr>
+                <tr>
+                    <td> Total Builds </td>
+                    <td> <%=totalBuilds%> </td>
+                </tr>
+                <tr>
+                    <td> Total Builds Approved </td>
+                    <td> <%=totalBuildsApproved%> </td>
+                </tr>
+                <tr>
+                    <td> Total Builds Unreviewed </td>
+                    <td>
+                        <% if(totalBuildsUnreviewed) { %>
+                        <a href="#unreviewedBuilds">
+                            <% } %>
+                            <%=totalBuildsUnreviewed%>
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <td> Total Builds Failed </td>
+                    <td>
+                        <% if(totalBuildsFailed) { %>
+                        <a href="#failedBuilds">
+                            <% } %>
+                            <%=totalBuildsFailed%>
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <td> Total Builds Requesting Changes</td>
+                    <td> <%=totalBuildsRequestingChanges%> </td>
+                </tr>
+                <tr>
+                    <td> Total Snapshots</td>
+                    <td> <%=totalSnapshots%> </td>
+                </tr>
+                <tr>
+                    <td> Total Snapshots Requesting Changes</td>
+                    <td> <%=totalSnapshotsRequestingChanges%> </td>
+                </tr>
+                <tr>
+                    <td> Total Snapshots Unreviewed</td>
+                    <td> <%=totalSnapshotsUnreviewed%> </td>
+                </tr>
+                <tr>
+                    <td> Total Snapshots Reviewed</td>
+                    <td> <%=totalSnapshotsReviewed%> </td>
+                </tr>
+
+                <tr>
+                    <td> Total Comparisons</td>
+                    <td> <%=totalComparisons%> </td>
+                </tr>
+            </tbody>
+        </table>
+        <% if(totalBuildsUnreviewed) { %>
+        <section id="unreviewedBuilds">
+            <table class="table table-bordered mx-auto mt-5">
+                <thead>
+                    <tr>
+                        <th colspan="2">Unreviewed Builds</th>
+                    </tr>
+                    <tr>
+                        <th>Build ID</th>
+                        <th>Build Created At</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% for(let unreviewedBuild of unreviewedBuilds){ %>
+                    <tr>
+                        <td>
+                            <a href="<%= unreviewedBuild['buildUrl'] %>">Build <%= unreviewedBuild['buildNo'] %></a>
+                        </td>
+                        <td>
+                            <%= new Date(unreviewedBuild['timestamp']) %>
+                        </td>
+                    </tr>
+                    <% } %>
+                </tbody>
+            </table>
+        </section>
+        <% } %>
+        <% if(totalBuildsFailed) { %>
+        <section id="failedBuilds">
+            <table class="table table-bordered mx-auto mt-5">
+                <thead>
+                    <tr>
+                        <th colspan="2">Failed Builds</th>
+                    </tr>
+                    <tr>
+                        <th>Build ID</th>
+                        <th>Build Created At</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% for(let failedBuild of failedBuilds){ %>
+                    <tr>
+                        <td>
+                            <a href="<%= failedBuild['buildUrl'] %>">Build <%= failedBuild['buildNo'] %></a>
+                        </td>
+                        <td>
+                            <%= new Date(failedBuild['timestamp']) %>
+                        </td>
+                    </tr>
+                    <% } %>
+                </tbody>
+            </table>
+        </section>
+        <% } %>
+    </div>
+</body>
+
+</html>