Skip to content

Commit

Permalink
Merge pull request #14 from blockchain-certificates/feat/animation-ve…
Browse files Browse the repository at this point in the history 
…rification-step

fix: not showing final verification step when not needed
  • Loading branch information
Julien Fraichot authored Oct 9, 2018
2 parents bbaee37 + 3c7adc0 commit da367f5
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 5 deletions.
1 change: 1 addition & 0 deletions src/components/atoms/FinalVerificationStep/FinalVerificationStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default function FinalVerificationStep ({ chain = '', transactionLink = '
// TODO: better handle this dynamic class (cf npm classnames)
const titleClasses = [
'buv-c-verification-step',
'buv-qa-verification-step',
'is-final',
isVisible ? 'is-visible' : '',
isTestChain ? 'is-test' : ''
Expand Down
3 changes: 2 additions & 1 deletion src/components/organisms/VerificationProcess/VerificationProcess.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ class VerificationProcess extends LitElement {
// TODO: better handle this dynamic class (cf npm classnames)
const progressBarClasses = [
'buv-c-verification-progress-bar__tube',
'buv-qa-verification-progress-bar__tube',
hasError ? 'has-errored' : '',
isTestChain ? 'is-test' : '',
innerHTML.length ? 'has-started' : ''
Expand All @@ -69,7 +70,7 @@ class VerificationProcess extends LitElement {
</div>
<dl class='buv-c-verification-process__step-list buv-js-verification-process__step-list'>
${innerHTML}
${FinalVerificationStep({ transactionLink, chain, isTestChain, isVisible: allStepsAreRendered })}
${FinalVerificationStep({ transactionLink, chain, isTestChain, isVisible: allStepsAreRendered && !hasError })}
</dl>
</section>
`;
Expand Down
40 changes: 40 additions & 0 deletions test/components/verification/success/verification-process-success-final-step.test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VerificationProcess component test suite</title>

<script src="../../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../../../node_modules/web-component-tester/browser.js"></script>

<script src="../../helpers/redux-hack.js"></script>
<script src="../../helpers/wait.js"></script>
<script type="module" src="../../../../src/blockcerts-verifier/index.js"></script>
</head>
<body>
<test-fixture id="success">
<template>
<blockcerts-verifier src="https://auto-certificates.learningmachine.io/certificate/0cc5fb04900856b4aeb3733af2e019df"></blockcerts-verifier>
</template>
</test-fixture>

<script type="module">
describe('VerificationProcess test suite', function () {
describe('given the certificate verification has succeeded', function () {
xit('should show the final verification step', async function () {
const el = fixture('success').shadowRoot.querySelectorAll('buv-raw')[0];
await wait(1000);
const verificationProcessModalElement = el.shadowRoot.querySelectorAll('buv-verification-modal')[0];
await wait(1000);
const verificationProcessElement = verificationProcessModalElement.shadowRoot.querySelectorAll('buv-verification-process')[0];
await wait(1000);
const verificationProcessRawElement = verificationProcessElement.shadowRoot.querySelectorAll('buv-verification-process-raw')[0];
await wait(3000);
const finalStepElement = verificationProcessRawElement.shadowRoot.querySelectorAll('.buv-qa-verification-step.is-final')[0];
expect(finalStepElement.classList.contains('is-visible')).to.equal(true);
});
});
});
</script>
</body>
</html>
40 changes: 40 additions & 0 deletions test/components/verification/success/verification-process-success-no-error-state.test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VerificationProcess component test suite</title>

<script src="../../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../../../node_modules/web-component-tester/browser.js"></script>

<script src="../../helpers/redux-hack.js"></script>
<script src="../../helpers/wait.js"></script>
<script type="module" src="../../../../src/blockcerts-verifier/index.js"></script>
</head>
<body>
<test-fixture id="success">
<template>
<blockcerts-verifier src="https://auto-certificates.learningmachine.io/certificate/0cc5fb04900856b4aeb3733af2e019df"></blockcerts-verifier>
</template>
</test-fixture>

<script type="module">
describe('VerificationProcess test suite', function () {
describe('given the certificate verification has succeeded', function () {
xit('should not show the error state', async function () {
const el = fixture('success').shadowRoot.querySelectorAll('buv-raw')[0];
await wait(1000);
const verificationProcessModalElement = el.shadowRoot.querySelectorAll('buv-verification-modal')[0];
await wait(1000);
const verificationProcessElement = verificationProcessModalElement.shadowRoot.querySelectorAll('buv-verification-process')[0];
await wait(1000);
const verificationProcessRawElement = verificationProcessElement.shadowRoot.querySelectorAll('buv-verification-process-raw')[0];
await wait(3000);
const progressBarElement = verificationProcessRawElement.shadowRoot.querySelectorAll('.buv-qa-verification-progress-bar__tube')[0];
expect(progressBarElement.classList.contains('has-errored')).to.equal(false);
});
});
});
</script>
</body>
</html>
53 changes: 53 additions & 0 deletions test/components/verification/verification-process-failing.test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VerificationProcess component test suite</title>

<script src="../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../../node_modules/web-component-tester/browser.js"></script>

<script src="../helpers/redux-hack.js"></script>
<script src="../helpers/wait.js"></script>
<script type="module" src="../../../src/blockcerts-verifier/index.js"></script>
</head>
<body>
<test-fixture id="failing">
<template>
<blockcerts-verifier src="https://certificates.learningmachine.com/certificate/34299968e25f5c9985a2f7de988c4bd0"></blockcerts-verifier>
</template>
</test-fixture>

<script type="module">
describe('VerificationProcess test suite', function () {
describe('given the certificate verification has failed', function () {
it('should show the error state', async function () {
const el = fixture('failing').shadowRoot.querySelectorAll('buv-raw')[0];
await wait(1000);
const verificationProcessModalElement = el.shadowRoot.querySelectorAll('buv-verification-modal')[0];
await wait(1000);
const verificationProcessElement = verificationProcessModalElement.shadowRoot.querySelectorAll('buv-verification-process')[0];
await wait(1000);
const verificationProcessRawElement = verificationProcessElement.shadowRoot.querySelectorAll('buv-verification-process-raw')[0];
await wait(1000);
const progressBarElement = verificationProcessRawElement.shadowRoot.querySelectorAll('.buv-qa-verification-progress-bar__tube')[0];
expect(progressBarElement.classList.contains('has-errored')).to.equal(true);
});

it('should not show the final verification step', async function () {
const el = fixture('failing').shadowRoot.querySelectorAll('buv-raw')[0];
await wait(1000);
const verificationProcessModalElement = el.shadowRoot.querySelectorAll('buv-verification-modal')[0];
await wait(1000);
const verificationProcessElement = verificationProcessModalElement.shadowRoot.querySelectorAll('buv-verification-process')[0];
await wait(1000);
const verificationProcessRawElement = verificationProcessElement.shadowRoot.querySelectorAll('buv-verification-process-raw')[0];
await wait(1000);
const finalStepElement = verificationProcessRawElement.shadowRoot.querySelectorAll('.buv-qa-verification-step.is-final')[0];
expect(finalStepElement.classList.contains('is-visible')).to.equal(false);
})
});
});
</script>
</body>
</html>
39 changes: 39 additions & 0 deletions test/components/verification/verification-process-started-no-final-step.test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VerificationProcess component test suite</title>

<script src="../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../../node_modules/web-component-tester/browser.js"></script>

<script src="../helpers/redux-hack.js"></script>
<script src="../helpers/wait.js"></script>
<script type="module" src="../../../src/blockcerts-verifier/index.js"></script>
</head>
<body>
<test-fixture id="started">
<template>
<blockcerts-verifier src="https://certificates.learningmachine.com/certificate/34299968e25f5c9985a2f7de988c4bd0"></blockcerts-verifier>
</template>
</test-fixture>

<script type="module">
describe('VerificationProcess test suite', function () {
describe('given the certificate verification has started', function () {
it('should not show the final verification step', async function () {
const el = fixture('started').shadowRoot.querySelectorAll('buv-raw')[0];
await wait(500);
const verificationProcessModalElement = el.shadowRoot.querySelectorAll('buv-verification-modal')[0];
await wait(500);
const verificationProcessElement = verificationProcessModalElement.shadowRoot.querySelectorAll('buv-verification-process')[0];
await wait(500);
const verificationProcessRawElement = verificationProcessElement.shadowRoot.querySelectorAll('buv-verification-process-raw')[0];
const finalStepElement = verificationProcessRawElement.shadowRoot.querySelectorAll('.buv-qa-verification-step.is-final')[0];
expect(finalStepElement.classList.contains('is-visible')).to.equal(false);
});
});
});
</script>
</body>
</html>
3 changes: 0 additions & 3 deletions test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@
<script>
// Load and run all tests (.html, .js):
const files = getTestFiles();
// TODO: fix detection script to include recursion
files.push('components/verification/manual-verification-modal.test.html');
files.push('components/verification/auto-verification-modal.test.html');
WCT.loadSuites(files);
</script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion test/wct-script/getTestFiles.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit da367f5

Please sign in to comment.