Second version of my talk, with screenshots that I had to add because demos did not work in the venue. 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. https://www.slideshare.net/deejaygraham
/testing-at-both-ends-of-the-triangle
If you want to play along…

8. The.
Testing.
Triangle.

11. Testcodeiscode

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

13. Microtests

14. 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

15. EndtoEndTests

16. IntegratedTests

23. Web2.0

27. S
cr
ipt

29. CypressGood:)

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

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

32. CypressBad:(

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

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

35. npminstallcypress

36. https://docs.cypress.io

37. npxcypressopen

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

43. Let’stalk
about
Jest(maybe)

44. 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');
});
});

45. cy.*

46. E2Etests

47. Arrange
Act
Assert

48. Arrange
Act
Assert

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

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

51. Arrange
Act
Assert

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

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

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

55. Arrange
Act
Assert

56. 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');

57. Should

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

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

60. So,areyou
feeling
lucky?

61. 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');
});
});

62. E2EDemo

66. MoreExamples

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

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

69. 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);
});
}
});

70. 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'
})
})

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

72. Componenttests

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

74. ComponentDemo

75. npxcypressrun

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

80. Debugging

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

82. Its&invoke

83. // 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'
});

84. CustomCommands

85. 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);
});

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

87. Spies&Stubs

88. 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);

89. 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
});

90. @deejaygraham