CODEWITHSUNDEEP
jasminekarma-runnerriot.js
Justin808
Justin808

Reputation: 21522

Getting a karma test to work with a static HTML file

I've got a HTML file that I want to run some tests on:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Karma Test</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/normalize/3.0.3/normalize.css" />
</head>

<body>
  <!-- Basic Buttons -->
  <rui-button id="test1">Test</rui-button>

  <!-- Disabled Buttons -->
  <rui-button id="test2" disabled>Test</rui-button>
  <rui-button id="test3" disabled="disabled">Test</rui-button>
  <rui-button id="test4" disabled="{ true }">Test</rui-button>

  <script src="http://cdn.jsdelivr.net/riot/2.6.2/riot.js"></script>
  <script src="rui-full.js"></script>
  <script>
  riot.mount('*');
  </script>
</body>

</html>

I've setup my karma.conf, I think correctly:

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    plugins: [
      'karma-jasmine',
      'karma-jasmine-html-reporter',
      'karma-html2js-preprocessor',
      'karma-chrome-launcher',
      'karma-phantomjs-launcher',
      'karma-riot'
    ],
    preprocessors: {
      '**/*.html': ['html2js']
    },
    files: [
      { pattern: '../../build/demo/rui-full.js', included: true, watched: false, served: true },
      './**/*.html',
      './**/*.spec.js'
    ],
    reporters: ['progress', 'kjhtml'],
    singleRun: true,
    html2JsPreprocessor: {
      processPath: function(filePath) {
        return filePath.split('/')[1];
      }
    }
  });
};

And I've written a simple simple test:

describe('rui-button tests', function() {

  beforeEach(function (done) {
    document.body.innerHTML = __html__['ui-button.html'];
  });

  it('Create basic button', function() {
    var el = document.querySelector('#test1');
    expect(el).toBeTruthy();
    console.log(el.innerHTML)
  });
});

Now the beforEach works, and the html is set. But its not working as expected. I'm not sure if the rui-full.js script is loading or not. I don't think it is as el.innerHTML is just "Test", it's not been replaced with the riot.js tag.

Do I have things setup correctly? Is there a way to log out any errors?

I'm running my test with the cli:

karma start tests/karma.config.js

Upvotes: 1

Views: 1364

Answers (1)

vitomd
vitomd

Reputation: 806

You have to mount the tags in your code like this

  before(function() {
    var html = document.createElement('rui-button')
    document.body.appendChild(html)
    tag = riot.mount('hello')[0]
  });

  it('mounts a rui-button tag', function() {
    expect(tag).to.exist
    expect(tag.isMounted).to.be.true
  })

Here is a tutorial for testing Riot with mocha+chai+karma https://github.com/vitogit/tdd-mocha-chai-riot Or if you don´t want to use karma : https://github.com/vitogit/minimalistic-riotjs-testing online version: http://plnkr.co/edit/BFOijJ?p=preview

Upvotes: 1

Related Questions