Monaco Editor not displaying correctly after NPM Prod - laravel

Have a very strange issue with Monaco Editor. When developing, and running NPM RUN WATCH, editor displays perfectly in browser. After running NPM RUN PROD, the view breaks. See below. I have tried everything to resolve this, webpack changes, CSS changes, Moved out of Patternfly Code Block elements.
The only error I get after NPM RUN PROD in the console is
'Element already has context attribute: pf-c-code-editor__code-pre'
Ignoring the actual attribute, I get the same error when attribute is present. I think this is a red herring though.
Running VUE3, Laravel, latest Monaco. Sample editor code below
See any tips or advice and what to do next?
const codeEditorDiv = document.getElementById('pf-c-code-editor__code-pre');
meditor = monaco.editor.create(codeEditorDiv, {
value: meditorValue.value,
language: language.value || 'javascript',
lineNumbers: lineNumbers.value,
roundedSelection: false,
readOnly: false,
theme: darkmode.value,
scrollBeyondLastLine: true,
wordWrap: 'on',
wrappingStrategy: 'advanced',
automaticLayout: true,
minimap: {
enabled: false
}
});
Updated Screenshots, before (NPM RUN DEV) and after (NPM RUN PROD)

Related

How is VSCode finding this Go linting Problem and how do I ignore it?

I'm setting up linting with golangci-lint in my Go project. I have a file generated by go-bindata that VSCode is listing the following under the Problems tab:
assets/assets.go: redundant type from array, slice, or map composite literal (simplifycompositelit)
I can't seem to get rid of it. It's not a compiler error and I'll be re-running go-bindata from time to time so I don't want to make a habit of modifying generated code.
Right now, with the configuration below, I can't make VSCode stop reporting this error. If I run golangci-lint run ./... in the root of the workspace I get no output. I can provide my linting config if needed but VSCode seems to be running something else. How do I figure out what's reporting this error and how do I make it stop reporting anything for the file assets/assets.go in this one workspace?
Here's Go-related vscode settings:
{
"go.formatTool": "gofmt",
"go.lintTool": "golangci-lint",
"go.liveErrors": {
"enabled": true,
"delay": 500
},
"go.lintOnSave": "workspace",
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"go.useLanguageServer": true,
"go.languageServerExperimentalFeatures": {
"diagnostics": true,
"documentLink": true
},
}
Here's the line in question even with a nolint comment to show it's not behaving as expected. If it were golangci-lint outputting this, the nolint would prevent the warning from showing. I reloaded the window and closed/reopened vscode to be sure the change was noticed.
After reproducing locally, it seems this message comes from gopls, as disabling gopls silences the message. There are a couple of related complaints/issues on the Go issue tracker:
hide gofmt -s diagnostics (and others?) in generated files
should not issue lint-style warnings on generated code
Neither offers an actual solution.
However, this issue on the vscode-go repo, provides a work-around. In your VSCode config, add the gopls.analyses.simplifycompositelit key, with a value of false:
"gopls": {
"analyses": {
"simplifycompositelit": false
},
}
Of course, this disables it for all projects, not just generated files, but if you're also using golangci-lint, it can be configured to catch the same types of errors, and can be configured on a more granular basis, so that you won't miss the same class of errors in non-generated code.

Cypress browser refreshes browser on changing test file

I am using Cypress for end to end testing, and I would like to be able to see all run test suites, in the browser, even after they are run. Currently, after each test suite is completed (test which are stored in separate files), the browser reloads and I cannot see previously run tests, and after the final test suite, the browser closes. Is there an option to change this behavior so that I can run all test files, have all the results visible in the browser and that the browser doesn't close at the end?
I am currently running tests using this command: ./node_modules/.bin/cypress run --headed --spec 'cypress/integration/tests/*'
where /tests is the folder where I currently have my files.
I have added --no-exit but in this case cypress doesn't move to the next test file and only the first one runs.
A workaround solution could be to generate reports with Mochawsome, for each Test Spec, and then merge and view those rendered reports. The reports will contain the results from the tests, test bodies, any errors that occurred and some other bits of information.
If you read through the page in the link it shows you how to generate individual reports then combine them together, and then render them as HTML. These can then be viewed in the browser.
This command can be used to install what's needed npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator
and then add the Reporter configuration to the cypress.json:
{
"reporter": "mochawesome",
"reporterOptions": {
"reportDir": "cypress/results",
"overwrite": false,
"html": false,
"json": true
}
}
Keep in mind that it may not give you the level of detail that is contained in the Cypress Dashboard in the browser, for example, what was yielded from a request.
Cypress has a lot of possible command with a lot of possible config too.
Read this.
And if you use npm just run like this :
npm run cypress:open
and in your package.json :
"scripts": {
"cypress:open": "cypress open"
}

Allure reports not generating with WebDriverIO and Jasmine framework

