OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:15:06 AM	rwxr-xr-x
📄 AddOnManagerTest.ts	2.71 KB	02/20/2020 05:44:53 AM	rw-r--r--
📄 ClickContentEditableFalseTest.ts	3.13 KB	02/20/2020 05:44:53 AM	rw-r--r--
📄 DragDropOverridesTest.ts	1.55 KB	02/20/2020 05:44:54 AM	rw-r--r--
📄 EditorForcedSettingsTest.ts	904 bytes	02/20/2020 05:44:54 AM	rw-r--r--
📄 EditorManagerTest.ts	7.41 KB	02/20/2020 05:44:55 AM	rw-r--r--
📄 EditorRemoveTest.ts	2.58 KB	02/20/2020 05:44:56 AM	rw-r--r--
📄 EditorRemovedApiTest.ts	2.98 KB	02/20/2020 05:44:55 AM	rw-r--r--
📄 EditorRtlTest.ts	1.39 KB	02/20/2020 05:44:56 AM	rw-r--r--
📄 EditorSettingsTest.ts	14.57 KB	02/20/2020 05:44:57 AM	rw-r--r--
📄 EditorTest.ts	15.89 KB	02/20/2020 05:44:57 AM	rw-r--r--
📄 EditorUploadTest.ts	11.16 KB	02/20/2020 05:44:58 AM	rw-r--r--
📄 EditorViewIframeTest.ts	3.35 KB	02/20/2020 05:44:58 AM	rw-r--r--
📄 EditorViewInlineTest.ts	3.25 KB	02/20/2020 05:44:59 AM	rw-r--r--
📄 FontSelectTest.ts	4.79 KB	02/20/2020 05:44:59 AM	rw-r--r--
📄 ForceBlocksTest.ts	4.89 KB	02/20/2020 05:45:00 AM	rw-r--r--
📄 FormatterApplyTest.ts	83.91 KB	02/20/2020 05:45:00 AM	rw-r--r--
📄 FormatterCheckTest.ts	10.05 KB	02/20/2020 05:45:01 AM	rw-r--r--
📄 FormatterRemoveTest.ts	24.06 KB	02/20/2020 05:45:01 AM	rw-r--r--
📄 FormattingCommandsTest.ts	19.5 KB	02/20/2020 05:45:02 AM	rw-r--r--
📄 InlineEditorRemoveTest.ts	1.17 KB	02/20/2020 05:45:03 AM	rw-r--r--
📄 InlineEditorSaveTest.ts	1.19 KB	02/20/2020 05:45:03 AM	rw-r--r--
📄 JqueryIntegrationTest.disabled	4.5 KB	02/20/2020 05:45:04 AM	rw-r--r--
📄 MiscCommandsTest.ts	3.61 KB	02/20/2020 05:45:05 AM	rw-r--r--
📄 ModeTest.ts	4.18 KB	02/20/2020 05:45:05 AM	rw-r--r--
📄 NotificationManagerTest.ts	4.01 KB	02/20/2020 05:45:06 AM	rw-r--r--
📄 SelectionOverridesTest.ts	10.48 KB	02/20/2020 05:45:06 AM	rw-r--r--
📄 ShortcutsTest.ts	3.67 KB	02/20/2020 05:45:07 AM	rw-r--r--
📄 UndoManagerTest.ts	14.65 KB	02/20/2020 05:45:07 AM	rw-r--r--
📄 WindowManagerTest.ts	1.29 KB	02/20/2020 05:45:08 AM	rw-r--r--
📁 annotate	-	02/20/2020 06:12:41 AM	rwxr-xr-x
📁 api	-	02/20/2020 06:34:15 AM	rwxr-xr-x
📁 bookmark	-	02/20/2020 06:12:48 AM	rwxr-xr-x
📁 caret	-	02/20/2020 06:12:58 AM	rwxr-xr-x
📁 commands	-	02/20/2020 06:13:03 AM	rwxr-xr-x
📁 content	-	02/20/2020 06:13:08 AM	rwxr-xr-x
📁 delete	-	02/20/2020 06:13:20 AM	rwxr-xr-x
📁 dom	-	02/20/2020 06:13:35 AM	rwxr-xr-x
📁 file	-	02/20/2020 06:13:40 AM	rwxr-xr-x
📁 fmt	-	02/20/2020 06:13:49 AM	rwxr-xr-x
📁 focus	-	02/20/2020 06:13:55 AM	rwxr-xr-x
📁 geom	-	02/20/2020 06:13:59 AM	rwxr-xr-x
📁 html	-	02/20/2020 06:14:06 AM	rwxr-xr-x
📁 init	-	02/20/2020 06:14:16 AM	rwxr-xr-x
📁 keyboard	-	02/20/2020 06:14:32 AM	rwxr-xr-x
📁 newline	-	02/20/2020 06:14:36 AM	rwxr-xr-x
📁 selection	-	02/20/2020 06:14:47 AM	rwxr-xr-x
📁 undo	-	02/20/2020 06:14:53 AM	rwxr-xr-x
📁 util	-	02/20/2020 06:15:03 AM	rwxr-xr-x

