Add unit tests for mention and search highlighting (mattermost#1740)

tests/utils/formatting_at_mentions.test.jsx

@@ -74,62 +74,62 @@ describe('TextFormatting.AtMentions', function() {
  it('Highlighted at mentions', function() {
  assert.equal(
  TextFormatting.formatText('@user', {atMentions: true, mentionKeys: [{key: '@user'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="user">@user</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="user">@user</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@channel', {atMentions: true, mentionKeys: [{key: '@channel'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="channel">@channel</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="channel">@channel</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@all', {atMentions: true, mentionKeys: [{key: '@all'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="all">@all</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="all">@all</span></span></p>',
  );
 
  assert.equal(
  TextFormatting.formatText('@USER', {atMentions: true, mentionKeys: [{key: '@user'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="USER">@USER</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="USER">@USER</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@CHanNEL', {atMentions: true, mentionKeys: [{key: '@channel'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="CHanNEL">@CHanNEL</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="CHanNEL">@CHanNEL</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@ALL', {atMentions: true, mentionKeys: [{key: '@all'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="ALL">@ALL</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="ALL">@ALL</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@foo.com', {atMentions: true, mentionKeys: [{key: '@foo.com'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="foo.com">@foo.com</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@foo.com @bar.com', {atMentions: true, mentionKeys: [{key: '@foo.com'}, {key: '@bar.com'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span> <span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="foo.com">@foo.com</span></span> <span class="mention--highlight"><span data-mention="bar.com">@bar.com</span></span></p>',
  );
  assert.equal(
  TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@foo.com'}, {key: '@bar.com'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span><span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ '<p><span class="mention--highlight"><span data-mention="foo.com">@foo.com</span></span><span class="mention--highlight"><span data-mention="bar.com">@bar.com</span></span></p>',
  );
  });
 
  it('Mix highlight at mentions', function() {
  assert.equal(
  TextFormatting.formatText('@foo.com @bar.com', {atMentions: true, mentionKeys: [{key: '@foo.com'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span> <span data-mention="bar.com">@bar.com</span></p>',
+ '<p><span class="mention--highlight"><span data-mention="foo.com">@foo.com</span></span> <span data-mention="bar.com">@bar.com</span></p>',
  'should highlight first at mention, with space in between'
  );
  assert.equal(
  TextFormatting.formatText('@foo.com @bar.com', {atMentions: true, mentionKeys: [{key: '@bar.com'}]}).trim(),
- '<p><span data-mention="foo.com">@foo.com</span> <span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ '<p><span data-mention="foo.com">@foo.com</span> <span class="mention--highlight"><span data-mention="bar.com">@bar.com</span></span></p>',
  'should highlight second at mention, with space in between'
  );
  assert.equal(
  TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@foo.com'}]}).trim(),
- '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span><span data-mention="bar.com">@bar.com</span></p>',
+ '<p><span class="mention--highlight"><span data-mention="foo.com">@foo.com</span></span><span data-mention="bar.com">@bar.com</span></p>',
  'should highlight first at mention, without space in between'
  );
  assert.equal(
  TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@bar.com'}]}).trim(),
- '<p><span data-mention="foo.com">@foo.com</span><span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ '<p><span data-mention="foo.com">@foo.com</span><span class="mention--highlight"><span data-mention="bar.com">@bar.com</span></span></p>',
  'should highlight second at mention, without space in between'
  );
  assert.equal(

tests/utils/formatting_hashtags.test.jsx

@@ -127,22 +127,22 @@ describe('TextFormatting.Hashtags', function() {
  it('Searching for hashtags', function(done) {
  assert.equal(
  TextFormatting.formatText('#test', {searchTerm: 'test'}).trim(),
- "<p><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#test'>#test</a></span></p>"
+ '<p><span class="search-highlight"><a class=\'mention-link\' href=\'#\' data-hashtag=\'#test\'>#test</a></span></p>'
  );
 
  assert.equal(
  TextFormatting.formatText('#test', {searchTerm: '#test'}).trim(),
- "<p><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#test'>#test</a></span></p>"
+ '<p><span class="search-highlight"><a class=\'mention-link\' href=\'#\' data-hashtag=\'#test\'>#test</a></span></p>'
  );
 
  assert.equal(
  TextFormatting.formatText('#foo/#bar', {searchTerm: '#foo'}).trim(),
- "<p><span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#foo'>#foo</a></span>/<a class='mention-link' href='#' data-hashtag='#bar'>#bar</a></p>"
+ '<p><span class="search-highlight"><a class=\'mention-link\' href=\'#\' data-hashtag=\'#foo\'>#foo</a></span>/<a class=\'mention-link\' href=\'#\' data-hashtag=\'#bar\'>#bar</a></p>'
  );
 
  assert.equal(
  TextFormatting.formatText('#foo/#bar', {searchTerm: 'bar'}).trim(),
- "<p><a class='mention-link' href='#' data-hashtag='#foo'>#foo</a>/<span class='search-highlight'><a class='mention-link' href='#' data-hashtag='#bar'>#bar</a></span></p>"
+ '<p><a class=\'mention-link\' href=\'#\' data-hashtag=\'#foo\'>#foo</a>/<span class="search-highlight"><a class=\'mention-link\' href=\'#\' data-hashtag=\'#bar\'>#bar</a></span></p>'
  );
 
  assert.equal(

tests/utils/formatting_mention_highlighting.test.jsx

@@ -0,0 +1,76 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as TextFormatting from 'utils/text_formatting.jsx';
+
+describe('TextFormatting.mentionHighlighting', () => {
+ const testCases = [{
+ name: 'no mentions',
+ input: 'These are words',
+ mentionKeys: [],
+ expected: '<p>These are words</p>',
+ }, {
+ name: 'not an at-mention',
+ input: 'These are words',
+ mentionKeys: [{key: 'words'}],
+ expected: '<p>These are <span class="mention--highlight">words</span></p>',
+ }, {
+ name: 'at-mention',
+ input: 'These are @words',
+ mentionKeys: [{key: '@words'}],
+ expected: '<p>These are <span class="mention--highlight"><span data-mention="words">@words</span></span></p>',
+ }, {
+ name: 'at-mention and non-at-mention for same word',
+ input: 'These are @words',
+ mentionKeys: [{key: '@words'}, {key: 'words'}],
+ expected: '<p>These are <span class="mention--highlight"><span data-mention="words">@words</span></span></p>',
+ }, {
+ name: 'case insensitive mentions',
+ input: 'These are words and Words and wORDS',
+ mentionKeys: [{key: 'words'}],
+ expected: '<p>These are <span class="mention--highlight">words</span> and <span class="mention--highlight">Words</span> and <span class="mention--highlight">wORDS</span></p>',
+ }, {
+ name: 'case sensitive mentions',
+ input: 'These are words and Words and wORDS',
+ mentionKeys: [{key: 'Words', caseSensitive: true}],
+ expected: '<p>These are words and <span class="mention--highlight">Words</span> and wORDS</p>',
+ }, {
+ name: 'at mention linking disabled, mentioned by non-at-mention',
+ input: 'These are @words',
+ atMentions: false,
+ mentionKeys: [{key: 'words'}],
+ expected: '<p>These are @<span class="mention--highlight">words</span></p>',
+ }, {
+ name: 'at mention linking disabled, mentioned by at-mention',
+ input: 'These are @words',
+ atMentions: false,
+ mentionKeys: [{key: '@words'}],
+ expected: '<p>These are <span class="mention--highlight">@words</span></p>',
+ }, {
+ name: 'mention highlighting disabled',
+ input: 'These are words',
+ mentionHighlight: false,
+ mentionKeys: [{key: 'words'}],
+ expected: '<p>These are words</p>',
+ }, {
+ name: 'mention highlighting and at mention linking disabled',
+ input: 'These are @words',
+ atMentions: false,
+ mentionHighlight: false,
+ mentionKeys: [{key: '@words'}],
+ expected: '<p>These are @words</p>',
+ }];
+
+ for (const testCase of testCases) {
+ it(testCase.name, () => {
+ const options = {
+ atMentions: 'atMentions' in testCase ? testCase.atMentions : true,
+ mentionHighlight: 'mentionHighlight' in testCase ? testCase.mentionHighlight : true,
+ mentionKeys: testCase.mentionKeys,
+ };
+ const output = TextFormatting.formatText(testCase.input, options).trim();
+
+ expect(output).toEqual(testCase.expected);
+ });
+ }
+});

tests/utils/formatting_search_highlighting.test.jsx

@@ -0,0 +1,141 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as TextFormatting from 'utils/text_formatting.jsx';
+
+describe('TextFormatting.searchHighlighting', () => {
+ const testCases = [{
+ name: 'no search highlighting',
+ input: 'These are words in a sentence.',
+ searchMatches: [],
+ searchTerm: '',
+ expected: '<p>These are words in a sentence.</p>',
+ }, {
+ name: 'search term highlighting',
+ input: 'These are words in a sentence.',
+ searchTerm: 'words sentence',
+ expected: '<p>These are <span class="search-highlight">words</span> in a <span class="search-highlight">sentence</span>.</p>',
+ }, {
+ name: 'search term highlighting with quoted phrase',
+ input: 'These are words in a sentence. This is a sentence with words.',
+ searchTerm: '"words in a sentence"',
+ expected: '<p>These are <span class="search-highlight">words in a sentence</span>. This is a sentence with words.</p>',
+ }, {
+ name: 'search term highlighting with empty quoted phrase',
+ input: 'These are words in a sentence. This is a sentence with words.',
+ searchTerm: '""',
+ expected: '<p>These are words in a sentence. This is a sentence with words.</p>',
+ }, {
+ name: 'search term highlighting with flags',
+ input: 'These are words in a sentence.',
+ searchTerm: 'words in:sentence',
+ expected: '<p>These are <span class="search-highlight">words</span> in a sentence.</p>',
+ }, {
+ name: 'search term highlighting with at mentions',
+ input: 'These are @words in a @sentence.',
+ searchTerm: '@words sentence',
+ expected: '<p>These are <span class="search-highlight"><span data-mention="words">@words</span></span> in a <span class="search-highlight"><span data-mention="sentence.">@sentence.</span></span></p>',
+ }, {
+ name: 'search term highlighting in a code span',
+ input: 'These are `words in a sentence`.',
+ searchTerm: 'words',
+ expected: '<p>These are <span class="codespan__pre-wrap"><code><span class="search-highlight">words</span> in a sentence</code></span>.</p>',
+ }, {
+ name: 'search term highlighting in a code block',
+ input: '```\nwords in a sentence\n```',
+ searchTerm: 'words',
+ expected:
+ '<div class="post-code post-code--wrap">' +
+ '<code class="hljs">' +
+ '<div class="post-code__search-highlighting">' +
+ '<span class="search-highlight">words</span> in a sentence\n' +
+ '</div>' +
+ 'words in a sentence\n' +
+ '</code>' +
+ '</div>',
+ }, {
+ name: 'search term highlighting in link text',
+ input: 'These are [words in a sentence](https://example.com).',
+ searchTerm: 'words',
+ expected: '<p>These are <a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank"><span class="search-highlight">words</span> in a sentence</a>.</p>',
+ }, {
+ name: 'search term highlighting in link url',
+ input: 'These are [words in a sentence](https://example.com).',
+ searchTerm: 'example',
+ expected: '<p>These are <a class="theme markdown__link search-highlight" href="https://example.com" rel="noreferrer" target="_blank">words in a sentence</a>.</p>',
+ }, {
+ name: 'search match highlighting',
+ input: 'These are words in a sentence.',
+ searchMatches: ['words', 'sentence'],
+ expected: '<p>These are <span class="search-highlight">words</span> in a <span class="search-highlight">sentence</span>.</p>',
+ }, {
+ name: 'search match highlighting with quoted phrase',
+ input: 'These are words in a sentence. This is a sentence with words.',
+ searchMatches: ['words in a sentence'],
+ expected: '<p>These are <span class="search-highlight">words in a sentence</span>. This is a sentence with words.</p>',
+ }, {
+ name: 'search match highlighting with at mentions',
+ input: 'These are @words in a @sentence.',
+ searchMatches: ['@words', 'sentence'],
+ expected: '<p>These are <span class="search-highlight"><span data-mention="words">@words</span></span> in a <span class="search-highlight"><span data-mention="sentence.">@sentence.</span></span></p>',
+ }, {
+ name: 'search match highlighting in a code span',
+ input: 'These are `words in a sentence`.',
+ searchMatches: ['words'],
+ expected: '<p>These are <span class="codespan__pre-wrap"><code><span class="search-highlight">words</span> in a sentence</code></span>.</p>',
+ }, {
+ name: 'search match highlighting in a code block',
+ input: '```\nwords in a sentence\n```',
+ searchMatches: ['words'],
+ expected:
+ '<div class="post-code post-code--wrap">' +
+ '<code class="hljs">' +
+ '<div class="post-code__search-highlighting">' +
+ '<span class="search-highlight">words</span> in a sentence\n' +
+ '</div>' +
+ 'words in a sentence\n' +
+ '</code>' +
+ '</div>',
+ }, {
+ name: 'search match highlighting in link text',
+ input: 'These are [words in a sentence](https://example.com).',
+ searchMatches: ['words'],
+ expected: '<p>These are <a class="theme markdown__link" href="https://example.com" rel="noreferrer" target="_blank"><span class="search-highlight">words</span> in a sentence</a>.</p>',
+ }, {
+ name: 'search match highlighting in link url',
+ input: 'These are [words in a sentence](https://example.com).',
+ searchMatches: ['example'],
+ expected: '<p>These are <a class="theme markdown__link search-highlight" href="https://example.com" rel="noreferrer" target="_blank">words in a sentence</a>.</p>',
+ }];
+
+ for (const testCase of testCases) {
+ it(testCase.name, () => {
+ const options = {
+ atMentions: 'atMentions' in testCase ? testCase.atMentions : true,
+ mentionHighlight: 'mentionHighlight' in testCase ? testCase.mentionHighlight : true,
+ mentionKeys: testCase.mentionKeys,
+ searchMatches: testCase.searchMatches,
+ searchTerm: testCase.searchTerm || '',
+ };
+ const output = TextFormatting.formatText(testCase.input, options).trim();
+
+ expect(output).toEqual(testCase.expected);
+ });
+ }
+
+ it('wildcard highlighting', () => {
+ assertTextMatch('foobar', 'foo*', 'foo', 'bar');
+ assertTextMatch('foo1bar', 'foo1*', 'foo1', 'bar');
+ assertTextMatch('foo_bar', 'foo_*', 'foo_', 'bar');
+ assertTextMatch('foo.bar', 'foo.*', 'foo.', 'bar');
+ assertTextMatch('foo?bar', 'foo?*', 'foo?', 'bar');
+ assertTextMatch('foo bar', 'foo*', 'foo', ' bar');
+ assertTextMatch('foo bar', 'foo *', 'foo', ' bar');
+ assertTextMatch('foo⺑bar', 'foo⺑*', 'foo⺑', 'bar');
+
+ function assertTextMatch(input, search, expectedMatch, afterMatch) {
+ expect(TextFormatting.formatText(input, {searchTerm: search}).trim()).
+ toEqual(`<p><span class="search-highlight">${expectedMatch}</span>${afterMatch}</p>`);
+ }
+ });
+});