I am using WebDriverIO and want to generate Allure Reports. I followed all steps mentioned in Allure
I did:
$ npm install wdio-allure-reporter --save-dev
package.json has:
"wdio-allure-reporter": "~0.0.2"
My wdio.conf.js:
reporters: [allure],
reporterOptions: {
allure: {
outputDir: 'allure-results'
}
},
When I do allure generate './allure-results' --clean
Report successfully generated to allure-report
But when go to /allure-report folder and open index.html, its a blank page. Also there is nothing in the .allure-results folder.
Can someone help please and direct in the right direction. What am I missing?
I had the same experience with allure when combining with wdio. No matter what combination I tried via https://docs.qameta.io/allure/latest/#_commandline, I kept getting a blank html report.
I found somewhere a mention of using serve instead of generate. I used the command ./node_modules/.bin/allure serve allure-results/. and VWOLAH! (?) It worked! It runs a local server with test results and data loaded in.
Although ... it doesn't seem to grab all test data, it seems to grab the very last test that ran and only that.
Use the following piece of code in the wdio.conf.js
reporters: ['allure'],
reporterOptions: {
allure: {
outputDir: 'allure-result',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: false,
useCucumberStepReporter: false
}
},
Command to generate allure report
node_modules/.bin//allure generate allure-results/&& node_modules/.bin/allure open
#jazz, try updating the version of your wdio-allure-reporter.
In my package.json, I have "wdio-allure-reporter": "^0.1.2",

How to debug server side TypeScript code in WebStorm

Comparing this to Visual Studio Code all you need to do is allow source maps and VSCode will debug TypeScript however I can't achieve the same on WebStorm.
I can easily debug server side JavaScript in WebStorm but not TypeScript
For anyone else wrestling with debugging TypeScript in WebStorm/IDEA, I had similar frustrations as OP (possibly for different reason). My issue was simply that I didn't set the working directory to the dist folder in the node run configuration. I am running tests in Jest and assumed the working dir should be the root of my project. Set it to dist and debugging started working!
Further info...
Source .ts files in src
Typescript version: 2.0.3
File tsconfig.json:
{
"compilerOptions": {
"jsx": "react",
"module": "commonjs",
"noImplicitAny": false,
"outDir": "dist",
"preserveConstEnums": true,
"removeComments": true,
"sourceMap": true,
"target": "es6",
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"dist"
]
}
Jest config (in package.json):
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/ts-jest/dist/preprocessor.js",
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
}
Run configuration...
Working directory: <project_root>/dist
Javascript file: ../node_modules/jest-cli/bin/jest.js
Application params: --runInBand
Hope it helps!
was trying to find a way to let Webstorm/Intellij to watch the TS file change and restart server in debug mode. Looks like ts-node-dev which IHMO is faster than nodemon in terms of live-reload because it shares Typescript compilation process between restarts.
npm i ts-node-dev --save-dev
Then in your Run/Debug Configuration, add a node.js config with below params:
JavaScript file ---> node_modules/ts-node-dev/lib/bin.js
Applicationi parameters ---> --respawn -- src/script/local.server.ts
Now save the config and run with Debug, you should be able to set break point as well as live reload server on any TS code change.
I wrapped up a small library for this if you happen to develop with aws lambda
https://github.com/vcfvct/ts-lambda-local-dev
Just want to add what worked for me with Webstorm 2021.1.1
I found the easiest way is to go to your package.json and right click the green triangle next to the npm script you want to run. Then select debug.
I am able to apply the breakpoints to my typescript code and it works perfectly. Coming from .Net where it was always pretty straight forward to debug, I am glad to see webstorm making it just as simple.
This is my npm script that I choose to debug.
"dev": "env-cmd -f ./config/dev.env concurrently -k -n COMPILER,NODEMON -c gray,blue \"tsc -w\" \"nodemon -w dist dist/index.js\"",
I'm using a specific version of node called ts-node.
First add in your package.json file:
"devDependencies": {
"ts-node": "8.1.0",
"typescript": "3.2.4"
},
Run npm install and the node_module/.bin/ directory will include the ts-node or ts-node.cmd required for Windows.
Obviously these versions will move. You may see inside the package.json of ts-node project which version of typescript they are using to be the closest as possible.
Then you can add breakpoints. The only downside I see is that you must define the Javascript file (which is a ts file) into the configuration, instead of just right-click + run.
If you have the xyz is not a function error, check that your tsconfig.json file doesn't have "noEmit": false,
For running WebStorm(2017.2.3) debugger around typescript sources I did:
Setup Node.js configuration:
Working directory: root/of/the/project (where located my package.json)
JavaScript file: dist/index.js
I am compiling my TypeScript with gulp-typescript, but more important the source-map files. So for compiling was used task like below:
const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const merge = require('merge2');
const tsProject = ts.createProject('tsconfig.json', {
declaration: true,
typescript: require('typescript'),
});
gulp.task('default', () => {
const result = gulp.src('./app/**/*.ts')
.pipe(sourcemaps.init())
.pipe(sourcemaps.identityMap()) // optional
.pipe(tsProject());
return merge([
result.js
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' }))
.pipe(gulp.dest('dist')),
result.dts
.pipe(gulp.dest('dist')),
]);
});
All source TS files located in './app' folder, all compiled files located in ./dist folder. Most important source-files option sourceRoot, wrong value not bring you to ts file.
By sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } I am writing my .map files beside .js files and make reference to app folder. I no need content in .map files because it's already there (app folder).
Thanks to #Ekaterina I was able to run Node debug with Typescript.

