|
| 1 | +/** |
| 2 | + * action.js |
| 3 | + * Test action page is rendered correctly |
| 4 | + */ |
| 5 | + |
| 6 | +var x = require('casper').selectXPath; |
| 7 | + |
| 8 | +casper.test.begin("Test action page is rendered correctly", 22, function suite(test) { |
| 9 | + casper.login("QA_TEST_CAMPAIGN_ACTION@example.com", "QA_TEST_CAMPAIGN_ACTION"); |
| 10 | + |
| 11 | + // ## Header |
| 12 | + casper.thenOpen(url + "/campaigns/test-campaign", function() { |
| 13 | + // We expect to see the title and subtitle of the campaign |
| 14 | + test.assertSelectorHasText("header[role='banner'].-hero .__title", "Test Campaign", "Title of campaign is printed in H1."); |
| 15 | + test.assertSelectorHasText("header[role='banner'].-hero .__subtitle", "This is a test unsponsored campaign.", "Subtitle of campaign is printed in H2."); |
| 16 | + }); |
| 17 | + |
| 18 | + // ## Know It |
| 19 | + casper.then(function() { |
| 20 | + test.assertSelectorHasText("#know .container__title", "Step 1: Know It", "\"Know It\" banner exists."); |
| 21 | + this.captureSelector("tmp/tests/step1.png", "#know"); |
| 22 | + |
| 23 | + test.assertNotVisible("[data-modal]", "Modals are hidden on page load.") |
| 24 | + |
| 25 | + casper.click(x('//*[text()="Check out our FAQs"]')); |
| 26 | + this.waitUntilVisible("#modal-faq", function() { |
| 27 | + test.assertSelectorHasText("#modal-faq", "Why is 'fee awesome?", "FAQ modal displays on click."); |
| 28 | + }); |
| 29 | + }); |
| 30 | + |
| 31 | + casper.then(function() { |
| 32 | + casper.click("#modal-faq .js-close-modal"); |
| 33 | + this.waitWhileVisible("#modal-faq", function() { |
| 34 | + test.assert(true, "Clicking the close button hides the modal.") |
| 35 | + }); |
| 36 | + }); |
| 37 | + |
| 38 | + casper.then(function() { |
| 39 | + casper.click(x('//*[text()="Learn more about Coffee"]')); |
| 40 | + this.waitUntilVisible("#modal-facts", function() { |
| 41 | + test.assertSelectorHasText("#modal-facts", "1 in 3 teenagers have slept through math", "Fact modal displays on click."); |
| 42 | + }); |
| 43 | + }); |
| 44 | + |
| 45 | + // ## Plan It |
| 46 | + casper.then(function() { |
| 47 | + test.assertSelectorHasText("#plan .container__title", "Step 2: Plan It", "\"Plan It\" banner exists."); |
| 48 | + this.captureSelector("tmp/tests/step2.png", "#plan"); |
| 49 | + }); |
| 50 | + |
| 51 | + // ## Do It |
| 52 | + casper.then(function() { |
| 53 | + test.assertSelectorHasText("#do .container__title", "Step 3: Do It", "\"Do It\" banner exists."); |
| 54 | + this.captureSelector("tmp/tests/step3.png", "#do"); |
| 55 | + |
| 56 | + |
| 57 | + // @NOTE: Can't use assertVisible() because of "visually-hidden" mixin trickiness. |
| 58 | + test.assertExists("#tip-1.is-active", "First tip is visible on page load."); |
| 59 | + test.assertDoesntExist("#tip-2.is-active", "Second tip is hidden on page load."); |
| 60 | + |
| 61 | + casper.click(x('//*[text()="Give Him \'Fee"]')); |
| 62 | + |
| 63 | + test.assertDoesntExist("#tip-1.is-active", "First tip is hidden after clicking second tip link."); |
| 64 | + test.assertExists("#tip-2.is-active", "Second tip is visible after clicking second tip link."); |
| 65 | + }); |
| 66 | + |
| 67 | + // ## Prove It |
| 68 | + casper.then(function() { |
| 69 | + test.assertSelectorHasText("#prove .container__title", "Step 4: Prove It", "\"Prove It\" banner exists."); |
| 70 | + this.captureSelector("tmp/tests/step4.png", "#prove"); |
| 71 | + |
| 72 | + casper.click(".info-bar .help a"); |
| 73 | + this.waitUntilVisible("#modal-contact-form", function() { |
| 74 | + test.assertSelectorHasText("#modal-contact-form", "Enter your question below.", "Zendesk modal displays on click."); |
| 75 | + }); |
| 76 | + }); |
| 77 | + |
| 78 | + casper.then(function() { |
| 79 | + casper.click("#modal-contact-form .js-close-modal"); |
| 80 | + }); |
| 81 | + |
| 82 | + // ## Report Back |
| 83 | + casper.then(function() { |
| 84 | + casper.click(x('//*[text()="Submit Your Pic"]')); |
| 85 | + this.waitUntilVisible("[data-modal]", function() { |
| 86 | + test.assertSelectorHasText("#modal-report-back", "Prove It", "Report Back modal displays on click."); |
| 87 | + }); |
| 88 | + }); |
| 89 | + |
| 90 | + casper.then(function() { |
| 91 | + this.fill("form[action='/campaigns/test-campaign']", { |
| 92 | + "files[reportback_file]": "tests/fixtures/reportback-image.png", |
| 93 | + "quantity": "10", |
| 94 | + "why_participated": "Test response." |
| 95 | + }, true); |
| 96 | + }); |
| 97 | + |
| 98 | + |
| 99 | + // Confirmation page |
| 100 | + casper.then(function() { |
| 101 | + test.assertSelectorHasText("header[role='banner'] .__title", "You did it!", "Confirmation page shown after report back."); |
| 102 | + test.assertSelectorHasText("header[role='banner'] .__subtitle", "You sure drank that 'fee. Good work!", "Campaign confirmation message is shown in subtitle."); |
| 103 | + |
| 104 | + test.assertElementCount(".gallery .gallery-item", 3, "Three suggested campaigns are shown."); |
| 105 | + |
| 106 | + casper.click(x('//*[text()="Back to Test Campaign"]')); |
| 107 | + }); |
| 108 | + |
| 109 | + // Check that reportback submitted successfully. |
| 110 | + casper.then(function() { |
| 111 | + casper.click(x('//*[text()="Update Submission"]')); |
| 112 | + this.waitUntilVisible("[data-modal]", function() { |
| 113 | + test.assertExists("#modal-report-back .submitted-image img", "Submitted report back image is shown.") |
| 114 | + test.assertField("quantity", "10", "Submitted quantity is shown for editing.") |
| 115 | + test.assertField("why_participated", "Test response.", "Submitted 'Why Participated?' is shown for editing.") |
| 116 | + }); |
| 117 | + }); |
| 118 | + |
| 119 | + casper.run(function() { |
| 120 | + test.done(); |
| 121 | + }); |
| 122 | +}); |
| 123 | + |
0 commit comments