mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Unit tests for TableInput

pull/6931/head
Karl Hobley 2021-01-20 12:55:14 +00:00 zatwierdzone przez Matt Westcott
rodzic 996aa149cb
commit 43995c7665
4 zmienionych plików z 236 dodań i 3 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

79
client/src/entrypoints/contrib/table_block/__snapshots__/table.test.js.snap 100644
Wyświetl plik

@ -0,0 +1,79 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`telepath: wagtail.widgets.TableInput it renders correctly 1`] = `
"<div>
<div class=\\"field boolean_field widget-checkbox_input\\">
<label for=\\"the-id-handsontable-header\\">Row header</label>
<div class=\\"field-content\\">
<div class=\\"input\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-header\\" name=\\"handsontable-header\\">
</div>
<p class=\\"help\\">Display the first row as a header.</p>
</div>
</div>
<br>
<div class=\\"field boolean_field widget-checkbox_input\\">
<label for=\\"the-id-handsontable-col-header\\">Column header</label>
<div class=\\"field-content\\">
<div class=\\"input\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-col-header\\" name=\\"handsontable-col-header\\">
</div>
<p class=\\"help\\">Display the first column as a header.</p>
</div>
</div>
<br>
<div class=\\"field\\">
<label for=\\"the-id-handsontable-col-caption\\">Table caption</label>
<div class=\\"field-content\\">
<div class=\\"input\\">
<input type=\\"text\\" id=\\"the-id-handsontable-col-caption\\" name=\\"handsontable-col-caption\\">
</div>
<p class=\\"help\\">
A heading that identifies the overall topic of the table, and is useful for screen reader users
</p>
</div>
</div>
<br>
<div id=\\"the-id-handsontable-container\\"></div>
<input type=\\"hidden\\" name=\\"the-name\\" id=\\"the-id\\" placeholder=\\"Table\\" value=\\"{&quot;data&quot;:[[&quot;Test&quot;,&quot;Heading&quot;],[&quot;Foo&quot;,&quot;123&quot;],[&quot;Bar&quot;,&quot;456&quot;]],&quot;cell&quot;:[],&quot;first_row_is_table_header&quot;:true,&quot;first_col_is_header&quot;:false,&quot;table_caption&quot;:&quot;&quot;}\\">
</div>"
`;
exports[`telepath: wagtail.widgets.TableInput translation 1`] = `
"<div>
<div class=\\"field boolean_field widget-checkbox_input\\">
<label for=\\"the-id-handsontable-header\\">En-tête de ligne</label>
<div class=\\"field-content\\">
<div class=\\"input\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-header\\" name=\\"handsontable-header\\">
</div>
<p class=\\"help\\">Affichez la première ligne sous forme d'en-tête.</p>
</div>
</div>
<br>
<div class=\\"field boolean_field widget-checkbox_input\\">
<label for=\\"the-id-handsontable-col-header\\">En-tête de colonne</label>
<div class=\\"field-content\\">
<div class=\\"input\\">
<input type=\\"checkbox\\" id=\\"the-id-handsontable-col-header\\" name=\\"handsontable-col-header\\">
</div>
<p class=\\"help\\">Affichez la première colonne sous forme d'en-tête.</p>
</div>
</div>
<br>
<div class=\\"field\\">
<label for=\\"the-id-handsontable-col-caption\\">Légende du tableau</label>
<div class=\\"field-content\\">
<div class=\\"input\\">
<input type=\\"text\\" id=\\"the-id-handsontable-col-caption\\" name=\\"handsontable-col-caption\\">
</div>
<p class=\\"help\\">
Un en-tête qui identifie le sujet général du tableau et qui est utile pour les utilisateurs de lecteurs d'écran
</p>
</div>
</div>
<br>
<div id=\\"the-id-handsontable-container\\"></div>
<input type=\\"hidden\\" name=\\"the-name\\" id=\\"the-id\\" placeholder=\\"Tableau\\" value=\\"{&quot;data&quot;:[[&quot;Test&quot;,&quot;Heading&quot;],[&quot;Foo&quot;,&quot;123&quot;],[&quot;Bar&quot;,&quot;456&quot;]],&quot;cell&quot;:[],&quot;first_row_is_table_header&quot;:true,&quot;first_col_is_header&quot;:false,&quot;table_caption&quot;:&quot;&quot;}\\">
</div>"
`;

4
client/src/entrypoints/contrib/table_block/table.js
Wyświetl plik

