Add data-test attributes for Triggers & Webhooks (#897)

* chore: add important data-test for Webhooks * chore: add data-test attributes for triggers
kubeshop · Oct 6, 2023 · 37cb42c · 37cb42c
1 parent c9e390f
commit 37cb42c
Show file tree

Hide file tree

Showing 18 changed files with 114 additions and 25 deletions.
diff --git a/src/components/molecules/ConfigurationCard/ConfigurationCard.tsx b/src/components/molecules/ConfigurationCard/ConfigurationCard.tsx
@@ -101,10 +101,16 @@ const ConfigurationCard: React.FC<ConfigurationCardProps> = props => {
 
                 return (
                   <StyledFooterButtonsContainer>
-                    <Button onClick={onCancel} $customType="secondary" hidden={!onCancel || buttonsDisabled}>
+                    <Button
+                      data-test="configuration-card-cancel-button"
+                      $customType="secondary"
+                      hidden={!onCancel || buttonsDisabled}
+                      onClick={onCancel}
+                    >
                       Cancel
                     </Button>
                     <Button
+                      data-test="configuration-card-confirm-button"
                       $customType={isWarning ? 'warning' : 'primary'}
                       disabled={buttonsDisabled}
                       loading={loading}

diff --git a/src/components/molecules/SettingsLeftNavigation/SettingsLeftNavigation.tsx b/src/components/molecules/SettingsLeftNavigation/SettingsLeftNavigation.tsx
@@ -1,4 +1,4 @@
-import {memo} from 'react';
+import {memo, useMemo} from 'react';
 
 import {Text} from '@custom-antd';
 
@@ -14,11 +14,16 @@ type SettingsLeftNavigationProps = {
 
 const SettingsLeftNavigation: React.FC<SettingsLeftNavigationProps> = props => {
   const {options, selectedOption, setSelectedOption} = props;
+  const keys = useMemo(() => options.map(value => value.toLowerCase().replace(/[^a-z0-9-?]/g, '-')), [options]);
 
   return (
     <StyledNavigationContainer>
       {options.map((value, index) => (
-        <StyledNavigationOptionContainer key={value} onClick={() => setSelectedOption(index)}>
+        <StyledNavigationOptionContainer
+          key={value}
+          onClick={() => setSelectedOption(index)}
+          data-test={`sidebar-navigation-link:${keys[index]}`}
+        >
           <Text className="bold middle" color={selectedOption === index ? Colors.slate50 : Colors.slate400}>
             {value}
           </Text>

diff --git a/src/components/organisms/TriggersFormItems/ActionFormItems.tsx b/src/components/organisms/TriggersFormItems/ActionFormItems.tsx
@@ -33,17 +33,39 @@ const ActionFormItems = () => {
 
   return (
     <>
-      <Form.Item label="Testkube action" required name="action" rules={[required]}>
+      <Form.Item
+        label="Testkube action"
+        data-test="triggers-add-modal-action"
+        required
+        name="action"
+        rules={[required]}
+      >
         <Select options={actionOptions} placeholder="Select a testkube related action" />
       </Form.Item>
       <Space size={16} direction="vertical" style={{width: '100%'}}>
-        <TriggerSelectorSwitcher value={switcherValue} onChange={setSwitcherValue} />
+        <TriggerSelectorSwitcher
+          data-test="triggers-add-modal-action-switch"
+          value={switcherValue}
+          onChange={setSwitcherValue}
+        />
         {switcherValue === 'label' ? (
-          <Form.Item label="Testkube resource" required name="testLabelSelector" rules={[required]}>
+          <Form.Item
+            label="Testkube resource"
+            data-test="triggers-add-modal-action-label-selector"
+            required
+            name="testLabelSelector"
+            rules={[required]}
+          >
             <LabelsSelect />
           </Form.Item>
         ) : (
-          <Form.Item label="Testkube resource" required name="testNameSelector" rules={[required]}>
+          <Form.Item
+            label="Testkube resource"
+            data-test="triggers-add-modal-action-name-selector"
+            required
+            name="testNameSelector"
+            rules={[required]}
+          >
             <ResourceTriggerSelect />
           </Form.Item>
         )}

diff --git a/src/components/organisms/TriggersFormItems/ConditionFormItems.tsx b/src/components/organisms/TriggersFormItems/ConditionFormItems.tsx
@@ -26,11 +26,21 @@ const ConditionFormItems = () => {
 
   return (
     <>
-      <Form.Item label="K8s resource" required name="resource" rules={[required]}>
+      <Form.Item
+        label="K8s resource"
+        data-test="triggers-add-modal-condition-resource"
+        required
+        name="resource"
+        rules={[required]}
+      >
         <Select options={resourcesOptions} placeholder="Select a K8s resource" />
       </Form.Item>
       <Space size={16} direction="vertical" style={{width: '100%'}}>
-        <TriggerSelectorSwitcher value={switcherValue} onChange={setSwitcherValue} />
+        <TriggerSelectorSwitcher
+          data-test="triggers-add-modal-condition-selector-switch"
+          value={switcherValue}
+          onChange={setSwitcherValue}
+        />
         {switcherValue === 'label' ? (
           <Form.Item
             label={
@@ -39,14 +49,21 @@ const ConditionFormItems = () => {
                 <LabelSelectorHelpIcon />
               </>
             }
-            required
             name="resourceLabelSelector"
+            data-test="triggers-add-modal-condition-selector-label-identifier"
+            required
             rules={[required]}
           >
             <LabelsSelect />
           </Form.Item>
         ) : (
-          <Form.Item label="Resource identifier" required name="resourceNameSelector" rules={[required]}>
+          <Form.Item
+            label="Resource identifier"
+            name="resourceNameSelector"
+            data-test="triggers-add-modal-condition-selector-name-identifier"
+            required
+            rules={[required]}
+          >
             <Input placeholder="e.g.: namespace/resource-name" />
           </Form.Item>
         )}
@@ -61,7 +78,12 @@ const ConditionFormItems = () => {
               : [];
 
           return (
-            <Form.Item label="Triggered event" name="event" rules={[required]}>
+            <Form.Item
+              label="Triggered event"
+              name="event"
+              data-test="triggers-add-modal-condition-event"
+              rules={[required]}
+            >
               <Select
                 options={eventsOptions}
                 disabled={eventsOptions.length === 0 ? true : undefined}

diff --git a/...omponents/organisms/TriggersFormItems/TriggerSelectorSwitcher/TriggerSelectorSwitcher.tsx b/...omponents/organisms/TriggersFormItems/TriggerSelectorSwitcher/TriggerSelectorSwitcher.tsx
@@ -6,10 +6,11 @@ type TriggerSelectorSwitcherProps = {
 };
 
 const TriggerSelectorSwitcher: React.FC<TriggerSelectorSwitcherProps> = props => {
-  const {value, onChange} = props;
+  const {value, onChange, ...rest} = props;
 
   return (
     <Segmented
+      {...rest}
       options={[
         {label: 'BY LABEL', value: 'label'},
         {label: 'BY NAME', value: 'name'},

diff --git a/src/components/pages/Triggers/TriggerDetails/TriggerDetails.tsx b/src/components/pages/Triggers/TriggerDetails/TriggerDetails.tsx
@@ -54,6 +54,7 @@ const TriggerDetails = () => {
 
       <PageHeader onBack={back} title={name} />
       <Tabs
+        data-test="triggers-details-tabs"
         destroyInactiveTabPane
         items={[
           {

diff --git a/src/components/pages/Triggers/TriggersList/AddTriggerModal/AddTriggerModal.tsx b/src/components/pages/Triggers/TriggersList/AddTriggerModal/AddTriggerModal.tsx
@@ -116,6 +116,7 @@ const AddTriggerModal: React.FC = () => {
           ) : null}
           <Text className="regular middle">Name</Text>
           <Input
+            data-test="triggers-add-modal-name"
             placeholder="e.g.: container-deployment-xyz"
             value={name}
             onChange={event => {

diff --git a/src/components/pages/Triggers/TriggersList/AddTriggerModal/ModalFirstStep.tsx b/src/components/pages/Triggers/TriggersList/AddTriggerModal/ModalFirstStep.tsx
@@ -34,6 +34,7 @@ const ModalFirstStep: React.FC<ModalFirstStepProps> = props => {
       >
         {({getFieldsValue, validateFields}) => (
           <Button
+            data-test="triggers-add-modal-next:first"
             $customType="primary"
             onClick={() => {
               validateFields().then(() => {

diff --git a/src/components/pages/Triggers/TriggersList/AddTriggerModal/ModalSecondStep.tsx b/src/components/pages/Triggers/TriggersList/AddTriggerModal/ModalSecondStep.tsx
@@ -27,6 +27,7 @@ const ModalSecondStep: React.FC<ModalSecondStepProps> = props => {
         {({isFieldsTouched}) => (
           <StyledButtonsContainer>
             <Button
+              data-test="webhooks-add-modal-back:second"
               $customType="secondary"
               onClick={() => {
                 setCurrentStep(StepsEnum.condition);
@@ -35,6 +36,7 @@ const ModalSecondStep: React.FC<ModalSecondStepProps> = props => {
               Back
             </Button>
             <Button
+              data-test="webhooks-add-modal-next:second"
               htmlType="submit"
               $customType="primary"
               loading={isLoading}

diff --git a/src/components/pages/Triggers/TriggersList/TriggerCard.tsx b/src/components/pages/Triggers/TriggersList/TriggerCard.tsx
@@ -12,8 +12,10 @@ interface TriggerCardProps {
 }
 
 const TriggerCard: FC<TriggerCardProps> = ({item, onClick}) => (
-  <TriggerContainer onClick={() => onClick(item)} key={item.name}>
-    <Text className="regular big">{item.name}</Text>
+  <TriggerContainer data-test={`triggers-list-item:${item.name}`} onClick={() => onClick(item)} key={item.name}>
+    <Text className="regular big" data-test="triggers-list-item-name">
+      {item.name}
+    </Text>
   </TriggerContainer>
 );
 

diff --git a/src/components/pages/Triggers/TriggersList/TriggersList.tsx b/src/components/pages/Triggers/TriggersList/TriggersList.tsx
@@ -64,7 +64,12 @@ const TriggersList: React.FC = () => {
       }
       headerButton={
         mayCreate ? (
-          <Button $customType="primary" onClick={openCreateModal} disabled={!isClusterAvailable}>
+          <Button
+            data-test="triggers-add-button"
+            $customType="primary"
+            onClick={openCreateModal}
+            disabled={!isClusterAvailable}
+          >
             Create a new trigger
           </Button>
         ) : null

diff --git a/src/components/pages/Webhooks/WebhookCreationModal/FirstStep.tsx b/src/components/pages/Webhooks/WebhookCreationModal/FirstStep.tsx
@@ -33,15 +33,22 @@ export const FirstStep: FC<FirstStepProps> = ({onStepChange}) => (
           Resource identifier <LabelSelectorHelpIcon />
         </>
       }
+      data-test="webhooks-add-modal-resource"
       required
     >
       <LabelsSelect placeholder="All resources" stylePlaceholderAsValue />
     </FormItem>
     <FormItem noStyle shouldUpdate>
       {({getFieldError}) => (
-        <FormItem name="events" required rules={[requiredNoText]} label="Triggered events">
+        <FormItem
+          name="events"
+          required
+          rules={[requiredNoText]}
+          label="Triggered events"
+          data-test="webhooks-add-modal-events"
+        >
           <CreatableMultiSelect
-            placeholder="Select Testkube resource"
+            placeholder="Select events"
             options={webhookEvents}
             menuPlacement="top"
             formatCreateLabel={val => val}
@@ -52,6 +59,7 @@ export const FirstStep: FC<FirstStepProps> = ({onStepChange}) => (
     </FormItem>
     <FullWidthSpace justify="flex-end">
       <Button
+        data-test="webhooks-add-modal-next:first"
         onClick={() => {
           onStepChange(1);
         }}

diff --git a/src/components/pages/Webhooks/WebhookCreationModal/SecondStep.tsx b/src/components/pages/Webhooks/WebhookCreationModal/SecondStep.tsx
@@ -11,19 +11,22 @@ interface SecondStepProps {
 export const SecondStep: FC<SecondStepProps> = ({onStepChange}) => {
   return (
     <FullWidthSpace size={20} direction="vertical">
-      <FormItem label="URI" name="uri" required rules={[requiredNoText, url]}>
+      <FormItem label="URI" name="uri" required rules={[requiredNoText, url]} data-test="webhooks-add-modal-url">
         <Input placeholder="Webhook URI" />
       </FormItem>
       <FullWidthSpace size={15} justify="flex-end">
         <Button
+          data-test="webhooks-add-modal-back:second"
           onClick={() => {
             onStepChange(0);
           }}
           $customType="secondary"
         >
           Back
         </Button>
-        <Button htmlType="submit">Submit</Button>
+        <Button data-test="webhooks-add-modal-next:second" htmlType="submit">
+          Submit
+        </Button>
       </FullWidthSpace>
     </FullWidthSpace>
   );

diff --git a/src/components/pages/Webhooks/WebhookCreationModal/WebhookCreationModal.tsx b/src/components/pages/Webhooks/WebhookCreationModal/WebhookCreationModal.tsx
@@ -87,7 +87,7 @@ const WebhookCreationModal: FC = () => {
       disabled={isLoading}
     >
       <FullWidthSpace direction="vertical" size={20}>
-        <FormItem name="name" label="Name" rules={[requiredNoText]} required>
+        <FormItem name="name" label="Name" data-test="webhooks-add-modal-name" rules={[requiredNoText]} required>
           <Input placeholder="e.g.: container-deployment-xyz" autoComplete="off" />
         </FormItem>
         <Steps

diff --git a/src/components/pages/Webhooks/WebhookDetails/WebhookDetails.tsx b/src/components/pages/Webhooks/WebhookDetails/WebhookDetails.tsx
@@ -51,6 +51,7 @@ const WebhookDetails: FC = () => {
       <PageHeader onBack={back} title={name} />
 
       <Tabs
+        data-test="webhooks-details-tabs"
         activeKey="settings"
         onChange={setTab}
         destroyInactiveTabPane

diff --git a/src/components/pages/Webhooks/WebhooksList/WebhookCard.tsx b/src/components/pages/Webhooks/WebhooksList/WebhookCard.tsx
@@ -23,7 +23,7 @@ const WebhookCard: FC<WebhookCardProps> = ({item, onClick}) => {
   const labels = useMemo(() => decodeSelector(selector), [selector]);
 
   return (
-    <WebhookContainer onClick={() => onClick(item)} key={name}>
+    <WebhookContainer data-test={`webhooks-list-item:${name}`} onClick={() => onClick(item)} key={name}>
       <ItemRow $flex={1}>
         <ItemColumn $isStretch>
           <Text className="regular big">{name}</Text>
@@ -35,15 +35,17 @@ const WebhookCard: FC<WebhookCardProps> = ({item, onClick}) => {
             <Text className="small" color={Colors.slate500}>
               URL
             </Text>
-            <Text className="regular big" color={Colors.slate400}>
+            <Text className="regular big" color={Colors.slate400} data-test="webhooks-list-item-url">
               {uri}
             </Text>
           </StyledMetricItem>
           <StyledMetricItem>
             <Text className="small" color={Colors.slate500}>
               RESOURCE <LabelSelectorHelpIcon />
             </Text>
-            {selector ? <LabelsList labels={labels} /> : <Text className="small">All resources</Text>}
+            <div data-test="webhooks-list-item-selector">
+              {selector ? <LabelsList labels={labels} /> : <Text className="small">All resources</Text>}
+            </div>
           </StyledMetricItem>
         </ItemColumn>
       </ItemRow>

diff --git a/src/components/pages/Webhooks/WebhooksList/WebhooksList.tsx b/src/components/pages/Webhooks/WebhooksList/WebhooksList.tsx
@@ -63,7 +63,12 @@ const WebhooksList: FC = () => {
       }
       headerButton={
         mayCreate ? (
-          <Button $customType="primary" onClick={openCreateModal} disabled={!isClusterAvailable}>
+          <Button
+            data-test="webhooks-add-button"
+            $customType="primary"
+            onClick={openCreateModal}
+            disabled={!isClusterAvailable}
+          >
             Create a new webhook
           </Button>
         ) : null

diff --git a/src/modal/context.tsx b/src/modal/context.tsx
@@ -46,6 +46,8 @@ export const ModalOutlet: FC = () => {
       width={config.width}
       title={config.title}
       content={config.content}
+      dataTestModalRoot={config.dataTestModalRoot}
+      dataTestCloseBtn={config.dataTestCloseBtn}
       isModalVisible={open}
       setIsModalVisible={setOpen}
     />