Skip to content

Commit

Permalink
✅ Introducing tests
Browse files Browse the repository at this point in the history
  • Loading branch information
KieraDOG committed Jun 20, 2020
1 parent a9426db commit d0172b1
Show file tree
Hide file tree
Showing 24 changed files with 984 additions and 135 deletions.
1 change: 1 addition & 0 deletions cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
54 changes: 54 additions & 0 deletions cypress/integration/e2e.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
describe('Weather App', () => {
beforeEach(() => {
cy.visit('http://localhost:3000');
});

it('should see current city weather', () => {
cy
.findByTestId('CURRENT')
.within(() => {
cy.findByTestId('TEMP').should('be.visible');
cy.findByTestId('WEATHER').should('be.visible');
cy.findByTestId('HUMIDITY').should('be.visible');
cy.findByTestId('WIND').should('be.visible');
});
});

it('should see current city name', () => {
cy
.findByTestId('CURRENT')
.within(() => {
cy.findByTestId('NAME').should('be.visible');
});
});

it('should see other 4 cities weather', () => {
cy
.findByTestId('OTHER_CITIES')
.within(() => {
cy.findAllByTestId('CITY')
.should('have.length', 4)
.first()
.within(() => {
cy.findByTestId('NAME').should('be.visible');
cy.findByTestId('TEMP').should('be.visible');
cy.findByTestId('WEATHER_ICON').should('be.visible');
});
});
});

it('should see forecast weather', () => {
cy
.findByTestId('FORECAST')
.within(() => {
cy.findAllByTestId('WEATHER')
.should('have.length', 7)
.first()
.within(() => {
cy.findByTestId('DAY').should('be.visible');
cy.findByTestId('WEATHER_ICON').should('be.visible');
cy.findByTestId('TEMP').should('be.visible');
});
});
});
});
21 changes: 21 additions & 0 deletions cypress/plugins/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
26 changes: 26 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
import '@testing-library/cypress/add-commands'
20 changes: 20 additions & 0 deletions cypress/support/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
28 changes: 23 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"react": "^16.13.1",
Expand All @@ -17,10 +14,25 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
"deploy": "gh-pages -d build",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"eslintConfig": {
"extends": "react-app"
"extends": "react-app",
"overrides": [
{
"files": [
"cypress/**/*"
],
"plugins": [
"cypress"
],
"env": {
"cypress/globals": true
}
}
]
},
"browserslist": {
"production": [
Expand All @@ -35,6 +47,12 @@
]
},
"devDependencies": {
"@testing-library/cypress": "^6.0.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"cypress": "^4.8.0",
"eslint-plugin-cypress": "^2.11.1",
"gh-pages": "^3.0.0"
},
"homepage": "https://kieradog.github.io/weather-app"
Expand Down
1 change: 1 addition & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
28 changes: 15 additions & 13 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,23 @@ import OtherCities from './components/OtherCities';
import VerticalDivider from './components/VerticalDivider';
import Forecast from './components/Forecast';

