Packages
phoenix_live_view
0.1.0
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.2.0-rc.3
1.2.0-rc.2
1.2.0-rc.1
1.2.0-rc.0
1.1.32
1.1.31
1.1.30
1.1.29
1.1.28
1.1.27
1.1.26
1.1.25
1.1.24
1.1.23
1.1.22
1.1.21
1.1.20
1.1.19
1.1.18
1.1.17
1.1.16
1.1.15
1.1.14
1.1.13
1.1.12
1.1.11
1.1.10
1.1.9
1.1.8
1.1.7
1.1.6
retired
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.1.0-rc.4
1.1.0-rc.3
1.1.0-rc.2
1.1.0-rc.1
1.1.0-rc.0
1.0.18
1.0.17
1.0.16
1.0.15
1.0.14
1.0.13
1.0.12
1.0.11
1.0.10
1.0.9
1.0.8
retired
1.0.7
1.0.6
retired
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
1.0.0-rc.9
1.0.0-rc.8
1.0.0-rc.7
1.0.0-rc.6
1.0.0-rc.5
1.0.0-rc.4
1.0.0-rc.3
1.0.0-rc.2
1.0.0-rc.1
1.0.0-rc.0
0.20.17
0.20.16
0.20.15
0.20.14
0.20.13
0.20.12
0.20.11
0.20.10
0.20.9
0.20.8
0.20.7
0.20.6
0.20.5
0.20.4
0.20.3
0.20.2
0.20.1
0.20.0
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.18
0.18.17
0.18.16
0.18.15
0.18.14
0.18.13
0.18.12
0.18.11
0.18.10
0.18.9
0.18.8
0.18.7
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.14
0.17.13
0.17.12
0.17.11
0.17.10
0.17.9
0.17.8
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.7
0.15.6
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.8
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.1
0.11.0
0.10.0
0.9.0
0.8.1
0.8.0
0.7.1
0.7.0
0.6.0
0.6.0-dev
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.1
0.3.0
0.2.1
0.2.0
0.1.1
0.1.0
Rich, real-time user experiences with server-rendered HTML
Current section
Files
Jump to
Current section
Files
assets/test/rendered_test.js
import { Rendered } from '../js/phoenix_live_view'
describe('Rendered', () => {
describe('mergeDiff', () => {
test('recursively merges two diffs', () => {
expect(Rendered.mergeDiff(simpleDiff1, simpleDiff2)).toEqual(
simpleDiffResult
);
expect(Rendered.mergeDiff(deepDiff1, deepDiff2)).toEqual(deepDiffResult);
});
test('returns the latter diff if it contains a `static` key', () => {
const diff1 = { 0: ['a'], 1: ['b'] };
const diff2 = { 0: ['c'], static: 'c' };
expect(Rendered.mergeDiff(diff1, diff2)).toEqual(diff2);
});
test('replaces a string when a map is returned', () => {
const diff1 = { 0: { 0: '<button>Press Me</button>', static: '' } }
const diff2 = { 0: { 0: { 0: 'val', static: '' }, static: '' } }
expect(Rendered.mergeDiff(diff1, diff2)).toEqual(diff2);
});
test('replaces a map when a string is returned', () => {
const diff1 = { 0: { 0: { 0: 'val', static: '' }, static: '' } }
const diff2 = { 0: { 0: '<button>Press Me</button>', static: '' } }
expect(Rendered.mergeDiff(diff1, diff2)).toEqual(diff2);
});
});
describe('isNewFingerprint', () => {
test('returns true if `diff.static` is truthy', () => {
const diff = { static: ['<h2>'] };
expect(Rendered.isNewFingerprint(diff)).toEqual(true);
});
test('returns false if `diff.static` is falsy', () => {
const diff = { static: undefined };
expect(Rendered.isNewFingerprint(diff)).toEqual(false);
});
test('returns false if `diff` is undefined', () => {
expect(Rendered.isNewFingerprint()).toEqual(false);
});
});
describe('toString', () => {
test('stringifies a diff', () => {
expect(Rendered.toString(simpleDiffResult).trim()).toEqual(
`<div class="thermostat">
<div class="bar cooling">
<a href="#" phx-click="toggle-mode">cooling</a>
<span>07:15:04 PM</span>
</div>
</div>`.trim());
});
});
describe('toOutputBuffer', () => {
test('populates the output buffer', () => {
const output = { buffer: '' };
Rendered.toOutputBuffer(simpleDiffResult, output);
expect(output.buffer.trim()).toEqual(
`<div class="thermostat">
<div class="bar cooling">
<a href="#" phx-click="toggle-mode">cooling</a>
<span>07:15:04 PM</span>
</div>
</div>`.trim());
});
});
});
const simpleDiff1 = {
'0': 'cooling',
'1': 'cooling',
'2': '07:15:03 PM',
static: [
'<div class="thermostat">\n <div class="bar ',
'">\n <a href="#" phx-click="toggle-mode">',
'</a>\n <span>',
'</span>\n </div>\n</div>\n',
]
};
const simpleDiff2 = {
'2': '07:15:04 PM',
};
const simpleDiffResult = {
'0': 'cooling',
'1': 'cooling',
'2': '07:15:04 PM',
static: [
'<div class="thermostat">\n <div class="bar ',
'">\n <a href="#" phx-click="toggle-mode">',
'</a>\n <span>',
'</span>\n </div>\n</div>\n',
]
};
const deepDiff1 = {
'0': {
'0': {
dynamics: [['user1058', '1'], ['user99', '1']],
static: [' <tr>\n <td>', ' (', ')</td>\n </tr>\n'],
},
static: [
' <table>\n <thead>\n <tr>\n <th>Username</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n',
' </tbody>\n </table>\n',
],
},
'1': {
dynamics: [
[
'asdf_asdf',
'asdf@asdf.com',
'123-456-7890',
'<a href="/users/1">Show</a>',
'<a href="/users/1/edit">Edit</a>',
'<a href="#" phx-click="delete_user" phx-value="1">Delete</a>',
],
],
static: [
' <tr>\n <td>',
'</td>\n <td>',
'</td>\n <td>',
'</td>\n\n <td>\n',
' ',
'\n',
' </td>\n </tr>\n',
],
}
};
const deepDiff2 = {
'0': {
'0': {
dynamics: [['user1058', '2']],
},
}
};
const deepDiffResult = {
'0': {
'0': {
dynamics: [['user1058', '2']],
static: [' <tr>\n <td>', ' (', ')</td>\n </tr>\n'],
},
static: [
' <table>\n <thead>\n <tr>\n <th>Username</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n',
' </tbody>\n </table>\n',
],
},
'1': {
dynamics: [
[
'asdf_asdf',
'asdf@asdf.com',
'123-456-7890',
'<a href="/users/1">Show</a>',
'<a href="/users/1/edit">Edit</a>',
'<a href="#" phx-click="delete_user" phx-value="1">Delete</a>',
],
],
static: [
' <tr>\n <td>',
'</td>\n <td>',
'</td>\n <td>',
'</td>\n\n <td>\n',
' ',
'\n',
' </td>\n </tr>\n',
],
}
};