Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: add e2e tests for blog and visualisation pages (#168)
* test: search function on homepage * test: add tests for events and visualisation page * test: add tests for visualisation page and items * test: add tests for blog Correct headless option to true * test: add more tests for blog pages
- Loading branch information
Showing
35 changed files
with
1,510 additions
and
722 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
258 changes: 126 additions & 132 deletions
258
content/docs/2021-07-21-Contribute-visualisation/index.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,6 @@ | ||
| module.exports = { | ||
| '*.js': ['eslint'], | ||
| '*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)': [ | ||
| 'prettier --write', | ||
| 'git add' | ||
| "*.js": ["eslint"], | ||
| "*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)": [ | ||
| "prettier --write" | ||
| ] | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,60 @@ | ||
| import React from 'react' | ||
| import PropTypes from "prop-types" | ||
| import { Link } from "gatsby" | ||
| import kebabCase from "lodash.kebabcase" | ||
| import Flip from 'react-reveal/Flip' | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { Link } from "gatsby"; | ||
| import kebabCase from "lodash.kebabcase"; | ||
| import Flip from "react-reveal/Flip"; | ||
|
|
||
| const menuCategory = ({ pageContext, handleTagMenu, tagMenu }) => { | ||
| const buttonStyle = "bg-white text-gray-900 border-1 border-gray-100 py-2 px-3 mr-2 mt-2 rounded-sm text-sm transition duration-300 ease-in-out" | ||
| const buttonStyle = | ||
| "bg-white text-gray-900 border-1 border-gray-100 py-2 px-3 mr-2 mt-2 rounded-sm text-sm transition duration-300 ease-in-out"; | ||
| const topTags = Object.entries(pageContext.countTags) | ||
| .sort((a,b) => b[1] - a[1]) | ||
| .slice(0,15); | ||
| .sort((a, b) => b[1] - a[1]) | ||
| .slice(0, 15); | ||
|
|
||
| return ( | ||
| <Flip cascade top delay={1000}> | ||
| <div className="flex flex-wrap px-5 w-full mt-10" style={{maxWidth: '650px'}}> | ||
| <div | ||
| className="flex flex-wrap px-5 w-full mt-10" | ||
| style={{ maxWidth: "650px" }} | ||
| aria-label="List of categories and top tags" | ||
| > | ||
| {pageContext.categories.map((cat) => ( | ||
| <Link | ||
| key={cat} | ||
| to={`/blog/category/${kebabCase(cat)}`} | ||
| activeStyle={{ color: "#00aeef" }} | ||
| key={cat} | ||
| to={`/blog/category/${kebabCase(cat)}`} | ||
| activeStyle={{ color: "#00aeef" }} | ||
| partiallyActive={true} | ||
| className={`${buttonStyle} hover:text-brand-blue hover:border-blue-300 font-semibold`} | ||
| > | ||
| {cat} | ||
| </Link> | ||
| ))} | ||
| {topTags.map((tag) => ( | ||
| <Link | ||
| key={tag[0]} | ||
| <Link | ||
| key={tag[0]} | ||
| to={`/blog/tag/${kebabCase(tag[0])}`} | ||
| activeStyle={{ color: "#ff79b4" }} | ||
| activeStyle={{ color: "#ff79b4" }} | ||
| partiallyActive={true} | ||
| className={`${buttonStyle} hover:text-brand-pink hover:border-pink-300`} | ||
| > | ||
| {tag[0]} | ||
| </Link> | ||
| </Link> | ||
| ))} | ||
| <div | ||
| title="Click to open the menu" | ||
| <button | ||
| aria-label="Click to toggle the tag menu" | ||
| title="Click to toggle the tag menu" | ||
| onClick={() => handleTagMenu()} | ||
| className={`${buttonStyle} hover:text-white hover:bg-gray-900 hover:border-gray-900 font-bold cursor-pointer`} | ||
| > | ||
| {tagMenu ? 'CLOSE' : 'MORE'} | ||
| </div> | ||
| {tagMenu ? "CLOSE" : "MORE"} | ||
| </button> | ||
| </div> | ||
| </Flip> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| } | ||
|
|
||
| export default menuCategory | ||
| export default menuCategory; | ||
|
|
||
| menuCategory.propTypes = { | ||
| pageContext: PropTypes.any, | ||
|
|
||
| } | ||
| pageContext: PropTypes.any | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,123 @@ | ||
| import React, {useState} from 'react' | ||
| import PropTypes from "prop-types" | ||
| import { Link } from "gatsby" | ||
| import kebabCase from "lodash.kebabcase" | ||
| import { FaTags} from "react-icons/fa" | ||
| import {FiSearch} from "react-icons/fi" | ||
| import { IoMdClose } from "react-icons/io" | ||
| import { useLocation } from "@gatsbyjs/reach-router" | ||
| import React, { useState } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { Link } from "gatsby"; | ||
| import kebabCase from "lodash.kebabcase"; | ||
| import { FaTags } from "react-icons/fa"; | ||
| import { FiSearch } from "react-icons/fi"; | ||
| import { IoMdClose } from "react-icons/io"; | ||
| import { useLocation } from "@gatsbyjs/reach-router"; | ||
|
|
||
| const menuTagSlide = ({ pageContext, handleTagMenu, tagMenu }) => { | ||
| const [filterTag, setfilterTag] = useState(pageContext.allTags); | ||
| var { href } = useLocation(); | ||
| if(!href) href = ""; | ||
| if (!href) href = ""; | ||
|
|
||
| function handleChange(e) { | ||
| // on input, show tag menu | ||
| if(tagMenu === false) handleTagMenu(); | ||
| if (tagMenu === false) handleTagMenu(); | ||
|
|
||
| let searchWord = e.target.value.toLowerCase(); | ||
| let searchTagList = pageContext.allTags.filter(function(tag) { | ||
| let searchTagList = pageContext.allTags.filter(function (tag) { | ||
| return tag.toLowerCase().indexOf(searchWord) != -1; // returns true or false | ||
| }); | ||
| setfilterTag(searchTagList) | ||
| setfilterTag(searchTagList); | ||
| } | ||
|
|
||
|
|
||
| return ( | ||
|
|
||
| <div id="slideTagMenu" className="xl:w-1/4 2xl:w-1/5 px-5 py-1 xl:py-3 hideScrollBar text-gray-100 shadow-lg text-sm fixed top-0 right-0 min-h-100 hidden xl:flex flex-row border-l-2 border-white transition duration-500 z-50 bg-white" | ||
| style={ tagMenu ? {transform: "translateX(0%)", height: "100vh", overflowY: "scroll"} : {transform: "translateX(102%)"} } | ||
| > | ||
| <div onClick={() => handleTagMenu()} className={`${tagMenu ? 'hidden' : 'block'} absolute left-0 min-h-100 -ml-10 font-bold cursor-pointer flex flex-row items-center transition duration-500 delay-500`} style={{transform: 'translateY(-5%)'}} > | ||
| <div className="px-3 py-4 hover:bg-brand-blue bg-gray-900 transition duration-500 shadow-xl" tabIndex="0" title="Open tag menu">T<br />A<br />G</div> | ||
| </div> | ||
| <div onClick={() => handleTagMenu()} className={`${tagMenu ? 'block' : 'hidden'} absolute right-0 top-0 m-2 cursor-pointer`}> | ||
| <div className="px-3 py-3 bg-brand-blue hover:bg-gray-900 transition duration-500 font-bold" tabIndex="0" title="Close the menu"><IoMdClose /></div> | ||
| </div> | ||
|
|
||
| <div | ||
| id="slideTagMenu" | ||
| className="xl:w-1/4 2xl:w-1/5 px-5 py-1 xl:py-3 hideScrollBar text-gray-100 shadow-lg text-sm fixed top-0 right-0 min-h-100 hidden xl:flex flex-row border-l-2 border-white transition duration-500 z-50 bg-white" | ||
| style={ | ||
| tagMenu | ||
| ? { | ||
| transform: "translateX(0%)", | ||
| height: "100vh", | ||
| overflowY: "scroll" | ||
| } | ||
| : { transform: "translateX(102%)" } | ||
| } | ||
| > | ||
| <button | ||
| onClick={() => handleTagMenu()} | ||
| className={`${ | ||
| tagMenu ? "hidden" : "block" | ||
| } absolute left-0 min-h-100 -ml-10 font-bold cursor-pointer flex flex-row items-center transition duration-500 delay-500`} | ||
| style={{ transform: "translateY(-5%)" }} | ||
| > | ||
| <div | ||
| className="px-3 py-4 hover:bg-brand-blue bg-gray-900 transition duration-500 shadow-xl" | ||
| title="Open tag menu" | ||
| aria-label="Open the side tag menu" | ||
| > | ||
| T<br />A<br />G | ||
| </div> | ||
| </button> | ||
| <button | ||
| onClick={() => handleTagMenu()} | ||
| className={`${ | ||
| tagMenu ? "block" : "hidden" | ||
| } absolute right-0 top-0 m-2 cursor-pointer`} | ||
| title="Close the menu" | ||
| aria-label="Close the slide tag menu" | ||
| > | ||
| <div className="px-3 py-3 bg-brand-blue hover:bg-gray-900 transition duration-500 font-bold"> | ||
| <IoMdClose /> | ||
| </div> | ||
| </button> | ||
|
|
||
| {/* main tag menu */} | ||
| <div className="lg:py-2 xl:py-6"> | ||
| <div> | ||
| <h1 className="inline-block text-2xl pb-2 xl:pb-5 font-semibold mr-4 text-gray-900"><FaTags style={{display: "inline-block"}} /> {href.includes("/blog/tag/") ? <Link to="/blog/#read">ALL</Link> : "Tags"}</h1> | ||
| <h1 className="inline-block text-2xl pb-2 xl:pb-5 font-semibold mr-4 text-gray-900"> | ||
| <FaTags style={{ display: "inline-block" }} />{" "} | ||
| {href.includes("/blog/tag/") ? ( | ||
| <Link to="/blog/#read">ALL</Link> | ||
| ) : ( | ||
| "Tags" | ||
| )} | ||
| </h1> | ||
| <div className="inline-block focus:outline-none text-gray-600 bg-white shadow px-2 rounded-lg mb-4 w-full"> | ||
| <FiSearch className="inline-block text-center text-xl -mt-2" /> | ||
| <input id="tagSearchSlide" onChange={handleChange} className="search__input py-1 pl-2 text-base focus:outline-none pr-3 text-gray-600" style={{minWidth: "5vw"}} type="text" name="search" placeholder="Search for tags" /> | ||
| <input | ||
| id="tagSearchSlide" | ||
| onChange={handleChange} | ||
| className="search__input py-1 pl-2 text-base focus:outline-none pr-3 text-gray-600" | ||
| style={{ minWidth: "5vw" }} | ||
| type="text" | ||
| name="search" | ||
| placeholder="Search for tags" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {filterTag.map((tag) => ( | ||
| <Link key={tag} activeStyle={{ color: "white", backgroundColor: "#00aeef" }} partiallyActive={true} to={`/blog/tag/${kebabCase(tag)}`} | ||
| className="inline-block hover:bg-brand-blue hover:text-white py-1 px-2 m-1 bg-gray-50 text-gray-700 rounded-full 2xl:text-sm font-sans font-semibold" | ||
| > | ||
| {tag} ({pageContext.countTags[`${tag}`]}) | ||
| </Link> | ||
| ))} | ||
| <div onClick={() => handleTagMenu()} className={`${tagMenu ? 'block' : 'hidden'} cursor-pointer my-5 px-3 py-2 bg-brand-blue hover:bg-gray-900 transition duration-500 font-bold text-center`} tabIndex="0">ClOSE</div> | ||
| <div aria-label="Slide tag menu results"> | ||
| {filterTag.map((tag) => ( | ||
| <Link | ||
| key={tag} | ||
| activeStyle={{ color: "white", backgroundColor: "#00aeef" }} | ||
| partiallyActive={true} | ||
| to={`/blog/tag/${kebabCase(tag)}`} | ||
| className="inline-block hover:bg-brand-blue hover:text-white py-1 px-2 m-1 bg-gray-50 text-gray-700 rounded-full 2xl:text-sm font-sans font-semibold" | ||
| > | ||
| {tag} ({pageContext.countTags[`${tag}`]}) | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| <button | ||
| onClick={() => handleTagMenu()} | ||
| className={`${ | ||
| tagMenu ? "block" : "hidden" | ||
| } cursor-pointer my-5 px-3 py-2 bg-brand-blue hover:bg-gray-900 transition duration-500 font-bold text-center w-full`} | ||
| > | ||
| ClOSE | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| ) | ||
|
|
||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default menuTagSlide | ||
| export default menuTagSlide; | ||
|
|
||
| menuTagSlide.propTypes = { | ||
| pageContext: PropTypes.any, | ||
| } | ||
| pageContext: PropTypes.any | ||
| }; |
Oops, something went wrong.