Skip to content

Commit 456f7fd

Browse files
jonfriskicsjonfriskics
committed
module 3 tests
1 parent ac8ffed commit 456f7fd

8 files changed

Lines changed: 350 additions & 0 deletions

‎src/__tests__/part4/quiz-question-button-component-displays-button-text.test.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow, mount } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let quizQuestionButtonComponentExists = false;
8+
let QuizQuestionButton;
9+
try {
10+
QuizQuestionButton = require('../../QuizQuestionButton.js').default;
11+
quizQuestionButtonComponentExists = true;
12+
} catch (e) {
13+
quizQuestionButtonComponentExists = false;
14+
}
15+
16+
let fs = require('fs');
17+
let quiz_data = require('../../quiz_data.json')
18+
19+
describe('QuizQuestionButton Component', () => {
20+
it('displays correct button text @quiz-question-button-component-displays-button-text', () => {
21+
assert(quizQuestionButtonComponentExists, "The QuizQuestionButton component hasn't been created yet.")
22+
23+
let quizQuestionButton;
24+
25+
let mock_prop = '5'
26+
try {
27+
quizQuestionButton = shallow(<QuizQuestionButton button_text={mock_prop} />)
28+
} catch (e) {
29+
assert(false, "We weren't able to mount the QuizQuestionButton component")
30+
}
31+
32+
let html = quizQuestionButton.html()
33+
let div = document.createElement('div')
34+
div.innerHTML = html
35+
36+
assert(div.querySelector('li button') != null, "no li button")
37+
let button_contents = div.querySelectorAll('li button')[0]
38+
assert(button_contents.innerHTML == quiz_data.quiz_questions[0].answer_options[0], "You're not displaying the correct data from the `button_text` prop in the QuizQuestionButton component's JSX.")
39+
})
40+
})

‎src/__tests__/part4/quiz-question-button-component-exists.test.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
let fs = require('fs');
2+
import { assert } from 'chai';
3+
4+
describe('QuizQuestionButton Component', () => {
5+
it('exists @quiz-question-button-component-exists', () => {
6+
let file;
7+
try {
8+
file = fs.readFileSync(__dirname + '/../../QuizQuestionButton.js').toString();
9+
} catch (e) {
10+
assert(false, "The QuizQuestionButton.js file hasn't been created yet.")
11+
}
12+
});
13+
})

‎src/__tests__/part4/quiz-question-button-component-has-button-text-prop.test.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let quizQuestionComponentExists = false;
8+
let QuizQuestion;
9+
try {
10+
QuizQuestion = require('../../QuizQuestion.js').default;
11+
quizQuestionComponentExists = true;
12+
} catch (e) {
13+
quizQuestionComponentExists = false;
14+
}
15+
16+
let quizQuestionButtonComponentExists = false;
17+
let QuizQuestionButton;
18+
try {
19+
QuizQuestionButton = require('../../QuizQuestionButton.js').default;
20+
quizQuestionButtonComponentExists = true;
21+
} catch (e) {
22+
quizQuestionButtonComponentExists = false;
23+
}
24+
25+
let fs = require('fs');
26+
let quiz_data = require('../../quiz_data.json')
27+
28+
describe('QuizQuestion Component', () => {
29+
it('has QuizQuestionButton component with correct prop @quiz-question-button-component-has-button-text-prop', () => {
30+
assert(quizQuestionComponentExists, "The QuizQuestion component hasn't been created yet.")
31+
assert(quizQuestionButtonComponentExists, "The QuizQuestionButton component hasn't been created yet.")
32+
33+
let quizQuestion;
34+
35+
let mock_prop = {
36+
instruction_text: "How many continents are there on Planet Earth?",
37+
answer_options: ["5", "6", "7", "8"]
38+
}
39+
40+
try {
41+
quizQuestion = shallow(<QuizQuestion quiz_question={mock_prop} />)
42+
} catch (e) {
43+
assert(false, "We weren't able to mount the QuizQuestion component")
44+
}
45+
46+
let expectedProps = {
47+
button_text: '5'
48+
}
49+
assert(JSON.stringify(quizQuestion.find('QuizQuestionButton').props()) == JSON.stringify(expectedProps), "You're not passing the correct prop values to QuizQuestionButton")
50+
})
51+
})

