Skip to content

Commit bab10ad

Browse files
anitshanitsh
committed
Create tests
1 parent d65cb59 commit bab10ad

File tree

10 files changed

+236
-0
lines changed

10 files changed

+236
-0
lines changed

‎cypress.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "chromeWebSecurity": false }

‎cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/integration/header.spec.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
describe('Header Tests', () => {
2+
it('The post title is visible when navigating to a project and scrolling', () => {
3+
cy.visit('http://localhost:8000/posts/how-to-build-first-eslint-rule');
4+
cy.get('[data-testid="footer"]').scrollIntoView({ duration: 2000 });
5+
cy.get('[data-testid="header-title"]')
6+
.should('be.visible')
7+
.click();
8+
cy.wait(1000).then(() => {
9+
cy.get('[data-testid="header-title"]').should('be.visible');
10+
});
11+
});
12+
13+
it('Clicking on the Logo on the header redirects to the landing page', () => {
14+
cy.visit('http://localhost:8000/posts/how-to-build-first-eslint-rule');
15+
cy.get('[title="Go back to article list"]').click();
16+
cy.url().should('include', 'http://localhost:8000');
17+
});
18+
});

‎cypress/integration/landing.spec.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
describe('Landing Tests', () => {
2+
it('Loads the landing page', () => {
3+
cy.visit('http://localhost:8000');
4+
cy.get('[data-testid="article-list"]').should('be.visible');
5+
cy.get('[data-testid="article-item"]').should('be.visible');
6+
});
7+
8+
it('Loads the landing page in light mode by default', () => {
9+
cy.visit('http://localhost:8000');
10+
localStorage.removeItem('mode');
11+
cy.get('[data-testid="lightmode"]').should('exist');
12+
});
13+
14+
it('Loads the landing page in dark mode by default if local storage has mode: dark ', () => {
15+
cy.visit('http://localhost:8000');
16+
localStorage.setItem('mode', 'dark');
17+
cy.get('[data-testid="darkmode"]').should('exist');
18+
});
19+
20+
it('Clicking on the theme switcher should change the theme from light to dark', () => {
21+
cy.visit('http://localhost:8000');
22+
localStorage.setItem('mode', 'light');
23+
cy.get('[data-testid="lightmode"]').should('exist');
24+
cy.get('[data-testid="darkmode-switch"]')
25+
.should('be.visible')
26+
.click();
27+
cy.get('[data-testid="darkmode"]').should('exist');
28+
cy.wait(500).then(() => {
29+
expect(localStorage.getItem('mode')).to.eq('dark');
30+
});
31+
});
32+
33+
it('Clicking on the theme switcher while in dark mode should change the theme from dark to light', () => {
34+
cy.visit('http://localhost:8000');
35+
localStorage.setItem('mode', 'dark');
36+
cy.get('[data-testid="darkmode"]').should('exist');
37+
cy.get('[data-testid="darkmode-switch"]')
38+
.should('be.visible')
39+
.click();
40+
cy.get('[data-testid="lightmode"]').should('exist');
41+
cy.wait(500).then(() => {
42+
expect(localStorage.getItem('mode')).to.eq('light');
43+
});
44+
});
45+
46+
it('Theme should stay the same after refreshing the page', () => {
47+
cy.visit('http://localhost:8000');
48+
cy.get('[data-testid="lightmode"]').should('exist');
49+
cy.get('[data-testid="darkmode-switch"]')
50+
.should('be.visible')
51+
.click();
52+
cy.reload();
53+
cy.get('[data-testid="darkmode"]').should('exist');
54+
});
55+
});

‎cypress/integration/navigation.spec.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
describe('Navigation Tests', () => {
2+
it('It can go from the landing page to an article', () => {
3+
cy.visit('http://localhost:8000');
4+
cy.get('[data-testid="article-list"]').should('be.visible');
5+
cy.get('[data-testid="article-item"]').should('be.visible');
6+
cy.get('[data-testid="article-link"]')
7+
.eq(0)
8+
.click();
9+
cy.url().should('include', '/posts/');
10+
cy.get('[data-testid="hero"]').should('be.visible');
11+
});
12+
it('It can go from an article to the landing page', () => {
13+
cy.visit('http://localhost:8000/posts/how-to-build-first-eslint-rule');
14+
cy.get('[title="Go back to article list"]').click();
15+
cy.url().should('include', 'http://localhost:8000');
16+
cy.get('[data-testid="article-list"]').should('be.visible');
17+
cy.get('[data-testid="article-item"]').should('be.visible');
18+
});
19+
it('It shows the progress bar when scrolling', () => {
20+
cy.visit('http://localhost:8000');
21+
cy.get(
22+
'a[href="/posts/switching-off-the-lights-part-2-fixing-dark-mode-flashing-on-servered-rendered-website"]'
23+
).click({ force: true });
24+
cy.url().should('include', '/posts/');
25+
cy.get('[data-testid="hero"]').should('be.visible');
26+
cy.get('[data-testid="progress-bar"]').should('not.be.visible');
27+
cy.scrollTo(0, 800);
28+
cy.get('[data-testid="progress-bar"]').should('be.visible');
29+
});
30+
});

