Clean bridge take 3 (#83)

Author: yaacov

bridge/index.js

@@ -2,18 +2,14 @@
 
 DemoComponent is a demo component to serve as a boilerplate when creating a new component.
 
-Simple example:
+Examples:
 
+A virtual machine with one condition:
 ```js
-<DemoComponent namespaced={true} name="vm-example" namespace="default"
-/>
+<DemoComponent namespaced={true} name="vm-example" namespace="default" errorText="Missing virtual machine data"/>
 ```
 
-Simple example:
-
+Missing virtual machine:
 ```js
-const name = 'vm-example';
-const namespace = 'default';
-
-<DemoComponent namespaced={true} name={name} namespace={namespace}/>
+<DemoComponent namespaced={true} name="does-not-exist" namespace="default" errorText="Missing virtual machine data"/>
 ```

bridge/package.json

@@ -3,18 +3,30 @@ import * as React from 'react';
 import { cleanup, render } from '@testing-library/react';
 
 import { demoMock } from './__mocks__/demoMock';
-import { DemoComponent } from './DemoComponent';
+import { DemoComponent, DemoComponentDefaults } from './DemoComponent';
 
 afterEach(cleanup);
 
 test('Render DemoComponent (valid vm)', () => {
   const { asFragment } = render(
-    <DemoComponent name={demoMock.name} namespace={demoMock.namespace} />,
+    <DemoComponent
+      name={demoMock.name}
+      namespace={demoMock.namespace}
+      errorText={DemoComponentDefaults.errorText}
+      dataTestID={DemoComponentDefaults.dataTestID}
+    />,
   );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('Render DemoComponent (none valid vm)', () => {
-  const { asFragment } = render(<DemoComponent name="none" namespace="does-not-exist" />);
+  const { asFragment } = render(
+    <DemoComponent
+      name="none"
+      namespace="does-not-exist"
+      errorText={DemoComponentDefaults.errorText}
+      dataTestID={DemoComponentDefaults.dataTestID}
+    />,
+  );
   expect(asFragment()).toMatchSnapshot();
 });

src/components/Utils/DemoComponent/DemoComponent.md

@@ -1,7 +1,9 @@
 import * as React from 'react';
 
+import { VirtualMachineModelGroupVersionKind } from '@kubevirt-ui/kubevirt-api/console/models';
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { Text, TextVariants } from '@patternfly/react-core';
 
 import { ConditionLabelList } from '../ConditionLabelList';
 
@@ -16,24 +18,51 @@ export interface DemoComponentProps {
    * VirtualMachine namespace.
    */
   namespace: string;
+  /**
+   * Text to render on missing data
+   */
+  errorText?: string;
+  /**
+   * data-test-id for this component
+   */
+  dataTestID?: string;
 }
 
+/**
+ * Default prop values for DemoComponent.
+ */
+export const DemoComponentDefaults: Partial<DemoComponentProps> = {
+  errorText: 'Missing virtual machine data',
+  dataTestID: 'DemoComponent',
+};
+
 /**
  * DemoComponent renders a demo component.
  *
  * This component can me usefull to demo the components repo coding style.
  * @param {DemoComponentProps} props name and namespace.
  * */
-export const DemoComponent: React.FC<DemoComponentProps> = ({ name, namespace }) => {
+export const DemoComponent: React.FC<DemoComponentProps> = ({
+  name,
+  namespace,
+  errorText,
+  dataTestID,
+}: DemoComponentProps) => {
   const [vm, loaded, loadError] = useK8sWatchResource<V1VirtualMachine>({
-    groupVersionKind: { group: 'kubevirt.io', version: 'v1', kind: 'VirtualMachine' },
+    groupVersionKind: VirtualMachineModelGroupVersionKind,
     name,
     namespace,
     namespaced: true,
   });
   const conditions = externalLogic(vm, loaded, loadError);
 
-  return conditions ? <ConditionLabelList conditions={conditions} /> : null;
+  return conditions ? (
+    <ConditionLabelList data-test-id={dataTestID} conditions={conditions} />
+  ) : (
+    <Text data-test-id={dataTestID} component={TextVariants.small}>
+      {errorText}
+    </Text>
+  );
 };
 DemoComponent.displayName = 'DemoComponent';
 

src/components/Utils/DemoComponent/DemoComponent.test.tsx

@@ -0,0 +1,53 @@
+import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
+
+export const vmNoConditionsMock: V1VirtualMachine = {
+  apiVersion: 'kubevirt.io/v1',
+  kind: 'VirtualMachine',
+  metadata: {
+    name: 'vm-example',
+    namespace: 'default',
+  },
+  spec: {
+    running: false,
+    template: {
+      spec: {
+        domain: {
+          devices: {
+            disks: [
+              {
+                bootOrder: 1,
+                disk: {
+                  bus: 'virtio',
+                },
+                name: 'containerdisk',
+              },
+            ],
+          },
+          resources: {
+            requests: {
+              memory: '1G',
+            },
+          },
+        },
+        volumes: [
+          {
+            containerDisk: {
+              image: 'quay.io/kubevirt/fedora-cloud-container-disk-demo:latest',
+            },
+            name: 'containerdisk',
+          },
+        ],
+      },
+    },
+  },
+  status: {
+    printableStatus: 'Stopped',
+    volumeSnapshotStatuses: [
+      {
+        enabled: false,
+        name: 'containerdisk',
+        reason: 'Snapshot is not supported for this volumeSource type [containerdisk]',
+      },
+    ],
+  },
+};

src/components/Utils/DemoComponent/DemoComponent.tsx

@@ -1,6 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render DemoComponent (none valid vm) 1`] = `<DocumentFragment />`;
+exports[`Render DemoComponent (none valid vm) 1`] = `
+<DocumentFragment>
+  <small
+    class=""
+    data-ouia-component-id="OUIA-Generated-Text-1"
+    data-ouia-component-type="PF4/Text"
+    data-ouia-safe="true"
+    data-pf-content="true"
+    data-test-id="DemoComponent"
+  >
+    Missing virtual machine data
+  </small>
+</DocumentFragment>
+`;
 
 exports[`Render DemoComponent (valid vm) 1`] = `
 <DocumentFragment>

src/components/Utils/DemoComponent/__mocks__/vmNoConditionsMock.ts

@@ -1,23 +1,30 @@
 import { cleanup } from '@testing-library/react';
 
 import { vmMock } from './__mocks__/vmMock';
+import { vmNoConditionsMock } from './__mocks__/vmNoConditionsMock';
 import { externalLogic } from './extrenalLogic';
 
 afterEach(cleanup);
 
 test('externalLogic', () => {
   const conditions = externalLogic(vmMock, true, null);
 
-  expect((conditions || []).length).toBe(1);
+  expect(conditions && conditions.length).toBe(1);
+});
+
+test('externalLogic (no conditions in vm)', () => {
+  const conditions = externalLogic(vmNoConditionsMock, true, null);
+
+  expect(conditions && conditions.length).toBe(0);
 });
 
 test('externalLogic (not loaded yet)', () => {
-  const conditions = externalLogic(vmMock, false, null);
+  const conditions = externalLogic(null, false, null);
   expect(conditions).toBe(null);
 });
 
 test('externalLogic (data error)', () => {
-  const conditions = externalLogic(vmMock, true, 'Error loading data');
+  const conditions = externalLogic(null, true, 'Error loading data');
 
   expect(conditions).toBe(null);
 });

src/components/Utils/DemoComponent/__snapshots__/DemoComponent.test.tsx.snap

@@ -1,5 +1,21 @@
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 
-export const externalLogic = (vm: V1VirtualMachine, loaded: boolean, loadError: string | null) => {
-  return loaded && !loadError && vm?.status?.conditions ? vm?.status?.conditions : null;
+/**
+ * Do some external logic for DemoComponet.
+ *
+ * @param {V1VirtualMachine | null} vm a virtual machine object.
+ * @param {boolean} loaded indecates the vm data is loaded.
+ * @param {string | null} loadError an error loading data.
+ * @returns {V1VirtualMachineCondition[] | null} a list of conditions or null if no vm data available.
+ */
+export const externalLogic = (
+  vm: V1VirtualMachine | null,
+  loaded: boolean,
+  loadError: string | null,
+) => {
+  if (!loaded || loadError) {
+    return null;
+  }
+
+  return vm?.status?.conditions || [];
 };