CONSOLE-4619: Migrate failing tests to RTL and improve ExternalLinkWithCopy

Author: logonoff

frontend/packages/console-app/locales/en/console-app.json

@@ -284,9 +284,7 @@
   "{{fileName}} cannot be uploaded. Only {{fileExtensions}} files are supported currently. Try another file.": "{{fileName}} cannot be uploaded. Only {{fileExtensions}} files are supported currently. Try another file.",
   "Access our new quick starts where you can learn more about creating or deploying an application using OpenShift Developer Console. You can also restart this tour anytime here.": "Access our new quick starts where you can learn more about creating or deploying an application using OpenShift Developer Console. You can also restart this tour anytime here.",
   "Set your individual console preferences including default views, language, import settings, and more.": "Set your individual console preferences including default views, language, import settings, and more.",
-  "Stay up-to-date with everything OpenShift on our <2>{t('console-app~blog')}</2> or continue to learn more in our <6>{t('console-app~documentation')}</6>.": "Stay up-to-date with everything OpenShift on our <2>{t('console-app~blog')}</2> or continue to learn more in our <6>{t('console-app~documentation')}</6>.",
-  "blog": "blog",
-  "documentation": "documentation",
+  "Stay up-to-date with everything OpenShift on our <2>blog</2> or continue to learn more in our <6>documentation</6>.": "Stay up-to-date with everything OpenShift on our <2>blog</2> or continue to learn more in our <6>documentation</6>.",
   "Welcome to the new OpenShift experience!": "Welcome to the new OpenShift experience!",
   "Our new update with OpenShift 4.19 gives a more modern look to help enhance your experience and streamline your workflow, such as improved navigation and infrastructure. Want us to show you around?": "Our new update with OpenShift 4.19 gives a more modern look to help enhance your experience and streamline your workflow, such as improved navigation and infrastructure. Want us to show you around?",
   "Here is where you can view all of your OpenShift environments, including your projects and inventory. You can also access APIs and software catalogs.": "Here is where you can view all of your OpenShift environments, including your projects and inventory. You can also access APIs and software catalogs.",

frontend/packages/console-app/src/__tests__/network-policies/network-policy-selector-preview.spec.tsx

@@ -40,11 +40,11 @@ export const FinishTourText: React.FC = () => {
     <Trans t={t} ns="console-app">
       Stay up-to-date with everything OpenShift on our{' '}
       <ExternalLink href={openshiftBlogLink} data-test="openshift-blog-link">
-        {t('console-app~blog')}
+        blog
       </ExternalLink>{' '}
       or continue to learn more in our{' '}
       <ExternalLink href={openshiftHelpBase} data-test="openshift-help-link">
-        {t('console-app~documentation')}
+        documentation
       </ExternalLink>
       .
     </Trans>

frontend/packages/console-app/src/components/guided-tour/GuidedTourText.tsx

@@ -1,51 +1,48 @@
-import { cleanup, configure, render, screen } from '@testing-library/react';
-import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
-import { FinishTourText } from '../GuidedTourText';
+import { configure, render, screen } from '@testing-library/react';
+import { helpTourText, userPreferencesTourText, FinishTourText } from '../GuidedTourText';
+import '@testing-library/jest-dom';
 
-configure({ testIdAttribute: 'data-test' });
-
-jest.mock('@console/internal/components/utils/k8s-watch-hook', () => {
-  return {
-    useK8sWatchResource: jest.fn(),
-  };
-});
+// Mock k8s-watch-hook
+jest.mock('@console/internal/components/utils/k8s-watch-hook', () => ({
+  useK8sWatchResource: () => [
+    [{ metadata: { name: 'openshift-blog' }, spec: { href: 'https://blog.example.com' } }],
+  ],
+}));
 
 describe('GuidedTourText', () => {
-  afterEach(() => cleanup());
-
-  it('should render openshift-blog and openshift-docs link', () => {
-    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true, '']);
-    render(<FinishTourText />);
-
-    screen.getByTestId('openshift-blog-link');
-    screen.getByTestId('openshift-docs-link');
+  beforeAll(() => {
+    configure({ testIdAttribute: 'data-test' });
   });
 
-  it('should render the openshift-blog href with link from consoleLinks', () => {
-    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([
-      [{ metadata: { name: 'openshift-blog' }, spec: { href: 'https://blog.openshift.com/' } }],
-      true,
-      '',
-    ]);
-    const { getByTestId } = render(<FinishTourText />);
-    expect(getByTestId('openshift-blog-link').getAttribute('href')).toEqual(
-      'https://blog.openshift.com/',
-    );
+  it('renders helpTourText', () => {
+    render(helpTourText);
+    expect(
+      screen.getByText(
+        'Access our new quick starts where you can learn more about creating or deploying an application using OpenShift Developer Console. You can also restart this tour anytime here.',
+      ),
+    ).toBeInTheDocument();
   });
 
-  it('should render the openshift-blog href with default link if consoleLinks are not available', () => {
-    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true, '']);
-    const { getByTestId } = render(<FinishTourText />);
-    expect(getByTestId('openshift-blog-link').getAttribute('href')).toEqual(
-      'https://developers.redhat.com/products/openshift/whats-new',
-    );
+  it('renders userPreferencesTourText', () => {
+    render(userPreferencesTourText);
+    expect(
+      screen.getByText(
+        'Set your individual console preferences including default views, language, import settings, and more.',
+      ),
+    ).toBeInTheDocument();
   });
 
-  it('should render openshift-docs href with default link', () => {
-    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true, '']);
-    const { getByTestId } = render(<FinishTourText />);
-    expect(getByTestId('openshift-docs-link').getAttribute('href')).toEqual(
+  it('renders FinishTourText with blog and documentation links', () => {
+    render(<FinishTourText />);
+    expect(screen.getByTestId('openshift-blog-link')).toHaveAttribute(
+      'href',
+      'https://blog.example.com',
+    );
+    expect(screen.getByTestId('openshift-help-link')).toHaveAttribute(
+      'href',
       'https://docs.okd.io/latest/',
     );
+    expect(screen.getByText('blog')).toBeInTheDocument();
+    expect(screen.getByText('documentation')).toBeInTheDocument();
   });
 });

frontend/packages/console-app/src/components/guided-tour/__tests__/GuidedTourText.spec.tsx

@@ -211,9 +211,9 @@ This section documents notable changes in Console provided shared modules and ot
 > [!WARNING]
 > Usage of non-PatternFly CSS provided by Console in plugins is not supported. This section only serves
 > as a courtesy for plugins which use these unsupported CSS classes.
-
 - Removed support for the Bootstrap Grid system (`.row`, `.col-*`, etc.). Use
   [PatternFly Grid](https://www.patternfly.org/layouts/grid) instead.
+- Removed `co-external-link` styling. Use PatternFly Buttons with `variant="link"` instead.
 
 ### PatternFly 5+ dynamic modules
 

frontend/packages/console-dynamic-plugin-sdk/README.md

@@ -84,7 +84,7 @@ export const GettingStartedCard: React.FC<GettingStartedCardProps> = ({
           <SimpleList isControlled={false} className="ocs-getting-started-card__list">
             {links.map((link) =>
               link.loading ? (
-                <li key={link.id}>
+                <li key={link.id} data-test="getting-started-skeleton">
                   <Skeleton fontSize="sm" />
                 </li>
               ) : (