# 13. Cypress XHR ile çalışma

XHR, XML HTTP İsteğidir. Bu bir Uygulama Programlama Arayüzüdür (API). yöntemleri bir web tarayıcısı ile sunucu arasında veri gönderen bir nesne olarak kullanılabilir. Bir nesnesi bir sunucudan yanıt biçiminde veri talep edebilir

```javascript
//aliasing request
cy.request('https://jsonplaceholder.cypress.io/comments').as('c')

cy.get('@c').should((response) => {
   expect(response.body).to.have.length(100)
   expect(response).to.have.property('headers')
})
```

## Mock api ile Response Api Kıyaslanması

**Cypress/support/commands.js** dizisi altında kodumuzu ekliyoruz.kul

```javascript
Cypress.Commands.add("assertDeepEqual", (response, expectedData) => {
	const assertObject = (actual, expected, key) => {
		if (actual === undefined) {
			cy.log(`actual.${key} is undefined`);
		}

		if (actual === null) {
			cy.log(`actual.${key} is null`);
		}

		const actualType = typeof actual;
		const expectedType = typeof expected;

		if (actualType !== expectedType) {
			cy.log(`actual.${key} type ${actualType} is not equal to expected.${key} type ${expectedType}`);
		}

		try {
			expect(actualType).to.equal(expectedType);
		} catch (err) {
			throw new Error(`actual.${key} type ${actualType} is not equal to expected.${key} type ${expectedType}`);
		}

		if (actualType && actual && actualType === "object" && expectedType === "object") {
			const actualKeys = Object.keys(actual);
			const expectedKeys = Object.keys(expected);
			expect(actualKeys).to.deep.equal(expectedKeys);

			// eslint-disable-next-line no-shadow
			actualKeys.forEach((key) => {
				assertObject(actual[key], expected[key], key);
			});
		}
	};

	assertObject(response, expectedData);
});
```

Kullanım olarak mock datamızı alıyoruz ve dönen response ile oluşturduğumuz command'ı kullanıyoruz.

```javascript
it("should data be match mock array", () => {
	cy.request({
		method: "GET",
		url: "https://porti.wtf/todo",
	}).then((response) => {
		cy.assertDeepEqual(response.body, mockTodoResponse);
	});
});
```
