Wait...
So I have to test the front end too?

Wait...
So I have to test the front end too?

Wait...
So I have to test the front end too?

Why test?

What about the front end?

The front end matters too

Accessibility testing Performance testing User testing HTML validation Visual Regression testing

Linting

Automated checking for programmatic and stylistic errors


						npm install eslint
					
https://eslint.org/docs/rules

							npm install stylelint
						
https://stylelint.io/user-guide/rules

Accessibility Testing

https://pa11y.org

Web Content Accessibility Guidelines
WCAG

https://www.w3.org/WAI/standards-guidelines/wcag
  • A - Minimum, mostly accessible but not convenient
  • AA - General standard, balance of ease of use & development
  • AAA - Highest standard, sites for persons with disabilities
https://pa11y.org

							npm install pa11y
						

						"code": "WCAG2AA.Principle1.Guideline1_1.1_1_1.H37",
						"type": "error",
						"typeCode": 1,
						"message": "Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.",
						"context": "",
						"selector": "html > body > main > article > article:nth-child(1) > img",
						"runner": "htmlcs",
						"runnerExtras": {}
					

						"code": "WCAG2AA.Principle1.Guideline1_1.1_1_1.H37",
						"message": "Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.",
						"context": "",
						"selector": "html > body > main > article > article:nth-child(1) > img",
					

					"context": "",
					"selector": "html > body > main > article > article:nth-child(1) > img"
					

						"code": "wcag2aa.principle1.guideline1_1.1_1_1.h37",
						"message": "img element missing an alt attribute. use the alt attribute to specify a short text alternative.",
					

						1_1.1_1_1.h37
					
http://squizlabs.github.io/HTML_CodeSniffer/Standards/WCAG2/

						pa11y('http://my-testing-blog.local', {
							actions: [
								'click element #tab-1',
								'wait for element #tab-1-content to be visible',
							],
							viewport: {
								width: 320,
								height: 480,
								ismobile: true
							},
							standard: 'wcag2aaa',
							headers: {
								'content-type': 'application/json'
							},
							method: 'post',
							postdata: '{"foo": "bar", "bar": "baz"}'
						});
					

						await Promise.all([
							pa11y(`http://my-testing-blog.local`, options),
						])
					

							await Promise.all([
								pa11y(`http://my-testing-blog.local`, options),
								pa11y(`http://my-testing-blog.local/blog-post`, options)
							])
						

Visual Regression Testing

Can yield false results

https://github.com/garris/BackstopJS

End to end testing


					npm install cypress
				

						cypress open
					

					describe(`Blog Homepage`, () => {
					  before(() => {
					    cy.visit(`http://my-testing-blog.local`);
					  });
					
					  it(`Contains "My Testing Blog" in the title`, () => {
					    cy.title().should(`contain`, `My Testing Blog`);
					  });
					});
				

					// Name of Test
					describe('Blog Homepage', () => {
					  // Runs at the start of this test
					  before(() => {
					    // Visit our website in the Cypress browser
					      cy.visit('http://my-testing-blog.local')
					    })

					  // Assertion - title should contain specific text
					  it('contains "My Testing Blog" in the title', () => {
					    cy.title().should('contain', 'My Testing Blog')
					  })
					})
				
https://github.com/chaijs/chai
https://docs.cypress.io/guides/references/assertions.html

					expect(name).to.not.equal('Jane')
				
https://docs.cypress.io/examples/examples/tutorials.html

						describe(`Blog Homepage`, () => {
						  before(() => {
						   cy.visit(`http://my-testing-blog.local`);
						  });
						  
						  it(`Contains "My Testing Blog" in the title`, () => {
						   cy.title().should(`contain`, `My Testing Blog`);
						  });
						});
					
  • Linting
  • Accessibility Testing
  • Visual Regression Testing
  • End to End Testing

🎉

https://youtu.be/DHPX2ShCxBc
https://24ways.org/2019/twelve-days-of-front-end-testing/
https://www.javascriptjanuary.com/blog/getting-started-with-front-end-testing

kapers.dev/build-stuff-2020

Thank You 👏