Fix mocks in typed-variable-modal test

[moniika]

Category
Plugins

Component
typed-variable-modal

Describe the bug
typed-variable-modal tests when run on blockly@beta emit the error:

TypedVariableModal
    init()
Error: Could not parse CSS stylesheet
    at exports.createStylesheet (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
    at HTMLStyleElementImpl._updateAStyleBlock (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._attach (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:19:12)
    at HTMLHeadElementImpl._insert (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:845:14)
    at HTMLHeadElementImpl._preInsert (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:768:10)
    at HTMLHeadElementImpl.insertBefore (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:605:17)
    at HTMLHeadElement.insertBefore (webpack-internal:///./node_modules/jsdom/lib/jsdom/living/generated/Node.js:362:51)
    at module$exports$Blockly$Css.inject (webpack-internal:///./node_modules/blockly/blockly_compressed.js:398:407)
    at module$contents$Blockly$inject_createDom (webpack-internal:///./node_modules/blockly/blockly_compressed.js:1751:121)
    at Object.module$exports$Blockly$inject [as inject] (webpack-internal:///./node_modules/blockly/blockly_compressed.js:1750:20)

CSS in error message

.blocklySvg {
  background-color: #fff;
  outline: none;
  overflow: hidden;  /* IE overflows by default. */
  position: absolute;
  display: block;
}
.blocklyWidgetDiv {
  display: none;
  position: absolute;
  z-index: 99999;  /* big value for bootstrap3 compatibility */
}
.injectionDiv {
  height: 100%;
  position: relative;
  overflow: hidden;  /* So blocks in drag surface disappear at edges */
  touch-action: none;
}
.blocklyNonSelectable {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.blocklyWsDragSurface {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.blocklyWsDragSurface.blocklyOverflowVisible {
  overflow: visible;
}
.blocklyBlockDragSurface {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: visible !important;
  z-index: 50;',  /* Display below toolbox, but above everything else. */
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
  transition: transform .5s;
}
.blocklyTooltipDiv {
  background-color: #ffffc7;
  border: 1px solid #ddc;
  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
  color: #000;
  display: none;
  font: 9pt sans-serif;
  opacity: .9;
  padding: 2px;
  position: absolute;
  z-index: 100000;',  /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  border: 1px solid;
  border-color: #dadce0;
  background-color: #fff;
  border-radius: 2px;
  padding: 4px;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
  max-height: 300px;',  // @todo: spec for maximum height.
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}
.blocklyDropDownArrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  z-index: -1;
  background-color: inherit;
  border-color: inherit;
}
.blocklyDropDownButton {
  display: inline-block;
  float: left;
  padding: 0;
  margin: 4px;
  border-radius: 4px;
  outline: none;
  border: 1px solid;
  transition: box-shadow .1s;
  cursor: pointer;
}
.blocklyArrowTop {
  border-top: 1px solid;
  border-left: 1px solid;
  border-top-left-radius: 4px;
  border-color: inherit;
}
.blocklyArrowBottom {
  border-bottom: 1px solid;
  border-right: 1px solid;
  border-bottom-right-radius: 4px;
  border-color: inherit;
}
.blocklyResizeSE {
  cursor: se-resize;
  fill: #aaa;
}
.blocklyResizeSW {
  cursor: sw-resize;
  fill: #aaa;
}
.blocklyResizeLine {
  stroke: #515A5A;
  stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
  fill: none;
  stroke: #fc3;
  stroke-width: 4px;
}
.blocklyPathLight {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1;
}
.blocklySelected>.blocklyPathLight {
  display: none;
}
.blocklyDraggable {
  /* backup for browsers (e.g. IE11) that don't support grab */
  cursor: url("https://blockly-demo.appspot.com/static/media/handopen.cur"), auto;
  cursor: grab;
  cursor: -webkit-grab;
}
.blocklyDragging {
  /* backup for browsers (e.g. IE11) that don't support grabbing */
  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.blocklyDraggable:active {
  /* backup for browsers (e.g. IE11) that don't support grabbing */
  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.blocklyBlockDragSurface .blocklyDraggable {
  /* backup for browsers (e.g. IE11) that don't support grabbing */
  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging>.blocklyPath,
.blocklyDragging>.blocklyPathLight {
  fill-opacity: .8;
  stroke-opacity: .8;
}
.blocklyDragging>.blocklyPathDark {
  display: none;
}
.blocklyDisabled>.blocklyPath {
  fill-opacity: .5;
  stroke-opacity: .5;
}
.blocklyDisabled>.blocklyPathLight,
.blocklyDisabled>.blocklyPathDark {
  display: none;
}
.blocklyInsertionMarker>.blocklyPath,
.blocklyInsertionMarker>.blocklyPathLight,
.blocklyInsertionMarker>.blocklyPathDark {
  fill-opacity: .2;
  stroke: none;
}
.blocklyMultilineText {
  font-family: monospace;
}
.blocklyNonEditableText>text {
  pointer-events: none;
}
.blocklyFlyout {
  position: absolute;
  z-index: 20;
}
.blocklyText text {
  cursor: default;
}
.blocklySvg text,
.blocklyBlockDragSurface text {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  cursor: inherit;
}
.blocklyHidden {
  display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
  display: block;
}
.blocklyIconGroup {
  cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
  opacity: .6;
}
.blocklyIconShape {
  fill: #00f;
  stroke: #fff;
  stroke-width: 1px;
}
.blocklyIconSymbol {
  fill: #fff;
}
.blocklyMinimalBody {
  margin: 0;
  padding: 0;
}
.blocklyHtmlInput {
  border: none;
  border-radius: 4px;
  height: 100%;
  margin: 0;
  outline: none;
  padding: 0;
  width: 100%;
  text-align: center;
  display: block;
  box-sizing: border-box;
}
.blocklyHtmlInput::-ms-clear {
  display: none;
}
.blocklyMainBackground {
  stroke-width: 1;
  stroke: #c6c6c6;',  /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
  fill: #fff;
  stroke: #ddd;
  stroke-width: 1;
}
.blocklyFlyoutBackground {
  fill: #ddd;
  fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
  z-index: 20;
}
.blocklyFlyoutScrollbar {
  z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
  position: absolute;
  outline: none;
}
.blocklyScrollbarBackground {
  opacity: 0;
}
.blocklyScrollbarHandle {
  fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
  fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarHandle {
  fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
  fill: #aaa;
}
.blocklyInvalidInput {
  background: #faa;
}
.blocklyVerticalMarker {
  stroke-width: 3px;
  fill: rgba(255,255,255,.5);
  pointer-events: none;
}
.blocklyComputeCanvas {
  position: absolute;
  width: 0;
  height: 0;
}
.blocklyNoPointerEvents {
  pointer-events: none;
}
.blocklyContextMenu {
  border-radius: 4px;
  max-height: 100%;
}
.blocklyDropdownMenu {
  border-radius: 2px;
  padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
  /* 28px on the left for icon or checkbox. */
  padding-left: 28px;
}
.blocklyDropdownMenu .blocklyMenuItemRtl {
  /* Flip left/right padding for BiDi. */
  padding-left: 5px;
  padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
  font: normal 13px Arial, sans-serif;
  margin: 0;
  outline: none;
  padding: 4px 0;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  z-index: 20000;',  /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
  background: inherit;',  /* Compatibility with gapi, reset from goog-menu */
  border: inherit;',  /* Compatibility with gapi, reset from goog-menu */
  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
  outline: none;
  position: relative;',  /* Compatibility with gapi, reset from goog-menu */
  z-index: 20000;',  /* Arbitrary, but some apps depend on it... */
}
.blocklyMenuItem {
  border: none;
  color: #000;
  cursor: pointer;
  list-style: none;
  margin: 0;
  /* 7em on the right for shortcut. */
  min-width: 7em;
  padding: 6px 15px;
  white-space: nowrap;
}
.blocklyMenuItemDisabled {
  color: #ccc;
  cursor: inherit;
}
.blocklyMenuItemHighlight {
  background-color: rgba(0,0,0,.1);
}
.blocklyMenuItemCheckbox {
  height: 16px;
  position: absolute;
  width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
  float: left;
  margin-left: -24px;
  position: static;',  /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
  float: right;
  margin-right: -24px;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
  margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
  margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
  height: 22px;
  line-height: 22px;
  margin-bottom: 3px;
  padding-right: 8px;
  white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
  margin-left: 8px;
  padding-right: 0;
}
.blocklyTreeIcon {',
  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
  height: 16px;
  vertical-align: middle;
  visibility: hidden;
  width: 16px;
}
.blocklyTreeIconClosed {
  background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
  background-position: 0 -1px;
}
.blocklyTreeSelected>.blocklyTreeIconClosed {
  background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected>.blocklyTreeIconClosed {
  background-position: 0 -17px;
}
.blocklyTreeIconOpen {
  background-position: -16px -1px;
}
.blocklyTreeSelected>.blocklyTreeIconOpen {
  background-position: -16px -17px;
}
.blocklyTreeLabel {
  cursor: default;
  font: 16px sans-serif;
  padding: 0 3px;
  vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
  color: #fff;
}
.blocklyTreeSeparator {
  border-bottom: solid #e5e5e5 1px;
  height: 0;
  margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
  border-right: solid #e5e5e5 1px;
  border-bottom: none;
  height: auto;
  margin: 0 5px 0 5px;
  padding: 5px 0;
  width: 0;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
outline: 0;
margin: 0;
padding: 3px;
resize: none;
display: block;
text-overflow: hidden;
}
.blocklyAngleCircle {
  stroke: #444;
  stroke-width: 1;
  fill: #ddd;
  fill-opacity: .8;
}
.blocklyAngleMarks {
  stroke: #444;
  stroke-width: 1;
}
.blocklyAngleGauge {
  fill: #f88;
  fill-opacity: .8;
  pointer-events: none;
}
.blocklyAngleLine {
  stroke: #f00;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable>tr>td {
border: .5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable>tr>td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0,0,0,.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
  font-family: monospace;
  resize: none;
  overflow: hidden;
  height: 100%;
  text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
  overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70;
-webkit-tap-highlight-color: transparent;
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused>.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected>.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected > .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyZoom>image, .blocklyZoom>svg>image {
  opacity: .4;
}
.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover {
  opacity: .6;
}
.blocklyZoom>image:active, .blocklyZoom>svg>image:active {
  'opacity: .8;
}

    .blocklyModalOverlay {
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      position: fixed;
    }
    .blocklyModalContainer {
      background-color: white;
      border: 1px solid gray;
      font-family: Helvetica;
      font-weight: 300;
      padding: 1em;
      width: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0px 10px 20px grey;
      z-index: 100;
      margin: 15% auto;
    }
    .blocklyModalHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .blocklyModalHeaderTitle {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 1.2em;
      line-height: 1.25;
    }
    .blocklyModalHeader .blocklyModalBtn {
      margin-left: auto;
      height: fit-content;
    }
    .blocklyModalBtnClose:before {
      content: "\2715";
    }
    .blocklyModalBtn {
      margin-right: .5em;
      border: 1px solid gray;
      font-weight: 500;
      color: gray;
      border-radius: 25px;
    }
    .blocklyModalBtnPrimary {
      background-color: gray;
      color: white;
    }

    .typedModalTitle {
      font-weight: bold;
      font-size: 1em;
    }
    .typedModalVariableInputContainer {
      margin: 1em 0 1em 0;
    }
    .typedModalVariableLabel{
      margin-right: .5em;
    }
    .typedModalTypes ul{
      display: flex;
      flex-wrap: wrap;
      list-style-type: none;
      padding: 0;
    }
    .typedModalTypes li {
      margin-right: 1em;
      display: flex;
    }

And have multiple tests fail with:

TypeError: Blockly.alert.calledWith is not a function
      at Context.eval (webpack-internal:///./test/typed_variable_modal_test.mocha.js:119:28)

To Reproduce

Steps to reproduce the behavior:

1. Install blockly@beta in directory with typed-variable-modal
2. run tests npm run test

Additional context

Based on the deprecation warnings emitted while running the tests, it seems Blockly.alert is not being mocked as expected.

These tests also use arrow functions, which could possibly be contributing to or masking the cause of the problem (tracked in #908).

[moniika]

This can be fixed by updating the mocks of Blockly library methods in the tests.
Changing

Blockly.alert = sinon.fake();
// ... and
Blockly.Variables.nameUsedWithAnyType = sinon.fake.returns({

to

this.alertStub = sinon.stub(Blockly.dialog, 'alert');
// ... and
sinon.stub(Blockly.Variables, 'nameUsedWithAnyType').returns({

This change of how the methods are mocked is necessary after the migration to goog.module and the mock for Blockly.alert needs to be changed because of logic changes during the migation (Blockly.alert was deprecated and now calls Blockly.dialog.alert)

The initial error about CSS parsing turned out to unrelated to the test failure and is a bug in Blockly core, currently tracked in RaspberryPiFoundation/blockly#5585.

[moniika]

Currently blocked by updating peerDependency devDependency to run against beta (on Q4 release branch) #898

[alschmiedt]

@maribethb can this be closed?