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

Linting

Automated checking for programmatic and stylistic errors


						npm install eslint


							npm install stylelint

Accessibility Testing

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


							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


					npm install -g backstopjs


						backstop init

Can yield false results

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://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://24ways.org/2019/twelve-days-of-front-end-testing/

https://www.javascriptjanuary.com/blog/getting-started-with-front-end-testing

kapers.dev/ndc-sydney-2020

Thank You 👏