refactor: Move test demo page and assets into cypress folder

2025-11-25 05:44:24 +00:00 · 2019-07-14 08:38:57 -07:00
parent 50df0f30ef
commit 3e7554b321
12 changed files with 172 additions and 13 deletions
--- a/cypress/integration/api_spec.js
+++ b/cypress/integration/api_spec.js
@@ -10,7 +10,7 @@ function rgbCount(text) {

 describe('getColor()', function() {
 	beforeEach(function() {
-        cy.visit('http://localhost:8080');
+        cy.visit('http://localhost:8080/cypress/test-pages/index.html');
    })

    it('returns valid color from black image', function() {
@@ -62,7 +62,7 @@ function testPaletteCount(num) {

 describe('getPalette()', function() {
    beforeEach(function() {
-        cy.visit('http://localhost:8080');
+        cy.visit('http://localhost:8080/cypress/test-pages/index.html');
    })

    // FULL TEST LIST = [1, 2, 3, 5, 7, 10, 20];
--- a/cypress/test-pages/img/black.png
+++ b/cypress/test-pages/img/black.png
--- a/cypress/test-pages/img/rainbow-horizontal.png
+++ b/cypress/test-pages/img/rainbow-horizontal.png
--- a/cypress/test-pages/img/rainbow-vertical.png
+++ b/cypress/test-pages/img/rainbow-vertical.png
--- a/cypress/test-pages/img/red.png
+++ b/cypress/test-pages/img/red.png
--- a/cypress/test-pages/img/transparent.png
+++ b/cypress/test-pages/img/transparent.png
--- a/cypress/test-pages/img/white.png
+++ b/cypress/test-pages/img/white.png
--- a/cypress/test-pages/index.html
+++ b/cypress/test-pages/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>Color Thief</title>
+    <link rel="stylesheet" href="./screen.css">
+</head>
+<body>
+
+    <div id="example-images"></div>
+
+    <script id='image-tpl' type='text/x-mustache'>
+        {{#.}}
+            <div class="image-section" data-image="{{.}}">
+                <h2>{{.}}</h2>
+                <img class="image" src="./img/{{.}}" />
+                <div class="output"></div>
+            </div>
+        {{/.}}
+    </script>
+
+    <script id="color-tpl" type="text/x-mustache">
+        <div class="color">
+            <h3>getColor(img)</h3>
+            <div class="swatches">
+                <div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
+            </div>
+            <code>
+                <div class="output-color">{{colorStr}}</div>
+                <div class="time">{{elapsedTimeForGetColor}}ms</div>
+            </code>
+        </div>
+    </script>
+
+    <script id="palette-tpl" type="text/x-mustache">
+        <div class="palette" data-count="{{count}}">
+            <h3>getPalette(img, {{count}})</h3>
+            <div class="swatches">
+                {{#palette}}
+                    <div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
+                {{/palette}}
+            </div>
+            <code>
+                <div class="output-palette">{{paletteStr}}</div>
+                <div class="time">{{elapsedTimeForGetPalette}}ms</div>
+            </code>
+        </div>
+    </script>
+
+
+    <script src="/src/color-thief.js"></script>
+    <script src="/node_modules/mustache/mustache.js"></script>
+    <script src="index.js"></script>
+
+</body>
+</html>
--- a/cypress/test-pages/index.js
+++ b/cypress/test-pages/index.js
@@ -0,0 +1,58 @@
+var colorThief = new ColorThief();
+
+var images = [
+    'black.png',
+    'red.png',
+    'rainbow-horizontal.png',
+    'rainbow-vertical.png',
+    // 'transparent.png',
+    // 'white.png',
+];
+
+// Render example images
+var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
+document.getElementById('example-images').innerHTML = examplesHTML;
+
+// Once images are loaded, process them
+document.querySelectorAll('.image').forEach((image) => {
+    const section = image.closest('.image-section');
+    if (this.complete) {
+        showColorsForImage(image, section);
+    } else {
+        image.addEventListener('load', function() {
+            showColorsForImage(image, section);
+        });
+    }
+})
+
+// Run Color Thief functions and display results below image.
+// We also log execution time of functions for display.
+const showColorsForImage = function(image, section) {
+    // getColor(img)
+    let start = Date.now();
+    let result = colorThief.getColor(image);
+    let elapsedTime = Date.now() - start;
+    const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, {
+        color: result,
+        colorStr: result.toString(),
+        elapsedTime
+    })
+
+    // getPalette(img)
+    let paletteHTML = '';
+    let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20];
+    colorCounts.forEach((count) => {
+        let start = Date.now();
+        let result = colorThief.getPalette(image, count);
+        let elapsedTime = Date.now() - start;
+        paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, {
+            count,
+            palette: result,
+            paletteStr: result.toString(),
+            elapsedTime
+        })
+    });
+
+    const outputEl = section.querySelector('.output');
+    outputEl.innerHTML += colorHTML + paletteHTML;
+};
--- a/cypress/test-pages/screen.css
+++ b/cypress/test-pages/screen.css
@@ -0,0 +1,95 @@
+:root {
+    /* Colors */
+    --color: #000;
+    --bg-color: #f9f9f9;
+    --primary-color: #fc4c02;
+    --secondary-color: #f68727;
+    --muted-color: #999;
+    --code-color: var(--primary-color);
+    --code-bg-color: #fff;
+
+    /* Typography */
+    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --code-font: Menlo, Consolas, Monaco, Lucida Console, monospace;
+    --bold: 700;
+    --x-bold: 900;
+    --line-height: 1.5em;
+    --line-height-heading: 1.3em;
+
+    /* Breakpoints */
+    --sm-screen: 640px;
+}
+
+/* Base
+ * *----------------------------------------------- */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bg-color);
+}
+
+/* Typography
+ * *----------------------------------------------- */
+
+html {
+    font-size: 16px;
+    font-family: var(--font);
+    line-height: var(--line-height);
+    -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3 {
+    font-weight: var(--x-bold);
+    line-height: var(--line-height-heading);
+    letter-spacing: -0.005em;
+}
+
+h2 {
+    margin: 0 0 0.25em 0;
+    font-size: 1.5rem;
+}
+
+h3 {
+    margin: 1em 0 0.25em 0;
+    font-size: 1.06rem;
+}
+
+code {
+    font-family: var(--code-font);
+    overflow-wrap: break-word;
+}
+
+
+/* -- Layout ------------------------------------------------------------------ */
+
+.image-section {
+    border-bottom: 1px solid #ccc;
+    padding: 16px 16px 32px 16px;
+    margin-bottom: 32px;
+}
+
+.swatch {
+    display: inline-block;
+    background: #dddddd;
+}
+
+.color .swatch {
+    width: 6rem;
+    height: 3rem;
+}
+
+.palette .swatch {
+    width: 3rem;
+    height: 2rem;
+}
+
+.time {
+    color: var(--muted-color);
+    font-weight: normal;
+}