Commit 55847896 authored by DESKTOP-J7QTMBR\mikke's avatar DESKTOP-J7QTMBR\mikke
Browse files

Merge branch '8-lag-sokebar-med-filtrerings-og-sorteringsfunksjoner' of...

Merge branch '8-lag-sokebar-med-filtrerings-og-sorteringsfunksjoner' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-28/project-3 into Hent-Data-Fra-Backend-Med-Api
parents fd379ac3 a856d51f
......@@ -45,5 +45,9 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cypress": "^8.7.0",
"jest": "^27.3.1"
}
}
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
import { CardContainer } from './components/display/CardContainer';
import Layout from './components/Layout';
import ReactDOM from 'react-dom';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
const { getByText } = render(
<div className="App">
<Layout title="s">
<CardContainer/>
</Layout>
</div>
);
const SearchButton = getByText("Search");
expect(SearchButton).toBeInTheDocument();
});
test("it renders without crashing", () => {
const spanTest = document.createElement("li");
ReactDOM.render(
<div className="App">
<Layout title="s">
<CardContainer/>
</Layout>
</div>,
spanTest
);
ReactDOM.unmountComponentAtNode(spanTest);
});
......@@ -22,7 +22,7 @@ export const CountryCard: FunctionComponent<IProps> = ({
onClick={() => {store.getState().value!==id ? store.dispatch({ type: 'setState', newValue: id }) : store.dispatch({ type: 'setState', newValue: -1 });}}
bg="dark">
<Card.Body>
<Card.Title>{country.name}</Card.Title>
<Card.Title>{"ddd"+ country.name}</Card.Title>
<Card.Text>
{country.continent}
</Card.Text>
......
.ContinentCheckbox{
display: flex;
align-items: flex-start;
gap:30px;
margin-top: 200px;
}
\ No newline at end of file
import { fireEvent, getByTestId, render,screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React, { useState } from "react";
import App from "../../App";
import { ContinentCheckbox } from "./ContinentCheckbox";
describe("<ContinentCheckbox />", () => {
test('render component', () => {
render(<ContinentCheckbox />);
const asia = screen.getByText("Asia");
expect(asia).toBeInTheDocument();
expect(asia).not.toBeChecked();
userEvent.click(asia);
//expect(asia.getAttribute).toBeFalsy;
});
})
import React, { FunctionComponent, useState } from 'react';
import { Form } from 'react-bootstrap';
import { getFilter } from '../../utils/APIUtil';
import { searchbarStore } from './SearchbarStore';
//import './CountryCard.css';
export const ContinentCheckbox: FunctionComponent = ({
}) => {
//interface iLand {name: string; checked: boolean;}
//const land: iLand[] = [{"Asia",true},{ "EU",true}, {"Amerika",true}]
const [checkedAsia, setCheckedAsia] = useState(false)
const [checkedAfrika, setCheckedAfrika] = useState(false)
const [checkedEuropa, setCheckedEuropa] = useState(false)
const [checkedNordAmerika, setCheckedNordAmerika] = useState(false)
const [checkedSorAmerika, setCheckedSorAmerika] = useState(false)
const [checkedOseania, setCheckedOseania] = useState(false)
const handleClick = () => {
let countrylist:string[] =[]
//send call
if (checkedAsia){
countrylist.push("asia")
}
getFilter('{country(continent:'+ countrylist+'){name, native, continent, capital, currency, languages}}')
}
//lage usestate for asia og endrer seg.
//endre state
//
//
return <>
<div className="ContinentCheckbox"></div>
<Form.Check type="checkbox" label="Asia" id="Asia" onClick={() => {setCheckedAsia(!checkedAsia);handleClick();}} />
<Form.Check type="checkbox" label="Europa" onClick={() => {setCheckedEuropa(!checkedEuropa); handleClick()}} />
<Form.Check type="checkbox" label="Afrika" onClick={() => {setCheckedAfrika(!checkedAfrika);handleClick()}} />
<Form.Check type="checkbox" label="Sør-Amerika" onClick={() =>{setCheckedSorAmerika(!checkedSorAmerika); handleClick()}} />
<Form.Check type="checkbox" label="Nord-Amerika" onClick={() =>{setCheckedNordAmerika(!checkedNordAmerika); handleClick()}} />
<Form.Check type="checkbox" label="Oseania" onClick={() =>{setCheckedOseania(!checkedOseania); handleClick()}} />
</>
}
import { CollapseFilled, ExpandFilled, Settings } from '@navikt/ds-icons';
import React, { FunctionComponent, useState } from 'react';
import { Button } from 'react-bootstrap';
import { Button, Form } from 'react-bootstrap';
import { ContinentCheckbox } from './ContinentCheckbox';
import './Filter.css';
import './ContinentCheckbox.css'
type IProps = {}
export const Filter: FunctionComponent<IProps> = () => {
const [hidden, setHidden] = useState(true);
const filterOptions = <>
<Button variant="secondary">Name</Button>
<Button variant="secondary">Official languages</Button>
<Button variant="secondary">Option 3</Button>
<div className={"Sorting"}>
<Button variant="secondary">Name</Button>
<Button variant="secondary">Official languages</Button>
<Button variant="secondary">Option 3</Button>
</div>
<div className={"ContinentCheckbox"}>
<ContinentCheckbox/>
</div>
</>;
return (
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FocusInput matches snapshot 1`] = `
<div
class="searchbar"
>
<input
class="form-control"
placeholder="Enter Country"
type="text"
/>
<div
class="input-group-append"
>
<button
class="btn btn-outline-secondary"
id="search_button"
type="button"
>
Search
</button>
</div>
</div>
`;
[
{
"AD": {
"name": "Andorra",
"native": "Andorra",
"phone": "376",
"continent": "EU",
"capital": "Andorra la Vella",
"currency": "EUR",
"languages": [
"ca"
]
},
"AE": {
"name": "United Arab Emirates",
"native": "دولة الإمارات العربية المتحدة",
"phone": "971",
"continent": "AS",
"capital": "Abu Dhabi",
"currency": "AED",
"languages": [
"ar"
]
},
"AF": {
"name": "Afghanistan",
"native": "افغانستان",
"phone": "93",
"continent": "AS",
"capital": "Kabul",
"currency": "AFN",
"languages": [
"ps",
"uz",
"tk"
]
},
"AG": {
"name": "Antigua and Barbuda",
"native": "Antigua and Barbuda",
"phone": "1268",
"continent": "NA",
"capital": "Saint John's",
"currency": "XCD",
"languages": [
"en"
]
},
"AI": {
"name": "Anguilla",
"native": "Anguilla",
"phone": "1264",
"continent": "NA",
"capital": "The Valley",
"currency": "XCD",
"languages": [
"en"
]
}
}
]
\ No newline at end of file
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { Searchbar } from './searchbar';
import App from "../../App";
import { Provider } from "react-redux";
import { searchbarStore } from "./SearchbarStore";
test('FocusInput matches snapshot', () => {
const { container } = render(<Searchbar />)
expect(container.firstChild).toMatchSnapshot();
});
describe('Component: Searchvar', () => {
const items =["Norway", "India", "Germany"];
describe("<searchbar />", () => {
// test('Check placholer value', () => {
// const container = render(<Searchbar />)
// expect(container.find('.searchbar').at(0).props().placeholder).toEqual("Enter Country")
});
});
function shallow(arg0: JSX.Element) {
throw new Error("Function not implemented.");
}
/*
test('calls correct function on click', () => {
const onClick = jest.fn();
const jo = render(getById("search_button") />)
expect(onClick).toHaveBeenCalled();
});
*/
//});
......@@ -3,6 +3,7 @@ import React from 'react';
import { Country } from '../../interfaces/Country';
import './SearchbarStore.tsx'
import { searchbarStore } from './SearchbarStore';
import countriesJson from './countries.json'
import { Search } from '@navikt/ds-icons';
import { getAllData } from '../../utils/APIUtil';
......@@ -13,6 +14,31 @@ interface IState {
active: boolean,
items: string[]
}
const jsonData = JSON.stringify(countriesJson)
const jsnobj= JSON.parse(jsonData)
//var newarray: Country[]= [];
//for (const [key, value] of Object.entries(jsnobj[0])) {
//var test =(`${key}: ${value}`);
// }
//for (let key in jsnobj[0]){
//let value = (Object.keys(jsnobj[0]))
//console.log(value)
//newarray.push(JSON.parse(key) as Country)
//}
//const newdata:Country[] = jsonData
export class Searchbar extends React.Component<IProps, IState> {
constructor(props: IState) {
......@@ -39,10 +65,10 @@ 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>
<button id="search_button" onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button"> Search</button>
</div>
{this.state.active && <div>Jeg er active</div>}
{this.state.active }
</div>)
}
}
\ No newline at end of file
}
......@@ -5,4 +5,4 @@ export interface Country{
currency: string,
languages: string[]
name: string,
}
\ No newline at end of file
}
Supports Markdown
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