Skip to content

Commit

Permalink
unit tests for xml formatting + improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcubic
jcubic committed Apr 28, 2024
1 parent b095360 commit df3506a
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 34 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
@@ -1,3 +1,9 @@
## 2.41.0
### Features
* allow to use class and other attributes in style XML tags (like `<bold/>` or `<glow/>`)
### Bugfix
* fix alt image attribute

## 2.40.6
### Bugfix
* fix resize of text from long animation after finish
Expand Down
22 changes: 11 additions & 11 deletions README.md
View file
@@ -1,14 +1,14 @@
<h1 align="center">
<img src="https://github.com/jcubic/jquery.terminal/blob/master/assets/ascii_art.svg?raw=true&ver=2.40.6"
<img src="https://github.com/jcubic/jquery.terminal/blob/devel/assets/ascii_art.svg?raw=true&ver=DEV"
alt="ASCII Art that represent text jQuery Terminal - JavaScript Library for Web Based Terminal Emulators" />
</h1>

[JavaScript Library for Web Based Terminal Emulators](https://terminal.jcubic.pl)

[![npm](https://img.shields.io/badge/npm-2.40.6-blue.svg)](https://www.npmjs.com/package/jquery.terminal)
![bower](https://img.shields.io/badge/bower-2.40.6-yellow.svg)
[![Build and test](https://github.com/jcubic/jquery.terminal/actions/workflows/build.yaml/badge.svg?branch=master&event=push)](https://github.com/jcubic/jquery.terminal/actions/workflows/build.yaml)
[![Coverage Status](https://coveralls.io/repos/github/jcubic/jquery.terminal/badge.svg?branch=master&de53a76e58fa938d09d172e6ddf1bb8c)](https://coveralls.io/github/jcubic/jquery.terminal?branch=master)
[![npm](https://img.shields.io/badge/npm-DEV-blue.svg)](https://www.npmjs.com/package/jquery.terminal)
![bower](https://img.shields.io/badge/bower-DEV-yellow.svg)
[![Build and test](https://github.com/jcubic/jquery.terminal/actions/workflows/build.yaml/badge.svg?branch=devel&event=push)](https://github.com/jcubic/jquery.terminal/actions/workflows/build.yaml)
[![Coverage Status](https://coveralls.io/repos/github/jcubic/jquery.terminal/badge.svg?branch=devel&1b4f43839e9a18890938b506396293ca)](https://coveralls.io/github/jcubic/jquery.terminal?branch=devel)
![NPM Downloads](https://img.shields.io/npm/dm/jquery.terminal.svg?style=flat)
[![jsDelivr Downloads](https://data.jsdelivr.com/v1/package/npm/jquery.terminal/badge?style=rounded&n=1)](https://www.jsdelivr.com/package/npm/jquery.terminal)
[![Paid Support](https://img.shields.io/badge/paid-support-354465.svg)](https://support.jcubic.pl/)
Expand Down Expand Up @@ -87,7 +87,7 @@ You can test current version at this URL:

or if it doesn't use latest version (because of jsDelivr cache) you can force it with this URL:

* [https://jcubic.github.io/jquery.terminal/?ver=2.40.6](https://jcubic.github.io/jquery.terminal/?ver=2.40.6)
* [https://jcubic.github.io/jquery.terminal/?ver=DEV](https://jcubic.github.io/jquery.terminal/?ver=DEV)

And development version using:

Expand All @@ -106,20 +106,20 @@ or use jsDelivr:

```

Then include js/jquery.terminal-2.40.6.min.js and css/jquery.terminal-2.40.6.min.css
Then include js/jquery.terminal-DEV.min.js and css/jquery.terminal-DEV.min.css

You can grab the files from CDN:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.40.6/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.40.6/css/jquery.terminal.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/DEV/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/DEV/css/jquery.terminal.min.css" rel="stylesheet"/>
```

or

```html
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal@2.40.6/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal@2.40.6/css/jquery.terminal.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal@DEV/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal@DEV/css/jquery.terminal.min.css"/>
```

If you always want latest version, you can get it from [unpkg](https://unpkg.com/) without specifying version,
Expand Down
37 changes: 37 additions & 0 deletions __tests__/__snapshots__/terminal.spec.js.snap
View file
Expand Up @@ -779,6 +779,43 @@ Array [
]
`;
exports[`Terminal utils xml formatting should format font 1`] = `
"[[;white;red;;;{\\"style\\":\\"--size:1.2;letter-spacing:2\\"}]Hello World]
[[;;red]Hello World]
[[;;;;;{\\"style\\":\\"--size:1.2;letter-spacing:2\\"}]Hello World]"
`;
exports[`Terminal utils xml formatting should format font 2`] = `"<div data-index=\\"0\\"><div style=\\"width: 100%;\\"><span style=\\"color:white;--color:white;--original-color:white;background-color:red;--background:red;--size:1.2;letter-spacing:2\\" data-text=\\"Hello&nbsp;World\\"><span>Hello&nbsp;World</span></span></div><div style=\\"width: 100%;\\"><span style=\\"background-color:red;--background:red\\" data-text=\\"Hello World\\"><span>Hello&nbsp;World</span></span></div><div class=\\"cmd-end-line\\" style=\\"width: 100%;\\"><span style=\\";--size:1.2;letter-spacing:2\\" data-text=\\"Hello&nbsp;World\\"><span>Hello&nbsp;World</span></span></div></div>"`;
exports[`Terminal utils xml formatting should handle invalid xml 1`] = `
"<< First Line [[[[ of Text <><> is little ]]] bit longer
<<<<>>>> Second ]]]] Line of Text
<<<< Thrid Line of Text"
`;
exports[`Terminal utils xml formatting should render an empty image 1`] = `"[[@;;;;;{}]]"`;
exports[`Terminal utils xml formatting should render colors 1`] = `
"[[;white;;command;;{\\"class\\":\\"command\\"}]ls]
[[;green;;;;{}]ls]
[[;red;;error;;{\\"class\\":\\"error\\",\\"style\\":\\"background:red\\"}]Error: invalid message]"
`;
exports[`Terminal utils xml formatting should render colors 2`] = `"<div data-index=\\"0\\"><div style=\\"width: 100%;\\"><span style=\\"color:white;--color:white;--original-color:white\\" class=\\"command\\" data-text=\\"ls\\"><span>ls</span></span></div><div style=\\"width: 100%;\\"><span style=\\"color:green;--color:green;--original-color:green\\" data-text=\\"ls\\"><span>ls</span></span></div><div class=\\"cmd-end-line\\" style=\\"width: 100%;\\"><span style=\\"color:red;--color:red;--original-color:red;background:red\\" class=\\"error\\" data-text=\\"Error:&nbsp;invalid&nbsp;message\\"><span>Error:&nbsp;invalid&nbsp;message</span></span></div></div>"`;
exports[`Terminal utils xml formatting should render links 1`] = `"<div data-index=\\"0\\"><div style=\\"width: 100%;\\"><a href=\\"https://example.com\\" target=\\"_blank\\" class=\\"link\\" data-text=\\"\\">example.com</a></div><div style=\\"width: 100%;\\"><a href=\\"example.com\\" data-text=\\"\\">example.com</a></div><div class=\\"cmd-end-line\\" style=\\"width: 100%;\\"><a href=\\"https://example.com\\" style=\\";background:red\\" data-text=\\"\\">Error:&nbsp;invalid&nbsp;message</a></div></div>"`;
exports[`Terminal utils xml formatting should render tags 1`] = `
"[[;;;foo;;{\\"class\\":\\"foo\\",\\"style\\":\\"color:red\\"}]text]
[[;;;;;{\\"style\\":\\"color:red\\"}]text]
[[i;;;;;{}]lorem]
[[g;;;;;{}]ipsum]
[[u;;;;;{}]dolor]
[[s;;;;;{}]sit]
[[o;;;;;{}]amet]
[[b;;;;;{}]foo]"
`;
exports[`extensions echo_newline should create sequance of animations (#930) 1`] = `"<div data-index=\\"0\\" class=\\"\\"><div style=\\"width: 100%;\\"><span data-text=\\"Hello,&nbsp;\\">Hello,&nbsp;</span><span data-text=\\"jQuery&nbsp;\\">jQuery&nbsp;</span><span data-text=\\"Terminal\\">Terminal</span></div></div>"`;
exports[`extensions echo_newline should print mixed newline with !flush 1`] = `
Expand Down
93 changes: 89 additions & 4 deletions __tests__/terminal.spec.js
View file
Expand Up @@ -247,6 +247,7 @@ global.URL = window.URL = {

require('../js/jquery.terminal-src')(global.$);
require('../js/unix_formatting')(global.$);
require('../js/xml_formatting')(global.$);
require('../js/pipe')(global.$);
require('../js/autocomplete_menu')(global.$);
require('../js/less')(global.$);
Expand Down Expand Up @@ -475,6 +476,78 @@ describe('Terminal utils', function() {
});
});
});
describe('xml formatting', function() {
let term;
beforeEach(() => {
term = $('<div/>').terminal({}, {greetings: false});
});
afterEach(() => {
term.destroy();
});
it('should render tags', () => {
const input = [
'<span class="foo" style="color: red">text</span>',
'<span style="color: red">text</span>',
'<italic>lorem</italic>',
'<glow>ipsum</glow>',
'<underline>dolor</underline>',
'<strike>sit</strike>',
'<overline>amet</overline>',
'<bold>foo</bold>'
].join('\n');
expect($.terminal.apply_formatters(input)).toMatchSnapshot();
});
it('should handle invalid xml', () => {
const lines = [
'<<< First Line [[[[ of Text ><><> is little ]]] bit longer',
'<<<<>>>> Second ]]]] Line of Text ',
'<<<< Thrid Line of Text'
];
expect($.terminal.apply_formatters(lines.join('\n'))).toMatchSnapshot();
});
it('should render an image', () => {
const url = './__tests__/__fixtures__/Ken_Thompson__and_Dennis_Ritchie_at_PDP-11.jpg';
const cls = 'foo';
const alt = 'this is an image';
term.echo(`<img src="${url}" class="${cls}" alt="${alt}"/>`);
const $img = term.find('img');
expect($img.attr('src')).toEqual(url);
expect($img.attr('alt')).toEqual(nbsp(alt));
expect($img.attr('class')).toEqual(cls);
});
it('should render an empty image', () => {
expect($.terminal.apply_formatters('<img/>')).toMatchSnapshot();
});
it('should format font', () => {
const input = [
'<font spacing="2" size="1.2" background="red" color="white">Hello World</font>',
'<font background="red">Hello World</font>',
'<font spacing="2" size="1.2">Hello World</font>'
].join('\n');
expect($.terminal.apply_formatters(input)).toMatchSnapshot();
term.echo(input);
expect(term.find('.terminal-output').html()).toMatchSnapshot();
});
it('should render colors', () => {
const input = [
'<white class="command">ls</white>',
'<green>ls</green>',
'<red class="error" style="background:red">Error: invalid message</red>'
].join('\n');
expect($.terminal.apply_formatters(input)).toMatchSnapshot();
term.echo(input);
expect(term.find('.terminal-output').html()).toMatchSnapshot();
});
it('should render links', () => {
const input = [
'<a href="https://example.com" target="_blank" class="link">example.com</a>',
'<a>example.com</a>',
'<a href="https://example.com" style="background:red">Error: invalid message</a>'
].join('\n');
term.echo(input);
expect(term.find('.terminal-output').html()).toMatchSnapshot();
});
});
describe('$.terminal.from_ansi', function() {
var ansi_string = '\x1b[38;5;12mHello\x1b[2;31;46mFoo\x1b[1;3;4;32;45mB[[sb;;]a]r\x1b[0m\x1b[7mBaz\x1b[0;48;2;255;255;0;38;2;0;100;0mQuux\x1b[m';
it('should convert ansi to terminal formatting', function() {
Expand Down Expand Up @@ -2067,6 +2140,9 @@ describe('Terminal utils', function() {
expect(formatters.includes(formatter_1)).toBeTruthy();
expect(formatters.includes(formatter_2)).toBeTruthy();
});
it('should use xml formatting', () => {
$.terminal.new_formatter([/foo/g, '<white>foo</white>']);
});
});
describe('$.terminal.less', function() {
var term;
Expand Down Expand Up @@ -3261,17 +3337,23 @@ describe('Terminal plugin', function() {
var term = $('<div/>').terminal($.noop, {
raw: true
});
beforeEach(function() {
let formatters;
beforeEach(() => {
formatters = $.terminal.defaults.formatters;
$.terminal.defaults.formatters = [];
term.clear();
});
var img = '<img src="http://lorempixel.com/300/200/cats/"/>';
afterEach(() => {
$.terminal.defaults.formatters = formatters;
});
const img = '<img src="http://lorempixel.com/300/200/cats/"/>';
it('should display html when no raw echo option is specified', function() {
term.echo(img);
expect(last_div(term).find('img').length).toEqual(1);
});
it('should display html as text when using raw echo option', function() {
term.echo(img, {raw: false});
var output = last_div(term);
const output = last_div(term);
expect(output.find('img').length).toEqual(0);
expect(output.text().replace(/\s/g, ' ')).toEqual(img);
});
Expand Down Expand Up @@ -3804,8 +3886,10 @@ describe('Terminal plugin', function() {
});
describe('cmd plugin', function() {
var string = '';
var term, cmd, line, history;
var term, cmd, line, history, formatting;
beforeEach(function() {
formatting = $.terminal.defaults.formatters;
$.terminal.defaults.formatters = [];
term = $('<div/>').appendTo('body').css('overflow-y', 'scroll').terminal($.noop, {
name: 'cmd',
numChars: 150,
Expand All @@ -3820,6 +3904,7 @@ describe('Terminal plugin', function() {
});
afterEach(function() {
term.destroy().remove();
$.terminal.defaults.formatters = formatting;
});
it('text should have 2 lines', function() {
expect(line.is('div')).toBe(true);
Expand Down
40 changes: 21 additions & 19 deletions js/xml_formatting.js
View file
Expand Up @@ -16,6 +16,7 @@
/* global define */
(function(factory) {
var root;
/* istanbul ignore next */
if (typeof window !== 'undefined') {
root = window;
} else if (typeof self !== 'undefined') {
Expand All @@ -25,6 +26,7 @@
} else {
throw new Error('Unknow context');
}
/* istanbul ignore next */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
// istanbul ignore next
Expand Down Expand Up @@ -59,6 +61,7 @@
factory(root.jQuery);
}
})(function($) {
/* istanbul ignore next */
if (!$.terminal) {
throw new Error('$.terminal is not defined');
}
Expand Down Expand Up @@ -87,24 +90,12 @@
var formatting = ['@', '', '', cls, src, JSON.stringify(attrs)];
return '[[' + formatting.join(';') + ']' + alt + ']';
},
bold: function() {
return '[[b;rgba(255,255,255,0.9);]';
},
overline: function() {
return '[[o;;]';
},
strike: function() {
return '[[s;;]';
},
underline: function() {
return '[[u;;]';
},
glow: function() {
return '[[g;;]';
},
italic: function() {
return '[[i;;]';
},
bold: style('b'),
overline: style('o'),
strike: style('s'),
underline: style('u'),
glow: style('g'),
italic: style('i'),
span: function(attrs) {
var cls = attrs.class || '';
var formatting = ['', '', '', cls, '', JSON.stringify(attrs)];
Expand All @@ -117,11 +108,18 @@
return '[[' + formatting.join(';') + ']';
}
};
function style(value) {
return function(attrs) {
var cls = attrs.class || '';
var formatting = [value, '', '', cls, '', JSON.stringify(attrs)];
return '[[' + formatting.join(';') + ']';
};
}
// short aliases
tags.b = tags.bold;
tags.a = tags.link;
tags.i = tags.italic;
var tag_re = /(<\/?\s*[a-zA-Z]+(?: [^>]+)?>)/;
var tag_re = /(<\/?\s*[a-zA-Z]+(?:\s?[^>]+)?>)/;
function xml_formatter(string) {
return string.split(tag_re).map(function(string) {
if (string.match(tag_re)) {
Expand All @@ -130,6 +128,10 @@
}
string = string.replace(/^<|>$/g, '');
var m = string.match(/^([a-zA-Z]+)(?:\s*(.+))?/);
if (!m) {
// invalid XML
return string;
}
var name = m[1].toLowerCase();
var attrs = {};
if (m[2]) {
Expand Down

0 comments on commit df3506a

Please sign in to comment.