impress-2020/cypress/integration/WardrobePage/page.js

41 lines
1.9 KiB
JavaScript
Raw Normal View History

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"
);
2021-05-03 16:05:13 -07:00
export const getOutfitIsSavingIndicator = withTestId(
"wardrobe-outfit-is-saving-indicator"
);
export function getPosePickerOption(label, options) {
return cy.get(`input[aria-label="${CSS.escape(label)}"]`, options);
}
2021-05-03 16:05:13 -07:00
export function getOutfitPreview(options = { timeout: 15000 }) {
// 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
2021-05-03 16:05:13 -07:00
.get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", options)
.get("img")
.first();
}