norm/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
build/webpack.base.conf.js
View file

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

2
src/services/color_convert/color_convert.js
View file

@ -171,7 +171,7 @@ export const mixrgb = (a, b) => {
* @returns {String} CSS rgba() color
*/
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)`
}
/**

2
src/services/theme_data/theme_data.service.js
View file

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

2
static/themes/redmond-xx-se.json
View file

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

2
static/themes/redmond-xx.json
View file

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

2
static/themes/redmond-xxi.json
View file

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

28
test/unit/specs/services/theme_data/sanity_checks.spec.js Normal file
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)
})
})
})

161
test/unit/specs/services/theme_data/theme_data.spec.js
View file

@ -1,87 +1,90 @@
import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js'
describe('getLayersArray', () => {
const fixture = {
layer1: null,
layer2: 'layer1',
layer3a: 'layer2',
layer3b: 'layer2'
}
describe('Theme Data utility functions', () => {
describe('getLayersArray', () => {
const fixture = {
layer1: null,
layer2: 'layer1',
layer3a: 'layer2',
layer3b: 'layer2'
}
it('should expand layers properly (3b)', () => {
const out = getLayersArray('layer3b', fixture)
expect(out).to.eql(['layer1', 'layer2', 'layer3b'])
it('should expand layers properly (3b)', () => {
const out = getLayersArray('layer3b', fixture)
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)', () => {
const out = getLayersArray('layer3a', fixture)
expect(out).to.eql(['layer1', 'layer2', 'layer3a'])
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'))
})
})
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'))
})
})