Jesse is an Angular GDE (Google Developer Expert) which is the new hotness which is kinda like being a Microsoft MVP (Most Valuable Professional) ten years back. There are only thirty-four Angular GDEs, only twenty of the thirty-four do consulting, and six of the twenty, Mr. Sanders included, work at BrieBug. The art of end-to-end testing, the space where Cypress.io is an emerging player, starts with VB4 (I guess there was a VB4 before VB6) and was done with ActiveX (X a stand-in for numerous diversified things as is the case with DirectX maybe?). In our modern times we have Selenium, WebDriver, Protractor, and Nightwatch and all four of these basically boil down to just being Selenium under the hood which was written in 2004 when the web had an always-leave-the-page-for-the-server-and-come-back-to-a-new-page vibe consistently devoid of API calls for updating the page at hand and certainly long before SPA apps appeared. Attempts to modernize Selenium have been kludgy and end-to-end testing is in many ways still trapped in 2004 with Howard Dean and Hellboy. Criticisms? The tests take too long, fail randomly, and the wait.until paradigm of WebDriver and all of its sisters in sister tools for making sure that one or more asynchronous calls are done resolving are ghetto. Here is another criticism. Maybe we shouldn't be doing end-to-end tests. Maybe we could have one or two of those and then otherwise stub the API, huh? If we don't go in that direction we have wacky workflows in which we pump data into a form in order to get data in the app just so we can test how the data reads. The E2E nature is part of what is slowing us down. These are smoke tests really to make sure all of the API intergration is there. Cypress.io has a way to mock APIs! Cypress.io in contrast to the Selenium quartet is an Electron app written in modern times, beginning in 2015. It has readable error messages, not the mumbo jumbo StackTrace gunk of Selenium. Common libraries like Sinon.JS, jQuery, Underscore, minimatch (converts glob expressions, an alternative to regular expressions, into regular expressions), and Moment.js are baked into Cypress.io. Every time a test fails you get a screenshot and every test will also give you a video of the test running be it pass or fail. npx cypress open opens the testing and runs it before your eyes while npx cypress run runs it at the server. CircleCI can run the Cypress.io tests in continuous integration implementations. The question was asked of how Cypress runs tests and Jesse wasn't sure offhand if Headless Chrome (the new PhantomJS now that PhantomJS is long antiquated) was used under the hood. It is a fact that Cypress.io will only work with Google Chrome for the moment. There was talk of getting it to play with the other browsers. Also, drag-and-drop support is something "coming" that is not yet here. An example of testing, direct from one of Jesse's slides, is:
describe('My actions tasks', () => {
beforeEach(() => {
cy.visit('https://example.cypress.io/commands/actions')
})
it('.focus() - focus on a DOM element', () => {
// https://on.cypress.io/focus
cy.get('.action-focus')
.focus()
.should('have.class', 'focus')
.prev().should('have.attr', 'style', 'color: orange;')
})
});
Here is deeper example of doing stuff that doesn't really test anything but shows off some of the how-to. Note the use of the word "enter" in curly braces to simulate character thirteen.
describe('My actions tasks', () => {
beforeEach(() => {
cy.visit('https://example.cypress.io/commands/actions')
})
it('actions', () => {
cy.get('button').click().dblclick();
cy.get('input#keyword').type('redux{enter}').clear();
cy.get('input#firstName').focus().blur();
cy.get('#iAgree').check().uncheck();
})
});
This slide showed off implicit versus explicit testing:
// implicit subjects
cy.get('#header a')
.should('have.class', 'active')
.and('have.attr', 'href', '/users')
// or explicit subjects
cy.get('tbody tr:first').should(($tr) => {
expect($tr).to.have.class('active')
expect($tr).to.have.attr('href', '/users')
})
Alright, here we having the stubbing. Json Server may be used to fill in what comes back from a faked API call. Json Server is exactly what it sounds like. You use it to make a dummy API to talk to when building out the head for a headless app. When I was at Wells Fargo Advisors we were using it amid an Express app to interact with from Angular.
cy.server()
// we set the response to be the activities.json fixture
cy.route('GET', 'users/*', 'fixture:users.json');
//or
cy.fixtures('users.json').as('usersJSON');
cy.route('GET', 'users/*', '@usersJSON');
Beyond Jesse Sanders' talk, a few other interesting things came up. For example I could not resist taking a picture of Will Buck's laptop as he had put stickers over all of the keys.
In particular, I like the use of Ms. Pac-Man and Pac-Man as less than and greater than symbols. While things are not normally taken this far, what is with geeks putting stickers on their laptops? How did this start? If you put stickers on your skateboard in 1989 is this just the thirty years ahead flash forward from that? There was talk of Microsoft sunsetting TFS in favor of GitHub, but also some talk of how it would not happen quickly given the way tech giants love to milk reoccurring contracts around subscriptions to old tech until the bitter end. "The Axe" is a static library for accessibility tools (Axe is the formal name), and Appsee is an accessibly tool which will allow for sensitive bits of information to be blacked-out in testing. There is some corny tool that will convert your web site into a Yahoo! GeoCities-style web site incomplete (maybe) without a MIDI (musical instrument digital interface) file playing. For some reason I did not write down in my notes what this thing was. It might be Geocities-izer which I found in Googling.
No comments:
Post a Comment