From 77ddd8a7e8ad0492017edc25b6bdb97cd5fd03e4 Mon Sep 17 00:00:00 2001 From: Gravity_Salad Date: Sun, 7 Oct 2018 06:24:36 -0700 Subject: [PATCH] [FEATURE] Add getImages snippet (#806) ## Description Adding a snippet to fetch all images from within a desired element. ## PR Type - [x] Snippets, Tests & Tags (new snippets, updated snippets, re-tagging of snippets, added/updated tests) - [ ] Scripts & Website & Meta (anything related to files in the [scripts folder](https://github.com/30-seconds/30-seconds-of-code/tree/master/scripts), how the repository's automated procedures work and the website) - [ ] Glossary & Secondary Features (anything related to the glossary, such as new or updated terms or other secondary features) - [ ] General, Typos, Misc. & Meta (everything else, typos, general stuff and meta files in the repository - e.g. the issue template) ## Guidelines - [x] I have read the guidelines in the [CONTRIBUTING](https://github.com/30-seconds/30-seconds-of-code/blob/master/CONTRIBUTING.md) document. --- snippets/getImages.md | 17 +++++++++++++++++ tag_database | 1 + test/getImages/getImages.js | 5 +++++ test/getImages/getImages.test.js | 18 ++++++++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 snippets/getImages.md create mode 100644 test/getImages/getImages.js create mode 100644 test/getImages/getImages.test.js diff --git a/snippets/getImages.md b/snippets/getImages.md new file mode 100644 index 000000000..2508aec4e --- /dev/null +++ b/snippets/getImages.md @@ -0,0 +1,17 @@ +### getImages + +Fetches all images from within an element and puts them into an array + +Use `Element.prototype.getElementsByTagName()` to fetch all `` elements inside the provided element, `Array.prototype.map()` to map every `src` attribute of their respective `` element, then create a `Set` to eliminate duplicates and return the array. + +```js +const getImages = (el, includeDuplicates = false) => { + const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("src")); + return includeDuplicates ? images : [...(new Set(images))]; +}; +``` + +```js +getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...'] +getImages(document, false); // ['image1.jpg', 'image2.png', '...'] +``` diff --git a/tag_database b/tag_database index f84b5ee40..cd05988b1 100644 --- a/tag_database +++ b/tag_database @@ -96,6 +96,7 @@ geometricProgression:math,intermediate get:object,intermediate getColonTimeFromDate:date,intermediate getDaysDiffBetweenDates:date,intermediate +getImages:browser,beginner getMeridiemSuffixOfInteger:date,beginner getScrollPosition:browser,intermediate getStyle:browser,css,beginner diff --git a/test/getImages/getImages.js b/test/getImages/getImages.js new file mode 100644 index 000000000..a01a6c818 --- /dev/null +++ b/test/getImages/getImages.js @@ -0,0 +1,5 @@ +const getImages = (el, includeDuplicates = false) => { + const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("src")); + return includeDuplicates ? images : [...(new Set(images))]; +}; +module.exports = getImages; diff --git a/test/getImages/getImages.test.js b/test/getImages/getImages.test.js new file mode 100644 index 000000000..668172d31 --- /dev/null +++ b/test/getImages/getImages.test.js @@ -0,0 +1,18 @@ +const expect = require("expect"); +const getImages = require("./getImages.js"); +const jsdom = require("jsdom"); +const { JSDOM } = jsdom; +const TEST_HTML = new JSDOM("

Hello world

").window.document; + +test("getImages is a Function", () => { + expect(getImages).toBeInstanceOf(Function); +}); + +test("getImages returns an Array", () => { + expect(getImages(TEST_HTML)).toBeInstanceOf(Array); +}); + +test("getImages removes duplicates from images Array", () => { + expect(getImages(TEST_HTML, false).length).toBeLessThanOrEqual(getImages(TEST_HTML, true).length); + expect(getImages(TEST_HTML, true)).toEqual(expect.arrayContaining(getImages(TEST_HTML, false))); +});\n