Editing: FontSelectTest.ts

import { Assertions, Chain, GeneralSteps, Logger, Pipeline, UiFinder } from '@ephox/agar';
import { Arr, Fun, Strings } from '@ephox/katamari';
import { TinyApis, TinyLoader } from '@ephox/mcagar';
import { Element, TextContent } from '@ephox/sugar';
import Theme from 'tinymce/themes/silver/Theme';
import { UnitTest } from '@ephox/bedrock';
import { document } from '@ephox/dom-globals';

UnitTest.asynctest('browser.tinymce.core.FontSelectTest', function (success, failure) {
  Theme();

const systemFontStackVariants = [
    '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif;', // Oxide
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";', // Bootstrap
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;' // Wordpress
  ];

const sAssertSelectBoxDisplayValue = function (editor, title, expectedValue) {
    return Chain.asStep(Element.fromDom(document.body), [
      UiFinder.cFindIn('*[title="' + title + '"]'),
      Chain.mapper(Fun.compose(Strings.trim, TextContent.get)),
      Assertions.cAssertEq('Should be the expected display value', expectedValue)
    ]);
  };

TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);

Pipeline.async({}, [
      Logger.t('Font family and font size on initial page load', GeneralSteps.sequence([
        sAssertSelectBoxDisplayValue(editor, 'Font sizes', '12px'),
        sAssertSelectBoxDisplayValue(editor, 'Fonts', 'Arial')
      ])),

Logger.t('Font family and font size on paragraph with no styles', GeneralSteps.sequence([
        tinyApis.sSetContent('<p>a</p>'),
        tinyApis.sFocus,
        tinyApis.sSetCursor([0, 0], 0),
        tinyApis.sNodeChanged,
        // p content style is 12px which does not match any pt values in the font size select values
        sAssertSelectBoxDisplayValue(editor, 'Font sizes', '12px'),
        sAssertSelectBoxDisplayValue(editor, 'Fonts', 'Arial')
      ])),

Logger.t('Font family and font size on heading with no styles', GeneralSteps.sequence([
        tinyApis.sSetContent('<h1>a</h1>'),
        tinyApis.sFocus,
        tinyApis.sSetCursor([0, 0], 0),
        tinyApis.sNodeChanged,
        // h1 content style is 32px which matches 24pt in the font size select values so it should be converted
        sAssertSelectBoxDisplayValue(editor, 'Font sizes', '24pt'),
        sAssertSelectBoxDisplayValue(editor, 'Fonts', 'Arial')
      ])),

Logger.t('Font family and font size on paragraph with styles that do match font size select values', GeneralSteps.sequence([
        tinyApis.sSetContent('<p style="font-family: Times; font-size: 17px;">a</p>'),
        tinyApis.sFocus,
        tinyApis.sSetCursor([0, 0], 0),
        tinyApis.sNodeChanged,
        // the following should be converted and pick up 12.75pt, although there's a rounded 13pt in the dropdown as well
        sAssertSelectBoxDisplayValue(editor, 'Font sizes', '12.75pt'),
        sAssertSelectBoxDisplayValue(editor, 'Fonts', 'Times')
      ])),

Logger.t('Font family and font size on paragraph with styles that do not match font size select values', GeneralSteps.sequence([
        tinyApis.sSetContent('<p style="font-family: Times; font-size: 18px;">a</p>'),
        tinyApis.sFocus,
        tinyApis.sSetCursor([0, 0], 0),
        tinyApis.sNodeChanged,
        // the following should stay as 18px because there's no matching pt value in the font size select values
        sAssertSelectBoxDisplayValue(editor, 'Font sizes', '18px'),
        sAssertSelectBoxDisplayValue(editor, 'Fonts', 'Times')
      ])),

Logger.t('System font stack variants on a paragraph show "System Font" as the font name', GeneralSteps.sequence([
        tinyApis.sSetContent(Arr.foldl(systemFontStackVariants, (acc, font) => {
          return acc + '<p style="font-family: ' + font.replace(/"/g, '\'') + '"></p>';
        }, '')),
        tinyApis.sFocus,
        ...Arr.bind(systemFontStackVariants, (_, idx) => {
          return [
            tinyApis.sSetCursor([idx, 0], 0),
            tinyApis.sNodeChanged,
            sAssertSelectBoxDisplayValue(editor, 'Fonts', 'System Font')
          ];
        })
      ]))
    ], onSuccess, onFailure);
  }, {
    base_url: '/project/tinymce/js/tinymce',
    toolbar: 'fontsizeselect fontselect',
    content_style: [
      '.mce-content-body { font-family: Helvetica; font-size: 42px; }',
      '.mce-content-body p { font-family: Arial; font-size: 12px; }',
      '.mce-content-body h1 { font-family: Arial; font-size: 32px; }'
    ].join(''),
    fontsize_formats: '12pt 12.75pt 13pt 24pt 32pt'
  }, success, failure);
});