Skip to content

Instantly share code, notes, and snippets.

@diegovar

diegovar/gist:9988ec74125348a0698f6e4ddbaae146

Created August 11, 2020 23:55
Show Gist options
  • Save diegovar/9988ec74125348a0698f6e4ddbaae146 to your computer and use it in GitHub Desktop.
Save diegovar/9988ec74125348a0698f6e4ddbaae146 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
diegovar-macbookpro3:web-stories-wp diegovar$ npm run test:js -t mediaPane
> web-stories-wp@ test:js /Users/diegovar/Development/projects/web-stories-wp
> jest --config=tests/js/jest.config.js "mediaPane"
.
● mediaPane › should only display supported mimeTypes and not crash on unsupported
TestingLibraryElementError: Unable to find an element with the alt text: test-image
<body>
<div>
<div
class="dropTarget__DropTargetComponent-lfrfde-0 fDZerm"
>
<div
class="dropTarget__Content-lfrfde-1 bUAbVJ"
>
<section
aria-label="Library"
class="libraryLayout__Layout-nldvv1-0 bJIrwg"
data-testid="libraryLayout"
>
<nav
aria-label="Library tabs"
class="libraryLayout__TabsArea-nldvv1-1 eMENxM"
>
<ul
aria-orientation="horizontal"
class="tabview__Tabs-sc-16p5pbf-0 jQSKHq"
role="tablist"
>
<li
aria-controls="library-tab-media"
aria-selected="true"
class="tabview__Tab-sc-16p5pbf-1 cnEhPd"
id="library-tab-media"
role="tab"
tabindex="0"
>
<div
aria-label="Media library"
/>
</li>
<li
aria-controls="library-tab-text"
aria-selected="false"
class="tabview__Tab-sc-16p5pbf-1 fhioAG"
id="library-tab-text"
role="tab"
tabindex="-1"
>
<div
class="textIcon__TextIconContainer-sc-1bffzri-3 kUZsam"
>
<div
aria-label="Text library"
class="textIcon__AnimatedTextIcon-sc-1bffzri-0 cQDvFz"
id="text-tab-icon"
style="transform: none;"
/>
<button
aria-label="Add new text element"
class="textIcon__QuickAction-sc-1bffzri-2 imVkTj"
tabindex="-1"
>
<div
class="textIcon__AnimatedTextAddIcon-sc-1bffzri-1 enqYuf"
style="transform: none;"
/>
</button>
</div>
</li>
<li
aria-controls="library-tab-shapes"
aria-selected="false"
class="tabview__Tab-sc-16p5pbf-1 fhioAG"
id="library-tab-shapes"
role="tab"
tabindex="-1"
>
<div
aria-label="Shapes library"
/>
</li>
</ul>
</nav>
<div
class="libraryLayout__LibraryPaneContainer-nldvv1-2 iiKMgT"
>
<section
aria-expanded="true"
aria-labelledby="library-tab-media"
class="shared__Pane-sc-1q6858g-0 styles__StyledPane-sc-18b8h4g-6 UBRnr"
id="library-pane-media"
role="tabpanel"
>
<div
class="styles__PaneInner-sc-18b8h4g-0 bmexLQ"
>
<div
class="styles__PaneHeader-sc-18b8h4g-1 cqDNmW"
>
<div
class="styles__SearchInputContainer-sc-18b8h4g-7 IgIjU"
>
<div
class="searchInput__SearchField-sc-3qj1wf-0 dgzrje"
>
<div
class="text__Container-sc-11qrhrv-1 eZqXXn searchInput__Search-sc-3qj1wf-1 csYTjC"
>
<input
aria-label="Search from library"
class="input__Input-sc-1db51zv-0 text__StyledInput-sc-11qrhrv-0 irsFwv"
placeholder="Search"
type="text"
value=""
/>
</div>
</div>
</div>
<div
class="mediaPane__FilterArea-sc-1d3dx0b-0 cFeEeh"
>
<div
class="mediaPane__FilterButtons-sc-1d3dx0b-1 gWkhjV"
>
<button
class="mediaPane__FilterButton-sc-1d3dx0b-2 hhWbBv"
>
All
</button>
<button
class="mediaPane__FilterButton-sc-1d3dx0b-2 cHmGog"
>
Images
</button>
<button
class="mediaPane__FilterButton-sc-1d3dx0b-2 cHmGog"
>
Video
</button>
</div>
<button
class="common__MainButton-p880jy-2 ivSAGh"
>
Upload
</button>
</div>
</div>
<div
36m<html>
<head>
<style
data-styled="active"
data-styled-version="5.1.1"
>
.irsFwv{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none !important;outline:none;background:transparent;color:#FFFFFF;opacity:0.86;font-family:Roboto;font-size:14px;line-height:16px;border-radius:0 !important;width:100%;border:none;padding-right:0px;padding-left:0px;-webkit-letter-spacing:0.0142em;-moz-letter-spacing:0.0142em;-ms-letter-spacing:0.0142em;letter-spacing:0.0142em;}
.irsFwv:disabled{background:transparent;color:#FFFFFF;}
.eZqXXn{color:rgba(255,255,255,0.3);font-family:Roboto;font-size:14px;line-height:16px;-webkit-letter-spacing:0.0142em;-moz-letter-spacing:0.0142em;-ms-letter-spacing:0.0142em;letter-spacing:0.0142em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:rgba(0,0,0,0.3);-webkit-flex-basis:100px;-ms-flex-preferred-size:100px;flex-basis:100px;position:relative;border-radius:4px;border:1px solid transparent;}
.eZqXXn:focus-within{border-color:rgba(255,255,255,0.5);}
.fDZerm{position:relative;width:100%;height:100%;}
.bUAbVJ{position:relative;width:100%;height:100%;}
.exdWSB{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.jQSKHq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;margin:0;padding:0;list-style:none;border-bottom:1px solid rgba(255,255,255,0.04);}
.cnEhPd{text-align:center;cursor:pointer;border:none;background:none;color:#FFFFFF;font-family:Roboto;font-size:12px;font-weight:500;word-break:break-word;opacity:0.84;padding:12px 0px;margin:0px 16px;margin-bottom:-1px;outline:none;border-bottom:1px solid #1A73E8;}
.cnEhPd:active,.cnEhPd:hover{opacity:0.84;}
.cnEhPd svg{display:block;width:28px;height:28px;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.3s ease;-webkit-transition:transform 0.3s ease;transition:transform 0.3s ease;}
.fhioAG{text-align:center;cursor:pointer;border:none;background:none;color:#FFFFFF;font-family:Roboto;font-size:12px;font-weight:500;word-break:break-word;opacity:0.84;padding:12px 0px;margin:0px 16px;margin-bottom:-1px;outline:none;opacity:.34;}
.fhioAG:hover{opacity:1;}
.fhioAG:active,.fhioAG:hover{opacity:0.84;}
.fhioAG svg{display:block;width:28px;height:28px;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.3s ease;-webkit-transition:transform 0.3s ease;transition:transform 0.3s ease;}
.fJFfNb{padding:1.5em;}
.dgzrje{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.csYTjC{width:100%;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border:none;border-radius:4px;padding:8px 16px 8px 16px;}
.fRUbQX{position:relative;margin-top:28px;margin-bottom:28px;}
.fRUbQX:first-child{margin-top:0px;}
.fwkkbM{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:no-wrap;-ms-flex-wrap:no-wrap;flex-wrap:no-wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:30px;margin-bottom:8px;}
.bQSDVL{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;color:#FFFFFF;margin:0;font-family:Roboto;font-size:15px;font-weight:500;line-height:18px;}
.bWjdEd{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:no-wrap;-ms-flex-wrap:no-wrap;flex-wrap:no-wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:8px;}
.ivSAGh{cursor:pointer;background:transparent;border:0;padding:0;text-align:right;color:#1A73E8;-webkit-flex:1 0 0;-ms-flex:1 0 0;flex:1 0 0;font-family:Roboto;font-size:15px;font-weight:400;line-height:18px;}
.ivSAGh:hover{color:#4285F4;}
.bmexLQ{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.cqDNmW{padding-top:24px;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;}
.eIqKAE{overflow:auto;padding:0 24px;margin-top:1em;position:relative;width:100%;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;min-height:100px;}
.blEaRg{width:320px;margin:0 -4px;}
.UBRnr{padding:1.5em;height:100%;padding:0;overflow:hidden;}
.IgIjU{padding:0 24px;}
.cFeEeh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:30px;padding:0 1.5em 0 1.5em;}
.gWkhjV{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}
.hhWbBv{border:0;cursor:pointer;background:none;padding:0;margin:0 18px 0 0;color:#FFFFFF;font-family:Roboto;font-size:15px;font-weight:bold;line-height:18px;}
.cHmGog{border:0;cursor:pointer;background:none;padding:0;margin:0 18px 0 0;color:#616877;font-family:Roboto;font-size:15px;font-weight:normal;line-height:18px;}
.iechCn{background:transparent;border:0;position:relative;padding:0.8em 0.5em;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;}
.hyhnci{fill:#FFFFFF;}
.gurPri{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;...Error: Unable to find an element with the alt text: test-image
<body>
<div>
<div
class="dropTarget__DropTargetComponent-lfrfde-0 fDZerm"
>
<div
class="dropTarget__Content-lfrfde-1 bUAbVJ"
>
<section
aria-label="Library"
class="libraryLayout__Layout-nldvv1-0 bJIrwg"
data-testid="libraryLayout"
>
<nav
aria-label="Library tabs"
class="libraryLayout__TabsArea-nldvv1-1 eMENxM"
>
<ul
aria-orientation="horizontal"
class="tabview__Tabs-sc-16p5pbf-0 jQSKHq"
role="tablist"
>
<li
aria-controls="library-tab-media"
aria-selected="true"
class="tabview__Tab-sc-16p5pbf-1 cnEhPd"
id="library-tab-media"
role="tab"
tabindex="0"
>
<div
aria-label="Media library"
/>
</li>
<li
aria-controls="library-tab-text"
aria-selected="false"
class="tabview__Tab-sc-16p5pbf-1 fhioAG"
id="library-tab-text"
role="tab"
tabindex="-1"
>
<div
class="textIcon__TextIconContainer-sc-1bffzri-3 kUZsam"
>
<div
aria-label="Text library"
class="textIcon__AnimatedTextIcon-sc-1bffzri-0 cQDvFz"
id="text-tab-icon"
style="transform: none;"
/>
<button
aria-label="Add new text element"
class="textIcon__QuickAction-sc-1bffzri-2 imVkTj"
tabindex="-1"
>
<div
class="textIcon__AnimatedTextAddIcon-sc-1bffzri-1 enqYuf"
style="transform: none;"
/>
</button>
</div>
</li>
<li
aria-controls="library-tab-shapes"
aria-selected="false"
class="tabview__Tab-sc-16p5pbf-1 fhioAG"
id="library-tab-shapes"
role="tab"
tabindex="-1"
>
<div
aria-label="Shapes library"
/>
</li>
</ul>
</nav>
<div
class="libraryLayout__LibraryPaneContainer-nldvv1-2 iiKMgT"
>
<section
aria-expanded="true"
aria-labelledby="library-tab-media"
class="shared__Pane-sc-1q6858g-0 styles__StyledPane-sc-18b8h4g-6 UBRnr"
id="library-pane-media"
role="tabpanel"
>
<div
class="styles__PaneInner-sc-18b8h4g-0 bmexLQ"
>
<div
class="styles__PaneHeader-sc-18b8h4g-1 cqDNmW"
>
<div
class="styles__SearchInputContainer-sc-18b8h4g-7 IgIjU"
>
<div
class="searchInput__SearchField-sc-3qj1wf-0 dgzrje"
>
<div
class="text__Container-sc-11qrhrv-1 eZqXXn searchInput__Search-sc-3qj1wf-1 csYTjC"
>
<input
aria-label="Search from library"
class="input__Input-sc-1db51zv-0 text__StyledInput-sc-11qrhrv-0 irsFwv"
placeholder="Search"
type="text"
value=""
/>
</div>
</div>
</div>
<div
class="mediaPane__FilterArea-sc-1d3dx0b-0 cFeEeh"
>
<div
class="mediaPane__FilterButtons-sc-1d3dx0b-1 gWkhjV"
>
<button
class="mediaPane__FilterButton-sc-1d3dx0b-2 hhWbBv"
>
All
</button>
<button
class="mediaPane__FilterButton-sc-1d3dx0b-2 cHmGog"
>
Images
</button>
<button
class="mediaPane__FilterButton-sc-1d3dx0b-2 cHmGog"
>
Video
</button>
</div>
<button
class="common__MainButton-p880jy-2 ivSAGh"
>
Upload
</button>
</div>
</div>
<div
33 | });
34 |
> 35 | await waitFor(() => {
| ^
36 | expect(getByAltText('test-image')).toBeDefined();
37 | }, {timeout: 4000});
38 | });
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:134:27)
at Object.<anonymous> (assets/src/edit-story/components/library/test/mediaPane.js:35:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! web-stories-wp@ test:js: `jest --config=tests/js/jest.config.js "mediaPane"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the web-stories-wp@ test:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/diegovar/.npm/_logs/2020-08-11T04_07_16_795Z-debug.log
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment