Merge pull request #953 from remarkablemark/feat/label

feat: pass options to label assertions and queries

cypress/e2e/eviltester/checkbox.feature

@@ -0,0 +1,13 @@
+Feature: Checkbox
+  Scenario: Check and uncheck checkbox input
+    Given I visit "https://testpages.eviltester.com/styled/reference/input.html"
+      And I click on button "Toggle Event Info Display"
+    When I check input "Checkbox"
+      | pseudoSelector | visible |
+    Then I see text "Checked: true"
+    When I find input by label text "Checkbox"
+      | pseudoSelector | visible |
+      And I check
+    Then I see text "Checked: true"
+    When I uncheck
+    Then I see text "Checked: false"

src/actions/check.ts

@@ -40,6 +40,11 @@ import { getCypressElement, getOptions } from '../utils';
  * When I find input by label text "Checkbox"
  *   And I check
  * ```
+ *
+ * @see
+ *
+ * - {@link When_I_check_input | When I check input}
+ * - {@link When_I_uncheck | When I uncheck}
  */
 export function When_I_check(options?: DataTable) {
   getCypressElement().check(getOptions(options));
@@ -72,11 +77,17 @@ When('I check', When_I_check);
  *   | scrollBehavior | top |
  *   | timeout | 4000 |
  *   | waitForAnimations | true |
+ *   | pseudoSelector | visible |
  * ```
+ *
+ * @see
+ *
+ * - {@link When_I_check | When I check}
+ * - {@link When_I_uncheck_input | When I uncheck input}
  */
 export function When_I_check_input(text: string, options?: DataTable) {
-  When_I_find_input_by_label_text(text);
-  getCypressElement().check(getOptions(options));
+  When_I_find_input_by_label_text(text, options);
+  When_I_check(options);
 }
 
 When('I check input {string}', When_I_check_input);

src/actions/uncheck.ts

@@ -40,6 +40,11 @@ import { getCypressElement, getOptions } from '../utils';
  * When I find input by label text "Checkbox"
  *   And I uncheck
  * ```
+ *
+ * @see
+ *
+ * - {@link When_I_uncheck_input | When I uncheck input}
+ * - {@link When_I_check | When I check}
  */
 export function When_I_uncheck(options?: DataTable) {
   getCypressElement().uncheck(getOptions(options));
@@ -72,11 +77,17 @@ When('I uncheck', When_I_uncheck);
  *   | scrollBehavior | top |
  *   | timeout | 4000 |
  *   | waitForAnimations | true |
+ *   | pseudoSelector | visible |
  * ```
+ *
+ * @see
+ *
+ * - {@link When_I_uncheck | When I uncheck}
+ * - {@link When_I_check_input | When I check input}
  */
 export function When_I_uncheck_input(text: string, options?: DataTable) {
-  When_I_find_input_by_label_text(text);
-  getCypressElement().uncheck(getOptions(options));
+  When_I_find_input_by_label_text(text, options);
+  When_I_uncheck();
 }
 
 When('I uncheck input {string}', When_I_uncheck_input);

src/assertions/label.ts

@@ -1,7 +1,7 @@
 import { DataTable, Then } from '@badeball/cypress-cucumber-preprocessor';
 
-import { PseudoSelector } from '../constants';
-import { getLabelElements } from '../utils';
+import { When_I_find_elements_by_label_text } from '../queries';
+import { getCypressElement } from '../utils';
 
 /**
  * Then I see label:
@@ -33,7 +33,8 @@ import { getLabelElements } from '../utils';
  * - {@link Then_I_see_text | Then I see text}
  */
 export function Then_I_see_label(text: string, options?: DataTable) {
-  getLabelElements(text, PseudoSelector.visible, options).should('exist');
+  When_I_find_elements_by_label_text(text, options);
+  getCypressElement().should('exist');
 }
 
 Then('I see label {string}', Then_I_see_label);
@@ -68,7 +69,8 @@ Then('I see label {string}', Then_I_see_label);
  * - {@link Then_I_do_not_see_text | Then I do not see text}
  */
 export function Then_I_do_not_see_label(text: string, options?: DataTable) {
-  getLabelElements(text, PseudoSelector.visible, options).should('not.exist');
+  When_I_find_elements_by_label_text(text, options);
+  getCypressElement().should('not.exist');
 }
 
 Then('I do not see label {string}', Then_I_do_not_see_label);

src/constants/index.ts

@@ -1,6 +1,16 @@
+/**
+ * @private
+ */
+export enum Element {
+  input = 'input',
+  textarea = 'textarea',
+}
+
 /**
  * @private
  */
 export enum PseudoSelector {
+  hidden = 'hidden',
+  none = '',
   visible = 'visible',
 }

src/queries/input.ts

@@ -1,5 +1,6 @@
-import { When } from '@badeball/cypress-cucumber-preprocessor';
+import { DataTable, When } from '@badeball/cypress-cucumber-preprocessor';
 
+import { Element } from '../constants';
 import { getByLabelText, setCypressElement } from '../utils';
 
 /**
@@ -17,6 +18,17 @@ import { getByLabelText, setCypressElement } from '../utils';
  * When I find input by label text "Email"
  * ```
  *
+ * With [options](https://docs.cypress.io/api/commands/get#Arguments):
+ *
+ * ```gherkin
+ * When I find input by label text "Email"
+ *   | log | true |
+ *   | timeout | 4000 |
+ *   | withinSubject | null |
+ *   | includeShadowDom | false |
+ *   | pseudoSelector | visible |
+ * ```
+ *
  * @remarks
  *
  * This precedes steps like {@link Then_I_see_value | "Then I see value"}. For example:
@@ -32,8 +44,11 @@ import { getByLabelText, setCypressElement } from '../utils';
  *
  * - {@link When_I_find_element_by_label_text | When I find element by label text }
  */
