JS: nodeTypes

File: tests/js/unit/template-builder/nodeTypes.test.js Tests: getNodeDefaults in admin/assets/js/src/template-builder/config/nodeTypes.js


What this function does

getNodeDefaults( type, builderType ) returns the initial field values for a new node of a given type. When you add a node to the Template Builder canvas, the store calls this function to seed the node with its starting values before you change anything.

The compiler (class-sanilwb-template-compiler.php) and the canvas both expect certain fields to always be present on every node. getNodeDefaults is the only place those fields are guaranteed — if a field is missing here, it will be missing on every newly created node of that type.


Why this is a refactor guard

The node defaults feed into two separate systems:

  1. The canvas — reads fields like sanilwb_show_desktop to decide whether to render the node at the current device preview.
  2. The compiler — reads those same fields when generating the compiled CSS file saved to disk.

If a refactor renames or removes a required field from getNodeDefaults, the canvas and compiler silently receive undefined for that field on all new nodes. The bug only appears when a user creates a new node — existing saved nodes are not affected because their values are already stored in the DB. This makes the regression easy to miss in manual testing.

These tests fail immediately when a required field is dropped, before any node is created in the browser.


Tests

div node has required visibility defaults

const defaults = getNodeDefaults( 'div', 'template' );

expect( defaults ).toHaveProperty( 'direction' );
expect( defaults ).toHaveProperty( 'sanilwb_show_desktop' );
expect( defaults ).toHaveProperty( 'sanilwb_show_tablet' );
expect( defaults ).toHaveProperty( 'sanilwb_show_mobile' );

div is the structural container node. It must have:

  • direction — controls flex direction ('row' or 'column'). Without a default, new div nodes have no layout direction and their children stack unpredictably.
  • The three sanilwb_show_* flags — the device visibility controls in the canvas toolbar. Without defaults, toggling visibility on a new node would try to read undefined instead of '1'.

button node has visibility and button-specific defaults

const defaults = getNodeDefaults( 'button', 'template' );

expect( defaults ).toHaveProperty( 'sanilwb_show_desktop' );
expect( defaults ).toHaveProperty( 'btn-text' );
expect( defaults ).toHaveProperty( 'btn-link' );

button nodes need display text and a link URL out of the box. Without btn-text, a newly added button renders blank (no label visible in the canvas). Without btn-link, the compiler emits an empty href attribute on the anchor tag.


Unknown node type returns an empty object

const defaults = getNodeDefaults( 'nonexistent-type', 'template' );

expect( defaults ).toEqual( {} );

Confirms the function fails gracefully rather than throwing when given a type that is not registered. Callers spread the defaults into the new node object — an empty object is safe; an exception would crash the entire store action.