I have Rails 5.1.x and Vue.js 2.4.x; I do not mix Rails and Vue.js in the frontend – only Vue.js is used
I added the following packages:
package.json
... "devDependencies": { "jasmine": "^2.8.0", "karma": "^1.7.1", "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "^1.1.0", "webpack-dev-server": "^2.6.1" }, ... Q1: Where do I do the configuration? In webpack/test.js or some karma.conf.js file
Q2: What is in this conf file?
Q3: Do I need to install karma-webpack?
EDIT 1
I was able to install karma, jasmine and es6 support, BUT it's still not correctly integrated in the RoR ecosystem
/package.json
... "devDependencies": { "jasmine": "^2.8.0", "karma": "^1.7.1", "karma-cli": "^1.0.1", "karma-jasmine": "^1.1.0", "karma-phantomjs-launcher": "^1.0.4", "karma-webpack": "^2.0.4", "standard": "^10.0.3", "webpack-dev-server": "^2.6.1" }, ... /karma.conf.js
module.exports = function(config) { config.set({ basePath: 'app/javascript/', browsers: ['PhantomJS'], files: [ { pattern: 'test/*.spec.js', watched: false }, { pattern: 'test/**/*.spec.js', watched: false } ], frameworks: ['jasmine'], preprocessors: { 'test/*.spec.js': ['webpack'], 'test/**/*.spec.js': ['webpack'], }, webpack: { module: { loaders: [ { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' } ] }, watch: true }, webpackServer: { noInfo: true } }) } /app/javascript/test/my_test.spec.js
describe("A suite", () => { it("contains spec with an expectation", () => { expect(true).toBe(true) }) }) $ karma start
25 09 2017 15:45:02.199:WARN [watcher]: All files matched by "/home/ubuntu/workspace/app/javascript/test/**/*.spec.js" were excluded or matched by prior matchers. 25 09 2017 15:45:02.217:WARN [watcher]: All files matched by "/home/ubuntu/workspace/app/javascript/test/**/*.spec.js" were excluded or matched by prior matchers. 25 09 2017 15:45:03.147:WARN [karma]: No captured browser, open http://0.0.0.0:8080/ 25 09 2017 15:45:03.156:WARN [karma]: Port 8080 in use 25 09 2017 15:45:03.156:WARN [karma]: Port 8081 in use 25 09 2017 15:45:03.157:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:8082/ 25 09 2017 15:45:03.157:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 25 09 2017 15:45:03.173:INFO [launcher]: Starting browser PhantomJS 25 09 2017 15:45:03.310:ERROR [phantomjs.launcher]: Fontconfig warning: ignoring C.UTF-8: not a valid language tag 25 09 2017 15:45:03.837:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket 1lM4B1iRIygqSYz3AAAA with id 19034471 PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.043 secs / 0.001 secs) Q1: Where do I do the configuration? In webpack/test.js or some karma.conf.js file
A1: karma.conf.js is working, but I don't think my approach is best
Q2: What is in this conf file?
A2: Still not sure
Q3: Do I need to install karma-webpack?
A3: Yes, I think so
Q4: What do I have to change to do the following (in RoR 5.1.x)?
From: https://vuejs.org/v2/guide/unit-testing.html
/app/javascript/test/components/my_component.spec.js
// Import Vue and the component being tested import Vue from 'vue' import MyComponent from 'path/to/MyComponent.vue' // Here are some Jasmine 2.0 tests, though you can // use any test runner / assertion library combo you prefer describe('MyComponent', () => { // Inspect the raw component options it('has a created hook', () => { expect(typeof MyComponent.created).toBe('function') }) // Evaluate the results of functions in // the raw component options it('sets the correct default data', () => { expect(typeof MyComponent.data).toBe('function') const defaultData = MyComponent.data() expect(defaultData.message).toBe('hello!') }) // Inspect the component instance on mount it('correctly sets the message when created', () => { const vm = new Vue(MyComponent).$mount() expect(vm.message).toBe('bye!') }) // Mount an instance and inspect the render output it('renders the correct message', () => { const Ctor = Vue.extend(MyComponent) const vm = new Ctor().$mount() expect(vm.$el.textContent).toBe('bye!') }) }) 1 Answers
Answers 1
I'd used a custom Webpack configurations in Karma earlier but that's just redundant Webpack and preprocessors logic I had. So I came up with this approach which seems correct to me.
I would recommend this: https://github.com/rails/webpacker/blob/master/docs/testing.md#karma-setup-for-typescript
P.S. I'm intentionally not copy-pasting the code snippets since the existing doc may change in future.
0 comments:
Post a Comment