test: add scenario for new detail page tab

src/webui/components/Dependencies/index.js

@@ -28,7 +28,7 @@ class DepDetail extends Component<any, any> {
   render() {
     const { name, version } = this.state;
     const tagText = `${name}@${version}`;
-    return <Tag clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
+    return <Tag className={'dep-tag'} clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
   }
 
   handleOnClick = () => {
@@ -101,7 +101,7 @@ class Dependencies extends Component<any, any> {
     const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => {
       const selectedDepndency = dependencyMap[value];
       if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
-        result.push(<DependencyBlock dependencies={selectedDepndency} key={key} title={value} />);
+        result.push(<DependencyBlock className={'dependency-block'} dependencies={selectedDepndency} key={key} title={value} />);
       }
       return result;
     }, []);
@@ -109,7 +109,7 @@ class Dependencies extends Component<any, any> {
     if (dependencyList.length) {
       return <Fragment>{dependencyList}</Fragment>;
     }
-    return <NoItems text={`${name} has no dependencies.`} />;
+    return <NoItems className={'no-dependencies'} text={`${name} has no dependencies.`} />;
   }
 }
 

src/webui/components/DetailContainer/index.js

@@ -43,10 +43,10 @@ class DetailContainer extends Component<any, any> {
       <>
         <Content>
           <Tabs indicatorColor={'primary'} onChange={this.handleChange} textColor={'primary'} value={tabPosition} variant={'fullWidth'}>
-            <Tab label={'Readme'} />
+            <Tab id={'readme-tab'} label={'Readme'} />
-            <Tab label={'Dependencies'} />
+            <Tab id={'dependencies-tab'} label={'Dependencies'} />
-            <Tab label={'Versions'} />
+            <Tab id={'versions-tab'} label={'Versions'} />
-            <Tab label={'Uplinks'} />
+            <Tab id={'uplinks-tab'} label={'Uplinks'} />
           </Tabs>
           <br />
           {tabPosition === 0 && this.renderReadme(readMe)}

src/webui/components/Versions/index.js

@@ -29,7 +29,7 @@ class Versions extends React.PureComponent<any> {
         {Object.keys(packages)
           .reverse()
           .map(version => (
-            <ListItem key={version}>
+            <ListItem className={'version-item'} key={version}>
               <ListItemText>{version}</ListItemText>
               <Spacer />
               <ListItemText>{isVersion && timeMap[version] ? `${formatDateDistance(timeMap[version])} ago` : packages[version]}</ListItemText>

test/e2e/e2e.spec.js

@@ -142,6 +142,40 @@ describe('/ (Verdaccio Page)', () => {
     expect(versionList).toHaveLength(1);
   });
 
+  test('should display dependencies tab', async () => {
+    const dependenciesTab = await page.$$('#dependencies-tab');
+    expect(dependenciesTab).toHaveLength(1);
+    await dependenciesTab[0].click({ clickCount: 1, delay: 200 });
+    await page.waitFor(1000);
+    const tags = await page.$$('.dep-tag');
+    const tag = tags[0];
+    const label = await page.evaluate(el => el.innerText, tag);
+    expect(label).toMatch('verdaccio@');
+  });
+
+  test('should display version tab', async () => {
+    const versionsTab = await page.$$('#versions-tab');
+    expect(versionsTab).toHaveLength(1);
+    await versionsTab[0].click({ clickCount: 1, delay: 200 });
+    await page.waitFor(1000);
+    const versionItems = await page.$$('.version-item');
+    expect(versionItems).toHaveLength(2);
+  });
+
+  test('should display uplinks tab', async () => {
+    const upLinksTab = await page.$$('#uplinks-tab');
+    expect(upLinksTab).toHaveLength(1);
+    await upLinksTab[0].click({ clickCount: 1, delay: 200 });
+    await page.waitFor(1000);
+  });
+
+  test('should display readme tab', async () => {
+    const readmeTab = await page.$$('#readme-tab');
+    expect(readmeTab).toHaveLength(1);
+    await readmeTab[0].click({ clickCount: 1, delay: 200 });
+    await page.waitFor(1000);
+  });
+
   test('should publish a protected package', async () => {
     await page.goto('http://0.0.0.0:55552');
     await page.waitFor(500);