feat: update @verdaccio/ui-theme@0.3.9 (#1623)

* feat: update @verdaccio/ui-theme

- new login screen

* test: update e2e

we need to keep in sync with ui repo, but this will be removed soon

* chore: restore yarn lock

* chore: update lock file

package.json

@@ -24,7 +24,7 @@
     "@verdaccio/local-storage": "8.4.2",
     "@verdaccio/readme": "8.4.2",
     "@verdaccio/streams": "8.2.0",
-    "@verdaccio/ui-theme": "0.3.2",
+    "@verdaccio/ui-theme": "0.3.9",
     "JSONStream": "1.3.5",
     "async": "3.1.0",
     "body-parser": "1.19.0",

test/e2e/e2e.spec.js

@@ -1,14 +1,11 @@
-/**
- * @prettier
- */
-
+export const HELP_TITLE = 'No Package Published Yet.';
 const scopedPackageMetadata = require('./partials/pkg-scoped');
 const protectedPackageMetadata = require('./partials/pkg-protected');
 
 describe('/ (Verdaccio Page)', () => {
   let page;
   // this might be increased based on the delays included in all test
-  jest.setTimeout(200000);
+  jest.setTimeout(20000);
 
   const clickElement = async function(selector, options = { button: 'middle', delay: 100 }) {
     const button = await page.$(selector);
@@ -16,29 +13,32 @@ describe('/ (Verdaccio Page)', () => {
     await button.click(options);
   };
 
-  const evaluateSignIn = async function() {
-    const text = await page.evaluate(() => document.querySelector('#header--button-login').textContent);
-    expect(text).toMatch('Login');
+  const evaluateSignIn = async function(matchText = 'Login') {
+    const text = await page.evaluate(() => {
+      return document.querySelector('button[data-testid="header--button-login"]').textContent;
+    });
+
+    expect(text).toMatch(matchText);
   };
 
   const getPackages = async function() {
-    return await page.$$('.package-list-items .package-link a');
+    return await page.$$('.package-title');
   };
 
   const logIn = async function() {
-    await clickElement('#header--button-login');
+    await clickElement('button[data-testid="header--button-login"]');
     await page.waitFor(500);
     // we fill the sign in form
-    const signInDialog = await page.$('#login--form-container');
-    const userInput = await signInDialog.$('#login--form-username');
+    const signInDialog = await page.$('#login--dialog');
+    const userInput = await signInDialog.$('#login--dialog-username');
     expect(userInput).not.toBeNull();
-    const passInput = await signInDialog.$('#login--form-password');
+    const passInput = await signInDialog.$('#login--dialog-password');
     expect(passInput).not.toBeNull();
     await userInput.type('test', { delay: 100 });
     await passInput.type('test', { delay: 100 });
     await passInput.dispose();
     // click on log in
-    const loginButton = await page.$('#login--form-submit');
+    const loginButton = await page.$('#login--dialog-button-submit');
     expect(loginButton).toBeDefined();
     await loginButton.focus();
     await loginButton.click({ delay: 100 });
@@ -55,40 +55,43 @@ describe('/ (Verdaccio Page)', () => {
     await page.close();
   });
 
-  test('should load without error', async () => {
-    const text = await page.evaluate(() => document.body.textContent);
+  test('should display title', async () => {
+    const text = await page.title();
+    await page.waitFor(1000);
 
-    // FIXME: perhaps it is not the best approach
-    expect(text).toContain('Powered by');
+    expect(text).toContain('verdaccio-server-e2e');
   });
 
   test('should match title with no packages published', async () => {
     const text = await page.evaluate(() => document.querySelector('#help-card__title').textContent);
-    expect(text).toMatch('No Package Published Yet');
+    expect(text).toMatch(HELP_TITLE);
   });
+  //
 
   test('should match title with first step', async () => {
     const text = await page.evaluate(() => document.querySelector('#help-card').textContent);
     expect(text).toContain('npm adduser --registry http://0.0.0.0:55558');
   });
+  //
 
   test('should match title with second step', async () => {
     const text = await page.evaluate(() => document.querySelector('#help-card').textContent);
     expect(text).toContain('npm publish --registry http://0.0.0.0:55558');
   });
-
+  //
   test('should match button Login to sign in', async () => {
     await evaluateSignIn();
   });
+  //
 
   test('should click on sign in button', async () => {
-    const signInButton = await page.$('#header--button-login');
+    const signInButton = await page.$('button[data-testid="header--button-login"]');
     await signInButton.click();
     await page.waitFor(1000);
-    const signInDialog = await page.$('#login--form-container');
-
+    const signInDialog = await page.$('#login--dialog');
     expect(signInDialog).not.toBeNull();
   });
+  //
 
   test('should log in an user', async () => {
     // we open the dialog
@@ -97,6 +100,7 @@ describe('/ (Verdaccio Page)', () => {
     const buttonLogout = await page.$('#header--button-logout');
     expect(buttonLogout).toBeDefined();
   });
+  //
 
   test('should logout an user', async () => {
     // we assume the user is logged already
@@ -106,6 +110,7 @@ describe('/ (Verdaccio Page)', () => {
     await page.waitFor(1000);
     await evaluateSignIn();
   });
+  //
 
   test('should check registry info dialog', async () => {
     const registryInfoButton = await page.$('#header--button-registryInfo');
@@ -118,6 +123,7 @@ describe('/ (Verdaccio Page)', () => {
     const closeButton = await page.$('#registryInfo--dialog-close');
     closeButton.click();
   });
+  //
 
   test('should publish a package', async () => {
     await global.__SERVER__.putPackage(scopedPackageMetadata.name, scopedPackageMetadata);
@@ -127,13 +133,16 @@ describe('/ (Verdaccio Page)', () => {
     const packagesList = await getPackages();
     expect(packagesList).toHaveLength(1);
   });
+  //
 
   test('should navigate to the package detail', async () => {
     const packagesList = await getPackages();
+    // console.log("-->packagesList:", packagesList);
     const firstPackage = packagesList[0];
     await firstPackage.click({ clickCount: 1, delay: 200 });
     await page.waitFor(1000);
     const readmeText = await page.evaluate(() => document.querySelector('.markdown-body').textContent);
+
     expect(readmeText).toMatch('test');
   });
 
@@ -141,7 +150,7 @@ describe('/ (Verdaccio Page)', () => {
     const versionList = await page.$$('.sidebar-info .detail-info');
     expect(versionList).toHaveLength(1);
   });
-
+  //
   test('should display dependencies tab', async () => {
     const dependenciesTab = await page.$$('#dependencies-tab');
     expect(dependenciesTab).toHaveLength(1);