diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..cb91d05 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +VUE_APP_UNSPLASH_BASE_URL=https://api.unsplash.com +VUE_APP_UNSPLASH_ACCESS_KEY= diff --git a/.gitignore b/.gitignore index d64a403..327a762 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ geckodriver.log # local env files .env.local .env.*.local +.env # Log files npm-debug.log* diff --git a/README.md b/README.md index ed8eb92..d666301 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,56 @@ -# responsive_image_grid +# Responsive Image Grid + +![Alt text](https://s3.crstin.com/public/responsive_image_grid_repo_preview.png) + +## Origin + +The initial commit has been generated by `vue create responsive_image_grid`. The next step has been adding `.prettierrc` and running `yarn lint` to convert the codebase. ## Project setup + +```bash +yarn +cp .env.example .env ``` -yarn install + +Then add your unsplash key after `VUE_APP_UNSPLASH_ACCESS_KEY=` to the .env file. + +## Run the test suite + +```bash +yarn test ``` ### Compiles and hot-reloads for development -``` + +```bash yarn serve ``` ### Compiles and minifies for production -``` + +```bash yarn build ``` ### Run your unit tests -``` + +```bash yarn test:unit ``` ### Run your end-to-end tests -``` + +```bash yarn test:e2e ``` ### Lints and fixes files -``` + +```bash yarn lint ``` ### Customize configuration + See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/package.json b/package.json index 14f4263..76d3144 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,12 @@ "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", + "test": "yarn test:unit && yarn test:e2e", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", + "normalize.css": "^8.0.1", "vue": "^2.6.11" }, "devDependencies": { diff --git a/public/index.html b/public/index.html index 4123528..abd1a8a 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,7 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/src/App.vue b/src/App.vue index a27a672..43fba19 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,28 +1,27 @@ diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 89a74b7..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,130 +0,0 @@ - - - - - - diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue new file mode 100644 index 0000000..1253c92 --- /dev/null +++ b/src/components/ImageGrid.vue @@ -0,0 +1,112 @@ + + + + + diff --git a/tests/e2e/specs/image_grid.js b/tests/e2e/specs/image_grid.js new file mode 100644 index 0000000..f606b18 --- /dev/null +++ b/tests/e2e/specs/image_grid.js @@ -0,0 +1,15 @@ +// For authoring Nightwatch tests, see +// https://nightwatchjs.org/guide + +module.exports = { + beforeEach: (browser) => browser.init(), + + 'Image grid is present': (browser) => { + browser + .waitForElementVisible('#app') + .assert.elementCount('.image-grid-container', 1) + .assert.elementCount('figure img', 10) + .assert.elementCount('figure figcaption', 10) + .end() + } +} diff --git a/tests/e2e/specs/test-with-pageobjects.js b/tests/e2e/specs/test-with-pageobjects.js deleted file mode 100644 index 195174d..0000000 --- a/tests/e2e/specs/test-with-pageobjects.js +++ /dev/null @@ -1,36 +0,0 @@ -//////////////////////////////////////////////////////////////// -// For authoring Nightwatch tests, see -// https://nightwatchjs.org/guide -// -// For more information on working with page objects see: -// https://nightwatchjs.org/guide/working-with-page-objects/ -//////////////////////////////////////////////////////////////// - -module.exports = { - beforeEach: (browser) => browser.init(), - - 'e2e tests using page objects': (browser) => { - const homepage = browser.page.homepage() - homepage.waitForElementVisible('@appContainer') - - const app = homepage.section.app - app.assert.elementCount('@logo', 1) - app.expect.section('@welcome').to.be.visible - app.expect - .section('@headline') - .text.to.match(/^Welcome to Your Vue\.js (.*)App$/) - - browser.end() - }, - - 'verify if string "e2e-nightwatch" is within the cli plugin links': ( - browser - ) => { - const homepage = browser.page.homepage() - const welcomeSection = homepage.section.app.section.welcome - - welcomeSection.expect - .element('@cliPluginLinks') - .text.to.contain('e2e-nightwatch') - } -} diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js deleted file mode 100644 index ddfc0c4..0000000 --- a/tests/e2e/specs/test.js +++ /dev/null @@ -1,21 +0,0 @@ -// For authoring Nightwatch tests, see -// https://nightwatchjs.org/guide - -module.exports = { - 'default e2e tests': (browser) => { - browser - .init() - .waitForElementVisible('#app') - .assert.elementPresent('.hello') - .assert.containsText('h1', 'Welcome to Your Vue.js App') - .assert.elementCount('img', 1) - .end() - }, - - 'example e2e test using a custom command': (browser) => { - browser - .openHomepage() - .assert.elementPresent('.hello') - .end() - } -} diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js deleted file mode 100644 index f84fb39..0000000 --- a/tests/unit/example.spec.js +++ /dev/null @@ -1,12 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import HelloWorld from '@/components/HelloWorld.vue' - -describe('HelloWorld.vue', () => { - it('renders props.msg when passed', () => { - const msg = 'new message' - const wrapper = shallowMount(HelloWorld, { - propsData: { msg } - }) - expect(wrapper.text()).toMatch(msg) - }) -}) diff --git a/tests/unit/image_grid.spec.js b/tests/unit/image_grid.spec.js new file mode 100644 index 0000000..b731f7b --- /dev/null +++ b/tests/unit/image_grid.spec.js @@ -0,0 +1,12 @@ +import { mount } from '@vue/test-utils' +import ImageGrid from '@/components/ImageGrid.vue' + +describe('ImageGrid.vue', () => { + it('toggles loading', () => { + const wrapper = mount(ImageGrid) + expect(wrapper.vm.loading).toBe(true) + expect(wrapper.text()).toContain('Loading...') + wrapper.setData({ loading: false }) + expect(wrapper.vm.loading).toBe(false) + }) +}) diff --git a/yarn.lock b/yarn.lock index 9c2a1db..efdde39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7392,6 +7392,11 @@ normalize-url@^3.0.0: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg== +normalize.css@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" + integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== + npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"