‎src/__tests__/part4/quiz-question-button-component-has-quiz-question-button-class.test.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let fs = require('fs');
8+
let babylon = require("babylon");
9+
10+
describe('QuizQuestionButton Component', () => {
11+
it('has a QuizQuestionButton class that extends Component @quiz-question-button-component-has-quiz-question-button-class', () => {
12+
let file;
13+
try {
14+
file = fs.readFileSync(__dirname + '/../../QuizQuestionButton.js').toString();
15+
} catch (e) {
16+
assert(false, "The QuizQuestionButton.js file hasn't been created yet.")
17+
}
18+
19+
let ast = babylon.parse(file, { sourceType: "module", plugins: ["jsx"] })
20+
21+
let class_declaration_count = 0;
22+
23+
ast['program']['body'].forEach(element => {
24+
if (element.type == 'ClassDeclaration') {
25+
if (element.id.name == 'QuizQuestion') {
26+
if (element.superClass.name == 'Component') {
27+
28+
} else {
29+
assert(false, "We found a class named QuizQuestionButton, but it doesn't extend the Component class.")
30+
}
31+
}
32+
class_declaration_count = class_declaration_count + 1
33+
}
34+
})
35+
36+
assert(class_declaration_count > 0, "We couldn't find any class declarations.")
37+
assert(class_declaration_count == 1, "We found more than one class declaration, but there's only supposed to be one class named QuizQuestionButton.")
38+
})
39+
40+
it('exports the QuizQuestionButton class as default @quiz-question-button-component-has-quiz-question-button-class', () => {
41+
let file;
42+
try {
43+
file = fs.readFileSync(__dirname + '/../../QuizQuestionButton.js').toString();
44+
} catch (e) {
45+
assert(false, "The QuizQuestionButton.js file hasn't been created yet.")
46+
}
47+
48+
let re = /\nexport default QuizQuestionButton\s*$/g
49+
let match = file.match(re)
50+
assert(match != null && match.length > 0, "We couldn't find `export default QuizQuestionButton` at the end of your QuizQuestionButton.js file")
51+
})
52+
})

‎src/__tests__/part4/quiz-question-button-component-has-render-method.test.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let quizQuestionButtonComponentExists = false;
8+
let QuizQuestionButton;
9+
try {
10+
QuizQuestionButton = require('../../QuizQuestionButton.js').default;
11+
quizQuestionButtonComponentExists = true;
12+
} catch (e) {
13+
quizQuestionButtonComponentExists = false;
14+
}
15+
16+
let fs = require('fs');
17+
18+
describe('QuizQuestionButton Component', () => {
19+
it('has a render method that returns the correct HTML @quiz-question-button-component-has-render-method', () => {
20+
assert(quizQuestionButtonComponentExists, "The QuizQuestionButton component hasn't been created yet.")
21+
22+
let mock_prop = {button_text: 5}
23+
24+
let quizQuestionButton;
25+
try {
26+
quizQuestionButton = shallow(<QuizQuestionButton button_text={mock_prop.button_text} />)
27+
} catch (e) {
28+
assert(false, "We weren't able to mount the QuizQuestionButton component")
29+
}
30+
31+
let html = quizQuestionButton.html()
32+
let div = document.createElement('div')
33+
div.innerHTML = html
34+
35+
assert(div.querySelector('li') != null, "no li")
36+
assert(div.querySelectorAll('li button') != null, "no li -> button")
37+
assert(div.querySelectorAll('li button').length == 1, "not a single button")
38+
})
39+
})

‎src/__tests__/part4/quiz-question-button-component-imports-react.test.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let fs = require('fs');
8+
let babylon = require('babylon')
9+
10+
describe('QuizQuestionButton Component', () => {
11+
it('imports the React and Component classes @quiz-question-button-component-imports-react', () => {
12+
let file;
13+
try {
14+
file = fs.readFileSync(__dirname + '/../../QuizQuestionButton.js').toString();
15+
} catch (e) {
16+
assert(false, "The QuizQuestionButton.js file hasn't been created yet.")
17+
}
18+
19+
let ast = babylon.parse(file, { sourceType: "module", plugins: ["jsx"] })
20+
21+
let react_class_import_found = false;
22+
let component_class_import_found = false;
23+
24+
ast['program']['body'].forEach(element => {
25+
if (element.type == 'ImportDeclaration') {
26+
element.specifiers.forEach(el => {
27+
if (el.type == 'ImportDefaultSpecifier' && el.local.name == 'React') {
28+
react_class_import_found = true
29+
} else if (el.type == 'ImportSpecifier' && el.imported.name == 'Component') {
30+
component_class_import_found = true
31+
}
32+
})
33+
}
34+
})
35+
assert(react_class_import_found, "You're not importing the React class")
36+
assert(component_class_import_found, "You're not importing the Component class")
37+
});
38+
39+
it('imports App.css @quiz-question-button-component-imports-react', () => {
40+
let file;
41+
try {
42+
file = fs.readFileSync(__dirname + '/../../QuizQuestionButton.js').toString();
43+
} catch (e) {
44+
assert(false, "The QuizQuestionButton.js file hasn't been created yet.")
45+
}
46+
47+
let ast = babylon.parse(file, { sourceType: "module", plugins: ["jsx"] })
48+
49+
let css_import_found = false;
50+
51+
ast['program']['body'].forEach(element => {
52+
if (element.type == 'ImportDeclaration') {
53+
if (element.source.value == './App.css') {
54+
css_import_found = true
55+
}
56+
}
57+
})
58+
assert(css_import_found, "You're not importing the App.css file.")
59+
});
60+
61+
})

