fix rgba css generation, add some tests to automatically verify that themes are

generated properly
This commit is contained in:
Henry Jameson 2020-01-27 04:20:13 +02:00
parent d7e7f47b66
commit 7c074b8741
8 changed files with 116 additions and 84 deletions

View File

@ -35,6 +35,7 @@ module.exports = {
], ],
alias: { alias: {
'vue$': 'vue/dist/vue.runtime.common', 'vue$': 'vue/dist/vue.runtime.common',
'static': path.resolve(__dirname, '../static'),
'src': path.resolve(__dirname, '../src'), 'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'), 'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components') 'components': path.resolve(__dirname, '../src/components')

View File

@ -171,7 +171,7 @@ export const mixrgb = (a, b) => {
* @returns {String} CSS rgba() color * @returns {String} CSS rgba() color
*/ */
export const rgba2css = function (rgba) { export const rgba2css = function (rgba) {
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})` return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, .5)`
} }
/** /**

View File

@ -353,7 +353,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
if (dependencySlot && sourceColors[dependencySlot] === 'transparent') { if (dependencySlot && sourceColors[dependencySlot] === 'transparent') {
outputColor.a = 0 outputColor.a = 0
} else { } else {
outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1 outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
} }
} }
if (opacitySlot) { if (opacitySlot) {

View File

@ -1,7 +1,7 @@
{ {
"_pleroma_theme_version": 2, "_pleroma_theme_version": 2,
"name": "Redmond XX SE", "name": "Redmond XX SE",
"theme": { "source": {
"shadows": { "shadows": {
"panel": [ "panel": [
{ {

View File

@ -1,7 +1,7 @@
{ {
"_pleroma_theme_version": 2, "_pleroma_theme_version": 2,
"name": "Redmond XX", "name": "Redmond XX",
"theme": { "source": {
"shadows": { "shadows": {
"panel": [ "panel": [
{ {

View File

@ -1,7 +1,7 @@
{ {
"_pleroma_theme_version": 2, "_pleroma_theme_version": 2,
"name": "Redmond XXI", "name": "Redmond XXI",
"theme": { "source": {
"shadows": { "shadows": {
"panel": [ "panel": [
{ {

View File

@ -0,0 +1,28 @@
import { getColors } from 'src/services/theme_data/theme_data.service.js'
const checkColors = (output) => {
expect(output).to.have.property('colors')
Object.entries(output.colors).forEach(([key, v]) => {
expect(v, key).to.be.an('object')
expect(v, key).to.include.all.keys('r', 'g', 'b')
'rgba'.split('').forEach(k => {
if ((k === 'a' && v.hasOwnProperty('a')) || k !== 'a') {
expect(v[k], key + '.' + k).to.be.a('number')
expect(v[k], key + '.' + k).to.be.least(0)
expect(v[k], key + '.' + k).to.be.most(k === 'a' ? 1 : 255)
}
})
})
}
describe('Theme Data utility functions', () => {
const context = require.context('static/themes/', false, /\.json$/)
context.keys().forEach((key) => {
it(`Should render all colors for ${key} properly`, () => {
const { theme, source } = context(key)
const data = source || theme
const colors = getColors(data.colors, data.opacity, 1)
checkColors(colors)
})
})
})

View File

@ -1,87 +1,90 @@
import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js' import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js'
describe('getLayersArray', () => { describe('Theme Data utility functions', () => {
const fixture = { describe('getLayersArray', () => {
layer1: null, const fixture = {
layer2: 'layer1', layer1: null,
layer3a: 'layer2', layer2: 'layer1',
layer3b: 'layer2' layer3a: 'layer2',
} layer3b: 'layer2'
}
it('should expand layers properly (3b)', () => { it('should expand layers properly (3b)', () => {
const out = getLayersArray('layer3b', fixture) const out = getLayersArray('layer3b', fixture)
expect(out).to.eql(['layer1', 'layer2', 'layer3b']) expect(out).to.eql(['layer1', 'layer2', 'layer3b'])
})
it('should expand layers properly (3a)', () => {
const out = getLayersArray('layer3a', fixture)
expect(out).to.eql(['layer1', 'layer2', 'layer3a'])
})
it('should expand layers properly (2)', () => {
const out = getLayersArray('layer2', fixture)
expect(out).to.eql(['layer1', 'layer2'])
})
it('should expand layers properly (1)', () => {
const out = getLayersArray('layer1', fixture)
expect(out).to.eql(['layer1'])
})
}) })
it('should expand layers properly (3a)', () => { describe('topoSort', () => {
const out = getLayersArray('layer3a', fixture) const fixture1 = {
expect(out).to.eql(['layer1', 'layer2', 'layer3a']) layerA: [],
layer1A: ['layerA'],
layer2A: ['layer1A'],
layerB: [],
layer1B: ['layerB'],
layer2B: ['layer1B'],
layer3AB: ['layer2B', 'layer2A']
}
// Same thing but messed up order
const fixture2 = {
layer1A: ['layerA'],
layer1B: ['layerB'],
layer2A: ['layer1A'],
layerB: [],
layer3AB: ['layer2B', 'layer2A'],
layer2B: ['layer1B'],
layerA: []
}
it('should make a topologically sorted array', () => {
const out = topoSort(fixture1, (node, inheritance) => inheritance[node])
// This basically checks all ordering that matters
expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A'))
expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B'))
expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B'))
expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
})
it('order in object shouldn\'t matter', () => {
const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
// This basically checks all ordering that matters
expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A'))
expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B'))
expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B'))
expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
})
it('dependentless nodes should be first', () => {
const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
// This basically checks all ordering that matters
expect(out.indexOf('layerA')).to.eql(0)
expect(out.indexOf('layerB')).to.eql(1)
})
it('ignores cyclic dependencies', () => {
const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [inheritance[node]])
expect(out.indexOf('a')).to.be.below(out.indexOf('c'))
})
}) })
it('should expand layers properly (2)', () => {
const out = getLayersArray('layer2', fixture)
expect(out).to.eql(['layer1', 'layer2'])
})
it('should expand layers properly (1)', () => {
const out = getLayersArray('layer1', fixture)
expect(out).to.eql(['layer1'])
})
})
describe('topoSort', () => {
const fixture1 = {
layerA: [],
layer1A: ['layerA'],
layer2A: ['layer1A'],
layerB: [],
layer1B: ['layerB'],
layer2B: ['layer1B'],
layer3AB: ['layer2B', 'layer2A']
}
// Same thing but messed up order
const fixture2 = {
layer1A: ['layerA'],
layer1B: ['layerB'],
layer2A: ['layer1A'],
layerB: [],
layer3AB: ['layer2B', 'layer2A'],
layer2B: ['layer1B'],
layerA: []
}
it('should make a topologically sorted array', () => {
const out = topoSort(fixture1, (node, inheritance) => inheritance[node])
// This basically checks all ordering that matters
expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A'))
expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B'))
expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B'))
expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
})
it('order in object shouldn\'t matter', () => {
const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
// This basically checks all ordering that matters
expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A'))
expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B'))
expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B'))
expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
})
it('dependentless nodes should be first', () => {
const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
// This basically checks all ordering that matters
expect(out.indexOf('layerA')).to.eql(0)
expect(out.indexOf('layerB')).to.eql(1)
})
it('ignores cyclic dependencies', () => {
const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [inheritance[node]])
expect(out.indexOf('a')).to.be.below(out.indexOf('c'))
})
}) })