From 66031363b9abccd846ed8efc23ed67c00af5a18d Mon Sep 17 00:00:00 2001
From: "Juan Picado @jotadeveloper" <juanpicado19@gmail.com>
Date: Sun, 11 Feb 2018 00:02:14 +0100
Subject: [PATCH] test(e2e): add test scenario for sidebar

---
 src/webui/src/components/PackageSidebar/index.jsx           | 4 ++--
 .../PackageSidebar/modules/Dependencies/index.jsx           | 2 +-
 .../components/PackageSidebar/modules/LastSync/index.jsx    | 2 +-
 .../modules/Maintainers/MaintainerInfo/index.jsx            | 2 +-
 .../components/PackageSidebar/modules/Maintainers/index.jsx | 2 +-
 test/e2e/e2e.spec.js                                        | 6 +++++-
 .../PackageSidebar/__snapshots__/dependencies.spec.js.snap  | 2 +-
 .../PackageSidebar/__snapshots__/lastsync.spec.js.snap      | 2 +-
 .../__snapshots__/maintainerInfo.spec.js.snap               | 2 +-
 .../PackageSidebar/__snapshots__/maintainers.spec.js.snap   | 2 +-
 .../__snapshots__/packageSidebar.spec.js.snap               | 2 +-
 11 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/webui/src/components/PackageSidebar/index.jsx b/src/webui/src/components/PackageSidebar/index.jsx
index 7fd60f8ee..b4830a83b 100644
--- a/src/webui/src/components/PackageSidebar/index.jsx
+++ b/src/webui/src/components/PackageSidebar/index.jsx
@@ -49,12 +49,12 @@ export default class PackageSidebar extends React.Component {
     let {packageMeta} = this.state;
 
     return packageMeta ?
-      (<aside>
+      (<aside className="sidebar-info">
         <LastSync packageMeta={packageMeta} />
         <Maintainers packageMeta={packageMeta} />
         <Dependencies packageMeta={packageMeta} />
         {/* Package management module? Help us implement it! */}
       </aside>):
-      (<aside>Loading package information...</aside>);
+      (<aside className="sidebar-loading">Loading package information...</aside>);
   }
 }
