Skip to content

Fix Quiz expanding between questions #2184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jovyntls merged 15 commits into from
Mar 14, 2023
Merged

Fix Quiz expanding between questions #2184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
440ffec
Add timeout before moving to next question
itsyme Feb 23, 2023
8119627
Add timeout to Quiz tests
itsyme Feb 23, 2023
9d46f9f
Update timeout value
itsyme Feb 23, 2023
2109827
Fix restarting quiz
itsyme Feb 23, 2023
2b13942
Update tests
itsyme Feb 23, 2023
e21b19b
Fix nits
itsyme Feb 23, 2023
9f91a27
Remove timeout
itsyme Feb 24, 2023
4687ffe
Update animation
itsyme Feb 24, 2023
41bf746
Update tests
itsyme Feb 24, 2023
972fde5
Merge branch 'master' into quiz-expanding
itsyme Feb 27, 2023
1a64885
Update changing questions in quiz
itsyme Feb 27, 2023
291da37
Update animation duration and tests
itsyme Feb 27, 2023
c11ed79
Merge branch 'master' into quiz-expanding
itsyme Feb 27, 2023
3c339b3
Revert translateY
itsyme Feb 27, 2023
42f2c07
Merge branch 'master' into quiz-expanding
itsyme Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion packages/vue-components/src/__tests__/Quiz.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mount } from '@vue/test-utils';
import { config, mount } from '@vue/test-utils';
import Quiz from '../questions/Quiz.vue';
import Question from '../questions/Question.vue';
import QOption from '../questions/QOption.vue';
Expand All @@ -10,6 +10,11 @@ import QOption from '../questions/QOption.vue';
- Score screen
*/

// Prevent default transition stubs to allow @after-leave to be triggered
config.stubs = {
transition: false,
};

const DEFAULT_STUBS = {
'question': Question,
'q-option': QOption,
Expand Down Expand Up @@ -51,6 +56,12 @@ const BLANKS_QUESTION = `
</question>
`;

// Function to delay test until question is rendered
function timeoutRenderQuestion() {
// eslint-disable-next-line no-promise-executor-return
return new Promise(resolve => setTimeout(resolve, 350));
Copy link
Contributor

@ang-zeyu ang-zeyu Mar 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there no way to work around using a timeout?

Something like waitForSelector(...).toGoMissing() (imaginary).
Or creating your own simple transition stub.

There are 17 calls here so resolving this should help improve the speed of tests a fair bit. Unless the runner is parallel, I can't remember..

But don't spend too much time on it, 6s to me is still an ok degradation for now. (just create a follow up issue if we can't resolve this).

Copy link
Contributor

@ang-zeyu ang-zeyu Mar 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jovyntls could you help to merge in this MR if it looks good to you? 🙇

}

describe('Quizzes', () => {
test('intro screen with intro text renders correctly', () => {
const wrapper = mount(Quiz, {
Expand All @@ -75,11 +86,13 @@ describe('Quizzes', () => {
// Click 'begin'
await wrapper.find('button').trigger('click');

await timeoutRenderQuestion();
// Click option 1 of mcq question
await wrapper.findAllComponents(QOption).at(0).find('div').trigger('click');
// Click check of mcq question
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
expect(wrapper.element).toMatchSnapshot();
});

Expand All @@ -94,12 +107,14 @@ describe('Quizzes', () => {
// Click 'begin'
await wrapper.find('button').trigger('click');

await timeoutRenderQuestion();
// Click options 1 & 2 of checkbox question
await wrapper.findAllComponents(QOption).at(0).find('div').trigger('click');
await wrapper.findAllComponents(QOption).at(1).find('div').trigger('click');
// Click check of checkbox question
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
expect(wrapper.element).toMatchSnapshot();
});

Expand All @@ -114,11 +129,13 @@ describe('Quizzes', () => {
// click 'begin'
await wrapper.find('button').trigger('click');

await timeoutRenderQuestion();
// Type incorrect answer into blank 2 of blanks question
await wrapper.findAllComponents(QOption).at(1).find('input').setValue('wrong');
// Click check of blanks question
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
expect(wrapper.element).toMatchSnapshot();
});

Expand All @@ -133,11 +150,13 @@ describe('Quizzes', () => {
// Click 'begin'
await wrapper.find('button').trigger('click');

await timeoutRenderQuestion();
// Type answer into textarea of text question
await wrapper.find('textarea').setValue('abc lorem ipsum');
// Click 'check' of text question
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
expect(wrapper.element).toMatchSnapshot();
});

Expand All @@ -152,20 +171,23 @@ describe('Quizzes', () => {
// Click 'begin'
await wrapper.find('button').trigger('click');

await timeoutRenderQuestion();
// Click option 2 of mcq question
await wrapper.findAllComponents(QOption).at(1).find('div').trigger('click');
// Click check of mcq question
await wrapper.findComponent(Question).find('button.btn-primary').trigger('click');
// Click next
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
// Type answer into textarea of text question
await wrapper.find('textarea').setValue('abc lorem ipsum');
// Click 'check' of text question
await wrapper.find('button.btn-primary').trigger('click');
// Click next
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
// Click options 1 & 3 of checkbox question
await wrapper.findAllComponents(QOption).at(0).find('div').trigger('click');
await wrapper.findAllComponents(QOption).at(2).find('div').trigger('click');
Expand All @@ -174,13 +196,15 @@ describe('Quizzes', () => {
// Click next
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
// Type correct answer into blank 2 of blanks question
await wrapper.findAllComponents(QOption).at(1).find('input').setValue('key');
// Click check of checkbox question
await wrapper.find('button.btn-primary').trigger('click');
// Click next
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
expect(wrapper.element).toMatchSnapshot();
});

Expand All @@ -195,23 +219,27 @@ describe('Quizzes', () => {
// Click 'begin'
await wrapper.find('button').trigger('click');

await timeoutRenderQuestion();
// Click option 2 of mcq question
await wrapper.findAllComponents(QOption).at(1).find('div').trigger('click');
// Click check of mcq question
await wrapper.findComponent(Question).find('button.btn-primary').trigger('click');
// Click next
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
// Type answer into textarea of text question
await wrapper.find('textarea').setValue('abc lorem ipsum');
// Click 'check' of text question
await wrapper.find('button.btn-primary').trigger('click');
// Click next
await wrapper.find('button.btn-primary').trigger('click');

await timeoutRenderQuestion();
// Click retry
await wrapper.find('button.btn-outline-primary').trigger('click');

await timeoutRenderQuestion();
expect(wrapper.element).toMatchSnapshot();
});
});
Loading