function App() {
return (
<div className={styles.app}>
<div className={styles.weather}>
<div className={styles.top}>
<Current />
</div>
<div className={styles.bottom}>
<OtherCities />
<VerticalDivider color="rgba(0, 0, 0, 0.1)" width="3px" />
<Forecast />
class App extends React.Component {
render() {
return (
<div className={styles.app}>
<div className={styles.weather}>
<div className={styles.top}>
<Current />
</div>
<div className={styles.bottom}>
<OtherCities />
<VerticalDivider color="rgba(0, 0, 0, 0.1)" width="3px" />
<Forecast />
</div>
</div>
</div>
</div>
);
);
}
}

export default App;
17 changes: 9 additions & 8 deletions src/components/Current/Current.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import axios from 'axios';
import React from 'react';
import styles from './Current.module.css';
import Meta from './components/Meta';
Expand Down Expand Up @@ -41,30 +40,32 @@ class Current extends React.Component {
const { data, loading } = this.state;

return (
<div className={styles.current}>
<div data-testid="CURRENT" className={styles.current}>
{loading ? (
<div className={styles.loading}>Loading...</div>
<div className={styles.left}>
<div className={styles.loading}>Loading...</div>
</div>
) : (
<React.Fragment>
<div className={styles.left}>
<div className={styles.temperature}>
<div data-testid="TEMP" className={styles.temperature}>
<Temperature>{data.main.temp}</Temperature>
</div>
<div className={styles.weather}>
<div data-testid="WEATHER" className={styles.weather}>
<Text>{data.weather[0].main}</Text>
</div>
<div className={styles.metas}>
<div className={styles.humidity}>
<div data-testid="HUMIDITY" className={styles.humidity}>
<Meta title="HUMIDITY" value={`${data.main.humidity}%`} />
</div>
<VerticalDivider width="2px" color="rgba(255, 255, 255, 0.7)" />
<div className={styles.wind}>
<div data-testid="WIND" className={styles.wind}>
<Meta title="WIND" value={`${data.wind.speed} K/M`} />
</div>
</div>
</div>
<div className={styles.right}>
<h1 className={styles.city}>{data.name}</h1>
<h1 data-testid="NAME" className={styles.city}>{data.name}</h1>
</div>
</React.Fragment>
)}
Expand Down
9 changes: 6 additions & 3 deletions src/components/Current/Current.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@

.right {
padding: 0 96px;
margin-left: 128px;
flex: 1;
display: flex;
justify-content: flex-end;
Expand All @@ -32,7 +31,7 @@

.temperature {
text-align: center;
font-size: 7rem;
font-size: 5rem;
}

.weather {
Expand Down Expand Up @@ -69,4 +68,8 @@
border-radius: 2px;
width: 50%;
transform: translateX(50%);
}
}

.loading {
font-size: 3rem;
}
65 changes: 39 additions & 26 deletions src/components/Forecast/Forecast.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,45 @@ import styles from './Forecast.module.css';
import Weather from './components/Weather';

const Forecast = () => (
<div className={styles.forecast}>
<Weather
day="MON"
temperature="9"
weather={{ icon: '11d', description: 'Thunderstorm' }}
/>
<Weather
day="TUE"
temperature="15"
weather={{ icon: '01d', description: 'Clear' }}
/>
<Weather
day="WED"
temperature="11"
weather={{ icon: '03d', description: 'Clouds' }}
/>
<Weather
day="THU"
temperature="7"
weather={{ icon: '50d', description: 'Mist' }}
/>
<Weather
day="FRI"
temperature="8"
weather={{ icon: '09d', description: 'Rain' }}
/>
<div data-testid="FORECAST" className={styles.forecast}>
<h2 className={styles.header}>Forecast</h2>
<div className={styles.weathers}>
<Weather
day="MON"
temperature="9"
weather={{ icon: '11d', description: 'Thunderstorm' }}
/>
<Weather
day="TUE"
temperature="15"
weather={{ icon: '01d', description: 'Clear' }}
/>
<Weather
day="WED"
temperature="11"
weather={{ icon: '03d', description: 'Clouds' }}
/>
<Weather
day="THU"
temperature="7"
weather={{ icon: '50d', description: 'Mist' }}
/>
<Weather
day="FRI"
temperature="8"
weather={{ icon: '09d', description: 'Rain' }}
/>
<Weather
day="SAT"
temperature="8"
weather={{ icon: '09d', description: 'Rain' }}
/>
<Weather
day="SUN"
temperature="8"
weather={{ icon: '09d', description: 'Rain' }}
/>
</div>
</div>
);

Expand Down
18 changes: 13 additions & 5 deletions src/components/Forecast/Forecast.module.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
.forecast {
padding: 0 48px;
flex: 1;
}

.header {
margin: 0;
font-weight: 300;
margin-bottom: 1rem;
letter-spacing: 2px;
}

.weathers {
display: flex;
padding: 0 56px;
align-items: center;
justify-content: space-between;
}

.forecast > * {
margin: 0 8px;
}
Loading

0 comments on commit d0172b1

Please sign in to comment.