‎cypress/integration/search.spec.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
describe('Search tests', () => {
2+
it('Toggles the search box when hitting ctrl + k', () => {
3+
cy.visit('http://localhost:8000');
4+
cy.wait(2000);
5+
cy.get('body').type('{ctrl}k');
6+
cy.get('[data-testid="searchbox-overlay"]').should('be.visible');
7+
cy.get('[data-testid="searchbox"]').should('be.visible');
8+
cy.get('[data-testid="portfolio-link"]').should('be.visible');
9+
cy.get('[data-testid="twitter-link"]').should('be.visible');
10+
});
11+
12+
it('Hides the search box when hitting esc', () => {
13+
cy.visit('http://localhost:8000');
14+
cy.wait(2000);
15+
cy.get('body').type('{ctrl}k');
16+
cy.wait(1000);
17+
cy.get('body').type('{esc}');
18+
cy.get('[data-testid="searchbox-overlay"]').should('not.be.visible');
19+
cy.get('[data-testid="searchbox"]').should('not.be.visible');
20+
});
21+
22+
it('Hides the search box when clicking on the overlay', () => {
23+
cy.visit('http://localhost:8000');
24+
cy.wait(2000);
25+
cy.get('body').type('{ctrl}k');
26+
cy.wait(1000);
27+
cy.get('body').click(10, 10);
28+
cy.get('[data-testid="searchbox-overlay"]').should('not.be.visible');
29+
cy.get('[data-testid="searchbox"]').should('not.be.visible');
30+
});
31+
32+
// it('Searches when typing on the input and shows results', () => {
33+
// cy.visit('http://localhost:8000');
34+
// cy.wait(2000);
35+
// cy.get('body').type('{ctrl}k');
36+
// cy.get('[data-testid="searchbox-overlay"]').should('be.visible');
37+
// cy.get('[data-testid="searchbox"]').should('be.visible');
38+
// cy.get('input')
39+
// .clear()
40+
// .type('react');
41+
// cy.get('[data-testid="search-result"]').should('be.visible');
42+
// });
43+
44+
it('Clicking on a result navigates the user to an article', () => {
45+
cy.visit('http://localhost:8000/');
46+
cy.wait(2000);
47+
cy.get('body').type('{ctrl}k', { force: true });
48+
cy.get('input')
49+
.clear()
50+
.type('react', { delay: 400 });
51+
cy.get('[data-testid="search-result"]')
52+
.eq(0)
53+
.click();
54+
cy.url().should('include', '/posts/');
55+
cy.get('[data-testid="hero"]').should('be.visible');
56+
});
57+
});

‎cypress/plugins/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************************
3+
// This example plugins/index.js can be used to load plugins
4+
//
5+
// You can change the location of this file or turn off loading
6+
// the plugins file with the 'pluginsFile' configuration option.
7+
//
8+
// You can read more here:
9+
// https://on.cypress.io/plugins-guide
10+
// ***********************************************************
11+
12+
// This function is called when a project is opened or re-opened (e.g. due to
13+
// the project's config changing)
14+
15+
/**
16+
* @type {Cypress.PluginConfig}
17+
*/
18+
module.exports = (on, config) => {
19+
// `on` is used to hook into various events Cypress emits
20+
// `config` is the resolved Cypress config
21+
}

‎cypress/support/commands.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add("login", (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

‎cypress/support/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎jest-preprocess.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const babelOptions = {
2+
presets: ['babel-preset-gatsby', '@babel/preset-typescript'],
3+
};
4+
module.exports = require('babel-jest').createTransformer(babelOptions);

0 commit comments

Comments
 (0)