Skip to content

Commit

Permalink
update icon test command
Browse files Browse the repository at this point in the history
  • Loading branch information
Šimon Macek committed Jun 24, 2024
1 parent c37c653 commit 1d3e7cd
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 4 deletions.
4 changes: 2 additions & 2 deletions src/components/__tests__/BadgeAchievement.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('<BadgeAchievement>', () => {
badge,
},
});
cy.viewport('macbook-16', { deviceScaleFactor: 1 });
cy.viewport('macbook-16');
});

it('renders title', () => {
Expand Down Expand Up @@ -80,7 +80,7 @@ describe('<BadgeAchievement>', () => {
badge: badgeDark,
},
});
cy.viewport('iphone-6', { deviceScaleFactor: 1 });
cy.viewport('iphone-6');
});

it('has dark background', () => {
Expand Down
7 changes: 7 additions & 0 deletions src/components/__tests__/BannerChallengeDescription.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,13 @@ function coreTests() {
cy.dataCy('challenge-link')
.find('a')
.should('have.attr', 'href', bannerChallengeDescription.link.url);
cy.dataCy('challenge-link-icon').then((element) => {
cy.testIcon({
element,
name: 'banner-challenge-description-launch',
size: 18,
});
});
},
);
});
Expand Down
7 changes: 6 additions & 1 deletion src/components/results/BannerChallengeDescription.vue
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,12 @@ export default defineComponent({
<div data-cy="challenge-link">
<a :href="challenge.link.url" target="_blank" class="flex gap-4">
<span>
<q-icon name="launch" color="grey-10" size="18px" />
<q-icon
name="launch"
color="grey-10"
size="18px"
data-cy="challenge-link-icon"
/>
</span>
<span>
{{ challenge.link.title }}
Expand Down
66 changes: 65 additions & 1 deletion test/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,18 +112,82 @@ Cypress.Commands.add('testImageSrcAlt', (dataCySelector, src, alt) => {
.should('have.attr', 'alt', alt);
});

/**
* Custom setDPR command that allows setting the devicePixelRatio
* in the window object.
*
* @param {number} dpr - devicePixelRatio
*/
Cypress.Commands.add('setDPR', (dpr) => {
cy.window().then((win) => {
Object.defineProperty(win, 'devicePixelRatio', {
get: () => dpr,
});
});
});

/**
* Custom waitForFonts command that waits for all fonts to be loaded.
* Used in combination with `waitForStylesheets` in `testIcon` command.
*/
Cypress.Commands.add('waitForFonts', () => {
cy.document().then((document) => {
document.fonts.ready.then(() => {
cy.log('All fonts loaded');
});
});
});

/**
* Custom waitForStylesheets command that waits for all stylesheets to be loaded
* Used in combination with `waitForFonts` in `testIcon` command.
*/
Cypress.Commands.add('waitForStylesheets', () => {
cy.document().then((doc) => {
const stylesheets = Array.from(
doc.querySelectorAll('link[rel="stylesheet"]'),
);
const loadPromises = stylesheets.map((stylesheet) => {
return new Promise((resolve) => {
stylesheet.addEventListener('load', resolve);
});
});
return Promise.all(loadPromises);
});
});

/**
* Custom testIcon command that takes an HTML element (icon) and tests
* its size and snapshot.
*
* @param {object} element - HTML element (icon)
* @param {string} name - name of the snapshot
* @param {number} size - size of the icon
*
* @example cy.dataCy('icon').then((element) => {
* testIcon({element, name: 'icon-name', size: 32})
* });
*/
Cypress.Commands.add('testIcon', ({ element, name, size }) => {
// timestamp for matching see https://docs.cypress.io/guides/tooling/visual-testing#Timestamps
const now = new Date(2024, 1, 1);
cy.clock(now);
// set DPR and wait for resources (to avoid empty snapshot)
cy.setDPR(1);
cy.waitForFonts();
cy.waitForStylesheets();
// size
cy.wrap(element[0]).invoke('width').should('eq', size);
cy.wrap(element[0]).invoke('height').should('eq', size);
// snapshot
cy.wrap(element[0]).should('be.visible').matchImageSnapshot(name, {
cy.wrap(element[0]).should('be.visible');
cy.wrap(element[0]).matchImageSnapshot(name, {
failureThreshold: 0.1,
failureThresholdType: 'percent',
timeout: 1000,
customDiffConfig: { threshold: 0.4 },
screenshotsFolder: 'test/cypress/snapshots',
retries: 2,
});
});

Expand Down

0 comments on commit 1d3e7cd

Please sign in to comment.