import { Given, When, Then } from 'cucumber'

How do we apply BDD in real life in Apiary.

Transcript

1. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. import { Given, When, Then } from 'cucumber' Standa Opichal @opichals
2. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Cucumber Use in Apiary Executable Product Spec ApiaryUI - Interactive Documentation v4 React/Redux SPA
3. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. BDD • Gherkin • Improves cross-team communication • Product Management • UX People • Implementation Team • Executable • Acceptance tests
4. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Scenarios Scenario: Open link in a new window Given there is an external link When I click the link while holding Command/Ctrl key Then I can see the linked document open in a new window End-to-End / E2E • All end user action use-cases • Real browser needed
5. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Integration Scenarios Scenario: URI Parameters from Resource and Transition Given an ADD with URI Parameters in both Resource and in Transition Then I can see the URI Parameters from Transition rendered before the URI Parameters from Resource Integration • Checks the rendering to be correct and complete • Can use fake browser environment
6. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Cucumber.js • Gherkin Features and Scenarios • World, Bootstrap • Step Definitions • Tags • Hooks
7. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. import { After, Before } from ‘cucumber’ After(async function() { const logEntries = await this.browser.getConsoleLogs(); logEntries.forEach(console.info); }) Hooks Low level • Should not affect the features contents • Use Background
8. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Tags Execution Filtering • Tag expressions https://cucumber.io/docs/cucumber/api/#tag-expressions @debug Scenario: Seeing Resource Group Breadcrumbs if there's one Given an API Description Document (ADD) …
9. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. import { setWorldConstructor } from 'cucumber' import { Builder } from ‘selenium-webdriver' import Documentation from ‘./documentation.page’ function World() { const builder = new Builder() builder.withCapabilities({ OS, BROWSER, … }) const driver = builder.build() this.documentation = Documentation({ driver, baseUrl: BASE_URL }) } setWorldConstructor(World) World
10. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Abstractions • Step Definitions • Page Objects • WebDriver
11. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Step Definitions import { Given, When, Then } from ‘cucumber' When('I click the link …’, async function() { const humanColumn = await this.documentation.getHumanColumn(); return humanColumn.clickLink(); })
12. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Readability and Abstraction stampit, selenium-webdriver const Documentation = stampit({ init({ driver = null, baseUrl = process.env.BASE_URL }) { 
 this.getHumanColumn = async function getHumanColumn() { const humanColumnElement = await driver.findElement( By.className(‘docs-humanColumn’) ); return HumanColumn({ webElement: humanColumnElement }); }; }) }) Page Objects
13. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. npm run test:e2e npx cucumber-js
 --tags 'not @ignore'
 -r test/e2e/cucumber-bootstrap.js
 -r test/e2e/support
 -r test/e2e/step_definitions
 features/
14. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Executing Scenario Scenario: Open a link Given there is an external link • When I click the link … const humanColumn = await this.documentation.getHumanColumn() humanColumn.clickLink() const link = await driver.findElement( By.className(‘docs-humanColumn’) )
 link.click()
15. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Debugging npx cucumber-js
 --backtrace
 --tags '@debug'
 -r test/e2e/cucumber-bootstrap.js
 -r test/e2e/support
 -r test/e2e/step_definitions
 features/
16. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Spec Updates npx cucumber-js
 … 
 Scenario: I click … # features/documentation/navigation.feature:32 ? Given I have a Renderer Configuration named “mobile-layout“ Undefined. Implement with the following snippet: Given('I have a Renderer Configuration named {string}', function (string) { // Write code here that turns the phrase above into concrete actions return 'pending'; });
17. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Single Node More Boxes (CI) npx cucumber-js —parallel 10 Scaling ui_test_e2e_chrome: docker: - image: circleci/node:10.15.3 parallelism: 4 steps: - run: command: npm run test:e2e -- \ $(circleci tests glob "features/**/*.feature" | circleci tests split)
18. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Integration Tests npx cucumber-js
 --tags 'not @ignore'
 --tags ‘@integration' 
 -r test/integration/cucumber-bootstrap.js
 -r test/integration/support
 -r test/integration/step_definitions
 features/
19. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Integration Tests Setup Steps • Run mocha test case • Page Objects Enzyme • React Component jQuery-like workflows jsdom • Provides just enough of DOM in node.js
20. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. How we see it? Pros • Tests ~ Executable Specs • Single Spec Language • Readability • Flexibility Cons • Verbose • Abstractions • Performance
21. Copyright © 2019, Oracle and/or its affiliates. All rights reserved. Thank you! Cucumber https://cucumber.io/docs • Oracle Cloud Infrastructure / OCI – https://oracle.com/cloud • Apiary @GitHub – https://github.com/apiaryio