I really want to create static site generator using reacts jsx templates/components. Jekyll and middleman had to be hacked to allow this...
But I've discovered http://www.metalsmith.io with plugin: https://github.com/yeojz/metalsmith-react-templates
I've following so far:
var Metalsmith = require('metalsmith');
var reactTemplate = require('metalsmith-react-templates');
Metalsmith(__dirname)
.clean(true)
.use(reactTemplate({
directory: 'templates',
isStatic: true
}))
.source('src')
.destination('build')
.build(function(err) {
if (err) throw err;
});
and jsx file:
var React = require('react');
var Entry = React.createClass({
render: function() {
return ();
}
});
module.exports = Entry;
when I run node build.js it errors out:
entry.jsx: Unexpected token
metalsmith-react-templates example seems to be outdated hence the problems?
Tried suggestion #:
4 | render: function() {
5 |
> 6 | return (<p>Entry</p>);
| ^
7 | }
8 | });
9 |
#salivan
If you're still having issues even after doing return (<p>Entry</p>);, it is highly possible that it's actually an issue from the babel compiler.
What version of babel are you using?
If it's version 6 and above, check that you've at least installed the babel-preset-react and the babel-preset-es2015 plugins.
Related
I am upgrading to Webpack 5 and I have an issue with the package jsonwebtoken (https://github.com/auth0/node-jsonwebtoken) that needs Buffer (at https://github.com/auth0/node-jsonwebtoken/blob/master/sign.js#L91)
Since Webpack 5 polyfills are not included for nodejs functions and wen I try to use the function sign from jsonwebtoken it throws the following error :
message: "Buffer is not defined"
stack: "ReferenceError: Buffer is not defined↵
at module.exports (webpack-internal:///./node_modules/jsonwebtoken/sign.js:91:26)↵
To solve the issue I installed https://github.com/feross/buffer with
npm install buffer
and in my webpack config I added
resolve: {
fallback: {
"Buffer": require.resolve('buffer/'),
}
or
resolve: {
fallback: {
"buffer": require.resolve('buffer/'),
}
I also tried
resolve: {
fallback: {
"buffer": require.resolve('buffer/').Buffer,
}
But this last one produce a Webpack schema error :
configuration.resolve.fallback['Buffer'] should be one of these:
[non-empty string, ...] | false | non-empty string
-> New request.
Details:
* configuration.resolve.fallback['Buffer'] should be an array:
[non-empty string, ...]
-> Multiple alternative requests.
* configuration.resolve.fallback['Buffer'] should be false.
-> Ignore request (replace with empty module).
* configuration.resolve.fallback['Buffer'] should be a non-empty string.
-> New request.
at validate (/home/ant1/packcity/front-pmd/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104:11)
Despite my trials it is not working and the error persists.
Did someone succeed in adding the polyfill for Buffer in their app bundled with Webpack ?
Any help would be really appreciated.
I just solved my issue by adding
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
As suggested here https://github.com/ipfs/js-ipfs/issues/3369#issuecomment-721975183
I found this question when having a similar issue with Gatsby. To fix, I added:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
plugins: [
new webpack.ProvidePlugin({
Buffer: [require.resolve("buffer/"), "Buffer"],
}),
]
}
}
to my gatsby-node.js config.
I have solved it this way in Gatsby. I didn't have to install the buffer dependency. Just added this to my gatsby-node.js file.
exports.onCreateWebpackConfig = ({ actions, stage, plugins }) => {
if (stage === 'build-javascript' || stage === 'develop') {
actions.setWebpackConfig({
plugins: [plugins.provide({ Buffer: ['buffer/', 'Buffer'] })]
});
}
};
Since cucumber 3 removed the registerHandler and registerListener , how we can generate html report in cucumber 3.2.0.I have used below code for generating json report in cucumber 2.
defineSupportCode(function({ registerListener }) {
var JsonFormatter = new Cucumber.JsonFormatter();
JsonFormatter.log = function(string) {
var outputDir = 'testreports/report';
var fileName = 'cucumber-report.json';
var targetJson = path.resolve(outputDir, fileName);
if (fse.existsSync(outputDir)) {
fse.moveSync(outputDir, outputDir + '_' + moment().format('YYYYMMDD_HHmmss'), {
overwrite: true
});
}
fse.outputFileSync(targetJson, string);
};
registerListener(JsonFormatter);
});
and used below code for html report
defineSupportCode(function({ registerHandler }) {
registerHandler('AfterFeatures', function(features, callback) {
var options = {
theme: 'bootstrap',
jsonFile: 'testreports/report/cucumber-report.json',
output: 'testreports/report/cucumber-report.html',
reportSuiteAsScenarios: true,
};
reporter.generate(options);
callback();
});
});
Thanks in advance.
You have to do following changes:
1) set cucumberOpts.format in protractor conf file
cucumberOpts: {
format: ["json:reports/report/cucumber/cucumber-report.json"],
here reports/report/cucumber/cucumber-report.json is the cucumber json file path, you must specify a path at here.
framework will generate it automatically with results' json data as file content when all scenarios execute complete.
2) create parent folder of cucumber json file path before test framework load if parent folder not exist
Option 1: put create parent folder code at head of protractor conf file.
Option 2: create a Protractor plugin implement interface: setup(), which will be executed before test framework load.
// plugin: create-report-folder.js
var moment = require("moment");
var fse = require("fs-extra");
module.exports = {
setup: function() {
var reportDir = this.config.options.reportDir;
if (fse.existsSync(reportDir)) {
fse.moveSync(
reportDir,
reportDir + "_" + moment().format("YYYYMMDD_HHmmss"),
{ overwrite: true}
);
}
fse.mkdirsSync(reportDir);
}
};
Note: both options need to use Sync api to create folder.
3) create Protractor plugin implement interface: postResults which will be executeed after all scenarios execute complete.
// plugin: cucumber-html-reporter.js
var reporter = require("cucumber-html-reporter");
module.exports = {
postResults: function() {
var options = {
theme: "bootstrap",
jsonFile: this.config.options.jsonFile,
output: this.config.options.htmlFile,
reportSuiteAsScenarios: true
};
reporter.generate(options);
}
};
Note: I tried generate cucumber html report in cucumber AfterAll hook, but failed, seems Cucumber JsonFormater generate cucumber json file is Async, when AfterAll hook start execute, cucumber json file have not create yet.
I'm keeping look into formatOption, should be a way to change JsonFormater generate cucumber json file to Sync, then we can use AfterAll hook.
4) set plugins in protractor conf file
// protractor conf file
exports.config = {
plugins: [
// plugin to create report parent folder
{
path: "supports/create-report-folder.js",
options: {
reportDir: "reports/report/cucumber"
}
}
// plugin to generate cucumber html report
{
path: "supports/cucumber-html-reporter.js",
options: {
jsonFile: "reports/report/cucumber/cucumber-report.json",
htmlFile: "reports/report/cucumber/cucumber-report.html"
}
}
]
A workable scaffold for Protractor + Cucumber4 + HTML Report at my github
The scaffold for Protractor + Cucumber3 + HTML Report on my local has some dependency campatible issue, I'm looking into that in case you must use Cucumber 3.
5) If you use multiCapabilities, you can use below package to generate report:
protractor-multiple-cucumber-html-reporter-plugin
If the location of protractor.conf.js is not at the same level as node_modules then the cucumberOpts.format path would be relative to its current file location and the protractor-multiple-cucumber-html-reporter-plugin looks for the json files relative to parent root folder and warns about json file is not found.
To solve this provide absolute path of the json file to cucumberOpts.format like below. This is applicable if you're using cucumber for e2e testing in Angular applications where the protractor.conf.js is normally present inside e2e folder.
cucumberOpts: {
require: [path.resolve(process.cwd(), 'e2e/steps/*.ts')],
format: 'json:'+ path.resolve(process.cwd() + '/reports/cucumber-ui-reports.json')
}
I have create a Gulpfile.js :
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function(){
return browserify('./app/app.js')
.transform(babelify, { stage: 1})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dest'));
});
i have app.js in the app folder and need to apply browserify task on it, the app.js contains this react class
var React = require('react');
var PropTypes = React.PropTypes;
var App = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = App;
when i run this
gulp browserify
it gives me this error :
events.js:72
throw er; // Unhandled 'error' event
^
ReferenceError: [BABEL] E:\learn\react\RMD\public\assets\app\app.js: Using removed Babel 5 option: base.stage - Check ou
t the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets while parsing file: E:\learn\react\RMD\publi
c\assets\app\app.js
at Logger.error
Using removed Babel 5 option: base.stage
.transform(babelify, { stage: 1})
^^^^^
I am seeing following issue when I am using Expected Conditions on webelements returned through element object of Protractor. I tried with $ as well, that resulted in the same thing. I am using Protractor 3.1.1 on Node 4.2.4, Chrome V47.*
"Type Error: Cannot read property 'bind' of undefined"
Before asking, I searched the forums, and understood there are some known issues with using Expected Conditions with selenium elements using driver.findElement.
However, I could not come across a similar issues reported while using element object itself.
https://github.com/angular/protractor/issues/1853
We have a non angular app for login page, which will be switched to Angular, post login. So, I have set ignoreSynchronization=true and later planned to reset it to false after login. Below is the sample code, appreciate any thoughts from community.
Page Objects File
module.exports = {
login: element(by.model('credentials.username')),
password: element(by.model('credentials.password')),
user: "Email",
passwd: "Password",
goButton: $('input.btn.btn-primary'),
EC: protractor.ExpectedConditions,
go: function() {
browser.get("Application URL",30000);
browser.wait(this.EC.elementToBeClickable(this.login),30000);
},
Below is my Sample Test Suite
var VMPage = require('./LoginPage.js');
describe('App Demo', function() {
beforeEach(function() {
console.log("Before Each Started");
browser.driver.manage().timeouts().implicitlyWait(30000);
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1800000;
browser.ignoreSynchronization = true;
VMPage.go();
VMPage.login();
});
it('Test Case', function() {
console.log("***Test Started***");
});
});
Stack trace reported looks as follows:
Stack:
TypeError: Cannot read property 'bind' of undefined
at [object Object].ExpectedConditions.presenceOf (C:\Users\PJ\Ap
pData\Roaming\npm\node_modules\protractor\lib\expectedConditions.js:289:33)
at [object Object].ExpectedConditions.visibilityOf (C:\Users\PJ\
AppData\Roaming\npm\node_modules\protractor\lib\expectedConditions.js:328:10)
at [object Object].ExpectedConditions.elementToBeClickable (C:\Users\PJ0
0366401\AppData\Roaming\npm\node_modules\protractor\lib\expectedConditions.js:17
8:12)
at Object.module.exports.go (D:\protractor_git\Demo\\Log
inPage.js:14:24)
at Object.<anonymous> (D:\protractor_git\Demo\\LoginTest
.js:9:10)
at C:\Users\PJ\AppData\Roaming\npm\node_modules\protractor\node_
modules\jasminewd2\index.js:96:23
at new wrappedCtr (C:\Users\PJ\AppData\Roaming\npm\node_modules\
protractor\node_modules\selenium-webdriver\lib\goog\base.js:2468:26)
at controlFlowExecute (C:\Users\PJ\AppData\Roaming\npm\node_modu
les\protractor\node_modules\jasminewd2\index.js:82:18)
From: Task: Run beforeEach in control flow
at Object.<anonymous> (C:\Users\PJ\AppData\Roaming\npm\node_modu
les\protractor\node_modules\jasminewd2\index.js:81:14)
at attemptAsync (C:\Users\PJ\AppData\Roaming\npm\node_modules\pr
otractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasmine
.js:1916:24)
at QueueRunner.run (C:\Users\PJ\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasm
ine.js:1871:9)
at QueueRunner.execute (C:\Users\PJ\AppData\Roaming\npm\node_mod
ules\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\
jasmine.js:1859:10)
at Spec.Env.queueRunnerFactory (C:\Users\PJ\AppData\Roaming\npm\
node_modules\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmi
ne-core\jasmine.js:697:35)
at Spec.execute (C:\Users\PJ\AppData\Roaming\npm\node_modules\pr
otractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasmine
.js:359:10)
at Object.fn (C:\Users\PJ\AppData\Roaming\npm\node_modules\protr
actor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasmine.js
:2479:37)
at attemptAsync (C:\Users\PJ\AppData\Roaming\npm\node_modules\pr
otractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasmine
.js:1916:24)
at QueueRunner.run (C:\Users\PJ\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasm
ine.js:1871:9)
at QueueRunner.execute (C:\Users\PJ\AppData\Roaming\npm\node_mod
ules\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\
jasmine.js:1859:10)
From asynchronous test:
Error
at Suite.<anonymous> (D:\protractor_git\Demo\\LoginTest.
js:3:2)
at addSpecsToSuite (C:\Users\PJ\AppData\Roaming\npm\node_modules
\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasm
ine.js:833:25)
at Env.describe (C:\Users\PJ\AppData\Roaming\npm\node_modules\pr
otractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine-core\jasmine
.js:802:7)
at jasmineInterface.describe (C:\Users\PJ\AppData\Roaming\npm\no
de_modules\protractor\node_modules\jasmine\node_modules\jasmine-core\lib\jasmine
-core\jasmine.js:3375:18)
at Object.<anonymous> (D:\protractor_git\Demo\\LoginTest
.js:2:1)
Your page object should be defined as a function:
var Page = function () {
this.login = element(by.model('credentials.username'));
this.password = element(by.model('credentials.password'));
this.user = "Email";
this.passwd = "Password";
this.goButton = $('input.btn.btn-primary');
this.EC = protractor.ExpectedConditions;
this.go = function() {
browser.get("Application URL", 30000);
browser.wait(this.EC.elementToBeClickable(this.login), 30000);
};
};
module.exports = new Page();
Thanks for the suggestion, I agree it should work the way you mentioned, however, it’s strange that we still get into unrecognized types issue.
We are a bit new to the node js and this stack. I tried multiple options including the one you mentioned, by wrapping everything into a function, by individually exposing the elements/functions as module exports etc..
Finally, I found the following one to be working for me, using prototyping.
var AngularPage = function () {
};
AngularPage.prototype.login = element(by.model('credentials.username'));
AngularPage.prototype.password = element(by.model('credentials.password'));
AngularPage.prototype.goButton = $('input.btn.btn-primary');
AngularPage.prototype.user = "username";
AngularPage.prototype.passwd = "password";
AngularPage.prototype.EC = protractor.ExpectedConditions;
AngularPage.prototype.go = function(){
browser.get("Application URL",30000)
.then(browser.wait(this.EC.elementToBeClickable(this.login),30000));
expect(browser.getTitle()).toContain(‘String’);
};
AngularPage.prototype.loginMethod = function(){
console.log("Login started");
this.login.sendKeys(this.user);
this.password.sendKeys(this.passwd);
this.goButton.click();
browser.wait(this.EC.elementToBeClickable(this.compute));
};
module.exports = AngularPage;
In the test file, this is how, I was able to import and call it, a sample snippet.
var page = require('./LoginPage_Export_As_Prototype.js');
var LoginPage = new page();
LoginPage.go();
LoginPage.loginMethod();
Thanks,
Prakash
I'm trying to experiment with protractor and cucumber to add some functional BDD testing to some of our webapps. Piecing together the scraps of information online related to this process, I've managed to piece together a very basic test but when I run the tests with protractor conf.js I get the following error
this.visit is not a function
I'm sure this is something I am doing fundamentally wrong but could someone show me the error of my ways, please?
The full console for this test reads:
Using the selenium server at http://192.168.12.100:4724/wd/hub
[launcher] Running 1 instances of WebDriver
Feature: Example feature
As a user of cucumber.js
I want to have documentation on cucumber
So that I can concentrate on building awesome applications
Scenario: Reading documentation # features/homepage.feature:6
Given I am on the Cucumber.js GitHub repository # features/homepage.feature:7
TypeError: this.visit is not a function
at World.<anonymous> (/Users/fraserh/Documents/WorkingDir/protractor/features/homepageSteps.js:14:11)
at doNTCallback0 (node.js:407:9)
at process._tickCallback (node.js:336:13)
When I go to the README file # features/homepage.feature:8
Then I should see "Usage" as the page title # features/homepage.feature:9
(::) failed steps (::)
TypeError: this.visit is not a function
at World.<anonymous> (/Users/fraserh/Documents/WorkingDir/protractor/features/homepageSteps.js:14:11)
at doNTCallback0 (node.js:407:9)
at process._tickCallback (node.js:336:13)
Failing scenarios:
features/homepage.feature:6 # Scenario: Reading documentation
1 scenario (1 failed)
3 steps (1 failed, 2 skipped)
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
I have the following structure:
conf.js
features/homepage.feature
features/homepageSteps.js
conf.js
exports.config = {
framework: 'cucumber',
seleniumAddress: 'http://192.168.12.100:4724/wd/hub', //this is a working selenium instance
capabilities: {
'browserName': 'chrome'
},
specs: ['features/homepage.feature'],
cucumberOpts: {
require: 'features/homepageSteps.js',
format: 'pretty'
}
};
homepage.feature
Feature: Example feature
As a user of cucumber.js
I want to have documentation on cucumber
So that I can concentrate on building awesome applications
Scenario: Reading documentation
Given I am on the Cucumber.js GitHub repository
When I go to the README file
Then I should see "Usage" as the page title
homepageSteps.js
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
module.exports = function() {
var that = this;
this.Given(/^I am on the Cucumber.js GitHub repository$/, function (callback) {
// Express the regexp above with the code you wish you had.
// `this` is set to a new this.World instance.
// i.e. you may use this.browser to execute the step:
this.visit('https://github.com/cucumber/cucumber-js', callback);
// The callback is passed to visit() so that when the job's finished, the next step can
// be executed by Cucumber.
});
this.When(/^I go to the README file$/, function (callback) {
// Express the regexp above with the code you wish you had. Call callback() at the end
// of the step, or callback.pending() if the step is not yet implemented:
callback.pending();
});
this.Then(/^I should see "(.*)" as the page title$/, function (title, callback) {
// matching groups are passed as parameters to the step definition
var pageTitle = this.browser.text('title');
if (title === pageTitle) {
callback();
} else {
callback.fail(new Error("Expected to be on page with title " + title));
}
});
};
It looks like you took the code example from here: https://github.com/cucumber/cucumber-js
And you missed the next piece of code where this.visit function is created:
// features/support/world.js
var zombie = require('zombie');
function World() {
this.browser = new zombie(); // this.browser will be available in step definitions
this.visit = function (url, callback) {
this.browser.visit(url, callback);
};
}
module.exports = function() {
this.World = World;
};
You will need to install zombie package as well:
npm install zombie --save-dev