‎src/__tests__/part4/quiz-question-component-displays-quiz-question-button-component.test.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow, mount } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let quizQuestionComponentExists = false;
8+
let QuizQuestion;
9+
try {
10+
QuizQuestion = require('../../QuizQuestion.js').default;
11+
quizQuestionComponentExists = true;
12+
} catch (e) {
13+
quizQuestionComponentExists = false;
14+
}
15+
16+
let quizQuestionButtonComponentExists = false;
17+
let QuizQuestionButton;
18+
try {
19+
QuizQuestionButton = require('../../QuizQuestionButton.js').default;
20+
quizQuestionButtonComponentExists = true;
21+
} catch (e) {
22+
quizQuestionButtonComponentExists = false;
23+
}
24+
25+
let fs = require('fs');
26+
let quiz_data = require('../../quiz_data.json')
27+
28+
describe('QuizQuestion Component', () => {
29+
it('renders QuizQuestionButton component @quiz-question-component-displays-quiz-question-button-component', () => {
30+
assert(quizQuestionComponentExists, "The QuizQuestion component hasn't been created yet.")
31+
assert(quizQuestionButtonComponentExists, "The QuizQuestionButton component hasn't been created yet.")
32+
33+
let quizQuestion;
34+
35+
let mock_prop = {
36+
instruction_text: "How many continents are there on Planet Earth?",
37+
answer_options: ["5", "6", "7", "8"]
38+
}
39+
try {
40+
quizQuestion = shallow(<QuizQuestion quiz_question={mock_prop} />)
41+
} catch (e) {
42+
assert(false, "We weren't able to mount the QuizQuestion component")
43+
}
44+
45+
let html = quizQuestion.html()
46+
let div = document.createElement('div')
47+
div.innerHTML = html
48+
49+
assert(div.querySelector('main') != null, "no main")
50+
let ul_contents = div.querySelectorAll('main section ul')[0]
51+
assert(ul_contents.querySelector('li button') != null, "You're not rendering the correct HTML tags from the QuizQuestionButton component in the QuizQuestion's render method")
52+
})
53+
})

‎src/__tests__/part4/quiz-question-component-imports-quiz-question-button-component.test.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from '../../App';
4+
import { shallow } from 'enzyme';
5+
import { assert } from 'chai';
6+
7+
let fs = require('fs');
8+
let babylon = require('babylon')
9+
10+
describe('QuizQuestion Component', () => {
11+
it('imports QuizQuestionButton from QuizQuestionButton.js @quiz-question-component-imports-quiz-question-button-component', () => {
12+
13+
let quizQuestionFile;
14+
try {
15+
quizQuestionFile = fs.readFileSync(__dirname + '/../../QuizQuestion.js').toString();
16+
} catch (e) {
17+
assert(false, "The QuizQuestion.js file hasn't been created yet.")
18+
}
19+
20+
let quizQuestionButtonFile;
21+
try {
22+
quizQuestionButtonFile = fs.readFileSync(__dirname + '/../../QuizQuestionButton.js').toString();
23+
} catch (e) {
24+
assert(false, "The QuizQuestionButton.js file hasn't been created yet.")
25+
}
26+
27+
let ast = babylon.parse(quizQuestionFile, { sourceType: "module", plugins: ["jsx"] })
28+
29+
let quiz_question_button_import_found = false;
30+
31+
ast['program']['body'].forEach(element => {
32+
if (element.type == 'ImportDeclaration') {
33+
if (element.source.value == './QuizQuestionButton.js' || element.source.value == './QuizQuestionButton' || element.source.value == 'QuizQuestionButton') {
34+
assert(element.specifiers[0].local.name == 'QuizQuestionButton', "You're not importing the QuizQuestionButton class from the QuizQuestionButton.js file.")
35+
quiz_question_button_import_found = true
36+
}
37+
}
38+
})
39+
assert(quiz_question_button_import_found, "You're not importing the QuizQuestionButton.js file.")
40+
});
41+
})

0 commit comments

Comments
 (0)