remade wysiwyg commit to push in a new PR

test/ui-testing/CustomInsert.test.js

@@ -7,61 +7,65 @@ beforeAll(async () => {
 
 describe('Custom Insert text', () => {
   test('Add Custom Insert text in rich text mode', async () => {
-    if (await page.evaluate(() => $(".woofmark-mode-markdown").is(":disabled"))) {
+    try {
+      if (await page.evaluate(() => $(".woofmark-mode-markdown").is(":disabled"))) {
+        await page.click('.woofmark-mode-wysiwyg');
+      }
+      await page.waitForSelector('.ple-module-body');
+      // Click on insert text button
+      await page.click('.woofmark-command-insert');
+      // Select the option 'Nodes' from Menu: What Do you want to insert?
+      await page.waitForSelector('.dropdownMenu1');
+      await page.click('.dropdownMenu1');
+      await page.waitForSelector('.Nodes');
+      await page.click('.Nodes');
+      // Select the option 'List' from Menu: Insert as a?
+      await page.waitForSelector('.dropdownMenu2');
+      await page.click('.dropdownMenu2');
+      await page.waitForSelector('.List');
+      await page.click('.List');
+      // Add input tag
+      await page.$eval('.inputText', (el) => el.value = 'tag');
+      // Press the Go! button
+      await page.click('.go1');
+      await page.click('.woofmark-command-insert');
+      // Evaluate the expression
+      await page.waitForSelector('.powertags');
+      const stringIsIncluded = await page.evaluate(() => document.querySelector('.wk-wysiwyg').textContent.includes("Power tag: nodes:tag"));
+      expect(stringIsIncluded).toBe(true);
+
+      await page.waitForSelector('.woofmark-mode-markdown');
+      await page.click('.woofmark-mode-markdown');
+      await page.screenshot({path: 'buddy-screenshot1.png', fullPage: true});
+      await page.waitForSelector('.ple-module-body');
+      // await page.evaluate(() => document.querySelector('.ple-textarea').value += ' ');
+      // Click on insert text button
+      await page.click('.woofmark-command-insert');
+      // Select the option 'Notes' from Menu: What Do you want to insert?
+      await page.waitForSelector('.dropdownMenu1');
+      await page.click('.dropdownMenu1');
+      await page.screenshot({path: 'buddy-screenshot11.png', fullPage: true});
+      await page.waitForSelector('.Notes');
+      await page.screenshot({path: 'buddy-screenshot2.png', fullPage: true});
+      await page.click('.Notes');
+      await page.screenshot({path: 'buddy-screenshot3.png'});
+      // Select the option 'List' from Menu: Insert as a?
+      await page.waitForSelector('.dropdownMenu2');
+      await page.click('.dropdownMenu2');
+      await page.waitForSelector('.List');
+      await page.click('.List');
+      await page.screenshot({path: 'buddy-screenshot4.png'});
+      // Add input tag
+      await page.$eval('.inputText', (el) => el.value = 'tag');
+      // Press the Go! button
+      await page.click('.go1');
+      await page.click('.woofmark-command-insert');
+      // Evaluate the expression
+      const stringIsIncluded2 = await page.evaluate(() => document.querySelector('.ple-textarea').value.includes('[notes:tag]'));
+      expect(stringIsIncluded2).toBe(true);
       await page.click('.woofmark-mode-wysiwyg');
+    } catch (err) {
+      throw new Error(err);
     }
-    await page.waitForSelector('.ple-module-body');
-    // Click on insert text button
-    await page.click('.woofmark-command-insert');
-    // Select the option 'Nodes' from Menu: What Do you want to insert?
-    await page.waitForSelector('.dropdownMenu1');
-    await page.click('.dropdownMenu1');
-    await page.waitForSelector('.Nodes');
-    await page.click('.Nodes');
-    // Select the option 'List' from Menu: Insert as a?
-    await page.waitForSelector('.dropdownMenu2');
-    await page.click('.dropdownMenu2');
-    await page.waitForSelector('.List');
-    await page.click('.List');
-    // Add input tag
-    await page.$eval('.inputText', (el) => el.value = 'tag');
-    // Press the Go! button
-    await page.click('.go1');
-    await page.click('.woofmark-command-insert');
-    // Evaluate the expression
-    await page.waitForSelector('.powertags');
-    const stringIsIncluded = await page.evaluate(() => document.querySelector('.wk-wysiwyg').textContent.includes("Power tag: nodes:tag"));
-    expect(stringIsIncluded).toBe(true);
-
-    await page.waitForSelector('.woofmark-mode-markdown');
-    await page.click('.woofmark-mode-markdown');
-    await page.screenshot({path: 'buddy-screenshot1.png', fullPage: true});
-    await page.waitForSelector('.ple-module-body');
-    // await page.evaluate(() => document.querySelector('.ple-textarea').value += ' ');
-    // Click on insert text button
-    await page.click('.woofmark-command-insert');
-    // Select the option 'Notes' from Menu: What Do you want to insert?
-    await page.waitForSelector('.dropdownMenu1');
-    await page.click('.dropdownMenu1');
-    await page.screenshot({path: 'buddy-screenshot11.png', fullPage: true});
-    await page.waitForSelector('.Notes');
-    await page.screenshot({path: 'buddy-screenshot2.png', fullPage: true});
-    await page.click('.Notes');
-    await page.screenshot({path: 'buddy-screenshot3.png'});
-    // Select the option 'List' from Menu: Insert as a?
-    await page.waitForSelector('.dropdownMenu2');
-    await page.click('.dropdownMenu2');
-    await page.waitForSelector('.List');
-    await page.click('.List');
-    await page.screenshot({path: 'buddy-screenshot4.png'});
-    // Add input tag
-    await page.$eval('.inputText', (el) => el.value = 'tag');
-    // Press the Go! button
-    await page.click('.go1');
-    await page.click('.woofmark-command-insert');
-    // Evaluate the expression
-    const stringIsIncluded2 = await page.evaluate(() => document.querySelector('.ple-textarea').value.includes('[notes:tag]'));
-    expect(stringIsIncluded2).toBe(true);
-    await page.click('.woofmark-mode-wysiwyg');
   }, timeout);
 });

test/ui-testing/re-wysiwyg.test.js

@@ -0,0 +1,53 @@
+const timeout = process.env.SLOWMO ? 60000 : 15000;
+const fs = require('fs');
+let wysiwyg;
+
+beforeAll(async () => {
+  path = fs.realpathSync('file://../examples/index.html');
+  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
+  await page.evaluate(() => {
+    wysiwyg = PublicLab.Woofmark(
+        document.querySelector('.ple-textarea'),
+        {options: {}},
+        {options: {}}
+    );
+  });
+});
+
+describe('Wysiwyg', () => {
+  test('converts markdown to html and back', async () => {
+    const markdown = "# About my project\n\nI have been working on [this thing](/link) and wanted to share.\n\nMy goals have been:\n\n- simple to make\n- ease of use\n- low cost\n\nAnd then, after #balloon-mapping with @eustatic, tables:\n\n| col1 | col2 | col3 |\n|------|------|------|\n| foo  | bar  | baz  |\n| food | bars | bats |\n\n```javascript\n\n// Code could go here\nvar myVariable = 4;\n\n```";
+    const html = '<h1 id="about-my-project">About my project</h1>\n<p>I have been working on <a href="/link">this thing</a> and wanted to share.</p>\n<p>My goals have been:</p>\n<ul>\n<li>simple to make</li>\n<li>ease of use</li>\n<li>low cost</li>\n</ul>\n<p>And then, after <a href="/tag/balloon-mapping">#balloon-mapping</a> with <a href="/profile/eustatic">@eustatic</a>, tables:</p>\n<table>\n<thead>\n<tr>\n<th>col1</th>\n<th>col2</th>\n<th>col3</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>foo</td>\n<td>bar</td>\n<td>baz</td>\n</tr>\n<tr>\n<td>food</td>\n<td>bars</td>\n<td>bats</td>\n</tr>\n</tbody>\n</table>\n<pre class="md-code-block"><code class="md-code md-lang-javascript">\n<span class="md-code-comment">// Code could go here</span>\n<span class="md-code-keyword">var</span> myVariable = <span class="md-code-number">4</span>;\n\n</code></pre>\n';
+
+    const markdown2HTML = await page.evaluate(() => wysiwyg.parseMarkdown("# About my project\n\nI have been working on [this thing](/link) and wanted to share.\n\nMy goals have been:\n\n- simple to make\n- ease of use\n- low cost\n\nAnd then, after #balloon-mapping with @eustatic, tables:\n\n| col1 | col2 | col3 |\n|------|------|------|\n| foo  | bar  | baz  |\n| food | bars | bats |\n\n```javascript\n\n// Code could go here\nvar myVariable = 4;\n\n```"));
+    const html2Markdown = await page.evaluate(() => wysiwyg.parseHTML('<h1 id="about-my-project">About my project</h1>\n<p>I have been working on <a href="/link">this thing</a> and wanted to share.</p>\n<p>My goals have been:</p>\n<ul>\n<li>simple to make</li>\n<li>ease of use</li>\n<li>low cost</li>\n</ul>\n<p>And then, after <a href="/tag/balloon-mapping">#balloon-mapping</a> with <a href="/profile/eustatic">@eustatic</a>, tables:</p>\n<table>\n<thead>\n<tr>\n<th>col1</th>\n<th>col2</th>\n<th>col3</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>foo</td>\n<td>bar</td>\n<td>baz</td>\n</tr>\n<tr>\n<td>food</td>\n<td>bars</td>\n<td>bats</td>\n</tr>\n</tbody>\n</table>\n<pre class="md-code-block"><code class="md-code md-lang-javascript">\n<span class="md-code-comment">// Code could go here</span>\n<span class="md-code-keyword">var</span> myVariable = <span class="md-code-number">4</span>;\n\n</code></pre>\n'));
+
+    // convert
+    expect(markdown2HTML).toEqual(html);
+    expect(html2Markdown).toEqual(markdown);
+
+    // and back
+    // this won't match exactly, because markdown changes [links](/url)
+    // to [links][1] and adds a `[1] /url` footnote.
+    // So we use the already-converted version:
+    expect(await page.evaluate(() => wysiwyg.parseHTML('<h1 id="about-my-project">About my project</h1>\n<p>I have been working on <a href="/link">this thing</a> and wanted to share.</p>\n<p>My goals have been:</p>\n<ul>\n<li>simple to make</li>\n<li>ease of use</li>\n<li>low cost</li>\n</ul>\n<p>And then, after <a href="/tag/balloon-mapping">#balloon-mapping</a> with <a href="/profile/eustatic">@eustatic</a>, tables:</p>\n<table>\n<thead>\n<tr>\n<th>col1</th>\n<th>col2</th>\n<th>col3</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>foo</td>\n<td>bar</td>\n<td>baz</td>\n</tr>\n<tr>\n<td>food</td>\n<td>bars</td>\n<td>bats</td>\n</tr>\n</tbody>\n</table>\n<pre class="md-code-block"><code class="md-code md-lang-javascript">\n<span class="md-code-comment">// Code could go here</span>\n<span class="md-code-keyword">var</span> myVariable = <span class="md-code-number">4</span>;\n\n</code></pre>\n'))).toEqual(markdown);
+    // this one should be easier, as the parser re-inserts
+    // the URLs from the footers:
+    expect(await page.evaluate(() => wysiwyg.parseMarkdown("# About my project\n\nI have been working on [this thing](/link) and wanted to share.\n\nMy goals have been:\n\n- simple to make\n- ease of use\n- low cost\n\nAnd then, after #balloon-mapping with @eustatic, tables:\n\n| col1 | col2 | col3 |\n|------|------|------|\n| foo  | bar  | baz  |\n| food | bars | bats |\n\n```javascript\n\n// Code could go here\nvar myVariable = 4;\n\n```"))).toEqual(html);
+  });
+
+  test("parses @usernames and #tagnames and #tag-names", async () => {
+    expect(await page.evaluate(() => wysiwyg.parseMarkdown('@hodor'))).toEqual('<p><a href="/profile/hodor">@hodor</a></p>\n');
+    expect(await page.evaluate(() => wysiwyg.parseMarkdown('#spectrometer'))).toEqual('<p><a href="/tag/spectrometer">#spectrometer</a></p>\n');
+    expect(await page.evaluate(() => wysiwyg.parseMarkdown('#balloon-mapping'))).toEqual('<p><a href="/tag/balloon-mapping">#balloon-mapping</a></p>\n');
+  });
+
+  test("runs post-conversion filter", async () => {
+    await page.evaluate(() => wysiwyg.setMode('html'));
+    await page.evaluate(() => {
+      table = "<table><tr><td>Hi</td></tr></table>";
+      wysiwyg.value(table);
+    });
+    expect(await page.evaluate(() => wysiwyg.value(table))).toEqual("| Hi|");
+  });
+}, timeout);