ref(components): Remove CopyToClipBoard Jest Snapshot & Create new un… (#605)

Author: priscilawebdev

package.json

@@ -201,7 +201,7 @@
     "test:clean": "jest --clearCache",
     "test:acceptance": "codeceptjs run --steps",
     "test:acceptance:server": "concurrently --kill-others \"yarn run verdaccio:server\" \"yarn run test:acceptance\"",
-    "test:e2e": " jest --config ./test/jest.config.e2e.js",
+    "test:e2e": " jest --config ./test/jest.config.e2e.js --runInBand",
     "test": "BABEL_ENV=test NODE_ENV=test TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
     "test:update-snapshot": "yarn run test -- -u",
     "test:size": "bundlesize",

src/App/Header/RegistryInfoContent/RegistryInfoContent.tsx

@@ -67,7 +67,7 @@ const RegistryInfoContent: React.FC<Props> = props => {
   /* eslint react/prop-types:0 */
   const TabContainer: React.FC = ({ children }): JSX.Element => {
     return (
-      <CommandContainer>
+      <CommandContainer data-testid={'tab-content'}>
         <Typography>{children}</Typography>
       </CommandContainer>
     );

src/components/CopyToClipBoard.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import FileCopy from '@material-ui/icons/FileCopy';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { copyToClipBoardUtility } from 'verdaccio-ui/utils/cli-utils';
+
+import IconButton from './IconButton';
+import Tooltip from './Tooltip';
+
+interface Props {
+  text: string;
+  children?: React.ReactNode;
+}
+
+function CopyToClipBoard({ text, children, ...props }: Props) {
+  const { t } = useTranslation();
+  return (
+    <Wrapper {...props}>
+      <Content>{children ?? text}</Content>
+      <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
+        <IconButton onClick={copyToClipBoardUtility(text)} data-testid="copy-icon">
+          <FileCopy />
+        </IconButton>
+      </Tooltip>
+    </Wrapper>
+  );
+}
+
+export default CopyToClipBoard;
+
+const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const Content = styled('span')({
+  display: 'inline-block',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  height: '21px',
+  fontSize: '1rem',
+});

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -45,9 +45,9 @@ exports[`<Install /> renders correctly 1`] = `
 
 .emotion-10 {
   display: inline-block;
-  text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
   height: 21px;
   font-size: 1rem;
 }
@@ -92,7 +92,7 @@ exports[`<Install /> renders correctly 1`] = `
             npm install foo
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root  emotion-12 emotion-13"
+            class="MuiButtonBase-root MuiIconButton-root"
             data-testid="copy-icon"
             tabindex="0"
             title="Copy to clipboard"
@@ -159,7 +159,7 @@ exports[`<Install /> renders correctly 1`] = `
             yarn add foo
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root  emotion-12 emotion-13"
+            class="MuiButtonBase-root MuiIconButton-root"
             data-testid="copy-icon"
             tabindex="0"
             title="Copy to clipboard"
@@ -226,7 +226,7 @@ exports[`<Install /> renders correctly 1`] = `
             pnpm install foo
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root  emotion-12 emotion-13"
+            class="MuiButtonBase-root MuiIconButton-root"
             data-testid="copy-icon"
             tabindex="0"
             title="Copy to clipboard"

src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap

@@ -27,9 +27,9 @@ exports[`<Help /> component should load the component in default state 1`] = `
 
 .emotion-6 {
   display: inline-block;
-  text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
   height: 21px;
   font-size: 1rem;
 }
@@ -66,7 +66,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
         npm adduser --registry http://localhost
       </span>
       <button
-        class="MuiButtonBase-root MuiIconButton-root  emotion-8 emotion-9"
+        class="MuiButtonBase-root MuiIconButton-root"
         data-testid="copy-icon"
         tabindex="0"
         title="Copy to clipboard"
@@ -105,7 +105,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
         npm publish --registry http://localhost
       </span>
       <button
-        class="MuiButtonBase-root MuiIconButton-root  emotion-8 emotion-9"
+        class="MuiButtonBase-root MuiIconButton-root"
         data-testid="copy-icon"
         tabindex="0"
         title="Copy to clipboard"

src/components/CopyToClipBoard/index.ts

@@ -29,13 +29,13 @@ class PuppeteerEnvironment extends NodeEnvironment {
     const config1 = new VerdaccioConfig(
       path.join(__dirname, './store-e2e'),
       path.join(__dirname, './config/config-scoped-e2e.yaml'),
-      'http://0.0.0.0:55558/',
+      'http://localhost:55558/',
       55558
     );
     const config2 = new VerdaccioConfig(
       path.join(__dirname, './store-e2e'),
       path.join(__dirname, './config/config-protected-e2e.yaml'),
-      'http://0.0.0.0:55552/',
+      'http://localhost:55552/',
       55552
     );
     const server1 = new Server.default(config1.domainPath);