diff --git a/src/webui/src/components/PackageSidebar/modules/Dependencies/index.jsx b/src/webui/src/components/PackageSidebar/modules/Dependencies/index.jsx
index 4a93d6582..22ee303a2 100644
--- a/src/webui/src/components/PackageSidebar/modules/Dependencies/index.jsx
+++ b/src/webui/src/components/PackageSidebar/modules/Dependencies/index.jsx
@@ -33,7 +33,7 @@ export default class Dependencies extends React.Component {
           {
             dependenciesList.map((dependenceName, index) => {
               return (
-                <li key={index} title={`Depend on version: ${dependencies[dependenceName]}`}>
+                <li className="dependency-item" key={index} title={`Depend on version: ${dependencies[dependenceName]}`}>
                   <a href={getDetailPageURL(dependenceName)}>{dependenceName}</a>
                   {index < dependenciesList.length - 1 && <span>,&nbsp;</span>}
                 </li>
diff --git a/src/webui/src/components/PackageSidebar/modules/LastSync/index.jsx b/src/webui/src/components/PackageSidebar/modules/LastSync/index.jsx
index 9f3f8457b..fb768e1fd 100644
--- a/src/webui/src/components/PackageSidebar/modules/LastSync/index.jsx
+++ b/src/webui/src/components/PackageSidebar/modules/LastSync/index.jsx
@@ -43,7 +43,7 @@ export default class LastSync extends React.Component {
         <ul>
           {this.recentReleases.map((versionInfo) => {
             return (
-              <li key={versionInfo.version}>
+              <li className="last-sync-item" key={versionInfo.version}>
                 <span>{versionInfo.version}</span>
                 <span>{versionInfo.time}</span>
               </li>
diff --git a/src/webui/src/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx b/src/webui/src/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx
index fb6b0951b..11aeb88e9 100644
--- a/src/webui/src/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx
+++ b/src/webui/src/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx
@@ -8,7 +8,7 @@ export default function MaintainerInfo({title, name, avatar}) {
   return (
     <div className={classes.maintainer} title={name}>
       <img src={avatar} alt={avatarDescription} title={avatarDescription}/>
-      <span>{name}</span>
+      <span className="maintainer-name">{name}</span>
     </div>
   );
 }
diff --git a/src/webui/src/components/PackageSidebar/modules/Maintainers/index.jsx b/src/webui/src/components/PackageSidebar/modules/Maintainers/index.jsx
index 0402e63d9..733ae7bd6 100644
--- a/src/webui/src/components/PackageSidebar/modules/Maintainers/index.jsx
+++ b/src/webui/src/components/PackageSidebar/modules/Maintainers/index.jsx
@@ -65,7 +65,7 @@ export default class Maintainers extends React.Component {
         title="Maintainers"
         className={classes.maintainersModule}
       >
-        <ul>
+        <ul className="maintainer-author">
           {author && <MaintainerInfo title="Author" name={author.name} avatar={author.avatar}/>}
           {this.renderContributors()}
         </ul>
diff --git a/test/e2e/e2e.spec.js b/test/e2e/e2e.spec.js
index a63020fd8..2d3218adc 100644
--- a/test/e2e/e2e.spec.js
+++ b/test/e2e/e2e.spec.js
@@ -123,10 +123,14 @@ describe('/ (Verdaccio Page)', () => {
     await packageItem.focus();
     await packageItem.click({clickCount: 1, delay: 200});
     await page.waitFor(1000);
-    await page.screenshot({path: 'readme.png'});
     const readmeText = await page.evaluate(() => document.querySelector('.markdown-body').textContent);
 
     expect(readmeText).toMatch('test');
   });
 
+  it('should contains last sync information', async () => {
+    const versionList = await page.$$('.sidebar-info .last-sync-item');
+    expect(versionList).toHaveLength(3);
+  });
+
 });
diff --git a/test/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap b/test/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap
index 58e04a49a..3c5315f22 100644
--- a/test/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap
+++ b/test/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageSidebar /> : <Dependencies /> should load the package and match snapshot 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Dependencies</h2><div><ul><li title=\\"Depend on version: 0.0.3\\"><a href=\\"nullblank/#/detail/@verdaccio/file-locking\\">@verdaccio/file-locking</a><span>, </span></li><li title=\\"Depend on version: 0.0.2\\"><a href=\\"nullblank/#/detail/@verdaccio/streams\\">@verdaccio/streams</a><span>, </span></li><li title=\\"Depend on version: ^1.1.1\\"><a href=\\"nullblank/#/detail/JSONStream\\">JSONStream</a><span>, </span></li><li title=\\"Depend on version: ^1.1.2\\"><a href=\\"nullblank/#/detail/apache-md5\\">apache-md5</a><span>, </span></li><li title=\\"Depend on version: ^2.0.1\\"><a href=\\"nullblank/#/detail/async\\">async</a><span>, </span></li><li title=\\"Depend on version: ^1.15.0\\"><a href=\\"nullblank/#/detail/body-parser\\">body-parser</a><span>, </span></li><li title=\\"Depend on version: ^1.8.0\\"><a href=\\"nullblank/#/detail/bunyan\\">bunyan</a><span>, </span></li><li title=\\"Depend on version: ^2.0.1\\"><a href=\\"nullblank/#/detail/chalk\\">chalk</a><span>, </span></li><li title=\\"Depend on version: ^2.11.0\\"><a href=\\"nullblank/#/detail/commander\\">commander</a><span>, </span></li><li title=\\"Depend on version: 1.6.2\\"><a href=\\"nullblank/#/detail/compression\\">compression</a><span>, </span></li><li title=\\"Depend on version: ^0.7.0\\"><a href=\\"nullblank/#/detail/cookies\\">cookies</a><span>, </span></li><li title=\\"Depend on version: ^2.8.3\\"><a href=\\"nullblank/#/detail/cors\\">cors</a><span>, </span></li><li title=\\"Depend on version: 4.15.3\\"><a href=\\"nullblank/#/detail/express\\">express</a><span>, </span></li><li title=\\"Depend on version: ^4.3.2\\"><a href=\\"nullblank/#/detail/global\\">global</a><span>, </span></li><li title=\\"Depend on version: 4.0.5\\"><a href=\\"nullblank/#/detail/handlebars\\">handlebars</a><span>, </span></li><li title=\\"Depend on version: ^1.4.0\\"><a href=\\"nullblank/#/detail/http-errors\\">http-errors</a><span>, </span></li><li title=\\"Depend on version: 1.0.1\\"><a href=\\"nullblank/#/detail/js-string-escape\\">js-string-escape</a><span>, </span></li><li title=\\"Depend on version: ^3.6.0\\"><a href=\\"nullblank/#/detail/js-yaml\\">js-yaml</a><span>, </span></li><li title=\\"Depend on version: ^7.4.1\\"><a href=\\"nullblank/#/detail/jsonwebtoken\\">jsonwebtoken</a><span>, </span></li><li title=\\"Depend on version: ^1.0.1\\"><a href=\\"nullblank/#/detail/lockfile\\">lockfile</a><span>, </span></li><li title=\\"Depend on version: 4.17.4\\"><a href=\\"nullblank/#/detail/lodash\\">lodash</a><span>, </span></li><li title=\\"Depend on version: ^0.7.0\\"><a href=\\"nullblank/#/detail/lunr\\">lunr</a><span>, </span></li><li title=\\"Depend on version: 0.3.6\\"><a href=\\"nullblank/#/detail/marked\\">marked</a><span>, </span></li><li title=\\"Depend on version: ^1.3.6\\"><a href=\\"nullblank/#/detail/mime\\">mime</a><span>, </span></li><li title=\\"Depend on version: ^3.0.2\\"><a href=\\"nullblank/#/detail/minimatch\\">minimatch</a><span>, </span></li><li title=\\"Depend on version: ^0.5.1\\"><a href=\\"nullblank/#/detail/mkdirp\\">mkdirp</a><span>, </span></li><li title=\\"Depend on version: ^0.4.0\\"><a href=\\"nullblank/#/detail/pkginfo\\">pkginfo</a><span>, </span></li><li title=\\"Depend on version: ^2.72.0\\"><a href=\\"nullblank/#/detail/request\\">request</a><span>, </span></li><li title=\\"Depend on version: ^5.1.0\\"><a href=\\"nullblank/#/detail/semver\\">semver</a><span>, </span></li><li title=\\"Depend on version: ^1.0.0\\"><a href=\\"nullblank/#/detail/unix-crypt-td-js\\">unix-crypt-td-js</a></li></ul></div></div>"`;
+exports[`<PackageSidebar /> : <Dependencies /> should load the package and match snapshot 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Dependencies</h2><div><ul><li class=\\"dependency-item\\" title=\\"Depend on version: 0.0.3\\"><a href=\\"nullblank/#/detail/@verdaccio/file-locking\\">@verdaccio/file-locking</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 0.0.2\\"><a href=\\"nullblank/#/detail/@verdaccio/streams\\">@verdaccio/streams</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.1.1\\"><a href=\\"nullblank/#/detail/JSONStream\\">JSONStream</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.1.2\\"><a href=\\"nullblank/#/detail/apache-md5\\">apache-md5</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.0.1\\"><a href=\\"nullblank/#/detail/async\\">async</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.15.0\\"><a href=\\"nullblank/#/detail/body-parser\\">body-parser</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.8.0\\"><a href=\\"nullblank/#/detail/bunyan\\">bunyan</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.0.1\\"><a href=\\"nullblank/#/detail/chalk\\">chalk</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.11.0\\"><a href=\\"nullblank/#/detail/commander\\">commander</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 1.6.2\\"><a href=\\"nullblank/#/detail/compression\\">compression</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.7.0\\"><a href=\\"nullblank/#/detail/cookies\\">cookies</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.8.3\\"><a href=\\"nullblank/#/detail/cors\\">cors</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.15.3\\"><a href=\\"nullblank/#/detail/express\\">express</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^4.3.2\\"><a href=\\"nullblank/#/detail/global\\">global</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.0.5\\"><a href=\\"nullblank/#/detail/handlebars\\">handlebars</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.4.0\\"><a href=\\"nullblank/#/detail/http-errors\\">http-errors</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 1.0.1\\"><a href=\\"nullblank/#/detail/js-string-escape\\">js-string-escape</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^3.6.0\\"><a href=\\"nullblank/#/detail/js-yaml\\">js-yaml</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^7.4.1\\"><a href=\\"nullblank/#/detail/jsonwebtoken\\">jsonwebtoken</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.0.1\\"><a href=\\"nullblank/#/detail/lockfile\\">lockfile</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.17.4\\"><a href=\\"nullblank/#/detail/lodash\\">lodash</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.7.0\\"><a href=\\"nullblank/#/detail/lunr\\">lunr</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 0.3.6\\"><a href=\\"nullblank/#/detail/marked\\">marked</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.3.6\\"><a href=\\"nullblank/#/detail/mime\\">mime</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^3.0.2\\"><a href=\\"nullblank/#/detail/minimatch\\">minimatch</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.5.1\\"><a href=\\"nullblank/#/detail/mkdirp\\">mkdirp</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.4.0\\"><a href=\\"nullblank/#/detail/pkginfo\\">pkginfo</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.72.0\\"><a href=\\"nullblank/#/detail/request\\">request</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^5.1.0\\"><a href=\\"nullblank/#/detail/semver\\">semver</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.0.0\\"><a href=\\"nullblank/#/detail/unix-crypt-td-js\\">unix-crypt-td-js</a></li></ul></div></div>"`;
diff --git a/test/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap b/test/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap
index cbb4ce603..706e2c3bc 100644
--- a/test/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap
+++ b/test/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageSidebar /> : <LastSync /> should load the LastSync component and match snapshot 1`] = `"<div class=\\"module releasesModule\\"><h2 class=\\"moduleTitle\\">Last Sync<span>Dec 14, 2017, 3:43 PM</span></h2><div><ul><li><span>2.7.1</span><span>Dec 14, 2017, 3:43 PM</span></li><li><span>2.7.0</span><span>Dec 5, 2017, 11:25 PM</span></li><li><span>2.6.6</span><span>Nov 8, 2017, 10:47 PM</span></li></ul></div></div>"`;
+exports[`<PackageSidebar /> : <LastSync /> should load the LastSync component and match snapshot 1`] = `"<div class=\\"module releasesModule\\"><h2 class=\\"moduleTitle\\">Last Sync<span>Dec 14, 2017, 3:43 PM</span></h2><div><ul><li class=\\"last-sync-item\\"><span>2.7.1</span><span>Dec 14, 2017, 3:43 PM</span></li><li class=\\"last-sync-item\\"><span>2.7.0</span><span>Dec 5, 2017, 11:25 PM</span></li><li class=\\"last-sync-item\\"><span>2.6.6</span><span>Nov 8, 2017, 10:47 PM</span></li></ul></div></div>"`;
diff --git a/test/webui/components/PackageSidebar/__snapshots__/maintainerInfo.spec.js.snap b/test/webui/components/PackageSidebar/__snapshots__/maintainerInfo.spec.js.snap
index 789cb0d2a..ff7f163e1 100644
--- a/test/webui/components/PackageSidebar/__snapshots__/maintainerInfo.spec.js.snap
+++ b/test/webui/components/PackageSidebar/__snapshots__/maintainerInfo.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageSidebar /> : <Maintainers /> <MaintainerInfo /> should load the component and match with snapshot 1`] = `"<div class=\\"maintainer\\" title=\\"test\\"><img src=\\"http://xyz.com/profile.jpg\\" alt=\\"test-title test&#x27;s avatar\\" title=\\"test-title test&#x27;s avatar\\"/><span>test</span></div>"`;
+exports[`<PackageSidebar /> : <Maintainers /> <MaintainerInfo /> should load the component and match with snapshot 1`] = `"<div class=\\"maintainer\\" title=\\"test\\"><img src=\\"http://xyz.com/profile.jpg\\" alt=\\"test-title test&#x27;s avatar\\" title=\\"test-title test&#x27;s avatar\\"/><span class=\\"maintainer-name\\">test</span></div>"`;
diff --git a/test/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap b/test/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap
index 0de1e40cf..ec659abad 100644
--- a/test/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap
+++ b/test/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageSidebar /> : <Maintainers /> should match with the props 1`] = `"<div class=\\"module maintainersModule\\"><h2 class=\\"moduleTitle\\">Maintainers</h2><div><ul><div class=\\"maintainer\\" title=\\"Alex Kocharin\\"><img src=\\"https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a\\" alt=\\"Author Alex Kocharin's avatar\\" title=\\"Author Alex Kocharin's avatar\\"><span>Alex Kocharin</span></div><div class=\\"maintainer\\" title=\\"030\\"><img src=\\"https://www.gravatar.com/avatar/4ef03c2bf8d8689527903212d96fb45b\\" alt=\\"Contributors 030's avatar\\" title=\\"Contributors 030's avatar\\"><span>030</span></div><div class=\\"maintainer\\" title=\\"Alex Vernacchia\\"><img src=\\"https://www.gravatar.com/avatar/06975001f7f2be7052bcf978700c6112\\" alt=\\"Contributors Alex Vernacchia's avatar\\" title=\\"Contributors Alex Vernacchia's avatar\\"><span>Alex Vernacchia</span></div><div class=\\"maintainer\\" title=\\"Alexander Makarenko\\"><img src=\\"https://www.gravatar.com/avatar/d9acfc4ed4e49a436738ff26a722dce4\\" alt=\\"Contributors Alexander Makarenko's avatar\\" title=\\"Contributors Alexander Makarenko's avatar\\"><span>Alexander Makarenko</span></div><div class=\\"maintainer\\" title=\\"Alexandre-io\\"><img src=\\"https://www.gravatar.com/avatar/2e095c7cfd278f72825d0fed6e12e3b1\\" alt=\\"Contributors Alexandre-io's avatar\\" title=\\"Contributors Alexandre-io's avatar\\"><span>Alexandre-io</span></div><div class=\\"maintainer\\" title=\\"Aram Drevekenin\\"><img src=\\"https://www.gravatar.com/avatar/371edff6d79c39bb9e36bde39d41a4b0\\" alt=\\"Contributors Aram Drevekenin's avatar\\" title=\\"Contributors Aram Drevekenin's avatar\\"><span>Aram Drevekenin</span></div></ul><button class=\\"showAllContributors\\" title=\\"Current list only show the author and first 5 contributors unique by name\\">Show all contributor</button></div></div>"`;
+exports[`<PackageSidebar /> : <Maintainers /> should match with the props 1`] = `"<div class=\\"module maintainersModule\\"><h2 class=\\"moduleTitle\\">Maintainers</h2><div><ul class=\\"maintainer-author\\"><div class=\\"maintainer\\" title=\\"Alex Kocharin\\"><img src=\\"https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a\\" alt=\\"Author Alex Kocharin's avatar\\" title=\\"Author Alex Kocharin's avatar\\"><span class=\\"maintainer-name\\">Alex Kocharin</span></div><div class=\\"maintainer\\" title=\\"030\\"><img src=\\"https://www.gravatar.com/avatar/4ef03c2bf8d8689527903212d96fb45b\\" alt=\\"Contributors 030's avatar\\" title=\\"Contributors 030's avatar\\"><span class=\\"maintainer-name\\">030</span></div><div class=\\"maintainer\\" title=\\"Alex Vernacchia\\"><img src=\\"https://www.gravatar.com/avatar/06975001f7f2be7052bcf978700c6112\\" alt=\\"Contributors Alex Vernacchia's avatar\\" title=\\"Contributors Alex Vernacchia's avatar\\"><span class=\\"maintainer-name\\">Alex Vernacchia</span></div><div class=\\"maintainer\\" title=\\"Alexander Makarenko\\"><img src=\\"https://www.gravatar.com/avatar/d9acfc4ed4e49a436738ff26a722dce4\\" alt=\\"Contributors Alexander Makarenko's avatar\\" title=\\"Contributors Alexander Makarenko's avatar\\"><span class=\\"maintainer-name\\">Alexander Makarenko</span></div><div class=\\"maintainer\\" title=\\"Alexandre-io\\"><img src=\\"https://www.gravatar.com/avatar/2e095c7cfd278f72825d0fed6e12e3b1\\" alt=\\"Contributors Alexandre-io's avatar\\" title=\\"Contributors Alexandre-io's avatar\\"><span class=\\"maintainer-name\\">Alexandre-io</span></div><div class=\\"maintainer\\" title=\\"Aram Drevekenin\\"><img src=\\"https://www.gravatar.com/avatar/371edff6d79c39bb9e36bde39d41a4b0\\" alt=\\"Contributors Aram Drevekenin's avatar\\" title=\\"Contributors Aram Drevekenin's avatar\\"><span class=\\"maintainer-name\\">Aram Drevekenin</span></div></ul><button class=\\"showAllContributors\\" title=\\"Current list only show the author and first 5 contributors unique by name\\">Show all contributor</button></div></div>"`;
diff --git a/test/webui/components/PackageSidebar/__snapshots__/packageSidebar.spec.js.snap b/test/webui/components/PackageSidebar/__snapshots__/packageSidebar.spec.js.snap
index 731a98e42..714b44321 100644
--- a/test/webui/components/PackageSidebar/__snapshots__/packageSidebar.spec.js.snap
+++ b/test/webui/components/PackageSidebar/__snapshots__/packageSidebar.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageSidebar /> component should load the packageMeta 1`] = `"<aside>Loading package information...</aside>"`;
+exports[`<PackageSidebar /> component should load the packageMeta 1`] = `"<aside class=\\"sidebar-loading\\">Loading package information...</aside>"`;