Commit f371a627 authored by Balázs Szilágyi's avatar Balázs Szilágyi

Update PracticeProgressBar

parent f6f47bb7
Pipeline #169385163 failed with stages
in 11 minutes and 8 seconds
/* stylelint-disable at-rule-no-unknown */
@mixin rtlGradient($dir) {
background: linear-gradient(to $dir, $color-purple-600, $color-blue-500);
}
.practiceProgressBar {
position: fixed;
top: 0;
left: 0;
z-index: $z-index-fixed;
display: flex;
width: 100%;
height: calc(#{$spacer} / 2);
background-color: $color-purple-400;
opacity: 0;
transition: width 0.5s ease, opacity 0.5s ease;
justify-content: flex-end;
@include rtlGradient(right);
/* stylelint-disable-next-line selector-no-qualifying-type */
html[dir='rtl'] & {
@include rtlGradient(left);
}
&--open {
opacity: 1;
}
&__bar {
height: calc(#{$spacer} / 2);
background-color: $color-grey-500;
transition: width 0.5s ease, opacity 0.5s ease;
}
}
......@@ -36,10 +36,9 @@ describe('<PracticeProgressBar>', () => {
expect(wrapper.find('.practiceProgressBar')).toHaveLength(1);
expect(wrapper.find('.practiceProgressBar--open')).toHaveLength(0);
expect(wrapper.find('.practiceProgressBar').prop('style')).toHaveProperty(
'width',
'0%'
);
expect(
wrapper.find('.practiceProgressBar__bar').prop('style')
).toHaveProperty('width', '0%');
});
it('hides if sample text and user text is not given', () => {
......@@ -55,10 +54,9 @@ describe('<PracticeProgressBar>', () => {
expect(wrapper.find('.practiceProgressBar')).toHaveLength(1);
expect(wrapper.find('.practiceProgressBar--open')).toHaveLength(0);
expect(wrapper.find('.practiceProgressBar').prop('style')).toHaveProperty(
'width',
'0%'
);
expect(
wrapper.find('.practiceProgressBar__bar').prop('style')
).toHaveProperty('width', '0%');
});
it('hides if user text is not given', () => {
......@@ -74,10 +72,9 @@ describe('<PracticeProgressBar>', () => {
expect(wrapper.find('.practiceProgressBar')).toHaveLength(1);
expect(wrapper.find('.practiceProgressBar--open')).toHaveLength(0);
expect(wrapper.find('.practiceProgressBar').prop('style')).toHaveProperty(
'width',
'0%'
);
expect(
wrapper.find('.practiceProgressBar__bar').prop('style')
).toHaveProperty('width', '0%');
});
it('displays the proper width during the practice', () => {
......@@ -92,10 +89,9 @@ describe('<PracticeProgressBar>', () => {
);
expect(wrapper.find('.practiceProgressBar--open')).toHaveLength(1);
expect(wrapper.find('.practiceProgressBar').prop('style')).toHaveProperty(
'width',
'42.86%'
);
expect(
wrapper.find('.practiceProgressBar__bar').prop('style')
).toHaveProperty('width', '57.14%');
});
it('displays 100% width on practice end', () => {
......@@ -114,10 +110,9 @@ describe('<PracticeProgressBar>', () => {
);
expect(wrapper.find('.practiceProgressBar--open')).toHaveLength(1);
expect(wrapper.find('.practiceProgressBar').prop('style')).toHaveProperty(
'width',
'100.00%'
);
expect(
wrapper.find('.practiceProgressBar__bar').prop('style')
).toHaveProperty('width', '0.00%');
});
it('displays 100% width even if practice ended, but it hides', () => {
......@@ -137,9 +132,8 @@ describe('<PracticeProgressBar>', () => {
expect(wrapper.find('.practiceProgressBar')).toHaveLength(1);
expect(wrapper.find('.practiceProgressBar--open')).toHaveLength(0);
expect(wrapper.find('.practiceProgressBar').prop('style')).toHaveProperty(
'width',
'100.00%'
);
expect(
wrapper.find('.practiceProgressBar__bar').prop('style')
).toHaveProperty('width', '0.00%');
});
});
......@@ -17,7 +17,7 @@ const PracticeProgressBar = (props: Props) => {
const widthPercent =
// 0 / 0 is NaN
userText.length && sampleText.length
? ((userText.length / sampleText.length) * 100).toFixed(2)
? (100 - (userText.length / sampleText.length) * 100).toFixed(2)
: 0;
return (
......@@ -29,8 +29,12 @@ const PracticeProgressBar = (props: Props) => {
},
className
)}
style={{ width: `${widthPercent}%` }}
></div>
>
<div
className="practiceProgressBar__bar"
style={{ width: `${widthPercent}%` }}
></div>
</div>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment