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?

39°C
3 - 9°C

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

Why test?

What about the front end?

The front end matters too

So I'm a testing expert?
No.

So why me?

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

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 > header > img",
						"runner": "htmlcs",
						"runnerextras": {}


						"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 > header > img",


						"context": "",
						"selector": "html > body > header > 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

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

Thank You 👏