Slides from a presentation to Tech on the Tyne on 30th March 2023 at TusPark in Newcastle. Using cypress automation to test end to end web applications and to do React component tests with the lastest version of cypress v12.9.

1. Testingat
Both
Endsofthe
Triangle

2. heyhihello
derek graham
@deejaygraham
@deejaygraham@hachyderm.io

4. https://nebytes.net

7. The.
Testing.
Triangle.

10. Testcodeiscode

11. Testcodeiscode
th@t wE d0n;t tesT’

12. Microtests

13. A test is not a unit test if:
* It talks to the database
* It communicates across the network
* It touches the file system
* It can't run at the same time as any of your
other unit tests
* You have to do special things to your
environment (such as editing config files) to
run it.
Michael Feathers - A Set of Unit Testing Rules

14. EndtoEndTests

15. IntegratedTests

22. Web2.0

26. S
cr
ipt

28. CypressGood:)

29. • Runs “inside” browser
• Automatic waiting
• Debuggability
• Snapshots
• Spies

30. • Network interception
• Screenshots & videos
• Hot reload
• Auto retry

31. CypressBad:(

32. • No multiple tabs
• Not established like Se
• JS only
• No Safari
• Iframes limited

33. • Multi-site not allowed
• Login still an issue

34. npminstallcypress

35. https://docs.cypress.io

36. npxcypressopen

41. • application
• src
• cypress
• components
• e2e
• support

42. Let’stalk
about
Jest(maybe)

43. describe('The thing I am testing', () => {
it('should do this', () => {
expect(1 + 1).toBe(2);
});
it('ought not to do that', () => {
expect('red').toBe('green');
});
});

44. cy.*

45. E2Etests

46. Arrange
Act
Assert

47. Arrange
Act
Assert

48. cy.visit('https://google.com');

49. before(() => {
cy.clearLocalStorage();
cy.visit(examplePage);
});

50. Arrange
Act
Assert

51. cy.get(‘.username');
cy.get(‘#password');
cy.get('input[type=submit]');

52. cy.get('#password')
.type('random password');

53. • Use data-cy
attribute
• Visible text
• Element ids
• Class name
• Generic
control
name
https://docs.cypress.io/guides/references/best-practices

54. Arrange
Act
Assert

55. cy.contains('Google');
cy.contains('google', { matchCase: false });
cy.title().should(‘contain', ‘TotT');
cy.get('#password').should('not.contain',
'swordfish');
cy.get('#password')
.should('not.contain', 'passw0rd')
.and('not.contain', 'swordfish');
cy.get('#password')
.type('random password')
.should('have.value', 'random password');

56. Should

57. cy.get('h1')
.invoke('attr', 'class')
.should('eq', 'title');

58. • be.visible
• have.attr
• have.value
• have.text
• not.exist

59. So,areyou
feeling
lucky?

60. describe('Google', () => {
it('Knows about Tech on the Tyne', () => {
cy.viewport(1280, 720);
cy.intercept(‘https://www.google.com/search*')
.as('google');
cy.visit('https://www.google.com/');
// find reject all button...
cy.get('#W0wltc').click();
cy.get('input[name="q"]')
.type('Tech on the Tyne');
cy.get('form').submit();
cy.wait('@google');
});
});

61. E2EDemo

63. MoreExamples

64. cy.window().then((win) => {
win.navigator
.clipboard
.readText().then((text) => {
expect(text)
.to
.contain(‘Hello this is in the clipboard');
});
});

65. const block = cy.get('#content')
.find('.notification');
block.should('be.visible');
block.within(() => {
cy.get('p').contains('Hello World');
});

66. cy.get('.article').within(($article) => {
if ($article.find('img').length > 0) {
cy.get('img').each(($img) => {
cy.wrap($img).scrollIntoView()
.should('be.visible');
expect($img[0].naturalWidth)
.to.be.greaterThan(0);
expect($img[0].naturalHeight)
.to.be.greaterThan(0);
});
}
});

67. it('Web API works with Cypress', () => {
cy.request({
url: 'https://swapi.dev/api/people/1',
method: 'GET'
}).its('body')
.should('deep.contain', {
name: 'Anakin Skywalker'
})
})

68. it('Website talks to fake Star Wars API', () => {
cy.intercept(
'GET',
'https://swapi.dev/api/people/1', {
statusCode: 200,
body: {
name: 'Peter Pan',
},
})
})

69. Componenttests

70. https://github.com/
deejaygraham/calendar

71. ComponentDemo

72. npxcypressrun

73. • Component Level Tests
• Sandboxed
• Time travel
• Before and After
• Same dev experience as e2e

74. Debugging

75. cy.log('hello world’);
cy.debug();

76. Its&invoke

77. // access session storage
cy.window().its('sessionStorage');
// get access to the redux store
cy.window().its('store');
// dispatch an object to redux
cy.window()
.its('store')
.invoke('dispatch',
{
type: 'description',
value: 'smol'
});

78. CustomCommands

79. Cypress.Commands.add('store', () => {
return cy.log('Redux - Store')
.window({ log: false })
.its('store', { log: false });
});
Cypress.Commands.add('dispatch', (obj) => {
const { type, ...data } = obj;
return cy.log(`Redux - Dispatch: ${type}`,
data)
.window({ log: false })
.its('store', { log: false })
.invoke('dispatch', obj);
});

80. cy.store()
.dispatch(
{
type: 'description',
value: 'smol'
});

81. Spies&Stubs

82. const onChangeSpy =
cy.spy().as('onChangeSpy');
cy.mount(<Counter onChange={onChangeSpy} />);
cy.get('[data-cy=increment]').click();
cy.get('@onChangeSpy')
.should('have.been.calledWith', 1);

83. const onClick = cy.stub();
cy.mount(<Counter onClick={onClick} />);
cy.get('[data-cy=increment]')
.click()
.then(() => {
expect(onClick).to.be.called
// expect(onClick).to.not.be.called
});

84. @deejaygraham