CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-11 10:57:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add tests and better validation for block styles

Browse Source
This commit is contained in:
Rachel Fenichel
2019-10-30 17:24:03 -07:00
parent 5634ff5de0
commit 207e0ebe7b
6 changed files with 198 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/theme.js
View File

@@ -172,12 +172,12 @@ Blockly.Theme.validatedBlockStyle = function(blockStyle) {
var parsedColour = Blockly.utils.colour.parseBlockColour(
valid.colourPrimary || '#000');
valid.colourPrimary = parsedColour.hex;
valid.colourSecondary = valid.colourSecondary ||
Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.6) ||
valid.colourPrimary;
valid.colourTertiary = valid.colourTertiary ||
Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.3) ||
valid.colourPrimary;
valid.colourSecondary = valid.colourSecondary ?
Blockly.utils.colour.parseBlockColour(valid.colourSecondary).hex :
Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.6);
valid.colourTertiary = valid.colourTertiary ?
Blockly.utils.colour.parseBlockColour(valid.colourTertiary).hex :
Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.3);
valid.hat = valid.hat || '';
return valid;

2
core/theme/deuteranopia.js
View File

@@ -34,7 +34,7 @@ Blockly.Themes.Deuteranopia = {};
Blockly.Themes.Deuteranopia.defaultBlockStyles = {
"colour_blocks": {
"colourPrimary": "#f2a72c",
"colourSecondary": "#f1c17",
"colourSecondary": "#f1c170",
"colourTertiary": "#da921c"
},
"list_blocks": {

22
tests/jsunit/block_test.js
View File

@@ -253,28 +253,6 @@ function test_block_row_unplug_multi_inputs_child() {
}
}
function test_set_style() {
blockTest_setUp();
var styleStub = {
getBlockStyle: function() {
return {
"colourPrimary": "#ffffff",
"colourSecondary": "#aabbcc",
"colourTertiary": "#ddeeff"
};
}
};
mockControl_ = setUpMockMethod(workspace, 'getTheme', null, [styleStub]);
var blockA = workspace.newBlock('row_block');
blockA.setStyle('styleOne');
assertEquals('#ffffff', blockA.colour_);
assertEquals('#aabbcc', blockA.colourSecondary_);
assertEquals('#ddeeff', blockA.colourTertiary_);
blockTest_tearDown();
}
function test_set_style_throw_exception() {
blockTest_setUp();
var styleStub = {

153
tests/jsunit/theme_test.js
View File

@@ -1,153 +0,0 @@
/**
* @license
* Copyright 2018 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Tests for Blockly.Style
* @author aschmiedt@google.com (Abby Schmiedt)
*/
'use strict';
function defineThemeTestBlocks() {
Blockly.defineBlocksWithJsonArray([{
"type": "stack_block",
"message0": "",
"previousStatement": null,
"nextStatement": null
},
{
"type": "row_block",
"message0": "%1",
"args0": [
{
"type": "input_value",
"name": "INPUT"
}
],
"output": null
}]);
};
function undefineThemeTestBlocks() {
delete Blockly.Blocks['stack_block'];
delete Blockly.Blocks['row_block'];
}
function createBlockStyles() {
return {
"styleOne": {
"colourPrimary": "colour1",
"colourSecondary":"colour2",
"colourTertiary":"colour3"
}
};
}
function createMultipleBlockStyles() {
return {
"styleOne": {
"colourPrimary": "colour1",
"colourSecondary":"colour2",
"colourTertiary":"colour3"
},
"styleTwo": {
"colourPrimary": "colour1",
"colourSecondary":"colour2",
"colourTertiary":"colour3"
}
};
}
function test_setAllBlockStyles() {
var theme = new Blockly.Theme(createBlockStyles());
stringifyAndCompare(createBlockStyles(), theme.blockStyles_);
theme.setAllBlockStyles(createMultipleBlockStyles());
stringifyAndCompare(createMultipleBlockStyles(), theme.blockStyles_);
}
function test_getAllBlockStyles() {
var theme = new Blockly.Theme(createMultipleBlockStyles());
var allBlocks = theme.getAllBlockStyles();
stringifyAndCompare(createMultipleBlockStyles(), allBlocks);
}
function test_getBlockStyles() {
var theme = new Blockly.Theme(createBlockStyles());
var blockStyle = theme.getBlockStyle('styleOne');
stringifyAndCompare(blockStyle, createBlockStyles().styleOne);
}
function test_setBlockStyleUpdate() {
var theme = new Blockly.Theme(createBlockStyles());
var blockStyle = createBlockStyles();
blockStyle.styleOne.colourPrimary = 'somethingElse';
theme.setBlockStyle('styleOne', blockStyle.styleOne);
stringifyAndCompare(theme.blockStyles_, blockStyle);
}
function test_setBlockStyleAdd() {
var theme = new Blockly.Theme(createBlockStyles());
var blockStyle = createMultipleBlockStyles();
theme.setBlockStyle('styleTwo', blockStyle.styleTwo);
stringifyAndCompare(theme.blockStyles_, blockStyle);
}
function test_setTheme() {
defineThemeTestBlocks();
var blockStyles = createBlockStyles();
var workspace = new Blockly.WorkspaceSvg({});
var blockA = workspace.newBlock('stack_block');
var blocks = [blockA];
blockA.setStyle = function() {this.styleName_ = 'styleTwo'};
var callCount = 1;
workspace.refreshToolboxSelection = function() {
return ++callCount;
};
blockA.styleName_ = 'styleOne';
var mockControl_ = setUpMockMethod(Blockly, 'getMainWorkspace', null, [workspace]);
workspace.setTheme(blockStyles);
//Checks that the theme was set correctly on Blockly namespace
stringifyAndCompare(workspace.getTheme(), blockStyles);
//Checks that the setTheme function was called on the block
assertEquals(blockA.getStyleName(), 'styleTwo');
//check that the toolbox refreshed method was called
assertEquals(workspace.refreshToolboxSelection(), 3);
assertEquals(Blockly.Events.FIRE_QUEUE_.pop().element, 'theme');
undefineThemeTestBlocks();
mockControl_.restore();
}
function stringifyAndCompare(val1, val2) {
var stringVal1 = JSON.stringify(val1);
var stringVal2 = JSON.stringify(val2);
assertEquals(stringVal1, stringVal2);
}

62
tests/mocha/block_test.js
View File

@@ -1249,4 +1249,66 @@ suite('Blocks', function() {
});
});
});
suite('Style', function() {
suite('Headless', function() {
setup(function() {
this.block = Blockly.Xml.domToBlock(Blockly.Xml.textToDom(
'<block type="empty_block"/>'
), this.workspace);
});
test('Set colour', function() {
this.block.setColour('20');
assertEquals(this.block.getColour(), '#a5745b');
assertEquals(this.block.colour_, this.block.getColour());
assertEquals(this.block.hue_, '20');
});
test('Set style', function() {
this.block.setStyle('styleOne');
assertEquals(this.block.getStyleName(), 'styleOne');
assertEquals(this.block.hue_, null);
// Calling setStyle does not update the colour on a headless block.
assertEquals(this.block.getColour(), '#000000');
});
});
suite('Rendered', function() {
setup(function() {
this.workspace = Blockly.inject('blocklyDiv', {});
this.block = Blockly.Xml.domToBlock(Blockly.Xml.textToDom(
'<block type="empty_block"/>'
), this.workspace);
this.workspace.setTheme(new Blockly.Theme({
"styleOne" : {
"colourPrimary": "#000000",
"colourSecondary": "#999999",
"colourTertiary": "#4d4d4d",
"hat": ''
}
}), {});
});
teardown(function() {
this.workspace.dispose();
});
test('Set colour hue', function() {
this.block.setColour('20');
assertEquals(this.block.getStyleName(), 'auto_#a5745b');
assertEquals(this.block.getColour(), '#a5745b');
assertEquals(this.block.colour_, this.block.getColour());
assertEquals(this.block.hue_, '20');
});
test('Set colour hex', function() {
this.block.setColour('#000000');
assertEquals(this.block.getStyleName(), 'auto_#000000');
assertEquals(this.block.getColour(), '#000000');
assertEquals(this.block.colour_, this.block.getColour());
assertEquals(this.block.hue_, null);
});
test('Set style', function() {
this.block.setStyle('styleOne');
assertEquals(this.block.getStyleName(), 'styleOne');
assertEquals(this.block.getColour(), '#000000');
assertEquals(this.block.colour_, this.block.getColour());
});
});
});
});