-export function When_I_find_input_by_label_text(text: string) {
-  setCypressElement(getByLabelText('input', text));
+export function When_I_find_input_by_label_text(
+  text: string,
+  options?: DataTable,
+) {
+  setCypressElement(getByLabelText(Element.input, text, options));
 }
 
 When('I find input by label text {string}', When_I_find_input_by_label_text);

src/queries/label.ts

@@ -1,7 +1,7 @@
 import { DataTable, When } from '@badeball/cypress-cucumber-preprocessor';
 
 import { PseudoSelector } from '../constants';
-import { getLabelElements, setCypressElement } from '../utils';
+import { getLabelElements, getOptions, setCypressElement } from '../utils';
 
 /**
  * When I find elements by label text:
@@ -26,6 +26,7 @@ import { getLabelElements, setCypressElement } from '../utils';
  *   | timeout | 4000 |
  *   | withinSubject | null |
  *   | includeShadowDom | false |
+ *   | pseudoSelector | visible |
  * ```
  *
  * @remarks
@@ -48,7 +49,12 @@ export function When_I_find_elements_by_label_text(
   text: string,
   options?: DataTable,
 ) {
-  setCypressElement(getLabelElements(text, PseudoSelector.visible, options));
+  setCypressElement(
+    getLabelElements(text, {
+      pseudoSelector: PseudoSelector.visible,
+      ...getOptions(options),
+    }),
+  );
 }
 
 When(
@@ -79,6 +85,7 @@ When(
  *   | timeout | 4000 |
  *   | withinSubject | null |
  *   | includeShadowDom | false |
+ *   | pseudoSelector | visible |
  * ```
  *
  * @remarks
@@ -101,7 +108,10 @@ export function When_I_find_element_by_label_text(
   options?: DataTable,
 ) {
   setCypressElement(
-    getLabelElements(text, PseudoSelector.visible, options).first(),
+    getLabelElements(text, {
+      pseudoSelector: PseudoSelector.visible,
+      ...getOptions(options),
+    }).first(),
   );
 }
 

src/queries/textarea.ts

@@ -1,5 +1,6 @@
-import { When } from '@badeball/cypress-cucumber-preprocessor';
+import { DataTable, When } from '@badeball/cypress-cucumber-preprocessor';
 
+import { Element } from '../constants';
 import { getByLabelText, setCypressElement } from '../utils';
 
 /**
@@ -17,6 +18,17 @@ import { getByLabelText, setCypressElement } from '../utils';
  * When I find textarea by label text "Comments"
  * ```
  *
+ * With [options](https://docs.cypress.io/api/commands/get#Arguments):
+ *
+ * ```gherkin
+ * When I find textarea by label text "Comments"
+ *   | log | true |
+ *   | timeout | 4000 |
+ *   | withinSubject | null |
+ *   | includeShadowDom | false |
+ *   | pseudoSelector | visible |
+ * ```
+ *
  * @remarks
  *
  * This precedes steps like {@link When_I_type | "When I type"}. For example:
@@ -32,8 +44,11 @@ import { getByLabelText, setCypressElement } from '../utils';
  *
  * - {@link When_I_find_element_by_label_text | When I find element by label text }
  */
-export function When_I_find_textarea_by_label_text(text: string) {
-  setCypressElement(getByLabelText('textarea', text));
+export function When_I_find_textarea_by_label_text(
+  text: string,
+  options?: DataTable,
+) {
+  setCypressElement(getByLabelText(Element.textarea, text, options));
 }
 
 When(

src/utils/label.ts

@@ -1,6 +1,6 @@
 import { DataTable } from '@badeball/cypress-cucumber-preprocessor';
 
-import { PseudoSelector } from '../constants';
+import { Element } from '../constants';
 import { When_I_find_element_by_label_text } from '../queries';
 import { getCypressElement } from './element';
 import { getOptions } from './options';
@@ -10,11 +10,16 @@ import { getOptions } from './options';
  *
  * @param element - Element name.
  * @param text - Label text.
+ * @param options - Options.
  * @returns - Cypress element.
  * @private
  */
-export function getByLabelText(element: 'input' | 'textarea', text: string) {
-  When_I_find_element_by_label_text(text);
+export function getByLabelText(
+  element: Element,
+  text: string,
+  options?: DataTable,
+) {
+  When_I_find_element_by_label_text(text, options);
 
   return getCypressElement().then(($element: Cypress.JQueryWithSelector) => {
     const tagName = $element.prop('tagName').toLowerCase();
@@ -47,24 +52,26 @@ export function getByLabelText(element: 'input' | 'textarea', text: string) {
  * Get label elements.
  *
  * @param text - Label text.
- * @param selector - Pseudo selector.
+ * @param options - Options.
  * @returns - Cypress element.
  * @private
  */
 export function getLabelElements(
   text: string,
-  selector?: PseudoSelector,
-  options?: DataTable,
+  options?: ReturnType<typeof getOptions>,
 ) {
   let selectors = [
     `label:contains(${JSON.stringify(text)})`,
     `[aria-labelledby=${JSON.stringify(text)}]`,
     `[aria-label=${JSON.stringify(text)}]`,
   ];
 
-  if (selector) {
-    selectors = selectors.map((label) => `${label}:${selector}`);
+  // @ts-expect-error Property 'pseudoSelector' does not exist on type 'object | undefined'.
+  const { pseudoSelector, ...opts } = options;
+
+  if (pseudoSelector) {
+    selectors = selectors.map((label) => `${label}:${pseudoSelector}`);
   }
 
-  return cy.get(selectors.join(','), getOptions(options));
+  return cy.get(selectors.join(','), opts);
 }