Commit a856d51f authored by Duvara Nishaharan's avatar Duvara Nishaharan
Browse files

#8 La til checkboxes og state for filtrering.

parent 99c42286
......@@ -6,7 +6,7 @@ module.exports = buildSchema(`
_id: ID!
name: String!
native: String
continent: String!
continent: String
capital: String!
currency: String
languages: [String]
......
......@@ -8,7 +8,6 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/axios": "^0.14.0",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
......@@ -45,5 +44,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);
});
.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>
`;
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();
});
*/
//});
......@@ -60,10 +60,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>)
}
}
......@@ -6,7 +6,14 @@ export function getData(): Promise<Country[]> {
return axios.get('http://localhost:3001/graphql?query={country{name, native, continent, capital, currency, languages}}')
.then((response: AxiosResponse) => {
console.log(response.data);
console.log(response.data.data.country[0]);
return response.data.data.country as Country[]
});
}
export function getFilter(query: string): Promise<Country[]> {
return axios.get('http://localhost:3001/graphql?query='+query)
.then((response: AxiosResponse) => {
console.log(response.data);
return response.data.data.country as Country[]
});
}
\ 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