Skip to content

Make examples or demo's testable and demoed in JSBin #87

@justinbmeyer

Description

@justinbmeyer

I'd like to make it possible to:

  • - create a demo who shows up in JSBin - related issue
  • - create a demo whose code is testable by some form of CI

Writing an example like:

@example

This is some text describing the example code.

  @src html
  <h1>Hello World</h1>
  <script src='../steal/steal.js'></script>

  @src js
  import $ from 'jquery'
  $("h1").fadeIn();

  @src css
  h1{ display: none}

  @src test
  import js from 'js'
  import QUnit from 'steal-qunit'
  QUnit.module("hello-world")
  QUnit.test("fadeIn", function(){

  })

Issues:

"runtime" issues

  • JSBin will run "src" code right away.
  • But while testing, the "src" code will mostly need to be executed within the extra test.

src test could be written like:

  @src test
  import QUnit from 'steal-qunit'
  QUnit.module("hello-world");
  QUnit.asyncTest("fadeIn", function(){
    Promise.all([
      'html!add-html-to-qunit-fixture', 'js', 'css!css'
    ]).then(function(){
      QUnit.equal( $("h1").css("opacity"), 1);
      start();
    })
  })

Issues:

  • the html needs to be added to qunit-fixture and the CSS needs to be loaded before JS runs.
  • the html has steal in it

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions