iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

每天一篇文章系列 第 9

09. E2E Test x Browser Test x Cypress

  • 分享至 

  • xImage
  •  

cypress 安裝步驟

step 1. 安裝

npm install cypress --save-dev

step 2. 寫測試

安裝好後會產生 cypress.json 檔和 cypress 資料夾

啟動你的 app,並在 cypress.json 設定入口網站

{
    "baseUrl": "http://laravel7_starter.test"
}

在 integration\examples 裡寫一個不通過的測試

it('works', () => {
    expect(2+2).to.equal(5);
});

step 3. 跑測試

開啟 GUI,點剛剛寫的 example_spec.js

npx cypress open

Laravel + Cypress Integration

https://github.com/laracasts/cypress

安裝

php artisan cypress-boilerplate

設定測試環境(安裝這個 package 會自動備份當前環境,並使用 env.cypress 作為測試環境)

DB_CONNECTION=mysql
DB_DATABASE=cypress

https://github.com/guiyomh/cypress-boilerplate

基本操作

語法

describe('a feature', () => {
    describe('a portion', () => {
        it('perform', () => {
        });	
    });
});
describe('a portion', () => {
});

context('a portion', () => {
});

sqlite 環境

.env DB 改成 sqlite

DB_CONNECTION=sqlite
DB_DATABASE=/Users/本地某個資料夾/database.sqlite

database/database.sqlite
新增一個 database.sqlite,執行 php artisan migrate,指定 --env=cypress

php artisan migrate --env=cypress

Exercise

describe('Blog', () => {
    it('show all posts', () => {
        cy.create('App\\Post', {
            title: 'My First Post'
        });
       cy.visit('/blog').contains('My First Post');
    });	

    it('create a post', () => {
    });	
});

foreach

describe('Blog', () => {
    beforeach( () => {
        cy.log('hello world');
    });
});

laravel-commands

cy.refreshdatabase() 刷新 db 指令

describe('Blog', () => {
    beforeach( () => {
        cy.refreshdatabase();
    });
});

failOnSatusCode: false 顯示錯誤

cy.visit('/blog',{
    failOnSatusCode: false
}).contains('My First Post');

cy.php() php 語法

cy.php(`App\\Post::count()`).then( count => { cy.log('post count: + count')});

抱歉本文跟環境突然換了接,因為是全文轉錄自一年前的文章...
加個 TODO,有空再來改 ^_<


最近因為工作需要做資料視覺化,開始接觸 neo4j。
查詢的語法跟 SQL 很像,sandbox 裡面有個 Movie Project Tutorial for Beginer,有興趣可以玩玩看。
https://sandbox.neo4j.com/

https://ithelp.ithome.com.tw/upload/images/20210924/20139745THPf4WMoPK.jpg

附上 Vue 範例

<script>
import neo4j from 'neo4j-driver'

export default {
    name: 'index',
    data() {
        return {
            uri: '沙盒uri',
            username: 'neo4j',
            password: '沙盒密碼',
            data: '',
            session: {}
        }
    },
    mounted() {
        const driver = neo4j.driver(this.uri, neo4j.auth.basic(this.username, this.password))
        this.session = driver.session()    
    },
    methods: {
        testQuery() {
            this.session.run('MATCH (n) RETURN n')
                .then(res => {
                    this.data = { n : res.records[0].get('n') };
                })
                .catch( e => {
                    alert(e)
                }) 
        },
    }
};
</script>   

上一篇
08. Laravel Sail x Xdebug x Coverage
下一篇
10. CI x Github Action
系列文
每天一篇文章30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言