How to use filtered method in storybook-root

Best JavaScript code snippet using storybook-root

Sidebar.js

Source:Sidebar.js Github

copy

Full Screen

1import React, { useState } from "react";2import { useSelector, useDispatch } from "react-redux";3import filter from "./filter.svg";4import { AiOutlineMinus } from "react-icons/ai";5import { AiOutlinePlus } from "react-icons/ai";6import "./Sidebar.css";7export const Sidebar = () => {8 const [sidebar, setSidebar] = useState(false);9 // const [productsFilteredByPrice, setProductsFilteredByPrice] = useState([]);10 const [filteredProducts, setFilteredProducts] = useState([]);11 const [lowPrice, setLowPrice] = useState();12 const [highPrice, setHighPrice] = useState();13 const [brandView, setBrandView] = useState(false);14 const [priceView, setPriceView] = useState(false);15 const [priceChecked, setPriceChecked] = useState(false);16 //new local states17 const [currentBrandsDisplayed, setCurrentBrandsDisplay] = useState([]);18 const dispatch = useDispatch();19 const untouchedFiltered = useSelector(20 (state) => state.productReducer.untouchedFiltered21 );22 const allBrands = useSelector((state) => state.productReducer.brands);23 const showSideBar = () => {24 setSidebar(!sidebar);25 };26 const showBrandView = () => {27 setBrandView(!brandView);28 };29 const showPriceView = () => {30 setPriceView(!priceView);31 };32 //filters by brand33 const filteredByBrand = (event, brand) => {34 const element = document.getElementById(event.target.id);35 if (element.checked) {36 const updatedCurrentBrandsDisplay = [...currentBrandsDisplayed, brand];37 setCurrentBrandsDisplay(updatedCurrentBrandsDisplay);38 const productsByBrand = untouchedFiltered.filter((product) => {39 return product.brand === brand;40 });41 if (priceChecked) {42 const brandProductsFilteredByPrice = [];43 productsByBrand.filter((product) => {44 if (product.price >= lowPrice && product.price <= highPrice) {45 brandProductsFilteredByPrice.push(product);46 }47 return brandProductsFilteredByPrice;48 });49 const updatedProducts = [50 ...filteredProducts,51 ...brandProductsFilteredByPrice,52 ];53 dispatch({54 type: "PRODUCTS_FILTERED",55 payload: updatedProducts,56 });57 setFilteredProducts(updatedProducts);58 } else {59 const updatedProducts = [...filteredProducts, ...productsByBrand];60 dispatch({61 type: "PRODUCTS_FILTERED",62 payload: updatedProducts,63 });64 setFilteredProducts(updatedProducts);65 }66 } else {67 if (currentBrandsDisplayed.length > 1) {68 if (priceChecked) {69 const leftOverProductsByBrand = [];70 currentBrandsDisplayed.forEach((brandInList) => {71 untouchedFiltered.map((product) => {72 if (73 product.price >= lowPrice &&74 product.price <= highPrice &&75 product.brand === brandInList76 ) {77 leftOverProductsByBrand.push(product);78 }79 return leftOverProductsByBrand;80 });81 });82 try {83 dispatch({84 type: "PRODUCTS_FILTERED",85 payload: leftOverProductsByBrand,86 });87 } catch (error) {88 console.error(error);89 }90 setFilteredProducts(leftOverProductsByBrand);91 } else {92 const newFilteredData = filteredProducts.filter((product) => {93 return product.brand !== brand;94 });95 dispatch({96 type: "PRODUCTS_FILTERED",97 payload: newFilteredData,98 });99 setFilteredProducts(newFilteredData);100 }101 } else {102 if (priceChecked) {103 const productsFilteredByPrice = [];104 untouchedFiltered.filter((product) => {105 if (product.price >= lowPrice && product.price <= highPrice) {106 productsFilteredByPrice.push(product);107 }108 return productsFilteredByPrice;109 });110 try {111 dispatch({112 type: "PRODUCTS_FILTERED",113 payload: productsFilteredByPrice,114 });115 } catch (error) {116 console.error(error);117 }118 setFilteredProducts([]);119 } else {120 try {121 dispatch({122 type: "PRODUCTS_FILTERED",123 payload: untouchedFiltered,124 });125 } catch (error) {126 console.error(error);127 }128 setFilteredProducts([]);129 }130 }131 const removalOfCurrentBrand = currentBrandsDisplayed.filter(132 (brandInList) => {133 return brand !== brandInList;134 }135 );136 setCurrentBrandsDisplay(removalOfCurrentBrand);137 }138 };139 // filters by price140 const filteredByPrice = (event, priceLow, priceHigh) => {141 setPriceChecked(true);142 setLowPrice(priceLow);143 setHighPrice(priceHigh);144 const element = document.getElementById(event.target.id);145 if (element.checked) {146 if (currentBrandsDisplayed.length > 0) {147 const currentProductsByBrands = [];148 currentBrandsDisplayed.forEach((brand) => {149 untouchedFiltered.map((product) => {150 if (product.brand === brand) {151 currentProductsByBrands.push(product);152 }153 return currentProductsByBrands;154 });155 });156 const currentProductsByBrandFilteredByPrice = [];157 currentProductsByBrands.map((product) => {158 if (product.price >= priceLow && product.price <= priceHigh) {159 currentProductsByBrandFilteredByPrice.push(product);160 }161 return currentProductsByBrandFilteredByPrice;162 });163 try {164 dispatch({165 type: "PRODUCTS_FILTERED",166 payload: currentProductsByBrandFilteredByPrice,167 });168 } catch (error) {169 console.error(error);170 }171 } else {172 const allCurrentProductsByPrice = [];173 untouchedFiltered.map((product) => {174 if (product.price >= priceLow && product.price <= priceHigh) {175 allCurrentProductsByPrice.push(product);176 }177 return allCurrentProductsByPrice;178 });179 try {180 dispatch({181 type: "PRODUCTS_FILTERED",182 payload: allCurrentProductsByPrice,183 });184 } catch (error) {185 console.error(error);186 }187 }188 } else {189 setPriceChecked(false);190 setLowPrice("");191 setHighPrice("");192 if (currentBrandsDisplayed.length > 0) {193 const allProductsByBrand = [];194 currentBrandsDisplayed.forEach((brand) => {195 untouchedFiltered.map((product) => {196 if (product.brand === brand) {197 allProductsByBrand.push(product);198 }199 return allProductsByBrand;200 });201 });202 try {203 dispatch({204 type: "PRODUCTS_FILTERED",205 payload: allProductsByBrand,206 });207 } catch (error) {208 console.error(error);209 }210 setFilteredProducts(allProductsByBrand);211 } else {212 try {213 dispatch({214 type: "PRODUCTS_FILTERED",215 payload: untouchedFiltered,216 });217 } catch (error) {218 console.error(error);219 }220 setFilteredProducts([]);221 }222 }223 };224 return (225 <>226 <div>227 <div className="filter-bar">228 <div className="menu-bars" onClick={showSideBar}>229 <img className="filter-img" src={filter} alt="filter" />230 <p className="desktop-filter">Filter</p>231 </div>232 </div>233 <div234 className={sidebar ? "sidebar-nav-menu active" : "sidebar-nav-menu"}235 >236 <div className="form-check side-bar-container">237 <div className="brand">238 <p className="brand-title">Brand</p>239 <ul className="brand-list">240 {allBrands.map((brand) => {241 return (242 <li className="brand-list-item" key={brand}>243 <input244 className="form-check-input"245 type="checkbox"246 value=""247 id={brand}248 onClick={(e) => filteredByBrand(e, brand)}249 />250 <label className="form-check-label" htmlFor={brand}>251 {brand}252 </label>253 </li>254 );255 })}256 </ul>257 <div className="price">258 <p className="price-title">Price</p>259 <ul className="price-list">260 <li className="price-list-item">261 <input262 className="form-check-input"263 type="checkbox"264 id="under25"265 onClick={(e) => filteredByPrice(e, 0, 24.99)}266 />267 <label className="form-check-label" htmlFor="under25">268 Under $25269 </label>270 </li>271 <li className="price-list-item">272 <input273 className="form-check-input"274 type="checkbox"275 id="25to50"276 onClick={(e) => filteredByPrice(e, 25, 50)}277 />278 <label className="form-check-label" htmlFor="25to50">279 $25 to $50280 </label>281 </li>282 <li className="price-list-item">283 <input284 className="form-check-input"285 type="checkbox"286 id="50to100"287 onClick={(e) => filteredByPrice(e, 50.01, 100)}288 />289 <label className="form-check-label" htmlFor="50to100">290 $50 to $100291 </label>292 </li>293 <li className="price-list-item">294 <input295 className="form-check-input"296 type="checkbox"297 id="100to200"298 onClick={(e) => filteredByPrice(e, 100.01, 200)}299 />300 <label className="form-check-label" htmlFor="100to200">301 $100 to $200302 </label>303 </li>304 <li className="price-list-item">305 <input306 className="form-check-input"307 type="checkbox"308 id="200plus"309 onClick={(e) => filteredByPrice(e, 200.01, 100000000)}310 />311 <label className="form-check-label" htmlFor="200plus">312 $200 and Above313 </label>314 </li>315 </ul>316 </div>317 </div>318 </div>319 </div>320 </div>321 <div322 className="top-bar-filter sticky-top"323 data-toggle="modal"324 data-target="#filterModal"325 >326 <img src={filter} alt="filter" className="mobile-filter-icon" />327 <button className="filter-button">Filter</button>328 </div>329 <div>330 <div className="modal fade" id="filterModal">331 <div className="modal-dialog mobile-modal-dialog modal-md">332 <div className="modal-content">333 <div className="modal-header">334 <h1 className="modal-title">Filter + Sort</h1>335 <button336 type="button"337 className="close"338 data-dismiss="modal"339 aria-label="Close"340 >341 <span aria-hidden="true">&times;</span>342 </button>343 </div>344 <div className="modal-body mobile-modal-body">345 <div346 className="brand-title-container d-flex justify-content-between"347 onClick={() => showBrandView()}348 >349 <button className="btn btn-default mobile-brand-title">350 BRANDS351 </button>352 {brandView ? (353 <AiOutlineMinus className="view-symbol" />354 ) : (355 <AiOutlinePlus className="view-symbol" />356 )}357 </div>358 {brandView ? (359 <>360 <div className="mobile-brands">361 <ul className="mobile-brands-list">362 {allBrands.map((brand) => {363 let i = Math.floor(Math.random() * 999999999);364 const randomNumber = JSON.stringify(i);365 return (366 <li className="mobile-brands-list-item" key={brand}>367 <input368 className="mobile-brand-input random-class"369 type="checkbox"370 value=""371 id={randomNumber}372 onClick={(e) => {373 filteredByBrand(e, brand);374 }}375 />376 <label377 className="mobile-brand-label"378 htmlFor={brand}379 >380 {brand}381 </label>382 </li>383 );384 })}385 </ul>386 </div>387 </>388 ) : (389 ""390 )}391 <hr className="line-break" />392 <div393 className="price-title-container d-flex justify-content-between"394 onClick={() => showPriceView()}395 >396 <button397 className="btn btn-default mobile-price-title"398 type="button"399 >400 PRICE401 </button>402 {priceView ? (403 <AiOutlineMinus className="view-symbol" />404 ) : (405 <AiOutlinePlus className="view-symbol" />406 )}407 </div>408 {priceView ? (409 <div className="mobile-price-container">410 <ul411 className="mobile-price-list"412 role="menu"413 aria-labelledby=""414 >415 <li className="mobile-price-list-item">416 <input417 className="mobile-price-input"418 type="checkbox"419 id="under25Mobile"420 onClick={(e) => filteredByPrice(e, 0, 24.99)}421 />422 <label className="mobile-price-label" htmlFor="under25">423 Under $25424 </label>425 </li>426 <li className="mobile-price-list-item">427 <input428 className="mobile-price-input"429 type="checkbox"430 id="25to50Mobile"431 onClick={(e) => filteredByPrice(e, 25, 50)}432 />433 <label className="mobile-price-label" htmlFor="25to50">434 $25 to $50435 </label>436 </li>437 <li className="mobile-price-list-item">438 <input439 className="mobile-price-input"440 type="checkbox"441 id="50to100Mobile"442 onClick={(e) => filteredByPrice(e, 50.01, 100)}443 />444 <label className="mobile-price-label" htmlFor="50to100">445 $50 to $100446 </label>447 </li>448 <li className="mobile-price-list-item">449 <input450 className="mobile-price-input"451 type="checkbox"452 id="100to200Mobile"453 onClick={(e) => filteredByPrice(e, 100.01, 200)}454 />455 <label456 className="mobile-price-label"457 htmlFor="100to200"458 >459 $100 to $200460 </label>461 </li>462 <li className="mobile-price-list-item">463 <input464 className="mobile-price-input"465 type="checkbox"466 id="200plusMobile"467 onClick={(e) => filteredByPrice(e, 200.01, 100000000)}468 />469 <label className="mobile-price-label" htmlFor="200plus">470 $200 and Above471 </label>472 </li>473 </ul>474 </div>475 ) : (476 ""477 )}478 <hr className="line-break" />479 </div>480 <div className="modal-footer mobile-modal-footer"></div>481 </div>482 </div>483 </div>484 </div>485 </>486 );...

Full Screen

Full Screen

App.jsx

Source:App.jsx Github

copy

Full Screen

1import React, {useEffect, useState} from 'react';2import {formatStudentData} from './utils'3import Tags from './Tags';4import PlusButton from './PlusButton';5import TagInput from './TagInput';6import './App.css';7const URL = "https://api.hatchways.io/assessment/students";8function App() {9 const [studentData, setStudentData] = useState([]); 10 const [filteredStudentData, setFilteredStudentData] = useState([]);11 const [nameFilterInput, setNameFilterInput] = useState("");12 const [tagFilterInput, setTagFilterInput] = useState("");13 14 15 let filteredContent = [];16 let filteredContentTag = [];17 18 const getStudents = (URL) => {19 fetch(URL)20 .then(response => response.json())21 .then(data => formatStudentData(data.students))22 .then(formatted => setStudentData(formatted))23 .then(formatt => setFilteredStudentData(studentData))24 .catch(error => alert('Something went wrong!'));25 }26 27 const deleteTag = (tag, student) => {28 const res = [...filteredStudentData];29 res.forEach((stu) => {30 if (stu.id === student.id) {31 const filteredTags = stu.tags.filter(32 (t) => t.toLowerCase() !== tag.toLowerCase()33 );34 stu.tags = filteredTags;35 return stu.tags; // exit loop; only will match one student36 }37 38 });39 setFilteredStudentData(res);40 }41 42 43 const addTag = (str, student) =>{44 // add tags to student45 if (!student.tags.length) {46 student.tags.push(str);47 } else if (!student.tags.includes(str)) {48 student.tags.push(str);49 } else {50 return; // no duplicates51 }52 53 // find student in studentData and replace with updated student (with tags)54 const index = studentData.findIndex((stu) => stu.id === student.id);55 const newStudentData = [...studentData];56 newStudentData[index] = student;57 setStudentData(newStudentData);58 };59 60 61 const filterContent = (nameInput) => {62 if (nameFilterInput !== "" && tagFilterInput !== ""){63 64 if (nameInput.length) {65 studentData.forEach(student => {66 if (student.fullName.toLowerCase().includes(nameInput.toLowerCase())) {67 filteredContent.push(student);68 }69 });70 }71 72 filteredContent = filteredContent.concat(filteredContentTag); 73 if (nameInput.length === 0) {74 setFilteredStudentData(studentData);75 return; 76 }77 78 setFilteredStudentData(filteredContent);79 80 } // filterContent's first if81 else {82 if (nameInput.length) {83 studentData.forEach(student => {84 if (student.fullName.toLowerCase().includes(nameInput.toLowerCase())) {85 filteredContent.push(student);86 }87 });88 }89 90 if (nameInput.length === 0) {91 setFilteredStudentData(studentData);92 return; 93 }94 95 setFilteredStudentData(filteredContent);96 97 } // filterContent's only else98 } // filterContent's end99 100 101 102 const filterContentTag = (tagInput) => {103 let newFilteredContent = [];104 let deepFilteredContent = [];105 106 if (nameFilterInput !== "" && tagFilterInput !== "") {107 108 filteredContent.forEach(stud => {109 if (stud.tags.lenght() !== 0) {110 newFilteredContent.push(stud);111 }112 });// filteredContent.forEach end113 114 if (tagInput.length) {115 newFilteredContent.forEach(student => {116 student.tags.forEach(tag => {117 if (tag.toLowerCase().includes(tagInput.toLowerCase()))118 {119 deepFilteredContent.push(student);120 }121 });// Inner forEach122 }); // Outter forEach123 }// First inner if from fisrt if124 setFilteredStudentData(deepFilteredContent);125 } // filterContentTag's First if126 if (tagInput.length) {127 128 studentData.map(student => {129 return student.tags.forEach(tag => {130 if (tag.toLowerCase().includes(tagInput.toLowerCase()))131 {132 if (filteredContentTag.includes(student))133 {134 return filteredContentTag;135 }136 137 else138 {139 filteredContentTag.push(student);140 }141 }142 });143 });144 145 setFilteredStudentData(filteredContentTag);146 }147 148 if (tagInput.length === 0) {149 setFilteredStudentData(studentData);150 return; 151 }152 } // filterContentTag end153 154 const handleNameFilterInput = (e) => {155 setNameFilterInput(e.target.value);156 filterContent(e.target.value); 157 }158 const handleTagFilterInput = (e) => {159 setTagFilterInput(e.target.value);160 filterContentTag(e.target.value); 161 }162 163 useEffect(() => {164 getStudents(URL);165 }, []); 166 167 return (168 <>169 <header>170 <input171 className='inputs'172 placeholder={`Search by name`}173 value={nameFilterInput}174 onChange={e => handleNameFilterInput(e)}175 />176 <input177 className='inputs'178 placeholder={`Search by tag`}179 value={tagFilterInput}180 onChange={e => handleTagFilterInput(e)}181 />182 </header>183 <main>184 <ul>185 {186 filteredStudentData && 187 filteredStudentData.map((student, index) => {188 return (189 <article key = {index} id= "info">190 <img 191 id='pic'192 src = {student.pic} 193 alt = {student.fullName}194 loading="lazy"195 />196 <h1 id='name'>{student.fullName}</h1>197 <div id='infoStud'>198 199 <div>200 <div>Email: {student.email}</div>201 <div>Company: {student.company}</div>202 <div>Skill: {student.skill}</div>203 <div>Average: {student.average}%</div>204 </div>205 <Tags student = {student} deleteTag = {deleteTag} />206 <TagInput student = {student} addTag = {addTag} />207 {/*<Grades />*/}208 </div>209 <PlusButton student = {student}/>210 211 212 </article>213 )214 })215 }216 </ul>217 </main>218 </>219 );220}...

Full Screen

Full Screen

locusFilter.js

Source:locusFilter.js Github

copy

Full Screen

1const locusFilter = ({2 data,3 selectedGenes,4 selectedTagVariants,5 selectedIndexVariants,6 selectedStudies,7}) => {8 const {9 genes,10 tagVariants,11 indexVariants,12 studies,13 geneTagVariants,14 tagVariantIndexVariantStudies,15 } = data;16 // add selected field17 let genesUnfiltered = genes.map(d => ({18 ...d,19 selected: selectedGenes && selectedGenes.indexOf(d.id) >= 0,20 }));21 let tagVariantsUnfiltered = tagVariants.map(d => ({22 ...d,23 selected: selectedTagVariants && selectedTagVariants.indexOf(d.id) >= 0,24 }));25 let indexVariantsUnfiltered = indexVariants.map(d => ({26 ...d,27 selected: selectedIndexVariants && selectedIndexVariants.indexOf(d.id) >= 0,28 }));29 let studiesUnfiltered = studies.map(d => ({30 ...d,31 selected: selectedStudies && selectedStudies.indexOf(d.studyId) >= 0,32 }));33 // copy original34 let genesFiltered = genesUnfiltered.slice();35 let geneTagVariantsFiltered = geneTagVariants.slice();36 let tagVariantsFiltered = tagVariantsUnfiltered.slice();37 let tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudies.slice();38 let indexVariantsFiltered = indexVariantsUnfiltered.slice();39 let studiesFiltered = studiesUnfiltered.slice();40 // iterative filtering (uses AND between entities; OR within entities)41 // genes42 if (selectedGenes) {43 genesFiltered = genesFiltered.filter(d => selectedGenes.indexOf(d.id) >= 0);44 geneTagVariantsFiltered = geneTagVariantsFiltered.filter(45 d => selectedGenes.indexOf(d.geneId) >= 046 );47 const tagVariantsLeft = geneTagVariantsFiltered.reduce((acc, d) => {48 acc[d.tagVariantId] = true;49 return acc;50 }, {});51 tagVariantsFiltered = tagVariantsFiltered.filter(52 d => tagVariantsLeft[d.id]53 );54 tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter(55 d => tagVariantsLeft[d.tagVariantId]56 );57 const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce(58 (acc, d) => {59 acc[d.indexVariantId] = true;60 return acc;61 },62 {}63 );64 indexVariantsFiltered = indexVariantsFiltered.filter(65 d => indexVariantsLeft[d.id]66 );67 const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce(68 (acc, d) => {69 acc[d.studyId] = true;70 return acc;71 },72 {}73 );74 studiesFiltered = studiesFiltered.filter(d => studiesLeft[d.studyId]);75 }76 // tag variants77 if (selectedTagVariants) {78 tagVariantsFiltered = tagVariantsFiltered.filter(79 d => selectedTagVariants.indexOf(d.id) >= 080 );81 geneTagVariantsFiltered = geneTagVariantsFiltered.filter(82 d => selectedTagVariants.indexOf(d.tagVariantId) >= 083 );84 const genesLeft = geneTagVariantsFiltered.reduce((acc, d) => {85 acc[d.geneId] = true;86 return acc;87 }, {});88 genesFiltered = genesFiltered.filter(d => genesLeft[d.id]);89 tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter(90 d => selectedTagVariants.indexOf(d.tagVariantId) >= 091 );92 const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce(93 (acc, d) => {94 acc[d.indexVariantId] = true;95 return acc;96 },97 {}98 );99 indexVariantsFiltered = indexVariantsFiltered.filter(100 d => indexVariantsLeft[d.id]101 );102 const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce(103 (acc, d) => {104 acc[d.studyId] = true;105 return acc;106 },107 {}108 );109 studiesFiltered = studiesFiltered.filter(d => studiesLeft[d.studyId]);110 }111 // index variants112 if (selectedIndexVariants) {113 indexVariantsFiltered = indexVariantsFiltered.filter(114 d => selectedIndexVariants.indexOf(d.id) >= 0115 );116 tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter(117 d => selectedIndexVariants.indexOf(d.indexVariantId) >= 0118 );119 const tagVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce(120 (acc, d) => {121 acc[d.tagVariantId] = true;122 return acc;123 },124 {}125 );126 tagVariantsFiltered = tagVariantsFiltered.filter(127 d => tagVariantsLeft[d.id]128 );129 const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce(130 (acc, d) => {131 acc[d.studyId] = true;132 return acc;133 },134 {}135 );136 studiesFiltered = studiesFiltered.filter(d => studiesLeft[d.studyId]);137 geneTagVariantsFiltered = geneTagVariantsFiltered.filter(138 d => tagVariantsLeft[d.tagVariantId]139 );140 const genesLeft = geneTagVariantsFiltered.reduce((acc, d) => {141 acc[d.geneId] = true;142 return acc;143 }, {});144 genesFiltered = genesFiltered.filter(d => genesLeft[d.id]);145 }146 // studies147 if (selectedStudies) {148 studiesFiltered = studiesFiltered.filter(149 d => selectedStudies.indexOf(d.studyId) >= 0150 );151 tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter(152 d => selectedStudies.indexOf(d.studyId) >= 0153 );154 const tagVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce(155 (acc, d) => {156 acc[d.tagVariantId] = true;157 return acc;158 },159 {}160 );161 const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce(162 (acc, d) => {163 acc[d.indexVariantId] = true;164 return acc;165 },166 {}167 );168 tagVariantsFiltered = tagVariantsFiltered.filter(169 d => tagVariantsLeft[d.id]170 );171 indexVariantsFiltered = indexVariantsFiltered.filter(172 d => indexVariantsLeft[d.id]173 );174 geneTagVariantsFiltered = geneTagVariantsFiltered.filter(175 d => tagVariantsLeft[d.tagVariantId]176 );177 const genesLeft = geneTagVariantsFiltered.reduce((acc, d) => {178 acc[d.geneId] = true;179 return acc;180 }, {});181 genesFiltered = genesFiltered.filter(d => genesLeft[d.id]);182 }183 return {184 genes: genesFiltered,185 tagVariants: tagVariantsFiltered,186 indexVariants: indexVariantsFiltered,187 studies: studiesFiltered,188 geneTagVariants: geneTagVariantsFiltered,189 tagVariantIndexVariantStudies: tagVariantIndexVariantStudiesFiltered,190 };191};...

Full Screen

Full Screen

policy.spec.ts

Source:policy.spec.ts Github

copy

Full Screen

1import { filterIgnoredIssues } from '../../../../../src/cli/commands/test/iac/local-execution/process-results/policy';2import { FormattedResult } from '../../../../../src/cli/commands/test/iac/local-execution/types';3import * as fs from 'fs';4import * as path from 'path';5import * as snykPolicy from 'snyk-policy';6import * as cloneDeep from 'lodash.clonedeep';7async function filterFixture(policyName: string) {8 const policy = await loadPolicy(policyName);9 const fixtureContent = fs.readFileSync(10 path.join(__dirname, 'fixtures', 'formatted-results.json'),11 'utf-8',12 );13 const fixture: FormattedResult[] = JSON.parse(fixtureContent);14 // The policy library modifies its input. In order to write meaningful15 // assertions, deep-clone the original fixture.16 const filtered = filterIgnoredIssues(policy, cloneDeep(fixture));17 return {18 fixture: fixture,19 filtered: filtered.filteredIssues,20 ignoreCount: filtered.ignoreCount,21 };22}23async function loadPolicy(policyName: string) {24 if (policyName === '') {25 return null;26 }27 const policyPath = path.join(__dirname, 'fixtures', policyName);28 const policyText = fs.readFileSync(policyPath, 'utf-8');29 return await snykPolicy.loadFromText(policyText);30}31function assertK8sPolicyPruned(32 fixture: FormattedResult[],33 filtered: FormattedResult[],34) {35 expect(filtered[0]).toEqual(fixture[0]);36 expect(filtered[1]).toEqual(fixture[1]);37 const k8sFixture = fixture[2].result.cloudConfigResults;38 const k8sResults = filtered[2].result.cloudConfigResults;39 expect(k8sResults).toHaveLength(k8sFixture.length - 1);40 expect(k8sResults.some((e) => e.id === 'SNYK-CC-K8S-1')).toEqual(false);41}42describe('filtering ignored issues', () => {43 it('returns the original issues when policy is not loaded', async () => {44 const { fixture, filtered, ignoreCount } = await filterFixture('');45 expect(filtered).toEqual(fixture);46 expect(ignoreCount).toEqual(0);47 });48 it('filters ignored issues when path=*', async () => {49 const { fixture, filtered, ignoreCount } = await filterFixture(50 'policy-ignore-star.yml',51 );52 assertK8sPolicyPruned(fixture, filtered);53 expect(ignoreCount).toEqual(1);54 });55 // This might seem paranoid, but given that our handling of resource paths is56 // in a state of flux, e.g. to support multi-doc YAML properly, having some57 // regression tests around each currently supported config type might be wise.58 describe('filtering ignored issues by resource path', () => {59 it('filters ignored issues when path is resource path (Kubernetes)', async () => {60 const { fixture, filtered, ignoreCount } = await filterFixture(61 'policy-ignore-resource-path-kubernetes.yml',62 );63 assertK8sPolicyPruned(fixture, filtered);64 expect(ignoreCount).toEqual(1);65 });66 it('filters ignored issues when path is resource path (CloudFormation)', async () => {67 const { fixture, filtered, ignoreCount } = await filterFixture(68 'policy-ignore-resource-path-cloudformation.yml',69 );70 expect(filtered[0]).toEqual(fixture[0]);71 expect(filtered[2]).toEqual(fixture[2]);72 const cfFixture = fixture[1].result.cloudConfigResults;73 const cfResults = filtered[1].result.cloudConfigResults;74 expect(cfResults).toHaveLength(cfFixture.length - 1);75 expect(cfResults.some((e) => e.id === 'SNYK-CC-TF-53')).toEqual(false);76 expect(ignoreCount).toEqual(1);77 });78 it('filters ignored issues when path is resource path (Terraform)', async () => {79 const { fixture, filtered, ignoreCount } = await filterFixture(80 'policy-ignore-resource-path-terraform.yml',81 );82 expect(filtered[1]).toEqual(fixture[1]);83 expect(filtered[2]).toEqual(fixture[2]);84 const tfFixture = fixture[0].result.cloudConfigResults;85 const tfResults = filtered[0].result.cloudConfigResults;86 expect(tfResults).toHaveLength(tfFixture.length - 1);87 expect(ignoreCount).toEqual(1);88 });89 });90 it('filters no issues when path is non-matching resource path', async () => {91 const { fixture, filtered, ignoreCount } = await filterFixture(92 'policy-ignore-resource-path-non-matching.yml',93 );94 expect(filtered).toEqual(fixture);95 expect(ignoreCount).toEqual(0);96 });97 it('filters ignored issues when path is file path', async () => {98 const { fixture, filtered, ignoreCount } = await filterFixture(99 'policy-ignore-file-path.yml',100 );101 assertK8sPolicyPruned(fixture, filtered);102 expect(ignoreCount).toEqual(1);103 });104 it('filters no issues when path is file path in the wrong directory', async () => {105 const { fixture, filtered, ignoreCount } = await filterFixture(106 'policy-ignore-file-path-wrong-dir.yml',107 );108 expect(filtered).toEqual(fixture);109 expect(ignoreCount).toEqual(0);110 });111 it('filters no issues when path is non-matching file path', async () => {112 const { fixture, filtered, ignoreCount } = await filterFixture(113 'policy-ignore-file-path-non-matching.yml',114 );115 expect(filtered).toEqual(fixture);116 expect(ignoreCount).toEqual(0);117 });118 it('filters no issues when path is non-matching file path but matching resource path', async () => {119 const { fixture, filtered, ignoreCount } = await filterFixture(120 'policy-ignore-non-matching-file-matching-resource.yml',121 );122 expect(filtered).toEqual(fixture);123 expect(ignoreCount).toEqual(0);124 });...

Full Screen

Full Screen

ScheduleButtons.jsx

Source:ScheduleButtons.jsx Github

copy

Full Screen

1import ScheduleButton from "./ScheduleButton";2import programStyles from "/sass/modules/_Program.module.scss";3export default function ScheduleButtons(props) {4 return (5 <div className={programStyles.festival__buttons}>6 <ScheduleButton7 setFilteredM={props.setFilteredM}8 setFilteredJ={props.setFilteredJ}9 setFilteredV={props.setFilteredV}10 midgard={props.midgard}11 jotunheim={props.jotunheim}12 vanaheim={props.vanaheim}13 setDay={props.setDay}14 day={props.day}15 title="Monday"16 />17 <ScheduleButton18 setFilteredM={props.setFilteredM}19 setFilteredJ={props.setFilteredJ}20 setFilteredV={props.setFilteredV}21 midgard={props.midgard}22 jotunheim={props.jotunheim}23 vanaheim={props.vanaheim}24 setDay={props.setDay}25 day={props.day}26 title="Tuesday"27 />28 <ScheduleButton29 setFilteredM={props.setFilteredM}30 setFilteredJ={props.setFilteredJ}31 setFilteredV={props.setFilteredV}32 midgard={props.midgard}33 jotunheim={props.jotunheim}34 vanaheim={props.vanaheim}35 setDay={props.setDay}36 day={props.day}37 title="Wednesday"38 />39 <ScheduleButton40 setFilteredM={props.setFilteredM}41 setFilteredJ={props.setFilteredJ}42 setFilteredV={props.setFilteredV}43 midgard={props.midgard}44 jotunheim={props.jotunheim}45 vanaheim={props.vanaheim}46 setDay={props.setDay}47 day={props.day}48 title="Thursday"49 />50 <ScheduleButton51 setFilteredM={props.setFilteredM}52 setFilteredJ={props.setFilteredJ}53 setFilteredV={props.setFilteredV}54 midgard={props.midgard}55 jotunheim={props.jotunheim}56 vanaheim={props.vanaheim}57 setDay={props.setDay}58 day={props.day}59 title="Friday"60 />61 <ScheduleButton62 setFilteredM={props.setFilteredM}63 setFilteredJ={props.setFilteredJ}64 setFilteredV={props.setFilteredV}65 midgard={props.midgard}66 jotunheim={props.jotunheim}67 vanaheim={props.vanaheim}68 setDay={props.setDay}69 day={props.day}70 title="Saturday"71 />72 <ScheduleButton73 setFilteredM={props.setFilteredM}74 setFilteredJ={props.setFilteredJ}75 setFilteredV={props.setFilteredV}76 midgard={props.midgard}77 jotunheim={props.jotunheim}78 vanaheim={props.vanaheim}79 setDay={props.setDay}80 day={props.day}81 title="Sunday"82 />83 </div>84 );...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { configure } from '@storybook/react';2const req = require.context('../src', true, /\.stories\.js$/)3function loadStories() {4 req.keys().forEach((filename) => req(filename))5}6configure(loadStories, module);7"scripts": {8}9import { configure } from '@storybook/react';10const req = require.context('../src', true, /\.stories\.js$/)11function loadStories() {12 req.keys().forEach((filename) => req(filename))13}14configure(loadStories, module);15import '@storybook/addon-actions/register';16import '@storybook/addon-links/register';17const path = require('path');18module.exports = (baseConfig, env, defaultConfig) => {19 defaultConfig.resolve.alias = {20 '@storybook/react': path.resolve(__dirname, '../node_modules/@storybook/react'),21 '@storybook/addon-actions': path.resolve(__dirname, '../node_modules/@storybook/addon-actions'),22 '@storybook/addon-links': path.resolve(__dirname, '../node_modules/@storybook/addon-links'),23 '@storybook/addon-knobs': path.resolve(__dirname, '../node_modules/@storybook/addon-knobs'),24 '@storybook/addons': path.resolve(__dirname, '../node_modules/@storybook/addons'),25 '@storybook/ui': path.resolve(__dirname, '../node_modules/@storybook/ui'),26 '@storybook/core': path.resolve(__dirname, '../node_modules/@storybook/core'),27 'react': path.resolve(__dirname, '../node_modules/react'),28 'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),29 };30 return defaultConfig;31};32const path = require('path');33module.exports = (baseConfig, env, defaultConfig) => {34 defaultConfig.resolve.alias = {35 '@storybook/react': path.resolve(__dirname, '../node_modules/@storybook/react'),36 '@storybook/addon-actions': path.resolve(__dirname, '../node_modules/@storybook/addon-actions'),37 '@storybook/addon-links': path.resolve(__dirname, '../node_modules/@storybook/addon-links'),38 '@storybook/addon-knobs': path.resolve(__dirname, '../

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withA11y } from '@storybook/addon-a11y';5import { withKnobs } from '@storybook/addon-knobs';6import { withTests } from '@storybook/addon-jest';7import results from '../.jest-test-results.json';8import { withTests as withTests2 } from '@storybook/addon-jest';9import { withInfo as withInfo2 } from '@storybook/addon-info';10import { withA11y as withA11y2 } from '@storybook/addon-a11y';11import { withKnobs as withKnobs2 } from '@storybook/addon-knobs';12import { withTests as withTests3 } from '@storybook/addon-jest';13import { withInfo as withInfo3 } from '@storybook/addon-info';14import { withA11y as withA11y3 } from '@storybook/addon-a11y';15import { withKnobs as withKnobs3 } from '@storybook/addon-knobs';16import { withTests as withTests4 } from '@storybook/addon-jest';17import { withInfo as withInfo4 } from '@storybook/addon-info';18import { withA11y as withA11y4 } from '@storybook/addon-a11y';19import { withKnobs as withKnobs4 } from '@storybook/addon-knobs';20import { withTests as withTests5 } from '@storybook/addon-jest';21import { withInfo as withInfo5 } from '@storybook/addon-info';22import { withA11y as withA11y5 } from '@storybook/addon-a11y';23import { withKnobs as withKnobs5 } from '@storybook/addon-knobs';24import { withTests as

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { withKnobs } from '@storybook/addon-knobs';2import { withA11y } from '@storybook/addon-a11y';3import { addDecorator, addParameters } from '@storybook/react';4import { withInfo } from '@storybook/addon-info';5import { withTests } from '@storybook/addon-jest';6import { withPerformance } from 'storybook-addon-performance';7import { withConsole } from '@storybook/addon-console';8import { withSmartKnobs } from 'storybook-addon-smart-knobs';9import { withDesign } from 'storybook-addon-designs';10import { withThemesProvider } from 'storybook-addon-styled-component-theme';11import { withContexts } from '@storybook/addon-contexts/react';12import { contexts } from './contexts';13import { themes } from './themes';14import { results } from '../.jest-test-results.json';15import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';16import { configureViewport } from '@storybook/addon-viewport';17import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';18import { withTests as withTests2 } from '@storybook/addon-jest';19import { withTests as withTests3 } from '@storybook/addon-jest';20import { withTests as withTests4 } from '@storybook/addon-jest';21import { withTests as withTests5 } from '@storybook/addon-jest';22import { withTests as withTests6 } from '@storybook/addon-jest';23import { withTests as withTests7 } from '@storybook/addon-jest';24import { withTests as withTests8 } from '@storybook/addon-jest';25import { withTests as withTests9 } from '@storybook/addon-jest';26import { withTests as withTests10 } from '@storybook/addon-jest';27import { withTests as withTests11 } from '@storybook/addon-jest';28import { withTests as withTests12 } from '@storybook/addon-jest';29import { withTests as withTests13 } from '@storybook/addon-jest';30import { withTests as withTests14 } from '@storybook/addon-jest';31import { withTests as withTests15 } from '@storybook/addon-jest';32import { withTests as withTests16 } from '@storybook/addon-jest';33import { withTests as withTests17 } from '@storybook/addon-jest';34import {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { storiesOf } from '@storybook/react';2import { withInfo } from '@storybook/addon-info';3storiesOf('Button', module)4 .add('with text', () => (5 .add('with some emoji', () => (6 .add('with info', withInfo({ text: 'hello world' })(() => (7 .add('with info and some emoji', withInfo({ text: 'πŸ˜€ 😎 πŸ‘ πŸ’―' })(() => (8 .add('with info and some emoji and text', withInfo({ text: 'hello world πŸ˜€ 😎 πŸ‘ πŸ’―' })(() => (9 .add('with info and some emoji and text and some more text', withInfo({ text: 'hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’―' })(() => (10 .add('with info and some emoji and text and some more text and even more text', withInfo({ text: 'hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’―' })(() => (11 .add('with info and some emoji and text and some more text and even more text and even more text', withInfo({ text: 'hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’― hello world πŸ˜€ 😎 πŸ‘ πŸ’―' })(() => (12 .add('with info and some emoji and text and some more text and even more text and even more text and even more text', withInfo({ text: 'hello world πŸ˜€

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { configure } = require('@storybook/react');2const req = require.context('../src/components', true, /.stories.js$/);3function loadStories() {4 req.keys().forEach(filename => req(filename));5}6configure(loadStories, module);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { configure } from '@storybook/react';2import { setDefaults } from '@storybook/addon-info';3import { setOptions } from '@storybook/addon-options';4import { configureViewport } from '@storybook/addon-viewport';5setDefaults({6});7setOptions({8});9configureViewport({10 viewports: {11 iphone5: {12 styles: {13 },14 },15 ipad: {16 styles: {17 },18 },19 },20});21const req = require.context('../', true, /.stories.js$/);22function loadStories() {23 req.keys().forEach((filename) => req(filename));24}25configure(loadStories, module);26import React from 'react';27import { storiesOf } from '@storybook/react';28import { withInfo } from '@storybook/addon-info';29import Button from './button';30storiesOf('Button', module)31 .add(32 withInfo('A very simple button')(() => <Button>Hello Button</Button>),33 .add(34 withInfo({35 })(() => <Button>πŸ˜€ 😎 πŸ‘ πŸ’―</Button>),36 );

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
β€Ί
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful