janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #157 from lokesh/test-folder-refactor

Browse Source 
refactor: Move test files into cypress+
This commit is contained in:
Lokesh Dhakar
2019-07-14 08:41:59 -07:00
committed by GitHub
parent e8dc8e1670 44d7870641
commit ced6b5300d
14 changed files with 176 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.nvmrc
View File

@@ -1 +1 @@
10.15.3 12.4.0

4
cypress/integration/api_spec.js
View File

@@ -10,7 +10,7 @@ function rgbCount(text) {
describe('getColor()', function() { describe('getColor()', function() {
beforeEach(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() { it('returns valid color from black image', function() {
@@ -62,7 +62,7 @@ function testPaletteCount(num) {
describe('getPalette()', function() { describe('getPalette()', function() {
beforeEach(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]; // FULL TEST LIST = [1, 2, 3, 5, 7, 10, 20];

0
examples/img/black.png → cypress/test-pages/img/black.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
examples/img/rainbow-horizontal.png → cypress/test-pages/img/rainbow-horizontal.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

0
examples/img/rainbow-vertical.png → cypress/test-pages/img/rainbow-vertical.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

0
examples/img/red.png → cypress/test-pages/img/red.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
examples/img/transparent.png → cypress/test-pages/img/transparent.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
examples/img/white.png → cypress/test-pages/img/white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

10
index.html → cypress/test-pages/index.html Executable file → Normal file
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Color Thief</title> <title>Color Thief</title>
<link rel="stylesheet" href="examples/css/screen.css"> <link rel="stylesheet" href="./screen.css">
</head> </head>
<body> <body>
@@ -14,7 +14,7 @@
{{#.}} {{#.}}
<div class="image-section" data-image="{{.}}"> <div class="image-section" data-image="{{.}}">
<h2>{{.}}</h2> <h2>{{.}}</h2>
<img class="image" src="examples/img/{{.}}" /> <img class="image" src="./img/{{.}}" />
<div class="output"></div> <div class="output"></div>
</div> </div>
{{/.}} {{/.}}
@@ -49,9 +49,9 @@
</script> </script>
<script src="src/color-thief.js"></script> <script src="/src/color-thief.js"></script>
<script src="examples/js/mustache.js"></script> <script src="/node_modules/mustache/mustache.js"></script>
<script src="examples/js/demo.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

58
cypress/test-pages/index.js Normal file
View File

@@ -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;
};

95
cypress/test-pages/screen.css Normal file
View File

@@ -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;
}

12
examples/css/screen.css
View File

@@ -22,7 +22,7 @@
/* Base /* Base
* *----------------------------------------------- */ * *----------------------------------------------- */
* { /** {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -31,10 +31,10 @@ body {
padding: 0; padding: 0;
background: var(--bg-color); background: var(--bg-color);
} }
*/
/* Typography /* Typography
* *----------------------------------------------- */ * *----------------------------------------------- */
/*
html { html {
font-size: 16px; font-size: 16px;
font-family: var(--font); font-family: var(--font);
@@ -64,10 +64,10 @@ code {
font-family: var(--code-font); font-family: var(--code-font);
overflow-wrap: break-word; overflow-wrap: break-word;
} }
*/
/* -- Layout ------------------------------------------------------------------ */ /* -- Layout ------------------------------------------------------------------ */
/*
.image-section { .image-section {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding: 16px 16px 32px 16px; padding: 16px 16px 32px 16px;
@@ -92,4 +92,4 @@ code {
.time { .time {
color: var(--muted-color); color: var(--muted-color);
font-weight: normal; font-weight: normal;
} }*/

6
package-lock.json generated
View File

@@ -1726,6 +1726,12 @@
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true "dev": true
}, },
"mustache": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mustache/-/mustache-3.0.1.tgz",
"integrity": "sha512-jFI/4UVRsRYdUbuDTKT7KzfOp7FiD5WzYmmwNwXyUVypC0xjoTL78Fqc0jHUPIvvGD+6DQSPHIt1NE7D1ArsqA==",
"dev": true
},
"mute-stream": { "mute-stream": {
"version": "0.0.7", "version": "0.0.7",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",

10
package.json
View File

@@ -21,12 +21,7 @@
"type": "git", "type": "git",
"url": "https://github.com/lokesh/color-thief.git" "url": "https://github.com/lokesh/color-thief.git"
}, },
"licenses": [ "license": "MIT",
{
"type": "MIT",
"url": "https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE/"
}
],
"scripts": { "scripts": {
"build": "node ./build/build.js", "build": "node ./build/build.js",
"dev": "./node_modules/http-server/bin/http-server", "dev": "./node_modules/http-server/bin/http-server",
@@ -38,7 +33,8 @@
"@node-minify/uglify-es": "^4.0.5", "@node-minify/uglify-es": "^4.0.5",
"cypress": "^3.3.1", "cypress": "^3.3.1",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"http-server": "^0.11.1" "http-server": "^0.11.1",
"mustache": "^3.0.1"
}, },
"engines": { "engines": {
"node": ">=10.15.3" "node": ">=10.15.3"