bulletproof-cypress-real-world's People
Forkers
draganpetakovic muratkeremozcan rizwanad kpunith8 lechodiman raunak96 danielhao5 stewartmuhanuzi krsasobulletproof-cypress-real-world's Issues
Control data from your test
AFAIU, your approach is to have the data in a fixture file and then write the test so its behavior depends on the data. I see the advantages it has when compared to the initial version of the test code. Still, I believe we can go one step further.
The problem with your approach is that your test is limited to what the data contains. What if you want to test what is displayed when an article doesn't have any tag? You have to add this case to the fixture file (for the UI test). What if you want to test what happens when the description of an article is very long? Same answer. So your fixture depends on what you want to test and several tests and tests files will impose different requirements on the shared fixtures. This will make it hard to change the fixture file.
A possible solution is to let the test change the data so the data is exactly what the test needs. E.g.,
cy.makeModelsFromFixture({
fixture: "article.json",
number: 2,
replacement: (i) => ({
slug: i,
title: `Article ${i}`,
tags: []
}),
}).then((articles) => {
cy.route('**/api/articles**',** articles).as('getArticles')
});
The above code expects an "article.json" fixture file and produces 2 articles with different slugs, different titles and no tag. This way, the test can check what happens when an article has no tag.
Here is the Cypress command makeModelsFromFixture()
:
/**
* Create several copies of a JSON fixture and yield them.
*
* @arg {string} fixture - The path of the JSON fixture to clone.
* @arg {int} number - The amount of clones to create. This is the
* size of the returned array.
* @arg {replacement} function - Takes a number from 1 to `number` and
* should return a literal object used to override part of the fixture.
*/
Cypress.Commands.add(
"makeModelsFromFixture",
({ fixture, number, replacement }) => {
return cy.fixture(fixture).then((template) => {
return cy.makeModelsFromTemplate({
template,
number,
replacement,
});
});
}
);
/**
* Create several copies of a template and yield them.
*
* @arg {object} template - An object to clone.
* @arg {int} number - The amount of clones to create. This is the
* size of the returned array.
* @arg {replacement} function - Takes a number from 1 to `number` and
* should return a literal object used to override part of the template.
*/
Cypress.Commands.add(
"makeModelsFromTemplate",
({ template, number, replacement }) => {
let models = [];
for (let i = 1; i <= number; i++) {
models.push(Object.assign({}, template, replacement(i)));
}
return models;
}
);
Getting the jquery element but not using it
Hi,
first I would like to thank you for the great webinar. I learned quite a bunch of stuff.
I see this code in your project:
cy.findAllByTestId('article-preview')
.should('have.length', articles.length)
.each(($articlePreview, index) => {
const article: Article = articles[index]
cy.wrap($articlePreview).within(() => { ... });
I'm wondering why your code gets the jquery element $articlePreview
only to wrap it 3 lines after. Wouldn't it be possible to avoid this round trip? In other words, I would expect to write something like this instead:
cy.findAllByTestId('article-preview')
.should('have.length', articles.length)
.each((articlePreview, index) => {
const article: Article = articles[index]
articlePreview.within(() => { ... });
In this version, the first argument to the each()
callback is a Cypress object which understands within()
as opposed to a jquery element that you have to wrap to get to call within()
.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.