@ -224,10 +224,10 @@ class TableInput {
const widget = {
getValue() {
return input.value;
return JSON.parse(input.value);
},
getState() {
return input.value;
return JSON.parse(input.value);
},
setState(state) {
input.value = JSON.stringify(state);

154
client/src/entrypoints/contrib/table_block/table.test.js 100644
Wyświetl plik

@ -0,0 +1,154 @@
import $ from 'jquery';
window.$ = $;
import '../../admin/telepath/telepath';
import './table';
const TEST_OPTIONS = {
minSpareRows: 0,
startRows: 3,
startCols: 3,
colHeaders: false,
rowHeaders: false,
contextMenu: [
'row_above',
'row_below',
'---------',
'col_left',
'col_right',
'---------',
'remove_row',
'remove_col',
'---------',
'undo',
'redo'
],
editor: 'text',
stretchH: 'all',
height: 108,
renderer: 'text',
autoColumnSize: false,
language: 'en-us'
};
const TEST_STRINGS = {
'Row header': 'Row header',
'Display the first row as a header.': 'Display the first row as a header.',
'Column header': 'Column header',
'Display the first column as a header.': 'Display the first column as a header.',
'Table caption': 'Table caption',
// eslint-disable-next-line max-len
'A heading that identifies the overall topic of the table, and is useful for screen reader users': 'A heading that identifies the overall topic of the table, and is useful for screen reader users',
'Table': 'Table'
};
const TEST_VALUE = {
data: [
['Test', 'Heading'],
['Foo', '123'],
['Bar', '456']
],
cell: [],
first_row_is_table_header: true,
first_col_is_header: false,
table_caption: ''
};
// Note: Tests both TableInput and initTable together as this is the only supported way to use them
// It does, however, mock out Handsontable itself
describe('telepath: wagtail.widgets.TableInput', () => {
// These settings are passed into the table when rendered
// They are reset for each test so that you can modify them
let testOptions;
let testStrings;
let testValue;
let handsontableConstructorMock;
// Call this to render the table block with the current settings
const render = () => {
// Create a placeholder to render the widget
document.body.innerHTML = '<div id="placeholder"></div>';
// Unpack and render a simple text block widget
const widgetDef = window.telepath.unpack({
_type: 'wagtail.widgets.TableInput',
_args: [testOptions, testStrings]
});
return widgetDef.render($('#placeholder'), 'the-name', 'the-id', testValue);
};
beforeEach(() => {
handsontableConstructorMock = jest.fn();
window.Handsontable = (...args) => { handsontableConstructorMock(...args); };
window.Handsontable.prototype.render = jest.fn();
// Reset options, strings, and value for each test
testOptions = JSON.parse(JSON.stringify(TEST_OPTIONS));
testStrings = JSON.parse(JSON.stringify(TEST_STRINGS));
testValue = JSON.parse(JSON.stringify(TEST_VALUE));
});
test('it renders correctly', () => {
render();
expect(document.body.innerHTML).toMatchSnapshot();
expect(document.querySelector('input[name="the-name"]').value).toEqual(JSON.stringify(testValue));
});
test('Handsontable constructor is called', () => {
render();
expect(handsontableConstructorMock.mock.calls.length).toBe(1);
expect(handsontableConstructorMock.mock.calls[0][0]).toBe(document.getElementById('the-id-handsontable-container'));
expect(handsontableConstructorMock.mock.calls[0][1].autoColumnSize).toBe(false);
expect(handsontableConstructorMock.mock.calls[0][1].cell).toEqual([]);
expect(handsontableConstructorMock.mock.calls[0][1].colHeaders).toBe(false);
expect(handsontableConstructorMock.mock.calls[0][1].contextMenu).toEqual(testOptions.contextMenu);
expect(handsontableConstructorMock.mock.calls[0][1].data).toEqual(testValue.data);
expect(handsontableConstructorMock.mock.calls[0][1].editor).toBe('text');
expect(handsontableConstructorMock.mock.calls[0][1].height).toBe(108);
expect(handsontableConstructorMock.mock.calls[0][1].language).toBe('en-us');
expect(handsontableConstructorMock.mock.calls[0][1].minSpareRows).toBe(0);
expect(handsontableConstructorMock.mock.calls[0][1].renderer).toBe('text');
expect(handsontableConstructorMock.mock.calls[0][1].rowHeaders).toBe(false);
expect(handsontableConstructorMock.mock.calls[0][1].startCols).toBe(3);
expect(handsontableConstructorMock.mock.calls[0][1].startRows).toBe(3);
expect(handsontableConstructorMock.mock.calls[0][1].stretchH).toBe('all');
});
test('Handsontable.render is called', () => {
render();
expect(window.Handsontable.prototype.render.mock.calls.length).toBe(1);
expect(window.Handsontable.prototype.render.mock.calls[0].length).toBe(0);
});
test('translation', () => {
testStrings = {
'Row header': 'En-tête de ligne',
'Display the first row as a header.': 'Affichez la première ligne sous forme d\'en-tête.',
'Column header': 'En-tête de colonne',
'Display the first column as a header.': 'Affichez la première colonne sous forme d\'en-tête.',
'Table caption': 'Légende du tableau',
// eslint-disable-next-line max-len
'A heading that identifies the overall topic of the table, and is useful for screen reader users': 'Un en-tête qui identifie le sujet général du tableau et qui est utile pour les utilisateurs de lecteurs d\'écran',
'Table': 'Tableau'
};
render();
expect(document.body.innerHTML).toMatchSnapshot();
});
test('getValue() returns the current value', () => {
const boundWidget = render();
expect(boundWidget.getValue()).toEqual(TEST_VALUE);
});
test('getState() returns the current value', () => {
const boundWidget = render();
expect(boundWidget.getState()).toEqual(TEST_VALUE);
});
test('setState() changes the current state', () => {
const boundWidget = render();
testValue.data.push(['Baz', '789']);
boundWidget.setState(testValue);
expect(document.querySelector('input[name="the-name"]').value).toEqual(JSON.stringify(testValue));
});
});

2
wagtail/contrib/table_block/blocks.py
Wyświetl plik

@ -61,7 +61,7 @@ class TableInputAdapter(WidgetAdapter):
strings = {
'Row header': _("Row header"),
'Display the first row as a header.': _("Display the first row as a header."),
'Column header': _("Display the first row as a header."),
'Column header': _("Column header"),
'Display the first column as a header.': _("Display the first column as a header."),
'Table caption': _("Table caption"),
'A heading that identifies the overall topic of the table, and is useful for screen reader users': _("A heading that identifies the overall topic of the table, and is useful for screen reader users"),