139
tests/mocha/theme_test.js
View File

@@ -52,9 +52,10 @@ suite('Theme', function() {
function createBlockStyles() {
return {
"styleOne": {
"colourPrimary": "colour1",
"colourSecondary":"colour2",
"colourTertiary":"colour3"
"colourPrimary": "#aaaaaa",
"colourSecondary": "#bbbbbb",
"colourTertiary": "#cccccc",
"hat": 'cap'
}
};
}
@@ -62,14 +63,16 @@ suite('Theme', function() {
function createMultipleBlockStyles() {
return {
"styleOne": {
"colourPrimary": "colour1",
"colourSecondary":"colour2",
"colourTertiary":"colour3"
"colourPrimary": "#aaaaaa",
"colourSecondary": "#bbbbbb",
"colourTertiary": "#cccccc",
"hat": 'cap'
},
"styleTwo": {
"colourPrimary": "colour1",
"colourSecondary":"colour2",
"colourTertiary":"colour3"
"colourPrimary": "#000000",
"colourSecondary": "#999999",
"colourTertiary": "#4d4d4d",
"hat": ''
}
};
}
@@ -103,7 +106,7 @@ suite('Theme', function() {
test('Set BlockStyle Update', function() {
var theme = new Blockly.Theme(createBlockStyles());
var blockStyle = createBlockStyles();
blockStyle.styleOne.colourPrimary = 'somethingElse';
blockStyle.styleOne.colourPrimary = '#00ff00';
theme.setBlockStyle('styleOne', blockStyle.styleOne);
@@ -152,4 +155,120 @@ suite('Theme', function() {
stub.restore();
});
suite('Validate block styles', function() {
test('Null', function() {
var inputStyle = null;
var expectedOutput = {
"colourPrimary": "#000000",
"colourSecondary": "#999999",
"colourTertiary": "#4d4d4d",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Empty', function() {
var inputStyle = {};
var expectedOutput = {
"colourPrimary": "#000000",
"colourSecondary": "#999999",
"colourTertiary": "#4d4d4d",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Incomplete hex', function() {
var inputStyle = {
"colourPrimary": "#012345"
};
var expectedOutput = {
"colourPrimary": "#012345",
"colourSecondary": "#99a7b5",
"colourTertiary": "#4d657d",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Complete hex', function() {
var inputStyle = {
"colourPrimary": "#aaaaaa",
"colourSecondary": "#bbbbbb",
"colourTertiary": "#cccccc",
"hat": 'cap'
};
var expectedOutput = {
"colourPrimary": "#aaaaaa",
"colourSecondary": "#bbbbbb",
"colourTertiary": "#cccccc",
"hat": 'cap'
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Complete hue', function() {
var inputStyle = {
"colourPrimary": "20",
"colourSecondary": "40",
"colourTertiary": "60",
};
var expectedOutput = {
"colourPrimary": "#a5745b",
"colourSecondary": "#a58c5b",
"colourTertiary": "#a5a55b",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Incomplete hue', function() {
var inputStyle = {
"colourPrimary": "20",
};
var expectedOutput = {
"colourPrimary": "#a5745b",
"colourSecondary": "#dbc7bd",
"colourTertiary": "#c09e8c",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Complete css colour name', function() {
var inputStyle = {
"colourPrimary": "red",
"colourSecondary": "white",
"colourTertiary": "blue"
};
var expectedOutput = {
"colourPrimary": "#ff0000",
"colourSecondary": "#ffffff",
"colourTertiary": "#0000ff",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
test('Incomplete css colour name', function() {
var inputStyle = {
"colourPrimary": "black",
};
var expectedOutput = {
"colourPrimary": "#000000",
"colourSecondary": "#999999",
"colourTertiary": "#4d4d4d",
"hat": ''
};
stringifyAndCompare(
Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput);
});
});
});