fix(optinView): issues/240 expand unit tests (#253)

RedHatInsights · Apr 14, 2020 · 8e37a34 · 8e37a34
1 parent 3de8b02
commit 8e37a34
Show file tree

Hide file tree

Showing 2 changed files with 248 additions and 1 deletion.
diff --git a/src/components/optinView/__tests__/__snapshots__/optinView.test.js.snap b/src/components/optinView/__tests__/__snapshots__/optinView.test.js.snap
@@ -147,3 +147,203 @@ exports[`OptinView Component should render a non-connected component: non-connec
   </Card>
 </PageLayout>
 `;
+
+exports[`OptinView Component should render an organization administrator view: error admin view 1`] = `
+<CardFooter>
+  <p>
+    t(curiosity-optin.cardIsErrorDescription, [object Object], [object Object])
+  </p>
+</CardFooter>
+`;
+
+exports[`OptinView Component should render an organization administrator view: fulfilled admin view 1`] = `
+<CardFooter>
+  <Form>
+    <ActionGroup>
+      <Component
+        isDisabled={true}
+        variant="primary"
+      >
+        t(curiosity-optin.buttonIsActive, [object Object])
+      </Component>
+    </ActionGroup>
+    <p>
+      t(curiosity-optin.cardIsActiveDescription)
+    </p>
+  </Form>
+</CardFooter>
+`;
+
+exports[`OptinView Component should render an organization administrator view: initial admin view 1`] = `
+<PageLayout>
+  <Card>
+    <Flex
+      breakpointMods={
+        Array [
+          Object {
+            "modifier": "column",
+          },
+          Object {
+            "breakpoint": "md",
+            "modifier": "row",
+          },
+        ]
+      }
+    >
+      <Flex
+        breakpointMods={
+          Array [
+            Object {
+              "modifier": "flex-2",
+            },
+          ]
+        }
+      >
+        <FlexItem>
+          <CardHeader
+            key="heading1Title"
+          >
+            <Title
+              size="2xl"
+            >
+              t(curiosity-optin.cardTitle, [object Object])
+            </Title>
+          </CardHeader>
+          <CardBody
+            key="heading1Desc"
+          >
+            t(curiosity-optin.cardDescription, [object Object])
+          </CardBody>
+          <CardHeader
+            key="heading2Title"
+          >
+            <Title
+              headingLevel="h2"
+              size="xl"
+            >
+              t(curiosity-optin.cardSeeTitle)
+            </Title>
+          </CardHeader>
+          <CardBody
+            key="heading2Desc"
+          >
+            t(curiosity-optin.cardSeeDescription)
+          </CardBody>
+          <CardHeader
+            key="heading3Title"
+          >
+            <Title
+              headingLevel="h2"
+              size="xl"
+            >
+              t(curiosity-optin.cardReportTitle)
+            </Title>
+          </CardHeader>
+          <CardBody
+            key="heading3Desc"
+          >
+            t(curiosity-optin.cardReportDescription)
+          </CardBody>
+          <CardHeader
+            key="heading4Title"
+          >
+            <Title
+              headingLevel="h2"
+              size="xl"
+            >
+              t(curiosity-optin.cardFilterTitle)
+            </Title>
+          </CardHeader>
+          <CardBody
+            key="heading4Desc"
+          >
+            t(curiosity-optin.cardFilterDescription)
+          </CardBody>
+          <CardFooter>
+            <Form>
+              <ActionGroup>
+                <Component
+                  onClick={[Function]}
+                  variant="primary"
+                >
+                  t(curiosity-optin.buttonActivate, [object Object])
+                </Component>
+              </ActionGroup>
+            </Form>
+          </CardFooter>
+        </FlexItem>
+      </Flex>
+      <Flex
+        breakpointMods={
+          Array [
+            Object {
+              "modifier": "flex-1",
+            },
+            Object {
+              "modifier": "align-self-center",
+            },
+          ]
+        }
+      >
+        <FlexItem>
+          <CardBody>
+            <Card
+              className="curiosity-optin-tour"
+            >
+              <CardHead>
+                <CardHeadMain>
+                  <Brand
+                    alt="t(curiosity-optin.tourTitleImageAlt)"
+                    aria-hidden={true}
+                    className="curiosity-optin-image"
+                    src="graph4x.png"
+                    srcSet="graph4x.png 1064w, graph2x.png 600w"
+                  />
+                </CardHeadMain>
+              </CardHead>
+              <CardHeader>
+                <Title
+                  headingLevel="h3"
+                  size="2xl"
+                >
+                  t(curiosity-optin.tourTitle)
+                </Title>
+              </CardHeader>
+              <CardBody>
+                t(curiosity-optin.tourDescription)
+              </CardBody>
+              <CardFooter>
+                <Component
+                  className="uxui-curiosity__button-tour"
+                  variant="secondary"
+                >
+                  t(curiosity-optin.buttonTour)
+                </Component>
+              </CardFooter>
+            </Card>
+          </CardBody>
+        </FlexItem>
+      </Flex>
+    </Flex>
+  </Card>
+</PageLayout>
+`;
+
+exports[`OptinView Component should render an organization administrator view: pending admin view 1`] = `
+<CardFooter>
+  <Form>
+    <ActionGroup>
+      <Component
+        isDisabled={true}
+        variant="primary"
+      >
+        <Spinner
+          size="sm"
+        />
+         
+        t(curiosity-optin.buttonActivate, [object Object])
+      </Component>
+    </ActionGroup>
+  </Form>
+</CardFooter>
+`;
diff --git a/src/components/optinView/__tests__/optinView.test.js b/src/components/optinView/__tests__/optinView.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { OptinView } from '../optinView';
 
 describe('OptinView Component', () => {
@@ -9,4 +9,51 @@ describe('OptinView Component', () => {
     const component = shallow(<OptinView {...props} />);
     expect(component).toMatchSnapshot('non-connected');
   });
+
+  it('should render an organization administrator view', () => {
+    const props = {
+      session: {
+        admin: true
+      }
+    };
+
+    const component = shallow(<OptinView {...props} />);
+    expect(component).toMatchSnapshot('initial admin view');
+
+    component.setProps({
+      pending: true
+    });
+    expect(component.find('CardFooter').first()).toMatchSnapshot('pending admin view');
+
+    component.setProps({
+      pending: false,
+      error: true
+    });
+    expect(component.find('CardFooter').first()).toMatchSnapshot('error admin view');
+
+    component.setProps({
+      pending: false,
+      error: false,
+      fulfilled: true
+    });
+    expect(component.find('CardFooter').first()).toMatchSnapshot('fulfilled admin view');
+  });
+
+  it('should submit an opt-in form', () => {
+    const props = {
+      session: {
+        admin: true
+      }
+    };
+
+    const component = mount(<OptinView {...props} />);
+    const componentInstance = component.instance();
+    const spy = jest.spyOn(componentInstance, 'onSubmitOptIn');
+
+    component.update();
+    componentInstance.forceUpdate();
+
+    component.find('form button').simulate('click');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
 });