Merge pull request #1430 from guardian/jsh/correct-preview-for-CODE

Correct preview for code

fronts-client/package.json

@@ -62,7 +62,7 @@
     "prettier": "^2.0.2",
     "puppeteer": "^1.10.0",
     "react-test-renderer": "^16.13.0",
-    "react-testing-library": "^5.2.1",
+    "react-testing-library": "^5.2.3",
     "redux-mock-store": "^1.5.3",
     "style-loader": "^0.23.1",
     "testcafe": "^1.1.4",

fronts-client/src/components/FrontsEdit/FrontSection.tsx

@@ -12,6 +12,7 @@ import {
 } from 'bundles/frontsUI';
 import Button from 'components/inputs/ButtonDefault';
 import { frontStages } from 'constants/fronts';
+import urls from 'constants/url';
 import { FrontConfig, EditionsFrontMetadata } from 'types/FaciaApi';
 import type { State } from 'types/State';
 import { selectFront } from 'selectors/frontsSelectors';
@@ -26,6 +27,7 @@ import EditModeVisibility from 'components/util/EditModeVisibility';
 import { setFrontHiddenState, updateFrontMetadata } from 'actions/Editions';
 import FrontsContainer from './FrontContainer';
 import { isMode } from '../../selectors/pathSelectors';
+import { selectShouldUsePreviewCODE } from '../../selectors/configSelectors';
 
 const FrontHeader = styled(SectionHeader)`
   display: flex;
@@ -109,6 +111,7 @@ interface FrontsContainerProps {
 type FrontsComponentProps = FrontsContainerProps & {
   selectedFront: FrontConfig;
   isOverviewOpen: boolean;
+  shouldUsePreviewCODE: boolean;
   frontsActions: {
     fetchLastPressed: (frontId: string) => void;
     editorCloseFront: (frontId: string) => void;
@@ -155,7 +158,12 @@ class FrontSection extends React.Component<
   };
 
   public render() {
-    const { frontId, isOverviewOpen, isEditions } = this.props;
+    const {
+      frontId,
+      isOverviewOpen,
+      isEditions,
+      shouldUsePreviewCODE,
+    } = this.props;
     const title = this.getTitle();
 
     const { frontNameValue, editingFrontName } = this.state;
@@ -198,8 +206,12 @@ class FrontSection extends React.Component<
             <FrontHeaderMeta>
               <EditModeVisibility visibleMode="fronts">
                 <a
-                  href={`https://preview.gutools.co.uk/responsive-viewer/https://preview.gutools.co.uk/${this.props.frontId}`}
-                  target="preview"
+                  href={`${
+                    shouldUsePreviewCODE
+                      ? urls.previewUrlCODE
+                      : urls.previewUrlPROD
+                  }${this.props.frontId}`}
+                  target="_blank"
                 >
                   <FrontHeaderButton>
                     <PreviewEyeIcon size="xl" />
@@ -313,6 +325,7 @@ const createMapStateToProps = () => {
     selectedFront: selectFront(state, { frontId }),
     isOverviewOpen: selectIsFrontOverviewOpen(state, frontId),
     isEditions: isMode(state, 'editions'),
+    shouldUsePreviewCODE: selectShouldUsePreviewCODE(state),
   });
 };
 

fronts-client/src/components/FrontsEdit/__tests__/FrontSection.spec.tsx

