I'm using the cypress-fail-fast plugin > https://github.com/javierbrea/cypress-fail-fast in my Typescript Cypress config, but it doesn't seem to be working.
// cypress.config.ts
import { defineConfig } from 'cypress';
import plugin from './cypress/plugins/index';
export default defineConfig({
projectId: '**',
fixturesFolder: 'cypress/fixtures',
screenshotOnRunFailure: true,
video: true,
videoCompression: 1,
viewportHeight: 1000,
viewportWidth: 1600,
e2e: {
env: {
API_URL: '**',
CYPRESS_PASSWORD: '**',
},
supportFile: 'cypress/support/index.ts',
baseUrl: 'http://localhost:4200',
experimentalInteractiveRunEvents: true,
setupNodeEvents(on, config) {
plugin(on, config);
},
},
});
// supprt/index.ts
import './commands';
import './hooks';
import 'cypress-real-events/support';
import 'cypress-file-upload';
import 'cypress-fail-fast/plugin';
That's how I got it set up, but after a test fails in a spec, it still runs each test.
You're missing adding the plugin to your node events for e2e.
Per the docs:
// cypress.config.js
module.exports = {
e2e: {
setupNodeEvents(on, config) {
require("cypress-fail-fast/plugin")(on, config);
return config;
},
specPattern: "cypress/integration/**/*.js",
},
};
So in your case, that would be:
...
e2e: {
env: {
API_URL: '**',
CYPRESS_PASSWORD: '**',
},
supportFile: 'cypress/support/index.ts',
baseUrl: 'http://localhost:4200',
experimentalInteractiveRunEvents: true,
setupNodeEvents(on, config) {
plugin(on, config);
require("cypress-fail-fast/plugin")(on, config);
},
},
...
#agoff was right, but there was another issue, so I'll explain here.
// support/index.ts
...
import 'cypress-fail-fast';
I added /plugin to the import, which wasn't needed.
And I did have to declare cypressFailFast in my setupNodeEvents.
I declare the plugin function like so:
setupNodeEvents(on, config) {
plugin(on, config);
},
plugin here refers to: import plugin from './cypress/plugins/index';
And in that file I declare:
export default function plugin(on, config) {
cypressFailFast(on, config);
...
Now everything works as expected:
Related
I try to use "origin" to use multi-domain access, i have configured the cypress.config.js but still have:
cy.origin() requires enabling the experimentalSessionAndOrigin flag
my cypress.config.js :
const { defineConfig } = require('cypress')
module.exports = defineConfig({
chromeWebSecurity: false,
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here,
experimentalSessionAndOrigin: true
},
},
});
thx for help !
gretings
Move experimentalSessionAndOrigin: true above setupNodeEvents(on, config), it's a configuration option not a node event.
const { defineConfig } = require('cypress')
module.exports = defineConfig({
chromeWebSecurity: false,
e2e: {
experimentalSessionAndOrigin: true
setupNodeEvents(on, config) {
// implement node event listeners here,
},
},
});
i'm having a hard time figuring out the problem with my setup. I have been looking at the documentations but between apollo and graphql-tools the APIs changed frequently.
When i run this script, the console says "Error: Query root type must be provided."
import { ApolloServer } from "apollo-server";
import { loadSchema } from "#graphql-tools/load";
import { UrlLoader } from "#graphql-tools/url-loader";
import { stitchSchemas } from "#graphql-tools/stitch";
import fetch from "node-fetch";
import dotenv from "dotenv";
dotenv.config({ path: "../.env" });
async function startServer() {
const shopifySchema = await loadSchema(process.env.SHOPIFY_STOREFRONT_URL, {
loaders: [new UrlLoader()],
headers: {
"X-Shopify-Storefront-Access-Token":
process.env.SHOPIFY_STOREFRONT_API_TOKEN,
},
fetch,
});
const contentfulSchema = await loadSchema(process.env.CONTENTFUL_API_URL, {
loaders: [new UrlLoader()],
headers: {
Authorization: `Bearer ${process.env.CONTENTFUL_API_TOKEN}`,
},
fetch,
});
const gatewaySchema = stitchSchemas({
subschemas: [{ schema: shopifySchema }, { schema: contentfulSchema }],
});
const server = new ApolloServer({ schema: gatewaySchema });
return await server.listen();
}
startServer().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
These are my dependencies:
{
"#graphql-tools/load": "^7.3.2",
"#graphql-tools/schema": "^8.2.0",
"#graphql-tools/stitch": "^8.3.1",
"#graphql-tools/url-loader": "^7.2.0",
"apollo-server": "^3.4.0",
"dotenv": "^10.0.0",
"graphql": "^15.6.1",
"node-fetch": "^3.0.0"
}
Anyone knows what could be wrong with this?
Ok, i have found out that my url endpoints were just incorrect.
I'll leave the question open in case might be useful to someone.
Is there a way to reference a process.env.NODE_ENV in a scss file by passing it to the sass-loader in postcss for rollup. If so anyone know how to go about this?
UPDATE1
Ok, so this is my rollup.config.js. I'm getting a weird issue where sometimes the $env is undefined and sometimes it is set to the right process.env.NODE_ENV
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import babel from '#rollup/plugin-babel';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import replace from '#rollup/plugin-replace';
import postcss from 'rollup-plugin-postcss';
import { uglify } from 'rollup-plugin-uglify';
const build = process.env.BUILD ? process.env.BUILD : 'development';
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
sourcemap: true,
compact: true
},
plugins: [
postcss({
use: {
sass: {
data: "$env: " + process.env.NODE_ENV + ";"
}
},
}),
nodeResolve({
extensions: [".js"],
}),
replace({
'process.env.NODE_ENV': JSON.stringify(build)
}),
babel({
presets: ["#babel/preset-react"],
}),
commonjs(),
build === 'production' && uglify(),
serve({
verbose: true,
contentBase: ["", "public"],
host: "localhost",
port: 3000,
}),
build === 'development' &&
livereload({ watch: "dist" }),
]
};
Currently, I use webpack to build a single JS file which represents my app. How do I split my React app UI shell from rest of the app logic, so that I can have the service Worker cache it?
My webpackpack config file looks like this, that generates a single index_bundle.js file(no css file):
import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import autoprefixer from 'autoprefixer'
const LAUNCH_COMMAND = process.env.npm_lifecycle_event
const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND
const PATHS = {
root: path.join(__dirname),
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'dist')
}
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: PATHS.app + '/index.html',
filename: 'index.html',
inject: 'body'
})
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
const productionPlugin2 = new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
const base = {
entry: [
'babel-polyfill',
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]&importLoader=1!postcss'}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],
resolve: {
root: path.resolve('./app')
}
}
const developmentConfig = {
devtool: 'cheap-module-inline-source-map',
devServer: {
contentBase: PATHS.build,
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [HTMLWebpackPluginConfig, new webpack.HotModuleReplacementPlugin()]
}
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [HTMLWebpackPluginConfig, productionPlugin, productionPlugin2]
}
export default Object.assign({}, base, isProduction === true ? productionConfig : developmentConfig)
My "Instant Loading with Service Workers" talk from the Chrome Dev Summit 2015 covers creating a PWA using the App Shell + dynamic model, powered by React.
The code sample for it is part of the sw-precache library's repo: https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo
(It's not necessarily the most idiomatic React code in the world, but the general concepts, especially when it comes to the service worker implementation, should hold.)
I'm trying to compile Angular2 with webpack; here is my setup: I have a vendor.ts file where I have:
import 'es6-shim/es6-shim.min';
import 'reflect-metadata/Reflect.js';
import 'zone.js/dist/zone';
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router-deprecated';
My webpack.config.js:
"use strict";
let path = require('path');
let webpack = require("webpack");
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let ProvidePlugin = webpack.ProvidePlugin;
let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
devtool: 'source-map',
debug: true, // set false in production
cache: true,
entry: {
vendor: './app/vendor.ts',
app: './app/main.ts'
},
output: {
filename: './public/assets/js/[name].js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: './public/assets/js/vendor.js', minChunks: Infinity}),
new UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 -> Duplicate identifier
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
}
]
},
resolve: {
extensions: ["", ".ts", ".js"]
}
};
So, all is fine, webpack is compiling the stuff, but it's too slow. It's taking 15089ms. I'm planning to add this as a gulp task but this won't work, I have to wait like 3-5 seconds for each save. Is it possible to have a setup where if the chunks don't change, to prevent compilation? This would improve the performance a lot. Thank you in advance for any help.
You have to disable webpack.optimize.* plugins, switch devtool to eval and add transpileOnly: true to ts-loader query.