mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
synced 2024-12-12 14:25:06 +00:00
7ca5deebd3
A button without the `type` attribute in a form is assumed to be the submit button. Obviously, the toggle buttons in a CM6 panel should not be one. Bug: T381713 Change-Id: Ia732d49a3a61f85dd264d287ddd066b4d93e90c3
97 lines
4.6 KiB
JavaScript
97 lines
4.6 KiB
JavaScript
const CodeMirrorPanel = require( '../../resources/codemirror.panel.js' );
|
|
|
|
// CodeMirrorPanel is tagged as abstract, but being JavaScript it isn't a
|
|
// "real" abstract class, so we can instantiate it directly for testing purposes.
|
|
const cmPanel = new CodeMirrorPanel();
|
|
|
|
describe( 'CodeMirrorPanel', () => {
|
|
it( 'should create a Codex TextInput', () => {
|
|
const [ inputWrapper, input ] = cmPanel.getTextInput( 'foo', 'bar', 'codemirror-find' );
|
|
expect( inputWrapper.className ).toBe( 'cdx-text-input cm-mw-panel--text-input' );
|
|
expect( input.className ).toBe( 'cdx-text-input__input' );
|
|
expect( input.type ).toBe( 'text' );
|
|
expect( input.name ).toBe( 'foo' );
|
|
// No i18n in unit tests, so we only check for the key.
|
|
expect( input.placeholder ).toBe( 'codemirror-find' );
|
|
expect( input.value ).toBe( 'bar' );
|
|
} );
|
|
|
|
it( 'should create a Codex Button with no icon', () => {
|
|
const buttonNoIcon = cmPanel.getButton( 'foo' );
|
|
expect( buttonNoIcon.tagName ).toBe( 'BUTTON' );
|
|
expect( buttonNoIcon.className ).toBe( 'cdx-button cm-mw-panel--button' );
|
|
expect( buttonNoIcon.type ).toBe( 'button' );
|
|
expect( buttonNoIcon.children.length ).toBe( 0 );
|
|
} );
|
|
|
|
it( 'should create a Codex button with an icon and a label', () => {
|
|
const buttonWithIcon = cmPanel.getButton( 'foo', 'bar' );
|
|
expect( buttonWithIcon.tagName ).toBe( 'BUTTON' );
|
|
expect( buttonWithIcon.className ).toBe( 'cdx-button cm-mw-panel--button' );
|
|
expect( buttonWithIcon.type ).toBe( 'button' );
|
|
expect( buttonWithIcon.children.length ).toBe( 1 );
|
|
const iconSpan = buttonWithIcon.children[ 0 ];
|
|
expect( iconSpan.tagName ).toBe( 'SPAN' );
|
|
expect( iconSpan.className ).toBe( 'cdx-button__icon cm-mw-icon--bar' );
|
|
expect( iconSpan.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
|
|
} );
|
|
|
|
it( 'should create an icon-only Codex button', () => {
|
|
const buttonIconOnly = cmPanel.getButton( 'foo', 'bar', true );
|
|
expect( buttonIconOnly.tagName ).toBe( 'BUTTON' );
|
|
expect( buttonIconOnly.className ).toBe(
|
|
'cdx-button cm-mw-panel--button cdx-button--icon-only'
|
|
);
|
|
expect( buttonIconOnly.type ).toBe( 'button' );
|
|
expect( buttonIconOnly.children.length ).toBe( 1 );
|
|
expect( buttonIconOnly.getAttribute( 'aria-label' ) ).toBe( 'foo' );
|
|
expect( buttonIconOnly.title ).toBe( 'foo' );
|
|
const iconSpan = buttonIconOnly.children[ 0 ];
|
|
expect( iconSpan.tagName ).toBe( 'SPAN' );
|
|
expect( iconSpan.className ).toBe( 'cdx-button__icon cm-mw-icon--bar' );
|
|
expect( iconSpan.getAttribute( 'aria-hidden' ) ).toBeNull();
|
|
} );
|
|
|
|
it( 'should create a Codex Checkbox', () => {
|
|
const [ checkboxWrapper, checkbox ] = cmPanel.getCheckbox( 'foo', 'bar', true );
|
|
expect( checkboxWrapper.className ).toBe( 'cdx-checkbox cdx-checkbox--inline cm-mw-panel--checkbox' );
|
|
expect( checkboxWrapper.children.length ).toBe( 3 );
|
|
const labelWrapper = checkboxWrapper.children[ 2 ];
|
|
expect( labelWrapper.tagName ).toBe( 'DIV' );
|
|
expect( labelWrapper.className ).toBe( 'cdx-checkbox__label cdx-label' );
|
|
const label = labelWrapper.children[ 0 ];
|
|
expect( label.tagName ).toBe( 'LABEL' );
|
|
expect( label.className ).toBe( 'cdx-label__label' );
|
|
expect( label.textContent ).toBe( 'bar' );
|
|
expect( checkbox.className ).toBe( 'cdx-checkbox__input' );
|
|
expect( checkbox.type ).toBe( 'checkbox' );
|
|
expect( checkbox.name ).toBe( 'foo' );
|
|
expect( checkbox.checked ).toBe( true );
|
|
} );
|
|
|
|
it( 'should create a Codex ToggleButton', () => {
|
|
const toggleButtonOn = cmPanel.getToggleButton( 'foo', 'bar', 'baz', true );
|
|
expect( toggleButtonOn.tagName ).toBe( 'BUTTON' );
|
|
expect( toggleButtonOn.className ).toBe(
|
|
'cdx-toggle-button cdx-toggle-button--framed cdx-toggle-button--toggled-on cm-mw-panel--toggle-button'
|
|
);
|
|
expect( toggleButtonOn.type ).toBe( 'button' );
|
|
expect( toggleButtonOn.dataset.checked ).toBe( 'true' );
|
|
expect( toggleButtonOn.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
|
|
expect( toggleButtonOn.title ).toBe( 'bar' );
|
|
expect( toggleButtonOn.getAttribute( 'aria-label' ) ).toBe( 'bar' );
|
|
expect( toggleButtonOn.children.length ).toBe( 1 );
|
|
const iconSpan = toggleButtonOn.children[ 0 ];
|
|
expect( iconSpan.tagName ).toBe( 'SPAN' );
|
|
expect( iconSpan.className ).toBe( 'cdx-icon cdx-icon--medium cm-mw-icon--baz' );
|
|
|
|
const toggleButtonOff = cmPanel.getToggleButton( 'foo', 'bar', 'baz', false );
|
|
expect( toggleButtonOff.className ).toBe(
|
|
'cdx-toggle-button cdx-toggle-button--framed cdx-toggle-button--toggled-off cm-mw-panel--toggle-button'
|
|
);
|
|
expect( toggleButtonOff.type ).toBe( 'button' );
|
|
expect( toggleButtonOff.dataset.checked ).toBe( 'false' );
|
|
expect( toggleButtonOff.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
|
|
} );
|
|
} );
|