@@ -0,0 +1,99 @@
+import { theme } from 'constants/theme';
+import { frontsConfig } from 'fixtures/frontsConfig';
+import state from 'fixtures/initialStateForOpenFronts';
+import React from 'react';
+import 'jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import { getByText, render } from 'react-testing-library';
+import { ThemeProvider } from 'styled-components';
+import configureStore from 'util/configureStore';
+import FrontSection from '../FrontSection';
+
+describe('FrontSection component', () => {
+  const defaultProps = {
+    frontId: 'editorialFront',
+    selectedFront: frontsConfig.data.fronts.editorialFront,
+    isOverviewOpen: false,
+    frontsActions: {
+      fetchLastPressed: jest.fn(),
+      editorCloseFront: jest.fn(),
+      updateCollection: jest.fn(),
+      changeBrowsingStage: jest.fn(),
+      updateFrontMetadata: jest.fn(),
+      setFrontHiddenState: jest.fn(),
+    },
+    isEditions: false,
+  };
+
+  it('should give the correct preview link for DEV', () => {
+    const store = configureStore({
+      ...state,
+      config: {
+        ...state.config,
+        dev: true,
+        env: 'code',
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <FrontSection {...defaultProps} />
+        </ThemeProvider>
+      </Provider>
+    );
+
+    expect(getByText(container, 'Preview').closest('a')).toHaveAttribute(
+      'href',
+      'https://m.code.dev-theguardian.com/editorialFront'
+    );
+  });
+
+  it('should give the correct preview link for CODE', () => {
+    const store = configureStore({
+      ...state,
+      config: {
+        ...state.config,
+        dev: false,
+        env: 'code',
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <FrontSection {...defaultProps} />
+        </ThemeProvider>
+      </Provider>
+    );
+
+    expect(getByText(container, 'Preview').closest('a')).toHaveAttribute(
+      'href',
+      'https://m.code.dev-theguardian.com/editorialFront'
+    );
+  });
+
+  it('should give the correct preview link for PROD', () => {
+    const store = configureStore({
+      ...state,
+      config: {
+        ...state.config,
+        dev: false,
+        env: 'prod',
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <FrontSection {...defaultProps} />
+        </ThemeProvider>
+      </Provider>
+    );
+
+    expect(getByText(container, 'Preview').closest('a')).toHaveAttribute(
+      'href',
+      'https://preview.gutools.co.uk/responsive-viewer/https://preview.gutools.co.uk/editorialFront'
+    );
+  });
+});

fronts-client/src/constants/url.ts

@@ -1,10 +1,13 @@
 import pageConfig from 'util/extractConfigFromPage';
+
+const previewDomain = 'preview.gutools.co.uk';
+
 export default {
   base: {
     mainDomain: 'www.theguardian.com',
     mainDomainShort: 'theguardian.com',
     frontendDomain: 'frontend.gutools.co.uk',
-    previewDomain: 'preview.gutools.co.uk',
+    previewDomain,
     shortDomain: 'gu.com',
     capi: 'content.guardianapis.com',
   },
@@ -22,4 +25,6 @@ export default {
   manageEditions: '/manage-editions/',
   appRoot: 'v2',
   editionsCardBuilder: 'https://editions-card-builder.gutools.co.uk',
+  previewUrlPROD: `https://${previewDomain}/responsive-viewer/https://${previewDomain}/`,
+  previewUrlCODE: 'https://m.code.dev-theguardian.com/',
 };

fronts-client/src/fixtures/initialState.ts

@@ -1,3 +1,4 @@
+import { Config } from 'types/Config';
 import type { State } from 'types/State';
 
 const fronts = {
@@ -205,9 +206,8 @@ const fronts = {
   lastPressed: {},
   collectionVisibility: { draft: {}, live: {} },
 };
-const config = {
+const config: Config = {
   dev: true,
-  stage: 'CODE',
   env: 'code',
   editions: ['uk', 'us', 'au'],
   email: '[email protected]',

fronts-client/src/selectors/configSelectors.ts

@@ -44,6 +44,11 @@ const selectAvailableEditions = createSelector(
   (config) => config && config.availableEditions
 );
 
+const selectShouldUsePreviewCODE = createSelector(
+  selectConfig,
+  (config) => !config || config.env === 'code'
+);
+
 export {
   selectCapiLiveURL,
   selectCapiPreviewURL,
@@ -53,4 +58,5 @@ export {
   selectCollectionCap,
   selectGridUrl,
   selectAvailableEditions,
+  selectShouldUsePreviewCODE,
 };

fronts-client/src/types/Config.ts

@@ -20,14 +20,13 @@ interface Config {
   env: string;
   editions: string[];
   email: string;
-  avararUrl?: string;
+  avatarUrl?: string;
   firstName: string;
   lastName: string;
   sentryPublicDSN: string;
   mediaBaseUrl: string;
   apiBaseUrl: string;
   switches: { [key: string]: boolean };
-  stage: string;
   acl: Acl;
   collectionCap: number;
   navListCap: number;