Skip to content

Commit

Permalink
#2490: improved and fixed visual regression tests; fixed display of u…
Browse files Browse the repository at this point in the history
…ser tags and metrics nav cards
sudo-may committed Jul 9, 2024
1 parent ec60865 commit 389533f
Showing 20 changed files with 51 additions and 24 deletions.
Original file line number Diff line number Diff line change
@@ -145,7 +145,7 @@ onMounted(() => {
</script>

<template>
<Card data-cy="levelsChart" :pt="{ body: { class: 'p-0 pt-2 pr-2' }, content: { class: 'p-0' } }">
<Card data-cy="levelsChart" :pt="{ body: { class: 'p-0 pt-2' }, content: { class: 'p-0' } }">
<template #header>
<SkillsCardHeader :title="title"></SkillsCardHeader>
</template>
Original file line number Diff line number Diff line change
@@ -14,19 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
<script setup>
import CardWithVericalSections from '@/components/utils/cards/CardWithVericalSections.vue'
defineProps(['title', 'subtitle', 'description', 'icon', 'pathName']);
</script>

<template>
<Card>
<CardWithVericalSections>
<template #content>
<div>
<div class="p-5">
<div class="flex">
<div class="flex d-inline-block mt-1 mr-3 border rounded p-2">
<i class="fa-3x" :class="icon"/>
</div>
<div class="flex flex-1 flex-column">
<div class="h4 mb-2">{{ title }}</div>
<div class="h4 mb-2 font-semibold">{{ title }}</div>
<div class="font-light text-sm">
<slot name="subtitle">
{{ subtitle }}
@@ -41,13 +43,13 @@ defineProps(['title', 'subtitle', 'description', 'icon', 'pathName']);

</template>
<template #footer>
<div class="text-center">
<div class="text-center pb-3 px-5">
<router-link :to="{ name: pathName }" :data-cy="`metricsNav-${title}`">
<SkillsButton size="small" :label="`${title}`" icon="fas fa-arrow-right" />
</router-link>
</div>
</template>
</Card>
</CardWithVericalSections>
</template>

<style scoped>
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ defineProps(['navCards'])
</script>

<template>
<div class="flex gap-3 flex-column lg:flex-row mt-4">
<div class="flex flex-wrap gap-3 flex-column lg:flex-row mt-4">
<metric-nav-card v-for="(navItem) in navCards" :key="navItem.title" class="flex-1"
:title="navItem.title" :subtitle="navItem.subtitle" :description="navItem.description"
:path-name="navItem.pathName" :icon="navItem.icon" />
Original file line number Diff line number Diff line change
@@ -55,9 +55,7 @@ const buildTagCharts = () => {
<template>
<div>
<div class="flex mb-3">
<div class="">
<level-breakdown-metric :title="`Overall Levels for ${metricTitle}`" />
</div>
<level-breakdown-metric :title="`Overall Levels for ${metricTitle}`" class="flex-1"/>
</div>
<users-table-metric :title="`Users for ${metricTitle}`" />
</div>
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ defineProps({
</script>

<template>
<Card :no-padding="true" data-cy="usersTableMetric" >
<Card :no-padding="true" data-cy="usersTableMetric" :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
<template #header>
<SkillsCardHeader :title="title"></SkillsCardHeader>
</template>
Original file line number Diff line number Diff line change
@@ -239,7 +239,7 @@ describe('Client Display Tests', () => {
// wait for the bar (on the bar chart) to render
cy.get('[data-cy="levelBreakdownChart-animationEnded"]');
cy.wait(5000)
cy.matchSnapshotImageForElement('[data-cy="testDisplayTheme"]', {blackout: '[data-cy="dateCell"]', errorThreshold: 0.05 });
cy.matchSnapshotImageForElement('[data-cy="testDisplayTheme"]', {blackout: '[data-cy="dateCell"]', errorThreshold: 0.35 });
});
}

Original file line number Diff line number Diff line change
@@ -210,18 +210,31 @@ describe('Client Display Skills Imported from Catalog Tests', () => {
cy.cdVisit('/');
cy.cdClickSubj(0);

cy.matchSnapshotImageForElement('[data-cy="skillProgress_index-0"]', 'catalog imported skill visual regression - skill preview');
cy.matchSnapshotImageForElement('[data-cy="skillProgress_index-0"]', {
name: 'catalog imported skill visual regression - skill preview',
blackout: '[data-cy="skillProgressTitle"]',
errorThreshold: 0.05
});

cy.cdClickSkill(0);
cy.matchSnapshotImageForElement('[data-cy="skillProgress"]', 'catalog imported skill visual regression - skill details');
cy.matchSnapshotImageForElement('[data-cy="skillProgress"]', {
name: 'catalog imported skill visual regression - skill details',
errorThreshold: 0.05
});

cy.cdVisit('/?enableTheme=true');
cy.cdClickSubj(0);

cy.matchSnapshotImageForElement('[data-cy="skillProgress_index-0"]', 'catalog imported skill visual regression - skill preview themed');
cy.matchSnapshotImageForElement('[data-cy="skillProgress_index-0"]', {
name: 'catalog imported skill visual regression - skill preview themed',
errorThreshold: 0.05
});

cy.cdClickSkill(0);
cy.matchSnapshotImageForElement('[data-cy="skillProgress"]', 'catalog imported skill visual regression - skill details themed');
cy.matchSnapshotImageForElement('[data-cy="skillProgress"]', {
name: 'catalog imported skill visual regression - skill details themed',
errorThreshold: 0.05
});
});

it('catalog imported skill has self-report approval request', () => {
Original file line number Diff line number Diff line change
@@ -7,6 +7,11 @@ dayjs.extend(advancedFormatPlugin);

describe('Last Achieved date tests', () => {

const snapshotOptions = {
blackout: '[data-cy="skillTreePoweredBy"]',
errorThreshold: 0.05
};

beforeEach(() => {
Cypress.env('disabledUILoginProp', true);
cy.request('POST', '/app/projects/proj1', {
@@ -153,7 +158,8 @@ describe('Last Achieved date tests', () => {

cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', {
name: 'Skill-Overview-Achieved',
blackout: '[data-cy=pointHistoryChart]'
blackout: '[data-cy=pointHistoryChart], [data-cy="skillTreePoweredBy"]',
errorThreshold: 0.05
});
});

@@ -181,7 +187,8 @@ describe('Last Achieved date tests', () => {

cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', {
name: 'Skill-Overview-Achieved-Themed',
blackout: '[data-cy=pointHistoryChart]'
blackout: '[data-cy=pointHistoryChart], [data-cy="skillTreePoweredBy"]',
errorThreshold: 0.05
});
});

@@ -211,7 +218,8 @@ describe('Last Achieved date tests', () => {

cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', {
name: 'Skill-Overview-Achieved-iphone6',
blackout: '[data-cy=pointHistoryChart]'
blackout: '[data-cy=pointHistoryChart], [data-cy="skillTreePoweredBy"]',
errorThreshold: 0.05
});

});
@@ -241,7 +249,8 @@ describe('Last Achieved date tests', () => {

cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', {
name: 'Skill-Overview-Achieved-ipad2',
blackout: '[data-cy=pointHistoryChart]'
blackout: '[data-cy=pointHistoryChart], [data-cy="skillTreePoweredBy"]',
errorThreshold: 0.05
});
});

Original file line number Diff line number Diff line change
@@ -17,6 +17,11 @@ import moment from 'moment-timezone';

describe('Client Display Prerequisites Snapshot Tests', () => {

const snapshotOptions = {
blackout: '[data-cy="skillTreePoweredBy"]',
errorThreshold: 0.05
};

beforeEach(() => {
Cypress.env('disabledUILoginProp', true);
cy.createProject(1);
@@ -39,7 +44,7 @@ describe('Client Display Prerequisites Snapshot Tests', () => {
});

// must set viewport to show entire canvas or it will not appear in the screenshot
cy.viewport(1280, 1280);
cy.viewport(1500, 1500);
});

it('skill prerequisite graph', () => {
@@ -68,7 +73,7 @@ describe('Client Display Prerequisites Snapshot Tests', () => {
cy.cdClickSkill(1);

cy.wait(5000)
cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]');
cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', snapshotOptions);
});

it('skill prerequisite graph - with paging', () => {
@@ -89,7 +94,7 @@ describe('Client Display Prerequisites Snapshot Tests', () => {
cy.cdClickSkill(9);

cy.wait(5000)
cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]');
cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', snapshotOptions);
});

it('skill prerequisite graph on badge page', () => {
@@ -135,7 +140,7 @@ describe('Client Display Prerequisites Snapshot Tests', () => {
cy.get('[data-cy="prereqTable"] [data-p-index="3"] [data-cy="skillLink-proj1-skill2"]')
cy.get('[data-cy="prereqTable"] [data-p-index="4"] [data-cy="skillLink-proj1-skill3"]')
cy.wait(5000)
cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]');
cy.matchSnapshotImageForElement('[data-cy="skillsDisplayHome"]', snapshotOptions);
});

});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 389533f

Please sign in to comment.