40 lines
1.8 KiB
JavaScript
40 lines
1.8 KiB
JavaScript
const withTestId = (testId) => (options) =>
|
|
cy.get(`[data-test-id="${CSS.escape(testId)}"]`, options);
|
|
|
|
export const getSpeciesSelect = withTestId("wardrobe-species-picker");
|
|
export const getColorSelect = withTestId("wardrobe-color-picker");
|
|
export const getPosePickerButton = withTestId("wardrobe-pose-picker");
|
|
export const getOutfitName = withTestId("outfit-name");
|
|
export const getSaveOutfitButton = withTestId("wardrobe-save-outfit-button");
|
|
export const getOutfitIsSavedIndicator = withTestId(
|
|
"wardrobe-outfit-is-saved-indicator"
|
|
);
|
|
|
|
export function getPosePickerOption(label, options) {
|
|
return cy.get(`input[aria-label="${CSS.escape(label)}"]`, options);
|
|
}
|
|
|
|
export function getOutfitPreview() {
|
|
// HACK: To return the screenshottable preview *area* (which is what this
|
|
// function is currently used for), we select the first img tag. That's
|
|
// because the app relies on CSS `object-fit` to get images to position
|
|
// correctly, rather than styling the container. This will still
|
|
// screenshot the full preview, because Cypress can't separate the
|
|
// layers! It just screenshots the bounded area.
|
|
//
|
|
// TODO: The way the layer positioning works is a bit fragile tbh, and the
|
|
// canvases already do math; it could make sense to just have the
|
|
// container use the same math, or some clever CSS?
|
|
//
|
|
// NOTE: The tests need to run in a 600x600 actual window, or else the
|
|
// snapshot will come out smaller. This because our snapshot plugin
|
|
// performs its snapshot within the window's natural area, rather than
|
|
// the simulated area that most tests run in.
|
|
return cy
|
|
.get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", {
|
|
// A bit of an extra-long timeout, to await both server data and image data
|
|
timeout: 15000,
|
|
})
|
|
.get("img")
|
|
.first();
|
|
}
|