I dont get how namespaces work in SAP Commerce. (https://sap.github.io/spartacus-docs/1.x/i18n/)
How i think it works is as follows:
Add the HTML {{ 'updatePasswordForm.oldPassword.placeholder' | cxTranslate }}
add that in your translation.ts
updatePasswordForm:{
oldPassword:{
placeholder: "Old password"
}
},
Config of chunks and namespaces mapping
with the last part i have my problem. I don't know where to put it and my project just uses the default one. How do do i find that?
I recommend using translation chunks as described there:
https://sap.github.io/spartacus-docs/i18n/#configuring-chunks-and-namespace-mapping
Working solution.
In app.module.ts in providers provide this config:
provideConfig({
i18n: {
backend: {
loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json',
},
chunks: {
'forms': ['updatePasswordForm'],
},
},
}),
Afterwards, we can create a json file in src/assets/i18n-assets/en/forms.json and inside this file add the following lines:
{
"updatePasswordForm": {
"oldPassword": {
"placeholder": "Old password"
}
}
}
Explanation
loadPath defines the place where the translation chunks will be located.
{{lng}} defines a folder for translations language, e.g., en, de etc.
{{ns}} is placeholder for chunks.
In chunks we defined 'forms' field which corresponds to our translations file - forms.json.
Also, we have to map translations to namespaces - we have defined that our forms.json file contains namespaces ['updatePasswordForm'], so when translations will be needed for namespaces that starts with updatePasswordForm, the forms.json file will be loaded.
I am trying to build a cypress BDD framework. I've think I've created the feature and step definition file correctly. When I run the the test with npx cypress run --spec cypress/integration/examples/shoppingCart.feature --headed --browser chrome, I get the following result here in this video , the vid is about 20sec long.
I wasn't sure what to think so I did another video that was a process of elimination and looking at the BDD set up. I'm still unsure (this one is about 8 mins long).
I will add the feature file, step definition file and error message.
I am totally puzzled.
Error message
`1) End to End shopping cart
User can purchase items and have them delivered to shipping address:
Error: Step implementation missing for: I am on the Ecommerce page
at Context.resolveAndRunStepDefinition (http://localhost:54824/__cypress/tests?p=cypress/integration/examples/shoppingCart.feature:12277:11)
at Context.eval (http://localhost:54824/__cypress/tests?p=cypress/integration/examples/shoppingCart.feature:11603:35)
`
Feature file
Scenario: User can purchase items and have them delivered to shipping address
Given I am on the Ecommerce page
When I add the mobile handsets to the shopping cart
And I verify the total price of shopping cart
Then I select the checkout button
When I will select my shipping location
And I agree to the terms and conditions checkbox
When I select the Purchase button
Then I will see an alert stating my order was successful, plus an ETA delivery
Step Definition file
/// <reference types="Cypress" />
import { Given,When,Then,And } from "cypress-cucumber-preprocessor/steps";
import Homepage from "../../../support/pageObjects/Homepage";
import orderSummaryPage from "../../../support/pageObjects/orderSummaryPage";
import completeOrderPage from "../../../support/pageObjects/completeOrderPage";
const homepage = new Homepage()
const StartCheckout = new orderSummaryPage()
const CompleteOrder = new completeOrderPage()
Given ( 'I am on the Ecommerce page', () => {
cy.visit(Cypress.env('url')+"/angularpractice/")
})
When('I add the mobile handsets to the shopping cart',function () {
homepage.getShopTab().click()
this.data.mobileHandset.forEach(function(element) {// this custom commad will add items to your cart
cy.AddToCart(element)
});
StartCheckout.getBasketCheckoutButton().click()
} )//end of step
And('I verify the total price of shopping cart',() => {
//calculate shopping cart here
let sum=0
CompleteOrder.getProductCost().each(($e1, index, $list) =>{
const unitCost=$e1.text()
let res= unitCost.split(" ")
res= res[1].trim()
sum=Number(sum)+Number(res)
}).then(function()
{
cy.log(sum)
})
CompleteOrder.getBasketTotalCost().then(function(element)
{
const shopCartTotal=element.text()
var res= shopCartTotal.split(" ")
var total= res[1].trim()
expect(Number(total)).to.equal(sum)
})
} )//end of step
Then('I select the checkout button',() => {
StartCheckout.getStartCheckoutButton().click()
} )//end of step
When('I will select my shipping location',() => {
CompleteOrder.getShippingCountry().type('United Kingdom')
CompleteOrder.getShippingCountryConfirm().click()
} )//end of step
And('I agree to the terms and conditions checkbox',()=> {
CompleteOrder.getTermsConditionsCheckbox().click({force: true})
})//end of step
When('I select the Purchase button',()=> {
CompleteOrder.getPurchaseButton().click()
})
Then('I will see an alert stating my order was successful, plus an ETA delivery',()=> {
CompleteOrder.getPurchaseAlert().then(function(element){
const actualText= element.text()
expect(actualText.includes('Success')).to.be.true
})
})
I'm sure I even created the BDD framework in the right place.
Update:
I was just asked about the non global step definitions in my package.json (I only copied from the 'script' section onwards).
Taking a quick look I don't even see it.
"scripts": {
"open": "cypress open",
"scripts": "cypress run",
"headTest": "cypress run --headed ",
"chromeTest": "cypress run --browser chrome",
"firefoxTest": "cypress run --browser firefox",
"edgeTest": "cypress run --browser edge",
"testDashboard": "cypress run --record --key 1642c226-ca7f-49c3-b513-da4ee9222ca8 --parallel",
"clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports",
"pretest": "npm run clean:reports",
"combine-reports": "mochawesome-merge ./cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
"posttest": "npm run combine-reports && npm run generate-report",
"test": "npm run scripts || npm run posttest"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^7.4.0",
"cypress-cucumber-preprocessor": "^4.1.3"
},
"dependencies": {
"cypress-multi-reporters": "^1.5.0",
"mocha": "^9.0.0",
"mochawesome": "^6.2.2",
"mochawesome-merge": "^4.2.0",
"mochawesome-report-generator": "^5.2.0",
"start-server-and-test": "^1.12.5"
}
}
Add the stepDefinitions option to the configuration,
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"stepDefinitions": "cypress/integration/examples/BDD"
},
I set up your files and debugged through the source code.
Where should the step files be?
Basically, in loader.js this line
const stepDefinitionsToRequire = getStepDefinitionsPaths(filePath)
.map((sdPath) => `require('${sdPath}')`);
returns an empty array with your setup.
Digging into getStepDefinitionsPaths, and ignoring common steps for the moment, this line
let nonGlobalPath = getStepDefinitionPathsFrom(filePath);
is responsible for deciding where the steps files come from (filePath is the feature file full path).
and getStepDefinitionPathsFrom.js is just
return filePath.replace(path.extname(filePath), "")
which just removes the extension from
.../cypress/integration/examples/BDD/shoppingCart.feature
to give
.../cypress/integration/examples/BDD/shoppingCart
Then on this line nonGlobalPath is turned into a glob pattern to get all files of type .js, .ts, or .tsx
const nonGlobalPattern = `${nonGlobalPath}/**/*.+(js|ts|tsx)`;
which gives
.../cypress/integration/examples/BDD/shoppingCart/**/*.+(js|ts|tsx)
Conclusion: the step files must be in a folder with the same name as the feature file (in your case cypress/integration/examples/BDD/shoppingCart/) - except if you modify the commonPath setting (see below).
The step definition files can be named anything, as long as they have the correct extension. All files in that folder get searched for step definitions.
There is no need to move files up into the integration folder.
Fix #1
Create a new folder cypress/integration/examples/BDD/shoppingCart/ and move shoppingCartStepDef.js into it.
Config setting
stepDefinitions by itself has no effect on the steps location, but clearly it should from the documentation. This looks like a bug introduced by some change.
nonGlobalStepBaseDir affects the common steps path (which contains steps used across many features, e.g login), but not the path specific to the shoppingCart feature. Again, a bug due to the above problem.
commonPath seems to work as long as it points directly to the step definitions. The glob pattern **/*.+(js|ts|tsx) usage also has a bug - the pattern omits a trailing / which means the ** part (indicating any subfolder) is ineffective (See the difference between line 28 and the preceding line 26)
Fix #2
Set the commonPath config option to the folder containing the step definitions
"commonPath": "cypress/integration/examples/BDD/"
and you tests will work.
I was able to resolve this issue by doing the following:
I raised a ticket with the Developer as I noticed a NUMBER of people were all experiencing the same issue. The developer found they had a bug, fixed it and released a new version.
I had another issue after the new release and was able to fix that by:
I created a new folder under BDD called shopping cart. so it integrations/BDD/shoppingCart
Then I added the following to the package.json
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/integration/BDD"
},
I think these changes will help. From your error I can tell is that the Feature file is not able to find your step definitions.
Change the name of the integration/examples to integration. Because of what I see from the cypress pre-processor plugins page, the tests are being searched under cypress/integration.
Again referring to the cypress pre-processor plugins page, the recommended way of writing a step definition file is that the steps definitions are searched from a directory with the same name as your .feature file.
So in your case, your .feature file is at cypress/integration/BDD/shoppingCart.feature. Now create a folder by the same name as the feature file inside the BDD folder cypress/integration/BDD/shoppingCart and inside that place your step definitions file there.
According to TheBrainFamily/cypress-cucumber-preprocessor/issues/596, use a folder matching the feature file
If the feature file is unable to read the .js script file then try to add the following in the package.json file.
When you define correct folder hierarchy then it will be able to detect and run the the script in the test runner of cypress. Like i have new folder with name "Drayxchange" so i added it like this below:
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/integration/Drayxchange"
},
I can't figure out how to do custom linting pre-diff in Arcanist (YAML, specifically). The instructions don't explain how to integrate a new linter into my existing .arclint configuration.
I figured this out on my own, and thought I'd share here in case anyone else has this issue.
The following .arclint file does the trick:
{
"linters": {
"yaml": {
"type": "script-and-regex",
"script-and-regex.script": "yamllint",
"script-and-regex.regex": "/^(?P<line>\\d+):(?P<offset>\\d+) +(?P<severity>warning|error) +(?P<message>.*) +\\((?P<name>.*)\\)$/m",
"include": "(\\.yml$)",
"exclude": [ ]
}
}
}
I haven't extensively tried out that regex, but it works for my purposes so far.
You can configure Yamllint by populating a .yamllint file in the repository root.
I'm trying to use CSSLint with Sublime Text 3, but I can't seem to get it to use the .csslintrc file I've got in my project root.
Originally I thought it would be in JSON format, but then it turned out you have to use a command line syntax, so as a test I tried these in my .csslintrc file:
--ignore=ids,important
and
ignore=ids,important
But neither stop the linter from warning about the use of either??? Any suggestions? It does work if I just stick it in the user settings file, but since I use .jshintrc and other files in my projects for linting etc, and not everyone uses Sublime Text (I don't know why they wouldn't :), I'd prefer to have it all in .csslintrc
"linters": {
"csslint": {
"#disable": false,
"args": [],
"errors": "",
"excludes": [],
"ignore": "ids,important", // WORKS
"warnings": ""
},
}
First solution, you can add a .csslintrc file in the CSS folder (and duplicate it for each sub folder...) :
--ignore=ids,important
Otherwise, you can add a .sublimelinterrc file in your project root :
{
"linters": {
"csslint": {
"ignore": ["ids, important"]
}
}
}
I'm trying to get this Grunt plugin to work:
https://npmjs.org/package/dss
This documentation plugin ironically seems to be lacking proper documentation. Can someone help me out by giving me an example of something that worked for them. The main thing that's screwing me up is the "your_target" property. Not sure what's suppose to go in there.
Say I have a SASS file in the following path from the root directory:
sass/main.scss
What would my ouput be by default? And where would it output to? Also what format does it ouput to?
grunt.initConfig({
DSS: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
Is "your_target" property the path to my sass file or the path to the documentation file I'm trying to create? Would it be defined like this?
...
your_target: {
// Target-specific file lists and/or options go here.
sass: "sass/main.scss"
},
...
I don't know what the property name should be. :(
dss: {
docs: {
options: {
},
files: {
'api/': 'css/**/*.{css,scss,sass,less,styl}'
}
}
}