with protractor how to setup internet explorer configuration?

I am using protractor 1.3.1 and running iedriverserver.exe 2.43.0.0 with IE11 installed (windows).
This is my spec:
describe('quick test IE driver', function () {
it('should go to ng homepage', function () {
browser.driver.get('https://angularjs.org/');
var title =element(by.css('h1')).getText();
expect(title).toBe('HTML enhanced for web apps!');
});
});
And this is my protractor.conf.js:
exports.config = {
// The address of a running selenium server.
//seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'internet explorer',
'platform': 'ANY',
'version': '11'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['main.spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
isVerbose:true,
includeStackTrace:true
}
};
getting this error though, any ideas for a solution:
UnknownError: The path to the driver executable must be set by the webdriver.ie.driver system property;
Update web manager for IE
First step is to update the ie webdriver using webdriver manager.Open command prompt and run the command given below
webdriver-manager update --ie
Go to npm location In this step move to the NPM_LOCATION(folder where npm is installed at your system. Move to the following path "NPM_LOCATION\node_modules\protractor\selenium" At this location check that IEDriverServer.exe is present or not.
Change for IE in conf.js
// conf.js exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['specs.js'], capabilities: {
'browserName': 'internet explorer' // conf for internet explorer } }
// spec.js describe('Protractor Demo App', function() { it('should have a title', function() {
browser.get('http://juliemr.github.io/protractor-demo/');
expect(browser.getTitle()).toEqual('Super Calculator'); }); });
Now run protractor conf.js
Note: Make sure you restart server by -->webdriver-manager start
taken from: http://protractorsupport.blogspot.com/2015/05/use-protractor-with-internet-explorer.html
According to the protractor config doc, the config value "seleniumArgs" is deprecated.
So, to have a single answer with all the info, here are the simplified steps:
Install Protactor globally:
npm install -g protractor
Run webdriver-manager update --ie to update the Selenium drivers that Protactor uses. Be aware if you are running the global webdriver-manager or the local webdriver-manager (i.e ./node_modules./bin/webdriver-manager update help); they will unzip the drivers at separate locations; only the local will unzip in [Project dir]
Take a look at the log of the previous command. It must show that the drivers were unzipped at a particular folder. Go to that folder and locate the IEDriverServer. In my case it was: "[Project dir]\node_modules\protractor\node_modules\webdriver-manager\selenium\IEDriverServer_x64_X.XX.X.exe. You will need to give the relative path to this file in the next step.
Inside your conf.js file, add the following keys & values. Note the use of localSeleniumStandaloneOpts, which means you should remove the property seleniumAddress if you have it:
multiCapabilities : [
{
'browserName' : 'chrome'
}, {
'browserName' : 'internet explorer'
}
],
localSeleniumStandaloneOpts : {
jvmArgs : ["-Dwebdriver.ie.driver=<RELATIVE PATH TO IE DRIVER>"] // e.g: "node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer_x64_X.XX.X.exe"
},
That was all I needed to do. I don't start the server beforehand, I simply run protactor conf.js. Easier now, I guess.
Download the IEDriverServer.exe
Please specify the same in your config file
seleniumArgs: ['-Dwebdriver.ie.driver=<path to IEDriverServer.exe>']
I was looking around this question for few hours, the best way seems to be:
1) download
webdriver-manager --ie update
This should download the driver from the google.. selenium ... release folder and place it directly in the good place in your npm local repository.
2) setup in config.js file of your tests:
...
multiCapabilities: [
//{
// browserName: 'chrome',
// version: 'ANY'
//},
//{
// browserName: 'firefox',
// version: 'ANY'
//},
{
browserName: 'internet explorer',
version: 'ANY'
},
],
// For some IE functions you may need to specify defaultTimeoutInterval
...
3) setup IE:
follow this post
http://jimevansmusic.blogspot.fr/2012/08/youre-doing-it-wrong-protected-mode-and.html
PS: about the "protected mode" setup of IE, it's important to have the same setup for all zones. I prefer to have protected mode 'on' for all zone
4) patch the registry
as described here: http://heliumhq.com/docs/internet_explorer
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BFCACHE]
"iexplore.exe"=dword:00000000
5) IE 11 update break the way the system work:
My lastest issue was "the server did not provide any stack trace ...." this is due to an update of the 17th of Dec 2014. Uninstall it and then it's good.
https://code.google.com/p/selenium/issues/detail?id=3390
crazy path to make it running. It cannot be like this for a long run, please comment my post with your experiences/feedbacks.
Richard
Here is my config file:
exports.config = {
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
capabilities: {
'browserName': 'internet explorer',
},
framework: 'jasmine',
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['your_spec_file.js'],
};
The steps to run in IE :
Need two terminals in Visual Studio Code,
In the first terminal, Run command "webdriver-manager start" to start selenium server.
In the second terminal, Run your js config file as :
Protractor conffile_name.js
This will successfully start Internet explorer.
Thanks

Resources