Merge branch '6-lag-hensiktsmessige-tester' of...

Merge branch '6-lag-hensiktsmessige-tester' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-28/project-3

project-3/cypress.json

+{}

project-3/cypress/fixtures/example.json

+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

project-3/cypress/integration/2-advanced-examples/home.spec.js

+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/)
+})
+           
+        
+      
+    
+})

project-3/cypress/integration/2-advanced-examples/search.spec.js

+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

project-3/cypress/plugins/index.js

+/// <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
+}

project-3/cypress/support/commands.js

+// ***********************************************
+// 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) => { ... })

project-3/cypress/support/index.js

+// ***********************************************************
+// 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')

project-3/package.json

@@ -14,6 +14,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",
@@ -26,7 +27,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": [
@@ -47,7 +49,6 @@
     ]
   },
   "devDependencies": {
-    "cypress": "^8.7.0",
-    "jest": "^27.3.1"
+    "cypress": "^8.7.0"
   }
 }

project-3/src/components/display/CountryCard.tsx

@@ -17,7 +17,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>

project-3/src/components/header/Header.tsx

@@ -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>
     );

project-3/src/components/searchbar/__snapshots__/searchbar.test.tsx.snap

@@ -14,10 +14,10 @@ exports[`FocusInput matches snapshot 1`] = `
   >
     <button
       class="btn btn-outline-secondary"
-      id="search_button"
+      id="buttonclick"
       type="button"
     >
-       Search
+      Search
     </button>
   </div>
 </div>

project-3/src/components/searchbar/searchbar.test.tsx

@@ -14,7 +14,7 @@ import { searchbarStore } from "./SearchbarStore";
             expect(container.firstChild).toMatchSnapshot();
           });
 
-          describe('Component: Searchvar', () => {
+          describe('Component: Searchbar', () => {
             const items =["Norway", "India", "Germany"];
 
             describe("<searchbar />", () => {

project-3/src/components/searchbar/searchbar.tsx

@@ -79,8 +79,8 @@ export class Searchbar extends React.Component<IProps, IState> {
             <div className="searchbar">
                 <input type="text" className="form-control" placeholder="Enter Country" onInput={(e)=>{this.setState({search_text: e.currentTarget.value});this.setState({page_number: 0});}}/>
                 <div className="input-group-append">
-                    <button id="search_button" onClick={() => this.onSearch()}
-                        className="btn btn-outline-secondary" type="button"> Search</button>
+                    <button onClick={() => this.onSearch()}
+                        className="btn btn-outline-secondary" type="button" id="buttonclick">Search</button>
                 </div>
                 {this.state.active }
             </div>