Commit 422c7601 authored by Duvara Nishaharan's avatar Duvara Nishaharan
Browse files

#6 end-2-end testing

parent f86d9aa3
This diff is collapsed.
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
describe('display', () => {
beforeEach(() => {
cy.visit('http://localhost:3001/');
})
it("Check if homepage is displayed correctly", () => {
cy.get('Button')
.should('contain', 'Name')
.should('be.visible')
.should('contain', 'Search')
.should('have.css','font-family')
.and('match', /serif/)
})
})
describe('When searching', () => {
beforeEach(() => {
cy.visit('http://localhost:3001/');
})
it("Find search field", () => {
cy.get(".searchbar > input")
.type("Norway")
.should("have.value", "Norway")
cy.get("#buttonclick").click();
cy.get('#card').first().should('include.text', 'Norway');
});
});
\ No newline at end of file
/// <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}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
// ***********************************************
// 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) => { ... })
// ***********************************************************
// 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')
......@@ -13,6 +13,7 @@
"@types/react-dom": "^17.0.0",
"@types/react-redux": "^7.1.19",
"bootstrap": "5.1.1",
"cypress": "^8.7.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-rc.0",
"react-dom": "^17.0.2",
......@@ -25,7 +26,8 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"cypress:open": "cypress open"
},
"eslintConfig": {
"extends": [
......@@ -44,5 +46,6 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"devDependencies": {}
}
......@@ -18,7 +18,7 @@ export const CountryCard: FunctionComponent<IProps> = ({
const [active, setActive] = useState(store.getState().value===id);
store.subscribe(() => setActive(store.getState().value===id))
return <Card className={"CountryCard__card__"+active}
return <Card id= "card" className={"CountryCard__card__"+active}
onClick={() => {store.getState().value!==id ? store.dispatch({ type: 'setState', newValue: id }) : store.dispatch({ type: 'setState', newValue: -1 });}}
bg="dark">
<Card.Body>
......
......@@ -7,7 +7,7 @@ export const Header: React.FC = ({
}) => {
return (
<header>
<img src={globe} alt="Logo" className="Header__Logo"/>
<img src={globe} alt="Logo" id="Logo" className="Header__Logo"/>
<div className="Header__Content">{children}</div>
</header>
);
......
......@@ -31,7 +31,7 @@ export class Searchbar extends React.Component<IProps, IState> {
<input type="text" className="form-control" placeholder="Enter Country" />
<div className="input-group-append">
<button onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button"><Search/>Search</button>
className="btn btn-outline-secondary" type="button" id="buttonclick"><Search/>Search</button>
</div>
{this.state.active && <div>Jeg er active</div>}
</div>)
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment