Skip to content

Commit

Permalink
feat: pass options to label assertions and queries
Browse files Browse the repository at this point in the history
  • Loading branch information
remarkablemark committed Nov 3, 2024
1 parent 850ee2b commit a7ec38b
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 23 deletions.
5 changes: 3 additions & 2 deletions src/actions/check.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,12 @@ When('I check', When_I_check);
* | scrollBehavior | top |
* | timeout | 4000 |
* | waitForAnimations | true |
* | pseudoSelector | visible |
* ```
*/
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);
12 changes: 9 additions & 3 deletions src/assertions/label.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { DataTable, Then } from '@badeball/cypress-cucumber-preprocessor';

import { PseudoSelector } from '../constants';
import { getLabelElements } from '../utils';
import { getLabelElements, getOptions } from '../utils';

/**
* Then I see label:
Expand Down Expand Up @@ -33,7 +33,10 @@ 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');
getLabelElements(text, {
pseudoSelector: PseudoSelector.visible,
...getOptions(options),
}).should('exist');
}

Then('I see label {string}', Then_I_see_label);
Expand Down Expand Up @@ -68,7 +71,10 @@ 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');
getLabelElements(text, {
pseudoSelector: PseudoSelector.visible,
...getOptions(options),
}).should('not.exist');
}

Then('I do not see label {string}', Then_I_do_not_see_label);
10 changes: 10 additions & 0 deletions src/constants/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
/**
* @private
*/
export enum Element {
input = 'input',
textarea = 'textarea',
}

/**
* @private
*/
export enum PseudoSelector {
hidden = 'hidden',
none = '',
visible = 'visible',
}
21 changes: 18 additions & 3 deletions src/queries/input.ts
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand All @@ -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:
Expand All @@ -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);
16 changes: 13 additions & 3 deletions src/queries/label.ts
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -26,6 +26,7 @@ import { getLabelElements, setCypressElement } from '../utils';
* | timeout | 4000 |
* | withinSubject | null |
* | includeShadowDom | false |
* | pseudoSelector | visible |
* ```
*
* @remarks
Expand All @@ -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(
Expand Down Expand Up @@ -79,6 +85,7 @@ When(
* | timeout | 4000 |
* | withinSubject | null |
* | includeShadowDom | false |
* | pseudoSelector | visible |
* ```
*
* @remarks
Expand All @@ -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(),
);
}

Expand Down
21 changes: 18 additions & 3 deletions src/queries/textarea.ts
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand All @@ -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:
Expand All @@ -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(
Expand Down
25 changes: 16 additions & 9 deletions src/utils/label.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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);
}

0 comments on commit a7ec38b

Please sign in to comment.