Add vimwiki-wasm browser tests #112

chipsenkbeil · 2021-05-24T05:54:14Z

Need to add tests that validate that the package can be built and used in a browser. Need to figure out if going webpack or non-weback (web target) and then set up a headless browser test via github actions.

See https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/browsers.html and https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/continuous-integration.html#github-actions

Also, saving this non-webpack example as backup since it isn't checked in anywhere:

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <pre>
      <code id="vimwiki-snippet">
=== Header ===

This is a snippet of vimwiki that is displayed in a browser.

[[some link]]

[[diary:2021-05-18|My diary link]]

:my:tags:
      </code>
    </pre>
    <hr />
    <div id="vimwiki-output"></div>
    <!-- Note the usage of `type=module` here as this is an ES6 module -->
    <script type="module">
      import init, { parse_vimwiki_str } from './vimwiki_wasm.js';

      async function run() {
        await init();

        // Load the code snippet
        const code = document.getElementById("vimwiki-snippet");

        // Parse the code into an object
        const obj = parse_vimwiki_str(code.innerText);

        // Find regions in code that contain headers and highlight them by
        // transforming that text into spans with colors
        const regions = obj.find_all_header_regions();
        Object.values(regions).forEach(region => {
            console.log(region);
            // Select the header
            const range = new Range();
            range.setStart(code.firstChild, region.offset);
            range.setEnd(code.firstChild, region.len);

            // Build a colored version
            const colored = document.createElement("span");
            colored.style.color = "red";
            colored.innerText = range.toString();

            range.deleteContents();
            range.insertNode(colored);
        });

        // Inject HTML into output destination
        const output = document.getElementById("vimwiki-output");
        output.insertAdjacentHTML("afterbegin", obj.to_html_str());
      }

      run();
    </script>
  </body>
</html>

chipsenkbeil · 2021-05-31T00:59:37Z

Updated test example to show how to filter now:

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <pre>
      <code id="vimwiki-snippet">
=== Header ===

This is a snippet of vimwiki that is displayed in a browser.

[[some link]]

[[diary:2021-05-18|My diary link]]

:my:tags:
      </code>
    </pre>
    <hr />
    <div id="vimwiki-output"></div>
    <!-- Note the usage of `type=module` here as this is an ES6 module -->
    <script type="module">
      import init, { parse_vimwiki_str } from './vimwiki_wasm.js';

      async function run() {
        await init();

        // Load the code snippet
        const code = document.getElementById("vimwiki-snippet");

        // Parse the code into an object
        const page = parse_vimwiki_str(code.innerText);

        // Find regions in code that contain headers and highlight them by
        // transforming that text into spans with colors
        const regions = page.descendants
          .filter(e => e.is_block())
          .map(e => e.into_block())
          .filter(e => e.is_header())
          .map(e => e.into_header().region);
        Object.values(regions).forEach(region => {
            console.log(region.to_debug_str());
            // Select the header
            const range = new Range();
            range.setStart(code.firstChild, region.offset);
            range.setEnd(code.firstChild, region.len);

            // Build a colored version
            const colored = document.createElement("span");
            colored.style.color = "red";
            colored.innerText = range.toString();

            range.deleteContents();
            range.insertNode(colored);
        });

        // Inject HTML into output destination
        const output = document.getElementById("vimwiki-output");
        output.insertAdjacentHTML("afterbegin", page.to_html_str());
      }

      run();
    </script>
  </body>
</html>

chipsenkbeil added this to the backlog milestone May 24, 2021

chipsenkbeil added the tests Improvements or additions to tests label May 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add vimwiki-wasm browser tests #112

Add vimwiki-wasm browser tests #112

chipsenkbeil commented May 24, 2021 •

edited

Loading

chipsenkbeil commented May 31, 2021

Add vimwiki-wasm browser tests #112

Add vimwiki-wasm browser tests #112

Comments

chipsenkbeil commented May 24, 2021 • edited Loading

chipsenkbeil commented May 31, 2021

chipsenkbeil commented May 24, 2021 •

edited

Loading