.
describe('do stuff in my Onlineshop', () => {
beforeEach(() => {
// Login user using their credentials
cy.login('user', 'pass');
});
// … tests will start below
})
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
.
describe('do stuff in my Onlineshop', () => {
beforeEach(() => {
cy.get('#sw-field--username').type('username');
cy.get('#sw-field--password').type('pass');
cy.get('.sw-login-login').submit();
cy.contains('Dashboard');
});
// … tests will start below
})
Slide 15
Slide 15 text
Use shortcuts: Lösung mit Abkürzung
.
describe('do stuff in my Onlineshop', () => {
beforeEach(() => {
cy.request(
'POST',
'/api/oauth/token',
{
// payload: Send all data you need
}
).then(() => {
cy.contains('Dashboard');
});
}):
// … tests will start below
})
Slide 16
Slide 16 text
describe('Context menu', () => {
it('should open the context menu on click', async () => {
const wrapper = createWrapper();
expect(wrapper.vm).toBeTruthy();
await wrapper.trigger('click');
const selector = '.sw-context-menu';
expect(wrapper.find(selector).isVisible()).toBeTruthy();
});
});
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
describe('E2E with AAA pattern‘, () => {
it('should open the context menu on click', () => {
});
});
// Act
// All the steps you need to come to the
// scenario to test
// Assert
// Checks and assertions of your test
beforeEach(() => {
// Arrange
// All the preparations you need
});
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
“…arrange my test == what I’m given.”
“…act in my test == when something happens.”
“…assert the results == something happens
then this is what I expect as the outcome.”
Slide 21
Slide 21 text
describe('E2E with Given When Then', () => {
it('should use Given When Then', () => {
});
});
// When
// All the steps +assertions you need to come to the
// scenario to test
// Then
// Scenario to test
beforeEach(() => {
// Given
// All the preparations you need
});
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Isolated test data
.
describe('Customer login', () => {
let customer = {};
beforeEach(() => {
// Set application to clean state
cy.setInitialState()
.then(() => {
// Create test data
return cy.setFixture('customer');
})
}):
// … tests will start below
})