javascript एक वेब पेज को बिना हेडले जैस्मीन स्पेक में चलाना PhantomJS




jasmine jsdom (3)

मैं localhost से किसी पृष्ठ में बिना हेडलेस जैस्मीन के विशिष्ट विवरण में कैसे पढ़ूं, तो परीक्षण के मामले DOM तत्वों पर काम कर सकते हैं?

मेरा Gulp कार्य सफलतापूर्वक इकाई परीक्षण के लिए चमेली दौड़ रहा है, और अब मुझे localhost से भरे गए पूर्ण वेब पृष्ठों की पुष्टि करने के लिए एकीकरण परीक्षण बनाने की आवश्यकता है I मैं फोंटमजेएस को चलाने के लिए गुलप्पास gulp-jasmine-browser प्लगइन का उपयोग कर रहा हूं।

उदाहरण:

gulpfile.js

var gulp =           require('gulp');
var jasmineBrowser = require('gulp-jasmine-browser');

function specRunner() {
   gulp.src(['node_modules/jquery/dist/jquery.js', 'src/js/*.js', 'spec/*.js'])
      .pipe(jasmineBrowser.specRunner({ console: true }))
      .pipe(jasmineBrowser.headless());
   }

gulp.task('spec', specRunner);


कल्पना / गाड़ी-spec.js

describe('Cart component', function() {

   it('displays on the gateway page', function() {
      var page = loadWebPage('http://localhost/');  //DOES NOT WORK
      var cart = page.find('#cart');
      expect(cart.length).toBe(1);
      });

   });

कोई loadWebPage() फ़ंक्शन नहीं है यह केवल कार्यक्षमता को स्पष्ट करने के लिए है जो मुझे विश्वास है कि आवश्यक है।


मैं काम करने के लिए प्रतीत होता है कि एक साथ निम्नलिखित कोड डाल दिया कृपया मेरे रिपो को देखने के लिए स्वतंत्र और अपने स्वयं के वातावरण में पुष्टि करें।

package.json

{
  "name": "40646680",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "gulp jasmine"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-jasmine-browser": "^1.7.1",
    "jasmine": "^2.5.2",
    "phantomjs": "^2.1.7"
  }
}

gulpfile.js

(() => {
    "use strict";

    var gulp = require("gulp"),
        jasmineBrowser = require("gulp-jasmine-browser");

    gulp.task("jasmine", () => {
        return gulp.src("test/*.js")
            .pipe(jasmineBrowser.specRunner({
                console: true
            }))
            .pipe(jasmineBrowser.headless());
    });
})();

परीक्षा / sampleJasmine.js

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
    it("contains failing spec with an expectation", function() {
        expect(true).toBe(false);
    });
});

क्रियान्वयन

Bob [email protected] F:\Development\\40646680
> npm test

> 40646680@1.0.0 test F:\Development\\40646680
> gulp jasmine

[21:56:44] Using gulpfile F:\Development\\40646680\gulpfile.js
[21:56:44] Starting 'jasmine'...
[21:56:44] Jasmine server listening on port 8000
.F
Failures:
1) A suite contains failing spec with an expectation
1.1) Expected true to be false.

2 specs, 1 failure
Finished in 0 seconds
[21:56:49] 'jasmine' errored after 4.26 s
[21:56:49] Error in plugin 'gulp-jasmine-browser'
Message:
    1 failure
npm ERR! Test failed.  See above for more details.

निर्भरता

node 7.2
npm 3.9.3
jasmine 2.5.2
phantomjs 2.1.7 
gulp 3.9.1

एक सेलेनियम , वेबड्राइवरियो , नाइटविच। जेएस , प्रोट्रैक्टर आदि जैसी एंड-टू-एंड टेस्टिंग फ्रेमवर्क ऐसे मामले में अधिक उपयुक्त हैं।

gulp-jasmine-browser प्लग gulp-jasmine-browser इन अभी भी ब्राउज़र परिवेश में यूनिट परीक्षण के बारे में है। पृष्ठों के बीच नेविगेट करना संभव नहीं है


बचाव के लिए jsdom!

यह पता चला है कि एक वेब पेज को बिना हेड जैस्मीन स्पेस में लोड करना बहुत आसान है ... लेकिन आपको जेएसडो के लिए फेंटमोज एस को स्वैप करना होगा।

रणनीति:

  1. जैस्मीन के beforeAll() का उपयोग करें जो कि एक समारोह को कॉल करने के लिए जो वेब पेज का अनुरोध करने के लिए JSDOM.fromURL()
  2. एक बार वेब पेज को डीओएम में लोड किया गया है, अपने परीक्षण के मामलों में उपयोग के लिए window और बेनकाब करें।
  3. अंत में, कॉल करने के लिए done() कॉल करने के लिए परीक्षण अब चलाने के लिए तैयार हैं।

परीक्षण चलाने के बाद window को बंद करना सुनिश्चित करें।

spec.js

const url  = 'http://dnajs.org/';
const { JSDOM } = require('jsdom');
let window, $;
function loadWebPage(done) {
   function handleWebPage(dom) {
      function waitForScripts() {
         window = dom.window;
         $ = dom.window.jQuery;
         done();
         }
      dom.window.onload = waitForScripts;
      }
   const options = { resources: 'usable', runScripts: 'dangerously' };
   JSDOM.fromURL(url, options).then(handleWebPage);
   }
function closeWebPage() { window.close(); }

describe('The web page', () => {

   beforeAll(loadWebPage);
   afterAll(closeWebPage);

   it('has the correct URL', () => {
      expect(window.location.href).toBe(url);
      });

   it('has exactly one header, main, and footer', () => {
      const actual =   {
          header: $('body >header').length,
          main:   $('body >main').length,
          footer: $('body >footer').length
          };
      const expected = { header: 1, main: 1, footer: 1 };
      expect(actual).toEqual(expected);
      });

   });


टेस्ट आउटपुट


नोट: स्क्रीनशॉट के ऊपर एक समान Mocha का नमूना है क्योंकि Mocha एक अच्छा डिफ़ॉल्ट रिपोर्टर है।

परियोजना

यदि आप चाहते हैं कि यह अपने आप से बाहर है, तो यह GitHub पर है:
https://github.com/dnajs/load-web-page-jsdom-jasmine


संपादित किया गया : जेएसडॉम 11 के लिए अपडेट किया गया





headless-browser