@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/pages/Version/DetailSidebar/Repository/__snapshots__/Repository.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Repository /> component should load the component in default state 1`] = `null`;

package/src/pages/Version/DetailSidebar/Repository/index.ts

@@ -0,0 +1 @@
+export { default } from './Repository';

package/src/pages/Version/DetailSidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './DetailSidebar';

package/src/pages/Version/Version.test.tsx

@@ -0,0 +1,68 @@
+import { waitFor } from '@testing-library/dom';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import translationEN from '../../i18n/crowdin/ui.json';
+
+import data from './__partials__/data.json';
+import { DetailContext } from './context';
+import Version from './Version';
+
+// :-) we mock this otherways fails on render, some weird issue on material-ui
+jest.mock('verdaccio-ui/components/Avatar');
+
+const detailContextValue = {
+  packageName: 'foo',
+  packageMeta: data,
+  readMe: 'Read me!',
+  enableLoading: jest.fn(),
+  isLoading: false,
+  hasNotBeenFound: false,
+  version: '1.0.0',
+};
+
+describe.skip('test Version page', () => {
+  test('should render the version page', async () => {
+    const { getByTestId, getByText } = render(
+      <MemoryRouter>
+        <DetailContext.Provider value={detailContextValue}>
+          <Version />
+        </DetailContext.Provider>
+      </MemoryRouter>
+    );
+    // we wait fetch response (mocked above)
+    await waitFor(() => getByTestId('version-layout'));
+    // check whether readme was loaded
+    const hasReadme = getByText(detailContextValue.readMe);
+    expect(hasReadme).toBeTruthy();
+  });
+
+  test('should render 404 page if the resources are not found', async () => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <DetailContext.Provider
+          value={{
+            ...detailContextValue,
+            hasNotBeenFound: true,
+          }}>
+          <Version />
+        </DetailContext.Provider>
+      </MemoryRouter>
+    );
+    // we wait fetch response (mocked above)
+    const notFoundElement = await waitFor(() =>
+      getByText(translationEN.error['404']['sorry-we-could-not-find-it'])
+    );
+    expect(notFoundElement).toBeTruthy();
+  });
+
+  // Wanna contribute? Here we some scenarios we need to test
+
+  test.todo('should test click on tabs');
+  test.todo('should check what is rendered int he sidebar is correct');
+  test.todo('should test click back home on 404');
+  test.todo('should test click on elements in the sidebar');
+  test.todo('should test other not consider scenarios');
+});

package/src/pages/Version/Version.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import Loading from 'verdaccio-ui/components/Loading';
+import NotFound from 'verdaccio-ui/components/NotFound';
+
+import { Dispatch, RootState } from '../../store/store';
+
+import getRouterPackageName from './get-route-package-name';
+import VersionLayout from './VersionLayout';
+
+interface Params {
+  scope?: string;
+  package: string;
+  version?: string;
+}
+
+const Version: React.FC = () => {
+  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
+  const manifestStore = useSelector((state: RootState) => state.manifest);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+  const dispatch = useDispatch<Dispatch>();
+
+  useEffect(() => {
+    const packageName = getRouterPackageName(pkgName, scope);
+    dispatch.manifest.getManifest({ packageName, packageVersion });
+  }, [dispatch, pkgName, scope, packageVersion]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (manifestStore.hasNotBeenFound) {
+    return <NotFound />;
+  }
+
+  return <VersionLayout />;
+};
+
+export default Version;

package/src/pages/Version/VersionContextProvider.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { Dispatch, RootState } from '../../store/store';
+
+import { DetailContext } from './context';
+import getRouterPackageName from './get-route-package-name';
+
+interface Params {
+  scope?: string;
+  package: string;
+  version?: string;
+}
+
+const VersionContextProvider: React.FC = ({ children }) => {
+  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
+  const { manifest, readme, packageName, hasNotBeenFound } = useSelector(
+    (state: RootState) => state.manifest
+  );
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
+  const dispatch = useDispatch<Dispatch>();
+  useEffect(() => {
+    const packageName = getRouterPackageName(pkgName, scope);
+    dispatch.manifest.getManifest({ packageName, packageVersion });
+  }, [dispatch, packageVersion, pkgName, scope]);
+
+  return (
+    <DetailContext.Provider
+      value={{
+        packageMeta: manifest,
+        packageVersion,
+        readMe: readme,
+        packageName,
+        isLoading,
+        hasNotBeenFound,
+      }}>
+      {children}
+    </DetailContext.Provider>
+  );
+};
+
+export default VersionContextProvider;

package/src/pages/Version/VersionLayout.tsx

@@ -0,0 +1,20 @@
+import Grid from '@material-ui/core/Grid';
+import React from 'react';
+
+import DetailContainer from './DetailContainer';
+import DetailSidebar from './DetailSidebar';
+
+const VersionLayout: React.FC = () => {
+  return (
+    <Grid className={'container content'} container={true} data-testid="version-layout" spacing={0}>
+      <Grid item={true} md={8} xs={12}>
+        <DetailContainer />
+      </Grid>
+      <Grid item={true} md={4} xs={12}>
+        <DetailSidebar />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default VersionLayout;