💣 453 adding integration tests for the trace view (#457)

kubeshop · May 9, 2022 · 3827f90 · 3827f90
1 parent 85e5b71
commit 3827f90
Show file tree

Hide file tree

Showing 19 changed files with 235 additions and 72 deletions.
diff --git a/web/cypress/integration/Home/CreateTest.spec.ts b/web/cypress/integration/Home/CreateTest.spec.ts
@@ -1,28 +1,6 @@
 import {camelCase} from 'lodash';
 import {DemoTestExampleList} from '../../../src/constants/Test.constants';
-
-Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'));
-
-export const deleteTest = () => {
-  cy.location().then(({pathname}) => {
-    const testId = pathname.split('/').pop();
-    cy.visit('http://localhost:3000/');
-
-    cy.get(`[data-cy=test-actions-button-${testId}]`).click();
-    cy.get('[data-cy=test-delete-button]').click();
-
-    cy.get(`[data-cy=test-actions-button-${testId}]`).should('not.exist');
-  });
-};
-
-export const openCreateTestModal = () => {
-  cy.get('[data-cy=create-test-button]').click();
-
-  const $form = cy.get('[data-cy=create-test-modal] form');
-  $form.should('be.visible');
-
-  return $form;
-};
+import {deleteTest, openCreateTestModal} from '../utils/common';
 
 describe('Create test', () => {
   beforeEach(() => {

diff --git a/web/cypress/integration/Home/ShowTestList.spec.ts b/web/cypress/integration/Home/ShowTestList.spec.ts
@@ -1,7 +1,5 @@
 import {DOCUMENTATION_URL, GITHUB_URL} from '../../../src/constants/Common.constants';
 
-Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'));
-
 describe('Home', () => {
   beforeEach(() => {
     cy.visit('http://localhost:3000/');
@@ -18,8 +16,5 @@ describe('Home', () => {
     cy.get('[data-cy=create-test-button]').should('be.visible');
 
     cy.get('[data-cy=testList]').should('be.visible');
-    cy.get('[data-cy=testList] .ant-table-row').should($tr => {
-      expect($tr).to.have.length.greaterThan(0);
-    });
   });
 });
diff --git a/web/cypress/integration/TestDetails/ShowTestDetails.spec.ts b/web/cypress/integration/TestDetails/ShowTestDetails.spec.ts
@@ -1,24 +1,4 @@
-import {camelCase} from 'lodash';
-import {openCreateTestModal, deleteTest} from '../Home/CreateTest.spec';
-import {DemoTestExampleList} from '../../../src/constants/Test.constants';
-
-const [, {name, description}] = DemoTestExampleList;
-let testId = '';
-
-export const createTest = () => {
-  cy.visit('http://localhost:3000/');
-  const $form = openCreateTestModal();
-
-  $form.get('[data-cy=example-button]').click();
-  $form.get(`[data-cy=demo-example-${camelCase(name)}]`).click();
-  $form.get('[data-cy=create-test-submit]').click();
-
-  cy.location('pathname').should('match', /\/test\/.*/i);
-  cy.location().then(({pathname}) => {
-    testId = pathname.split('/').pop();
-  });
-  cy.visit('http://localhost:3000/');
-};
+import {createTest, deleteTest, description, name, testId} from '../utils/common';
 
 describe('Show test details', () => {
   before(() => {

diff --git a/web/cypress/integration/Trace/CreateAssertion.spec.ts b/web/cypress/integration/Trace/CreateAssertion.spec.ts
@@ -0,0 +1,91 @@
+import {createTest, deleteTest, testId} from '../utils/common';
+
+describe('Create Assertion', () => {
+  before(() => {
+    createTest();
+  });
+
+  after(() => {
+    deleteTest();
+  });
+
+  it('should create a basic assertion', () => {
+    cy.get(`[data-cy=test-url-${testId}]`).first().click();
+    cy.location('href').should('match', /\/test\/.*/i);
+
+    cy.get(`[data-cy^=test-run-result-]`).first().click();
+    cy.location('href').should('match', /resultId=.*/i);
+
+    cy.get('[data-cy=add-assertion-button]').click();
+    cy.get('[data-cy=create-assertion-form]', {timeout: 10000}).should('be.visible');
+
+    cy.get('[data-cy=item-selector-tag] + [role=img]').first().click();
+    cy.get('[data-cy=affected-spans-count]')
+      .invoke('text')
+      .should('match', /Affects \d+ spans/);
+
+    cy.get('[data-cy=assertion-check-key]').type('http');
+    cy.get('.ant-select-item-option-content').first().click();
+    cy.get('[data-cy=assertion-check-key]').should('have.text', 'http.status_code');
+    cy.get('[data-cy=assertion-check-value] input').should('have.attr', 'value', '200');
+
+    cy.get('[data-cy=assertion-check-operator]').click();
+    cy.get('.ant-select-item-option-content').last().click();
+
+    cy.get('[data-cy=assertion-check-operator] .ant-select-selection-item').should('have.text', 'contains');
+    cy.get('#add-assertion-modal-ok-button').click();
+
+    cy.get('[data-cy=assertion-table]').should('be.visible');
+  });
+
+  it('should create an assertion with multiple checks', () => {
+    cy.get('[data-cy=add-assertion-button]').click();
+    cy.get('[data-cy=create-assertion-form]').should('be.visible');
+
+    cy.get('[data-cy=assertion-check-key]').first().type('http');
+    cy.get('.ant-select-item-option-content').first().click();
+    cy.get('[data-cy=assertion-check-key]').first().should('have.text', 'http.status_code');
+    cy.get('[data-cy=assertion-check-value] input').first().should('have.attr', 'value', '200');
+    cy.get('[data-cy=assertion-check-operator]').first().click();
+    cy.get('.ant-select-item-option-content').last().click();
+    cy.get('[data-cy=assertion-check-operator] .ant-select-selection-item').first().should('have.text', 'contains');
+
+    cy.get('[data-cy=add-assertion-form-add-check]').click();
+
+    cy.get('[data-cy=assertion-check-key]').last().type('service');
+    cy.get('.ant-select-item-option-content').last().click();
+    cy.get('[data-cy=assertion-check-key]').last().should('have.text', 'service.name');
+    cy.get('[data-cy=assertion-check-value] input').last().should('have.attr', 'value', 'pokeshop');
+
+    cy.get('[data-cy=assertion-check-operator] .ant-select-selection-item').last().should('have.text', 'eq');
+    cy.get('#add-assertion-modal-ok-button').click();
+
+    cy.get('[data-cy=assertion-table]').should('have.lengthOf', 2);
+    cy.get('[data-cy=assertion-check-property]').should('have.lengthOf', 3);
+  });
+
+  it('should update an assertion', () => {
+    cy.get('[data-cy=edit-assertion-button]').last().click();
+    cy.get('[data-cy=create-assertion-form]').should('be.visible');
+
+    cy.get('[data-cy=assertion-check-operator]').first().click();
+    cy.get('.ant-select-item-option-content').first().click();
+    cy.get('[data-cy=assertion-check-operator] .ant-select-selection-item').first().should('have.text', 'eq');
+
+    cy.get('[data-cy=add-assertion-form-add-check]').click();
+
+    cy.get('[data-cy=assertion-check-key]').last().type('service');
+    cy.get('.ant-select-item-option-content').last().click();
+    cy.get('[data-cy=assertion-check-key]').last().should('have.text', 'service.name');
+    cy.get('[data-cy=assertion-check-value] input').last().should('have.attr', 'value', 'pokeshop');
+
+    cy.get('[data-cy=assertion-check-operator] .ant-select-selection-item').last().should('have.text', 'eq');
+    cy.get('#add-assertion-modal-ok-button').click();
+
+    cy.get('[data-cy=assertion-table]').should('have.lengthOf', 2);
+    cy.get('[data-cy=assertion-check-property]').should('have.lengthOf', 4);
+
+    cy.get('#rc-tabs-1-tab-test-results').click();
+    cy.get('[data-cy=test-results-assertion-table]').should('have.lengthOf', 2);
+  });
+});
diff --git a/web/cypress/integration/Trace/ShowTrace.spec.ts b/web/cypress/integration/Trace/ShowTrace.spec.ts
@@ -0,0 +1,27 @@
+import {createTest, deleteTest, testId} from '../utils/common';
+
+describe('Show Trace', () => {
+  beforeEach(() => {
+    createTest();
+  });
+
+  afterEach(() => {
+    deleteTest();
+  });
+
+  it('should show the trace components', () => {
+    cy.get(`[data-cy=test-url-${testId}]`).first().click();
+    cy.location('href').should('match', /\/test\/.*/i);
+
+    cy.get(`[data-cy^=test-run-result-]`).first().click();
+    cy.location('href').should('match', /resultId=.*/i);
+
+    cy.get('[data-cy=diagram-dag]', {timeout: 6000}).should('be.visible');
+    cy.get('[data-cy^=trace-node-]', {timeout: 6000}).should('be.visible');
+    cy.get('[data-cy=span-details-attributes]').should('be.visible');
+    cy.get('[data-cy=empty-assertion-table]').should('be.visible');
+
+    cy.get('#rc-tabs-1-tab-test-results').click();
+    cy.get('[data-cy=test-results]').should('be.visible');
+  });
+});
diff --git a/web/cypress/integration/utils/Common.ts b/web/cypress/integration/utils/Common.ts
@@ -0,0 +1,45 @@
+import {camelCase} from 'lodash';
+import {DemoTestExampleList} from '../../../src/constants/Test.constants';
+
+Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'));
+
+export const [, {name, description}] = DemoTestExampleList;
+
+// eslint-disable-next-line import/no-mutable-exports
+export let testId = '';
+
+export const createTest = () => {
+  cy.visit('http://localhost:3000/');
+  const $form = openCreateTestModal();
+
+  $form.get('[data-cy=example-button]').click();
+  $form.get(`[data-cy=demo-example-${camelCase(name)}]`).click();
+  $form.get('[data-cy=create-test-submit]').click();
+
+  cy.location('pathname').should('match', /\/test\/.*/i);
+  cy.location().then(({pathname}) => {
+    testId = pathname.split('/').pop();
+  });
+  cy.visit('http://localhost:3000/');
+};
+
+export const openCreateTestModal = () => {
+  cy.get('[data-cy=create-test-button]').click();
+
+  const $form = cy.get('[data-cy=create-test-modal] form');
+  $form.should('be.visible');
+
+  return $form;
+};
+
+export const deleteTest = () => {
+  cy.location().then(({pathname}) => {
+    const testId = pathname.split('/').pop();
+    cy.visit('http://localhost:3000/');
+
+    cy.get(`[data-cy=test-actions-button-${testId}]`).click();
+    cy.get('[data-cy=test-delete-button]').click();
+
+    cy.get(`[data-cy=test-actions-button-${testId}]`).should('not.exist');
+  });
+};
diff --git a/web/src/components/AssertionsTable/AssertionsTable.tsx b/web/src/components/AssertionsTable/AssertionsTable.tsx
@@ -51,7 +51,7 @@ const AssertionsResultTable: React.FC<IAssertionsResultTableProps> = ({
   );
 
   return (
-    <S.AssertionsTableContainer>
+    <S.AssertionsTableContainer data-cy="assertion-table">
       <S.AssertionsTableHeader>
         <Typography.Title level={5} style={{margin: 0}}>
           Assertion #{sort}
@@ -61,6 +61,7 @@ const AssertionsResultTable: React.FC<IAssertionsResultTableProps> = ({
         </Typography.Title>
         <Button
           type="link"
+          data-cy="edit-assertion-button"
           onClick={() => {
             AssertionTableAnalyticsService.onEditAssertionButtonClick(assertion.assertionId);
             setIsModalOpen(true);
@@ -70,7 +71,14 @@ const AssertionsResultTable: React.FC<IAssertionsResultTableProps> = ({
         </Button>
       </S.AssertionsTableHeader>
       <CustomTable size="small" pagination={{hideOnSinglePage: true}} dataSource={parsedAssertionList}>
-        <Table.Column title="Property" dataIndex="property" key="property" ellipsis width="50%" />
+        <Table.Column
+          title="Property"
+          dataIndex="property"
+          key="property"
+          ellipsis
+          width="50%"
+          render={value => <span data-cy="assertion-check-property">{value}</span>}
+        />
         <Table.Column
           title="Comparison"
           dataIndex="comparison"

diff --git a/web/src/components/CreateAssertionModal/CreateAssertionForm.tsx b/web/src/components/CreateAssertionModal/CreateAssertionForm.tsx
@@ -122,7 +122,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
 
   return (
     <Form
-      name="newTest"
+      name="assertion-form"
       form={form}
       initialValues={{
         remember: true,
@@ -132,6 +132,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
       onFinish={handleCreateAssertion}
       autoComplete="off"
       layout="vertical"
+      data-cy="create-assertion-form"
       onFieldsChange={changedFields => {
         const selectorList = form.getFieldValue('selectorList') || [];
         onSelectorList(selectorList);
@@ -166,10 +167,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
           <QuestionCircleOutlined style={{color: '#8C8C8C'}} />
         </Tooltip>
       </div>
-      <Form.Item
-        name="selectorList"
-        data-tour={GuidedTourService.getStep(GuidedTours.Assertion, Steps.Selectors)}
-      >
+      <Form.Item name="selectorList" data-tour={GuidedTourService.getStep(GuidedTours.Assertion, Steps.Selectors)}>
         <CreateAssertionSelectorInput spanSignature={defaultSelectorList} />
       </Form.Item>
       <div style={{marginTop: 24, marginBottom: 8}}>
@@ -190,6 +188,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
                       name={[name, 'key']}
                       style={{margin: 0}}
                       rules={[{required: true, message: 'Attribute is required'}]}
+                      data-cy="assertion-check-key"
                     >
                       <AutoComplete
                         style={{margin: 0}}
@@ -207,6 +206,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
                       style={{margin: 0}}
                       name={[name, 'compareOp']}
                       rules={[{required: true, message: 'Operator is required'}]}
+                      data-cy="assertion-check-operator"
                     >
                       <S.Select style={{margin: 0}}>
                         <S.Select.Option value={CompareOperator.EQUALS}>eq</S.Select.Option>
@@ -223,6 +223,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
                       name={[name, 'value']}
                       style={{margin: 0}}
                       rules={[{required: true, message: 'Value is required'}]}
+                      data-cy="assertion-check-value"
                     >
                       <Input placeholder="value" />
                     </S.FullHeightFormItem>
@@ -245,6 +246,7 @@ const CreateAssertionForm: React.FC<TCreateAssertionFormProps> = ({
                     onAddCheck();
                     add();
                   }}
+                  data-cy="add-assertion-form-add-check"
                 >
                   Add Item
                 </Button>

diff --git a/web/src/components/CreateAssertionModal/CreateAssertionModal.tsx b/web/src/components/CreateAssertionModal/CreateAssertionModal.tsx
@@ -17,8 +17,8 @@ interface IProps {
 }
 
 const affectedSpanMessage = (spanCount: number) => {
-  if (spanCount <= 1) {
-    return `Affects ${spanCount} span`;
+  if (spanCount === 1) {
+    return `Affect ${spanCount} span`;
   }
 
   return `Affects ${spanCount} spans`;
@@ -51,12 +51,15 @@ const CreateAssertionModal = ({testId, span, resultId, open, onClose, assertion}
       title={
         <div style={{display: 'flex', justifyContent: 'space-between', marginRight: 36}}>
           <Typography.Title level={5}>{assertion ? 'Edit Assertion' : 'Create New Assertion'}</Typography.Title>
-          <Typography.Text>{affectedSpanMessage(affectedSpanList.length)}</Typography.Text>
+          <Typography.Text data-cy="affected-spans-count">
+            {affectedSpanMessage(affectedSpanList.length)}
+          </Typography.Text>
         </div>
       }
       onOk={form?.submit}
       okButtonProps={{
         type: 'default',
+        id: 'add-assertion-modal-ok-button',
       }}
       okText="Save"
     >

diff --git a/web/src/components/CreateAssertionModal/CreateAssertionSelectorInput.tsx b/web/src/components/CreateAssertionModal/CreateAssertionSelectorInput.tsx
@@ -2,7 +2,7 @@ import {TagOutlined} from '@ant-design/icons';
 import {AutoComplete, Checkbox, Input, Tag} from 'antd';
 import {noop} from 'lodash';
 import React, {useCallback, useMemo, useState} from 'react';
-import { IItemSelector } from '../../types/Assertion.types';
+import {IItemSelector} from '../../types/Assertion.types';
 
 type TItemSelectorDropdownProps = {
   spanSignature: IItemSelector[];
@@ -68,7 +68,7 @@ export const CreateAssertionSelectorInput: React.FC<TItemSelectorDropdownProps>
             closable
             onClose={() => handleDeleteItemSelector(item)}
           >
-            {item.value}
+            <span data-cy="item-selector-tag">{item.value}</span>
           </Tag>
         ))}
       </div>

diff --git a/web/src/components/Diagram/components/DAG.styled.tsx b/web/src/components/Diagram/components/DAG.styled.tsx
@@ -2,4 +2,5 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   position: relative;
+  height: 100%;
 `;