The bulletproof-cypress-real-world from romansndlr

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().

romansndlr / bulletproof-cypress-real-world Goto Github PK

bulletproof-cypress-real-world's People

Stargazers

Watchers

Forkers

bulletproof-cypress-real-world's Issues

Control data from your test

Getting the jquery element but not using it

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent